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

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
pull/21833/head
J. Ryan Stinnett 2020-07-30 16:41:00 +01:00
parent 2f20cbd5ad
commit e917c0d92e
6 changed files with 20 additions and 22 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 {
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);
}

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

@ -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;

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

@ -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);
}
}

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">
<path d="M6 9L12 15L18 9" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
<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="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</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