PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Replace all chevrons with a single icon

Browse source 
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
This commit is contained in:
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 { .mx_RebrandDialog_chevron::after {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 24px; width: 18px;
height: 24px; height: 18px;
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);
} }

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

@ -145,9 +145,9 @@ limitations under the License.
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
width: 24px; width: 18px;
height: 24px; height: 18px;
right: -28px; // - (24 + 4) right: -22px; // - (18 + 4)
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;

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

@ -142,17 +142,15 @@ 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;
@ -161,7 +159,7 @@ limitations under the License.
} }
&.mx_RoomSublist_collapseBtn_collapsed::before { &.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 { .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: $roomtile-preview-color;
left: -1px; // adjust for image position
} }
.mx_RoomSublist_showMoreButtonChevron { .mx_RoomSublist_showMoreButtonChevron {
@ -266,7 +265,7 @@ limitations under the License.
} }
.mx_RoomSublist_showLessButtonChevron { .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"> <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