OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #5067 from matrix-org/jryans/adjust-chevrons 

Replace all chevrons with a single icon
pull/21833/head
J. Ryan Stinnett 2020-08-03 13:34:37 +01:00 committed by GitHub
parent 53686e8805 71af4580e8
commit 533b5d80d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 50 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
res/css/views/dialogs/_RebrandDialog.scss
View File

@ -53,11 +53,12 @@ limitations under the License.
.mx_RebrandDialog_chevron::after { .mx_RebrandDialog_chevron::after {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 24px; width: 30px;
height: 24px; height: 30px;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $muted-fg-color; 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);
} }

9
res/css/views/directory/_NetworkDropdown.scss
View File

@ -145,13 +145,14 @@ limitations under the License.
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
width: 24px; width: 26px;
height: 24px; height: 26px;
right: -28px; // - (24 + 4) right: -27.5px; // - (width: 26 + spacing to align with X above: 1.5)
top: -3px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; 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; background-color: $primary-fg-color;
} }

5
res/css/views/rooms/_JumpToBottomButton.scss
View File

@ -67,9 +67,8 @@ limitations under the License.
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 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-repeat: no-repeat;
mask-position: center; mask-size: contain;
mask-size: 50%;
background: $muted-fg-color; background: $muted-fg-color;
} }

30
res/css/views/rooms/_RoomSublist.scss
View File

@ -142,26 +142,24 @@ limitations under the License.
.mx_RoomSublist_collapseBtn { .mx_RoomSublist_collapseBtn {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 12px; width: 14px;
height: 12px; height: 14px;
margin-right: 8px; margin-right: 6px;
&::before { &::before {
content: ''; content: '';
width: 12px; width: 18px;
height: 12px; height: 18px;
position: absolute; position: absolute;
top: 1px;
left: 1px;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $primary-fg-color; background-color: $roomlist-header-color;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
} }
&.mx_RoomSublist_collapseBtn_collapsed::before { &.mx_RoomSublist_collapseBtn_collapsed::before {
mask-image: url('$(res)/img/feather-customised/chevron-right.svg'); transform: rotate(-90deg);
} }
} }
} }
@ -251,22 +249,24 @@ limitations under the License.
.mx_RoomSublist_showNButtonChevron { .mx_RoomSublist_showNButtonChevron {
position: relative; position: relative;
width: 16px; width: 18px;
height: 16px; height: 18px;
margin-left: 12px; margin-left: 12px;
margin-right: 18px; margin-right: 16px;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $roomtile-preview-color; background: $roomlist-header-color;
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'); mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
} }
.mx_RoomSublist_showLessButtonChevron { .mx_RoomSublist_showLessButtonChevron {
mask-image: url('$(res)/img/feather-customised/chevron-up.svg'); transform: rotate(180deg);
} }
} }

6
res/css/views/rooms/_TopUnreadMessagesBar.scss
View File

@ -51,11 +51,11 @@ limitations under the License.
position: absolute; position: absolute;
width: 36px; width: 36px;
height: 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-repeat: no-repeat;
mask-position: center; mask-size: contain;
mask-size: 50%;
background: $muted-fg-color; background: $muted-fg-color;
transform: rotate(180deg);
} }
.mx_TopUnreadMessagesBar_markAsRead { .mx_TopUnreadMessagesBar_markAsRead {

3
res/img/feather-customised/chevron-down-thin.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 7.5L9 10.5L12 7.5" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 217 B

4
res/img/feather-customised/chevron-down.svg
View File

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 9L12 15L18 9" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 7.5L9 10.5L12 7.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 195 B

After

Width:  |  Height:  |  Size: 217 B

1
res/img/feather-customised/chevron-right.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 270 B

1
res/img/feather-customised/chevron-up.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 268 B

32
res/img/icon-jump-to-bottom.svg
View File

@ -1,32 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg4"
width="18.666187"
height="8.7375822"
viewBox="0 0 18.666187 8.7375818"
version="1.1"
style="fill:none">
<metadata
id="metadata8">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<path
id="path2-8-3"
style="fill:none;stroke:#000000;stroke-width:1.29999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 17.909095,0.75599092 9.3330939,7.987602 0.75709259,0.75599092" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1016 B

16
res/img/icon-jump-to-first-unread.svg
View File

@ -1,16 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
style="fill:none"
version="1.1"
viewBox="0 0 18.666187 8.7375818"
height="8.7375822"
width="18.666187">
<defs
id="defs8" />
<path
d="M 17.909095,7.981591 9.3330939,0.74997995 0.75709259,7.981591"
style="fill:none;stroke:#000000;stroke-width:1.29999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path2-8-3" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 559 B

8
res/themes/dark/css/_dark.scss
View File

@ -18,6 +18,10 @@ $primary-fg-color: $text-primary-color;
$primary-bg-color: $bg-color; $primary-bg-color: $bg-color;
$muted-fg-color: $header-panel-text-primary-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 // used for dialog box text
$light-fg-color: $header-panel-text-secondary-color; $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-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-bg-color: rgba(33, 38, 44, 0.90);
$roomlist-header-color: #8E99A4; $roomlist-header-color: $tertiary-fg-color;
$roomsublist-divider-color: $primary-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-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: rgba(141, 151, 165, 0.2); $roomtile-selected-bg-color: rgba(141, 151, 165, 0.2);

17
res/themes/light/css/_light.scss
View File

@ -19,8 +19,8 @@ $accent-bg-color: rgba(3, 179, 129, 0.16);
$notice-primary-color: #ff4b55; $notice-primary-color: #ff4b55;
$notice-primary-bg-color: rgba(255, 75, 85, 0.16); $notice-primary-bg-color: rgba(255, 75, 85, 0.16);
$primary-fg-color: #2e2f32; $primary-fg-color: #2e2f32;
$roomlist-header-color: $primary-fg-color; $secondary-fg-color: #737D8C;
$notice-secondary-color: $roomlist-header-color; $tertiary-fg-color: #8D99A5;
$header-panel-bg-color: #f3f8fd; $header-panel-bg-color: #f3f8fd;
// typical text (dark-on-white in light skin) // typical text (dark-on-white in light skin)
@ -52,10 +52,6 @@ $info-bg-color: #2A9EDF;
$mention-user-pill-bg-color: $warning-color; $mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); $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 // informational plinth
$info-plinth-bg-color: #f7f7f7; $info-plinth-bg-color: #f7f7f7;
$info-plinth-fg-color: #888; $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-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: rgba(245, 245, 245, 0.90); $roomlist-bg-color: rgba(245, 245, 245, 0.90);
$roomlist-header-color: $tertiary-fg-color;
$roomsublist-divider-color: $primary-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-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #FFF; $roomtile-selected-bg-color: #FFF;
@ -199,8 +196,14 @@ $username-variant6-color: #2dc2c5;
$username-variant7-color: #5c56f5; $username-variant7-color: #5c56f5;
$username-variant8-color: #74d12c; $username-variant8-color: #74d12c;
$notice-secondary-color: $roomlist-header-color;
$panel-divider-color: transparent; $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; $widget-menu-bar-bg-color: $secondary-accent-color;