From 3abdcbf806a4adba3694fe0417492bb79ddfa71b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 3 Jan 2016 22:30:14 +0000 Subject: [PATCH 1/8] switch SVGs from imgs to objects, fixing CSS to make onClicks work --- src/components/structures/RightPanel.js | 4 ++-- .../vector/css/matrix-react-sdk/structures/RoomView.css | 4 ++++ .../css/matrix-react-sdk/views/rooms/MessageComposer.css | 9 ++++++++- .../css/matrix-react-sdk/views/rooms/RoomHeader.css | 9 +++++++-- .../vector/css/vector-web/structures/RightPanel.css | 4 ++++ 5 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index f4f0a8f332..f700746f0d 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -127,12 +127,12 @@ module.exports = React.createClass({ buttonGroup =
- Members + { membersBadge } { membersHighlight }
- Files + { filesHighlight } ; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 3ec5bbdcd0..a4fde97a43 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -199,6 +199,10 @@ limitations under the License. cursor: pointer; } +.mx_RoomView_voipButton object { + pointer-events: none; +} + .mx_RoomView_unreadMessagesBar { color: #ff0064; cursor: pointer; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index 4d5668518d..133e3b7bd7 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -82,6 +82,13 @@ limitations under the License. cursor: pointer; } +.mx_MessageComposer_upload object, +.mx_MessageComposer_hangup object, +.mx_MessageComposer_voicecall object, +.mx_MessageComposer_videocall object { + pointer-events: none; +} + .mx_MessageComposer_videocall { padding-right: 10px; padding-top: 4px; @@ -92,6 +99,6 @@ limitations under the License. padding-top: 4px; } -.mx_MessageComposer_upload img { +.mx_MessageComposer_upload object { margin-top: 5px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index 0443684128..23e309157b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css @@ -138,6 +138,10 @@ limitations under the License. left: 4px; } +.mx_RoomHeader_settingsButton object { + pointer-events: none; +} + .mx_RoomHeader_leftRow:hover .mx_RoomHeader_name { color: #76cfa6; } @@ -203,10 +207,11 @@ limitations under the License. vertical-align: top; padding-left: 8px; padding-right: 8px; + cursor: pointer; } -.mx_RoomHeader_button img { - cursor: pointer; +.mx_RoomHeader_button object { + pointer-events: none; } .mx_RoomHeader_voipButton { diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 645a626314..eecdd0658c 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -55,6 +55,10 @@ limitations under the License. position: relative; } +.mx_RightPanel_headerButton object { + pointer-events: none; +} + .mx_RightPanel_headerButton_highlight { position: absolute; bottom: -2px; From 17b8982c7529892fdb2545a12e01bc5324a16543 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 3 Jan 2016 22:35:07 +0000 Subject: [PATCH 2/8] move title attributes to the div --- src/components/structures/RightPanel.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index f700746f0d..360fd7f0e9 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -126,13 +126,13 @@ module.exports = React.createClass({ if (this.props.roomId) { buttonGroup =
-
- +
+ { membersBadge } { membersHighlight } -
- +
+ { filesHighlight } ; From bbf08d99cc30e060339296b6298f297ef5696376 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 5 Jan 2016 00:47:26 +0000 Subject: [PATCH 3/8] tinterize more svg --- src/components/structures/RightPanel.js | 4 ++-- src/components/structures/RoomSubList.js | 7 +++---- .../css/vector-web/structures/LeftPanel.css | 2 +- src/skins/vector/img/tab.svg | 16 ---------------- src/skins/vector/img/upload-original.svg | 19 ------------------- 5 files changed, 6 insertions(+), 42 deletions(-) delete mode 100644 src/skins/vector/img/tab.svg delete mode 100644 src/skins/vector/img/upload-original.svg diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 360fd7f0e9..500d6495f7 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -127,12 +127,12 @@ module.exports = React.createClass({ buttonGroup =
- + { membersBadge } { membersHighlight }
- + { filesHighlight } ; diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index f190c584d6..2ed353d226 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -257,8 +257,7 @@ var RoomSubList = React.createClass({ unread={ self.props.activityMap[room.roomId] === 1 } highlight={ self.props.activityMap[room.roomId] === 2 } isInvite={ self.props.label === 'Invites' } - incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null } - /> + incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null } /> ); }); }, @@ -267,8 +266,8 @@ var RoomSubList = React.createClass({ return (

{ this.props.collapsed ? '' : this.props.label } -

); diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 7451d1677f..4f961754f8 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -61,7 +61,7 @@ limitations under the License. -webkit-flex: 0 0 140px; flex: 0 0 140px; - background-color: rgba(118,207,166,0.19); + background-color: rgba(118,207,166,0.2); } .mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile { diff --git a/src/skins/vector/img/tab.svg b/src/skins/vector/img/tab.svg deleted file mode 100644 index eae92dcf32..0000000000 --- a/src/skins/vector/img/tab.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - icon_eol - Created with bin/sketchtool. - - - - - - - - - - - \ No newline at end of file diff --git a/src/skins/vector/img/upload-original.svg b/src/skins/vector/img/upload-original.svg deleted file mode 100644 index 962fc49d77..0000000000 --- a/src/skins/vector/img/upload-original.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - icons_upload - Created with bin/sketchtool. - - - - - - - - - - - - - - \ No newline at end of file From b996022db20096e044a91c353506527c387e3409 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 5 Jan 2016 03:34:25 +0000 Subject: [PATCH 4/8] fix up dynamically loaded svgs, and fix bottomleftmenu --- src/components/structures/BottomLeftMenu.js | 6 ++--- src/components/structures/RoomSubList.js | 5 ++++ .../views/rooms/BottomLeftMenuTile.js | 2 +- .../matrix-react-sdk/structures/RoomView.css | 4 +-- .../views/messages/MImageBody.css | 8 ++++-- .../css/vector-web/structures/RoomSubList.css | 1 + src/skins/vector/img/create-big.svg | 26 +++++++++++++++++++ src/skins/vector/img/directory-big.svg | 22 ++++++++++++++++ src/skins/vector/img/download.svg | 18 +++++++++++++ src/skins/vector/img/eol.svg | 2 +- src/skins/vector/img/settings-big.svg | 18 +++++++++++++ 11 files changed, 103 insertions(+), 9 deletions(-) create mode 100644 src/skins/vector/img/create-big.svg create mode 100644 src/skins/vector/img/directory-big.svg create mode 100644 src/skins/vector/img/download.svg create mode 100644 src/skins/vector/img/settings-big.svg diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index f942efd56b..d38fd4cb57 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -50,9 +50,9 @@ module.exports = React.createClass({ return (
- - - + + +
); diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 2ed353d226..52b4d4520e 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -262,11 +262,16 @@ var RoomSubList = React.createClass({ }); }, + onSvgLoad: function(event) { + dis.dispatch({ action: "svg_onload", svg: event.target }); + }, + _getHeaderJsx: function() { return (

{ this.props.collapsed ? '' : this.props.label } diff --git a/src/components/views/rooms/BottomLeftMenuTile.js b/src/components/views/rooms/BottomLeftMenuTile.js index 2535490fea..bd8ac2b922 100644 --- a/src/components/views/rooms/BottomLeftMenuTile.js +++ b/src/components/views/rooms/BottomLeftMenuTile.js @@ -48,7 +48,7 @@ module.exports = React.createClass({ return (
- +
{ label }
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index a4fde97a43..7de342ef0e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -189,7 +189,7 @@ limitations under the License. .mx_RoomView_voipChevron { position: absolute; - bottom: -10px; + bottom: -11px; right: 11px; } @@ -300,7 +300,7 @@ limitations under the License. color: #76CFA6; } -.mx_RoomView_tabCompleteEol img { +.mx_RoomView_tabCompleteEol object { vertical-align: middle; margin-right: 8px; margin-top: -2px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css index 0f8c564baf..8e1d1cc0b1 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css +++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css @@ -32,6 +32,10 @@ limitations under the License. text-decoration: none; } -.mx_MImageBody_download img { - padding-right: 8px; +.mx_MImageBody_download object { + padding-right: 4px; + margin-left: -16px; + margin-top: -4px; + vertical-align: middle; + pointer-events: none; } diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 46bcc64a1a..adeeb0e38e 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -33,6 +33,7 @@ limitations under the License. .mx_RoomSubList_chevron { padding-left: 5px; + pointer-events: none; } .collapsed .mx_RoomSubList_chevron { diff --git a/src/skins/vector/img/create-big.svg b/src/skins/vector/img/create-big.svg new file mode 100644 index 0000000000..2450542b63 --- /dev/null +++ b/src/skins/vector/img/create-big.svg @@ -0,0 +1,26 @@ + + + + icons_create_room + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/directory-big.svg b/src/skins/vector/img/directory-big.svg new file mode 100644 index 0000000000..5631a2ae3e --- /dev/null +++ b/src/skins/vector/img/directory-big.svg @@ -0,0 +1,22 @@ + + + + icons_directory + Created with sketchtool. + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/download.svg b/src/skins/vector/img/download.svg new file mode 100644 index 0000000000..d0ea090d8a --- /dev/null +++ b/src/skins/vector/img/download.svg @@ -0,0 +1,18 @@ + + + + Fill 75 + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/eol.svg b/src/skins/vector/img/eol.svg index a331b3e49c..02d1946cf4 100644 --- a/src/skins/vector/img/eol.svg +++ b/src/skins/vector/img/eol.svg @@ -9,7 +9,7 @@ - + diff --git a/src/skins/vector/img/settings-big.svg b/src/skins/vector/img/settings-big.svg new file mode 100644 index 0000000000..c9587d58c2 --- /dev/null +++ b/src/skins/vector/img/settings-big.svg @@ -0,0 +1,18 @@ + + + + icons_settings + Created with sketchtool. + + + + + + + + + + + + + \ No newline at end of file From 1df4f2d556e02bcd209bfed5cbb5971195773bb3 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 5 Jan 2016 03:38:53 +0000 Subject: [PATCH 5/8] fix hyperlink position for image downloads --- .../vector/css/matrix-react-sdk/views/messages/MImageBody.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css index 8e1d1cc0b1..b90b54d308 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css +++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css @@ -25,6 +25,7 @@ limitations under the License. .mx_MImageBody_download { color: #76cfa6; cursor: pointer; + margin-left: -16px; } .mx_MImageBody_download a { @@ -34,7 +35,6 @@ limitations under the License. .mx_MImageBody_download object { padding-right: 4px; - margin-left: -16px; margin-top: -4px; vertical-align: middle; pointer-events: none; From a1bdfaa8a28e47041e7adcacf06b84b3ca881cad Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 5 Jan 2016 18:49:21 +0000 Subject: [PATCH 6/8] vertical-align room messages to the bottom of the page --- .../css/matrix-react-sdk/structures/RoomView.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 7de342ef0e..af346cb6d2 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -113,6 +113,20 @@ limitations under the License. .mx_RoomView_messageListWrapper { max-width: 960px; margin: auto; + + min-height: 100%; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + flex-direction: column; + -webkit-flex-direction: column; + + justify-content: flex-end; + -webkit-justify-content: flex-end; } .mx_RoomView_MessageList { From cb29a04674173133aec69c3ea6dd387f40f2d8cb Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 6 Jan 2016 02:11:34 +0000 Subject: [PATCH 7/8] use factored out TintableSvg component for dynamic SVGs --- src/components/structures/RightPanel.js | 5 +++-- src/components/structures/RoomSubList.js | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 500d6495f7..41dcde44fc 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -100,6 +100,7 @@ module.exports = React.createClass({ render: function() { var MemberList = sdk.getComponent('rooms.MemberList'); + var TintableSvg = sdk.getComponent("elements.TintableSvg"); var buttonGroup; var panel; @@ -127,12 +128,12 @@ module.exports = React.createClass({ buttonGroup =
- + { membersBadge } { membersHighlight }
- + { filesHighlight } ; diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 52b4d4520e..c036ccd674 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -267,12 +267,12 @@ var RoomSubList = React.createClass({ }, _getHeaderJsx: function() { + var TintableSvg = sdk.getComponent("elements.TintableSvg"); return (

{ this.props.collapsed ? '' : this.props.label } - ); From eacadbff40fbf739c470fe115e7e090eb25fb3d1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 6 Jan 2016 02:29:20 +0000 Subject: [PATCH 8/8] remove stale onSvgLoad --- src/components/structures/RoomSubList.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index c036ccd674..ca60a59ebd 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -262,10 +262,6 @@ var RoomSubList = React.createClass({ }); }, - onSvgLoad: function(event) { - dis.dispatch({ action: "svg_onload", svg: event.target }); - }, - _getHeaderJsx: function() { var TintableSvg = sdk.getComponent("elements.TintableSvg"); return (