From ef4f2f10d94e175873fa951c7a5ef78906620b83 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 13 Jul 2016 13:56:59 +0100 Subject: [PATCH 01/10] Updated that RightPanel members icon, highlight and numbers --- src/components/structures/RightPanel.js | 2 +- .../css/vector-web/structures/RightPanel.css | 25 ++++++----------- src/skins/vector/img/icons-people.svg | 26 ++++++++++++++++++ src/skins/vector/img/members.png | Bin 729 -> 0 bytes src/skins/vector/img/members.svg | 14 ---------- 5 files changed, 36 insertions(+), 31 deletions(-) create mode 100644 src/skins/vector/img/icons-people.svg delete mode 100644 src/skins/vector/img/members.png delete mode 100644 src/skins/vector/img/members.svg diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 431bdba5..ca9376e1 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -136,8 +136,8 @@ module.exports = React.createClass({ buttonGroup =
- { membersBadge } + { membersHighlight }
diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 7257d8b4..f6b300b2 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -43,7 +43,7 @@ limitations under the License. /** Fixme - factor this out with the main header **/ .mx_RightPanel_headerButtonGroup { - margin-top: 25px; + margin-top: 10px; float: left; background-color: #fff; margin-left: -4px; @@ -55,34 +55,27 @@ limitations under the License. vertical-align: middle; padding-left: 15px; padding-right: 15px; + text-align: center; position: relative; } .mx_RightPanel_headerButton object { pointer-events: none; + padding-bottom: 2px; } .mx_RightPanel_headerButton_highlight { - position: absolute; - bottom: -2px; - left: 10px; width: 25px; - height: 4px; - background-color: #76cfa6; + height: 5px; + border-radius: 5px; + background-color: rgba(118, 207, 166, 0.2); } .mx_RightPanel_headerButton_badge { - position: absolute; - top: 4px; - left: 28px; - font-size: 12px; - background-color: #76cfa6; - color: #fff; + font-size: 11px; + color: #76cfa6; font-weight: bold; - border-radius: 20px; - padding-left: 4px; - padding-right: 4px; - padding-top: 0px; + padding-bottom: 2px; } .mx_RightPanel .mx_MemberList, diff --git a/src/skins/vector/img/icons-people.svg b/src/skins/vector/img/icons-people.svg new file mode 100644 index 00000000..d9af3c38 --- /dev/null +++ b/src/skins/vector/img/icons-people.svg @@ -0,0 +1,26 @@ + + + + 00B600B3-7C80-417D-9C3F-89072AE3B227 + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + diff --git a/src/skins/vector/img/members.png b/src/skins/vector/img/members.png deleted file mode 100644 index b5e5875768c3969bba84f38429b68480181e612c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 729 zcmV;~0w(>5P)Px%lSxEDR5%fpR9{F_VH7{--n%UkGJ+t2B1NCpgPJq2q96&QEPAlAnFT#W59J>= zi6GcxxSaG9iEOo;QDQ+tJtXZVtxel}$cLz;;Y;))VawUwy{B`R_xgDiv;*V&-QVwb ze(-(Y*@s}O!|{MpTToF3H%x9tR z-a+pi>*$+^x+Pf&5l|vn?Y$-T*fDmcVx#_vf&F%2=^Op&Sj3l#owMtbN%+zO%{o#l z=xG@5NR$9sIVy^FY@7v3RHx;>Pl=ipl3)B0=KF4L ze;3&;8bs_Vski}zPkQS*7ew9)F$9GCRp%zxGyjK24Wg-IJXF+`9_(eV=G&L&K~XdC zieWQ|YpL)y7r1&@Fb;2)e_PmA%+CA4s`LGZ$6l*KL_^zTbeAiq&UKH@W+4zT#(&LP z5#moqwxi; z_R=&T=8pDwgs-1ZsU!J-=K(+U)m%~6YZi6B@0Uu6voMsBLs1$C^jD%`BN#P(gva27 z;pOe%5p_|0vyn#86Rf$A<~OL);P^=#90N2SV;=4QErJC#_q*{g@pIUd=K|NK00000 LNkvXXu0mjf?c-bK diff --git a/src/skins/vector/img/members.svg b/src/skins/vector/img/members.svg deleted file mode 100644 index 0f115966..00000000 --- a/src/skins/vector/img/members.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - icons_people - Created with bin/sketchtool. - - - - - - - - - \ No newline at end of file From 959dcd0c49a772d2a3921de55c3279a39957e0a5 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 13 Jul 2016 14:10:44 +0100 Subject: [PATCH 02/10] Updated BottomLeftMenu buttons to the new ones --- src/components/structures/BottomLeftMenu.js | 6 ++-- src/skins/vector/img/icons-create-room.svg | 24 +++++++--------- src/skins/vector/img/icons-directory.svg | 32 ++++++++++----------- src/skins/vector/img/icons-settings.svg | 20 ++++++------- 4 files changed, 39 insertions(+), 43 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index ae49a347..d36966d2 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -52,13 +52,13 @@ module.exports = React.createClass({
- +
- +
- +
diff --git a/src/skins/vector/img/icons-create-room.svg b/src/skins/vector/img/icons-create-room.svg index 6ed94b4b..252bd2df 100644 --- a/src/skins/vector/img/icons-create-room.svg +++ b/src/skins/vector/img/icons-create-room.svg @@ -1,20 +1,18 @@ - - - icons_create_room + + + 0F9BCC43-B3A7-4C9F-8E34-1F38194362C2 Created with sketchtool. - - - - - - - - - + + + + + + + - \ No newline at end of file + diff --git a/src/skins/vector/img/icons-directory.svg b/src/skins/vector/img/icons-directory.svg index 00869b9b..1f1cc29a 100644 --- a/src/skins/vector/img/icons-directory.svg +++ b/src/skins/vector/img/icons-directory.svg @@ -1,21 +1,21 @@ - - - icons_directory + + + E34C64ED-EBD7-49B6-BDD9-CB729162705A Created with sketchtool. - - - - - - - - - - - - + + + + + + + + + + + + - \ No newline at end of file + diff --git a/src/skins/vector/img/icons-settings.svg b/src/skins/vector/img/icons-settings.svg index 60969530..3ca2b655 100644 --- a/src/skins/vector/img/icons-settings.svg +++ b/src/skins/vector/img/icons-settings.svg @@ -1,17 +1,15 @@ - - - icons_settings + + + 4D42A2A7-7430-4D4F-A0A2-E19278CF66E3 Created with sketchtool. - - - - - - - + + + + + - \ No newline at end of file + From 1fbc249de540bf216ab2bc0be6b8c1884181d6e5 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 13 Jul 2016 14:23:46 +0100 Subject: [PATCH 03/10] Updated Filter room icon --- src/components/structures/SearchBox.js | 2 +- src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 5e5a19e6..7fc51000 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -94,7 +94,7 @@ module.exports = React.createClass({ , Date: Wed, 13 Jul 2016 14:34:20 +0100 Subject: [PATCH 04/10] Tweak to the close button css to keep the close button inline with the search box --- src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index 555a8f57..96f192c4 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -34,6 +34,7 @@ limitations under the License. .mx_SearchBox_closeButton { cursor: pointer; + margin-top: -5px; } .mx_SearchBox_search { From 0a4af647c8593c3f5b5865db1ec24de046bc892d Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 13 Jul 2016 17:46:07 +0100 Subject: [PATCH 05/10] Header and footer buttons updated to new versions --- .../views/rooms/RoomHeader.css | 2 +- src/skins/vector/img/icons-search-copy.svg | 22 +++++++++++++++ src/skins/vector/img/icons-settings-room.svg | 15 ++++++++++ src/skins/vector/img/icons-upload.svg | 28 +++++++++++++++++++ 4 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/skins/vector/img/icons-search-copy.svg create mode 100644 src/skins/vector/img/icons-settings-room.svg create mode 100644 src/skins/vector/img/icons-upload.svg 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 c0e919b8..2c132640 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 @@ -164,7 +164,7 @@ limitations under the License. .mx_RoomHeader_settingsButton { display: inline-block; position: relative; - bottom: 10px; + bottom: -1px; left: 4px; } diff --git a/src/skins/vector/img/icons-search-copy.svg b/src/skins/vector/img/icons-search-copy.svg new file mode 100644 index 00000000..54b6f8e5 --- /dev/null +++ b/src/skins/vector/img/icons-search-copy.svg @@ -0,0 +1,22 @@ + + + + 1C068C28-66A7-48CD-BAA3-6E96EAC39CEF + Created with sketchtool. + + + + + + + + + + + + + + + + + diff --git a/src/skins/vector/img/icons-settings-room.svg b/src/skins/vector/img/icons-settings-room.svg new file mode 100644 index 00000000..117d134c --- /dev/null +++ b/src/skins/vector/img/icons-settings-room.svg @@ -0,0 +1,15 @@ + + + + 69011392-CE9D-4404-A85C-A8548C5D850B + Created with sketchtool. + + + + + + + + + + diff --git a/src/skins/vector/img/icons-upload.svg b/src/skins/vector/img/icons-upload.svg new file mode 100644 index 00000000..d0039349 --- /dev/null +++ b/src/skins/vector/img/icons-upload.svg @@ -0,0 +1,28 @@ + + + + 2082AA27-EC81-4C61-8CD9-75C54E9D8FE2 + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + From 1f43f904d58b3c1f113a2c311f7eaed989ef5819 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 14 Jul 2016 11:33:07 +0100 Subject: [PATCH 06/10] Search icon updated in header, and all icons spacing and positioning teaked --- .../views/rooms/RoomHeader.css | 15 ++++++------- src/skins/vector/img/icons-search.svg | 21 +++++++++++++++++++ 2 files changed, 27 insertions(+), 9 deletions(-) create mode 100644 src/skins/vector/img/icons-search.svg 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 2c132640..5bd5d186 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 @@ -164,8 +164,7 @@ limitations under the License. .mx_RoomHeader_settingsButton { display: inline-block; position: relative; - bottom: -1px; - left: 4px; + left: 8px; } .mx_RoomHeader_settingsButton object { @@ -183,10 +182,6 @@ limitations under the License. color: #76cfa6; } -.mx_RoomHeader_leaveButton { - margin-top: -1px; -} - .mx_RoomHeader_placeholder { color: #a2a2a2 ! important; } @@ -244,9 +239,11 @@ limitations under the License. .mx_RoomHeader_button { display: table-cell; - vertical-align: top; - padding-left: 8px; - padding-right: 8px; + vertical-align: middle; + /* padding-left: 8px; */ + /* padding-right: 8px; */ + width: 35px; + text-align: center; cursor: pointer; } diff --git a/src/skins/vector/img/icons-search.svg b/src/skins/vector/img/icons-search.svg new file mode 100644 index 00000000..2612bc05 --- /dev/null +++ b/src/skins/vector/img/icons-search.svg @@ -0,0 +1,21 @@ + + + + C47A699C-B829-4BF8-AA39-721EFDB3AA24 + Created with sketchtool. + + + + + + + + + + + + + + + + From 09e861637f4115b23fd37b38dd930e3a0ba2f9b0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 14 Jul 2016 12:04:31 +0100 Subject: [PATCH 07/10] Simplification of the css --- .../matrix-react-sdk/views/rooms/RoomHeader.css | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) 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 5bd5d186..82456877 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 @@ -103,7 +103,8 @@ limitations under the License. .mx_RoomHeader_rightRow { margin-top: 4px; background-color: #fff; - + display: flex; + align-items: center; -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; @@ -161,12 +162,6 @@ limitations under the License. opacity: 0.6; } -.mx_RoomHeader_settingsButton { - display: inline-block; - position: relative; - left: 8px; -} - .mx_RoomHeader_settingsButton object { pointer-events: none; } @@ -238,12 +233,7 @@ limitations under the License. } .mx_RoomHeader_button { - display: table-cell; - vertical-align: middle; - /* padding-left: 8px; */ - /* padding-right: 8px; */ - width: 35px; - text-align: center; + margin-left: 8px; cursor: pointer; } From b87b35672239fbf59c844ef7358b5929f42d3d18 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 19 Jul 2016 11:43:15 +0100 Subject: [PATCH 08/10] Added fixed SCG assets --- src/skins/vector/img/icons-people.svg | 33 +++++--------------- src/skins/vector/img/icons-search-copy.svg | 28 +++++------------ src/skins/vector/img/icons-search.svg | 28 +++++------------ src/skins/vector/img/icons-upload.svg | 36 ++++++---------------- 4 files changed, 34 insertions(+), 91 deletions(-) diff --git a/src/skins/vector/img/icons-people.svg b/src/skins/vector/img/icons-people.svg index d9af3c38..4a8214ca 100644 --- a/src/skins/vector/img/icons-people.svg +++ b/src/skins/vector/img/icons-people.svg @@ -1,26 +1,9 @@ - - - - 00B600B3-7C80-417D-9C3F-89072AE3B227 - Created with sketchtool. - - - - - - - - - - - - - - - - - - - - + + + + + + + + diff --git a/src/skins/vector/img/icons-search-copy.svg b/src/skins/vector/img/icons-search-copy.svg index 54b6f8e5..38280d23 100644 --- a/src/skins/vector/img/icons-search-copy.svg +++ b/src/skins/vector/img/icons-search-copy.svg @@ -1,22 +1,10 @@ - - - - 1C068C28-66A7-48CD-BAA3-6E96EAC39CEF - Created with sketchtool. - - - - - - - - - - - - - - - + + + + + + + + diff --git a/src/skins/vector/img/icons-search.svg b/src/skins/vector/img/icons-search.svg index 2612bc05..0e680d31 100644 --- a/src/skins/vector/img/icons-search.svg +++ b/src/skins/vector/img/icons-search.svg @@ -1,21 +1,9 @@ - - - - C47A699C-B829-4BF8-AA39-721EFDB3AA24 - Created with sketchtool. - - - - - - - - - - - - - - - + + + + + + + + diff --git a/src/skins/vector/img/icons-upload.svg b/src/skins/vector/img/icons-upload.svg index d0039349..bbbdbeb9 100644 --- a/src/skins/vector/img/icons-upload.svg +++ b/src/skins/vector/img/icons-upload.svg @@ -1,28 +1,12 @@ - - - - 2082AA27-EC81-4C61-8CD9-75C54E9D8FE2 - Created with sketchtool. - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + From e9db975d7de0a2f6ea39b64f3e65d37800c63aa8 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 10:25:42 +0100 Subject: [PATCH 09/10] Redone assets, with lighter weight to match design --- src/skins/vector/img/icons-people.svg | 4 ++-- src/skins/vector/img/icons-search-copy.svg | 4 ++-- src/skins/vector/img/icons-search.svg | 2 +- src/skins/vector/img/icons-upload.svg | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/skins/vector/img/icons-people.svg b/src/skins/vector/img/icons-people.svg index 4a8214ca..d6867a3f 100644 --- a/src/skins/vector/img/icons-people.svg +++ b/src/skins/vector/img/icons-people.svg @@ -3,7 +3,7 @@ - - + + diff --git a/src/skins/vector/img/icons-search-copy.svg b/src/skins/vector/img/icons-search-copy.svg index 38280d23..b026718b 100644 --- a/src/skins/vector/img/icons-search-copy.svg +++ b/src/skins/vector/img/icons-search-copy.svg @@ -3,8 +3,8 @@ - - + + diff --git a/src/skins/vector/img/icons-search.svg b/src/skins/vector/img/icons-search.svg index 0e680d31..4f5002ab 100644 --- a/src/skins/vector/img/icons-search.svg +++ b/src/skins/vector/img/icons-search.svg @@ -3,7 +3,7 @@ - + diff --git a/src/skins/vector/img/icons-upload.svg b/src/skins/vector/img/icons-upload.svg index bbbdbeb9..9074fcf9 100644 --- a/src/skins/vector/img/icons-upload.svg +++ b/src/skins/vector/img/icons-upload.svg @@ -4,8 +4,8 @@ - - + + From 497ebce88ad62ec5cbb8e5e2c47711e4817f196f Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 25 Jul 2016 13:16:51 +0100 Subject: [PATCH 10/10] Corrected vertical alignment of membership button --- src/skins/vector/css/vector-web/structures/RightPanel.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index f6b300b2..9567869e 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -43,7 +43,7 @@ limitations under the License. /** Fixme - factor this out with the main header **/ .mx_RightPanel_headerButtonGroup { - margin-top: 10px; + margin-top: 6px; float: left; background-color: #fff; margin-left: -4px; @@ -61,7 +61,7 @@ limitations under the License. .mx_RightPanel_headerButton object { pointer-events: none; - padding-bottom: 2px; + padding-bottom: 3px; } .mx_RightPanel_headerButton_highlight {