From e917c0d92e8d6a62f40b66ff08c6356826ff57b8 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Thu, 30 Jul 2020 16:41:00 +0100 Subject: [PATCH 1/9] Replace all chevrons with a single icon This replaces all chevrons with a single icon, affecting components like the room list, network dropdown, and rebrand modal. Rather than having files for each direction that can get out of sync, this change uses one direction and rotates in CSS for the others. Fixes https://github.com/vector-im/riot-web/issues/14663 --- res/css/views/dialogs/_RebrandDialog.scss | 7 +++--- res/css/views/directory/_NetworkDropdown.scss | 6 ++--- res/css/views/rooms/_RoomSublist.scss | 23 +++++++++---------- res/img/feather-customised/chevron-down.svg | 4 ++-- res/img/feather-customised/chevron-right.svg | 1 - res/img/feather-customised/chevron-up.svg | 1 - 6 files changed, 20 insertions(+), 22 deletions(-) delete mode 100644 res/img/feather-customised/chevron-right.svg delete mode 100644 res/img/feather-customised/chevron-up.svg diff --git a/res/css/views/dialogs/_RebrandDialog.scss b/res/css/views/dialogs/_RebrandDialog.scss index 6c916e0f1d..61af4dd10f 100644 --- a/res/css/views/dialogs/_RebrandDialog.scss +++ b/res/css/views/dialogs/_RebrandDialog.scss @@ -53,11 +53,12 @@ limitations under the License. .mx_RebrandDialog_chevron::after { content: ''; display: inline-block; - width: 24px; - height: 24px; + width: 18px; + height: 18px; mask-position: center; mask-size: contain; mask-repeat: no-repeat; background-color: $muted-fg-color; - mask-image: url('$(res)/img/feather-customised/chevron-right.svg'); + mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); + transform: rotate(-90deg); } diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index bd5c67c7ed..c35776062b 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -145,9 +145,9 @@ limitations under the License. &::after { content: ""; position: absolute; - width: 24px; - height: 24px; - right: -28px; // - (24 + 4) + width: 18px; + height: 18px; + right: -22px; // - (18 + 4) mask-repeat: no-repeat; mask-position: center; mask-size: contain; diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index b907d06d36..a32c11c15c 100644 --- a/res/css/views/rooms/_RoomSublist.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -142,17 +142,15 @@ limitations under the License. .mx_RoomSublist_collapseBtn { display: inline-block; position: relative; - width: 12px; - height: 12px; - margin-right: 8px; + width: 14px; + height: 14px; + margin-right: 6px; &::before { content: ''; - width: 12px; - height: 12px; + width: 18px; + height: 18px; position: absolute; - top: 1px; - left: 1px; mask-position: center; mask-size: contain; mask-repeat: no-repeat; @@ -161,7 +159,7 @@ limitations under the License. } &.mx_RoomSublist_collapseBtn_collapsed::before { - mask-image: url('$(res)/img/feather-customised/chevron-right.svg'); + transform: rotate(-90deg); } } } @@ -251,14 +249,15 @@ limitations under the License. .mx_RoomSublist_showNButtonChevron { position: relative; - width: 16px; - height: 16px; + width: 18px; + height: 18px; margin-left: 12px; - margin-right: 18px; + margin-right: 16px; mask-position: center; mask-size: contain; mask-repeat: no-repeat; background: $roomtile-preview-color; + left: -1px; // adjust for image position } .mx_RoomSublist_showMoreButtonChevron { @@ -266,7 +265,7 @@ limitations under the License. } .mx_RoomSublist_showLessButtonChevron { - mask-image: url('$(res)/img/feather-customised/chevron-up.svg'); + transform: rotate(180deg); } } diff --git a/res/img/feather-customised/chevron-down.svg b/res/img/feather-customised/chevron-down.svg index bcb185ede7..a091913b42 100644 --- a/res/img/feather-customised/chevron-down.svg +++ b/res/img/feather-customised/chevron-down.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/feather-customised/chevron-right.svg b/res/img/feather-customised/chevron-right.svg deleted file mode 100644 index 258de414a1..0000000000 --- a/res/img/feather-customised/chevron-right.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/img/feather-customised/chevron-up.svg b/res/img/feather-customised/chevron-up.svg deleted file mode 100644 index 4eb5ecc33e..0000000000 --- a/res/img/feather-customised/chevron-up.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From a6d5a2f339e3bda8969ae67ca8dde807ec63fbab Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Thu, 30 Jul 2020 17:40:03 +0100 Subject: [PATCH 2/9] Tweak size / position in network dropdown --- res/css/views/directory/_NetworkDropdown.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index c35776062b..b069583e0d 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -145,9 +145,10 @@ limitations under the License. &::after { content: ""; position: absolute; - width: 18px; - height: 18px; - right: -22px; // - (18 + 4) + width: 24px; + height: 24px; + right: -26.5px; // - (24 + 2.5) + top: -3px; mask-repeat: no-repeat; mask-position: center; mask-size: contain; From 72056128fea8a3b4b255b1c8e1188f1ac2361fd8 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Thu, 30 Jul 2020 17:41:26 +0100 Subject: [PATCH 3/9] Larger chevron for rebrand --- res/css/views/dialogs/_RebrandDialog.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/dialogs/_RebrandDialog.scss b/res/css/views/dialogs/_RebrandDialog.scss index 61af4dd10f..534584ae2a 100644 --- a/res/css/views/dialogs/_RebrandDialog.scss +++ b/res/css/views/dialogs/_RebrandDialog.scss @@ -53,8 +53,8 @@ limitations under the License. .mx_RebrandDialog_chevron::after { content: ''; display: inline-block; - width: 18px; - height: 18px; + width: 30px; + height: 30px; mask-position: center; mask-size: contain; mask-repeat: no-repeat; From 8441763a71ed3239ff1b337b93386283b062aa84 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 31 Jul 2020 17:48:30 +0100 Subject: [PATCH 4/9] Fix show less icon --- res/css/views/rooms/_RoomSublist.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index a32c11c15c..a328d6e025 100644 --- a/res/css/views/rooms/_RoomSublist.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -260,7 +260,8 @@ limitations under the License. left: -1px; // adjust for image position } - .mx_RoomSublist_showMoreButtonChevron { + .mx_RoomSublist_showMoreButtonChevron, + .mx_RoomSublist_showLessButtonChevron { mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); } From 31180d3df919c04de63fef46befc6c46d2772dfa Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 31 Jul 2020 17:52:19 +0100 Subject: [PATCH 5/9] Adjust room list colours to match designs --- res/css/views/rooms/_RoomSublist.scss | 4 ++-- res/themes/dark/css/_dark.scss | 8 ++++++-- res/themes/light/css/_light.scss | 17 ++++++++++------- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index a328d6e025..d3c9b79c69 100644 --- a/res/css/views/rooms/_RoomSublist.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -154,7 +154,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background-color: $primary-fg-color; + background-color: $roomlist-header-color; mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); } @@ -256,7 +256,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $roomtile-preview-color; + background: $roomlist-header-color; left: -1px; // adjust for image position } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 15155ba854..e39bb29044 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -18,6 +18,10 @@ $primary-fg-color: $text-primary-color; $primary-bg-color: $bg-color; $muted-fg-color: $header-panel-text-primary-color; +// additional text colors +$secondary-fg-color: #A9B2BC; +$tertiary-fg-color: #8E99A4; + // used for dialog box text $light-fg-color: $header-panel-text-secondary-color; @@ -112,10 +116,10 @@ $theme-button-bg-color: #e3e8f0; $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist-bg-color: rgba(33, 38, 44, 0.90); -$roomlist-header-color: #8E99A4; +$roomlist-header-color: $tertiary-fg-color; $roomsublist-divider-color: $primary-fg-color; -$roomtile-preview-color: #A9B2BC; +$roomtile-preview-color: $secondary-fg-color; $roomtile-default-badge-bg-color: #61708b; $roomtile-selected-bg-color: rgba(141, 151, 165, 0.2); diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index e317683963..e67bcdf89a 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -19,8 +19,8 @@ $accent-bg-color: rgba(3, 179, 129, 0.16); $notice-primary-color: #ff4b55; $notice-primary-bg-color: rgba(255, 75, 85, 0.16); $primary-fg-color: #2e2f32; -$roomlist-header-color: $primary-fg-color; -$notice-secondary-color: $roomlist-header-color; +$secondary-fg-color: #737D8C; +$tertiary-fg-color: #8D99A5; $header-panel-bg-color: #f3f8fd; // typical text (dark-on-white in light skin) @@ -52,10 +52,6 @@ $info-bg-color: #2A9EDF; $mention-user-pill-bg-color: $warning-color; $other-user-pill-bg-color: rgba(0, 0, 0, 0.1); -// pinned events indicator -$pinned-unread-color: $notice-primary-color; -$pinned-color: $notice-secondary-color; - // informational plinth $info-plinth-bg-color: #f7f7f7; $info-plinth-fg-color: #888; @@ -178,9 +174,10 @@ $theme-button-bg-color: #e3e8f0; $roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons $roomlist-bg-color: rgba(245, 245, 245, 0.90); +$roomlist-header-color: $tertiary-fg-color; $roomsublist-divider-color: $primary-fg-color; -$roomtile-preview-color: #737D8C; +$roomtile-preview-color: $secondary-fg-color; $roomtile-default-badge-bg-color: #61708b; $roomtile-selected-bg-color: #FFF; @@ -199,8 +196,14 @@ $username-variant6-color: #2dc2c5; $username-variant7-color: #5c56f5; $username-variant8-color: #74d12c; +$notice-secondary-color: $roomlist-header-color; + $panel-divider-color: transparent; +// pinned events indicator +$pinned-unread-color: $notice-primary-color; +$pinned-color: $notice-secondary-color; + // ******************** $widget-menu-bar-bg-color: $secondary-accent-color; From 805b8f5299de420b15d080c0bf41bb07b98dc20a Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 31 Jul 2020 18:00:35 +0100 Subject: [PATCH 6/9] Add comment on network chevron placement --- res/css/views/directory/_NetworkDropdown.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index b069583e0d..ceef111a5f 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -147,7 +147,7 @@ limitations under the License. position: absolute; width: 24px; height: 24px; - right: -26.5px; // - (24 + 2.5) + right: -26.5px; // - (width: 24 + spacing to align with X above: 2.5) top: -3px; mask-repeat: no-repeat; mask-position: center; From 1a33104877d2c866a70780dffa0da74b29dac573 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 31 Jul 2020 18:15:51 +0100 Subject: [PATCH 7/9] Use thinner chevron for network, adjust placement --- res/css/views/directory/_NetworkDropdown.scss | 8 ++++---- res/img/feather-customised/chevron-down-thin.svg | 3 +++ 2 files changed, 7 insertions(+), 4 deletions(-) create mode 100644 res/img/feather-customised/chevron-down-thin.svg diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index ceef111a5f..ae0927386a 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -145,14 +145,14 @@ limitations under the License. &::after { content: ""; position: absolute; - width: 24px; - height: 24px; - right: -26.5px; // - (width: 24 + spacing to align with X above: 2.5) + width: 26px; + height: 26px; + right: -27.5px; // - (width: 26 + spacing to align with X above: 1.5) top: -3px; mask-repeat: no-repeat; mask-position: center; mask-size: contain; - mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); + mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg'); background-color: $primary-fg-color; } diff --git a/res/img/feather-customised/chevron-down-thin.svg b/res/img/feather-customised/chevron-down-thin.svg new file mode 100644 index 0000000000..109c83def6 --- /dev/null +++ b/res/img/feather-customised/chevron-down-thin.svg @@ -0,0 +1,3 @@ + + + From 7aaa4997c236c3b94ab577a54be7b482e2ee9a1b Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 31 Jul 2020 18:43:11 +0100 Subject: [PATCH 8/9] Convert jump to bottom button --- res/css/views/rooms/_JumpToBottomButton.scss | 5 ++- res/img/icon-jump-to-bottom.svg | 32 -------------------- 2 files changed, 2 insertions(+), 35 deletions(-) delete mode 100644 res/img/icon-jump-to-bottom.svg diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss index 4659442d9b..6cb3b6bce9 100644 --- a/res/css/views/rooms/_JumpToBottomButton.scss +++ b/res/css/views/rooms/_JumpToBottomButton.scss @@ -67,9 +67,8 @@ limitations under the License. bottom: 0; left: 0; right: 0; - mask: url('$(res)/img/icon-jump-to-bottom.svg'); + mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg'); mask-repeat: no-repeat; - mask-position: center; - mask-size: 50%; + mask-size: contain; background: $muted-fg-color; } diff --git a/res/img/icon-jump-to-bottom.svg b/res/img/icon-jump-to-bottom.svg deleted file mode 100644 index c4210b4ebe..0000000000 --- a/res/img/icon-jump-to-bottom.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - From 71af4580e8325232d4a3142b832acc12f5a915a1 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 31 Jul 2020 20:39:17 +0100 Subject: [PATCH 9/9] Convert jump to unread button --- res/css/views/rooms/_TopUnreadMessagesBar.scss | 6 +++--- res/img/icon-jump-to-first-unread.svg | 16 ---------------- 2 files changed, 3 insertions(+), 19 deletions(-) delete mode 100644 res/img/icon-jump-to-first-unread.svg diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss index d9970ef037..8841b042a0 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.scss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss @@ -51,11 +51,11 @@ limitations under the License. position: absolute; width: 36px; height: 36px; - mask-image: url('$(res)/img/icon-jump-to-first-unread.svg'); + mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg'); mask-repeat: no-repeat; - mask-position: center; - mask-size: 50%; + mask-size: contain; background: $muted-fg-color; + transform: rotate(180deg); } .mx_TopUnreadMessagesBar_markAsRead { diff --git a/res/img/icon-jump-to-first-unread.svg b/res/img/icon-jump-to-first-unread.svg deleted file mode 100644 index 652ccec20d..0000000000 --- a/res/img/icon-jump-to-first-unread.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - -