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

Fix trashcan.svg by exporting it with its viewbox

Browse source 
then fix sizing and alignment of consumers
This commit is contained in:
Michael Telatynski 2021-06-23 12:29:00 +01:00
parent 1fe1288427
commit cdb97d5494
3 changed files with 9 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
res/css/structures/_RoomStatusBar.scss
View file

@ -112,7 +112,7 @@ limitations under the License.
.mx_AccessibleButton { .mx_AccessibleButton {
padding: 5px 10px; padding: 5px 10px;
padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -128,13 +128,13 @@ limitations under the License.
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
width: 18px;
height: 18px;
top: calc(50% - 9px); // text sizes are dynamic
} }
&.mx_RoomStatusBar_unsentCancelAllBtn::before { &.mx_RoomStatusBar_unsentCancelAllBtn::before {
mask-image: url('$(res)/img/element-icons/trashcan.svg'); mask-image: url('$(res)/img/element-icons/trashcan.svg');
width: 12px;
height: 16px;
top: calc(50% - 8px); // text sizes are dynamic
} }
&.mx_RoomStatusBar_unsentResendAllBtn { &.mx_RoomStatusBar_unsentResendAllBtn {
@ -142,9 +142,6 @@ limitations under the License.
&::before { &::before {
mask-image: url('$(res)/img/element-icons/retry.svg'); mask-image: url('$(res)/img/element-icons/retry.svg');
width: 18px;
height: 18px;
top: calc(50% - 9px); // text sizes are dynamic
} }
} }
} }

6
res/css/views/rooms/_VoiceRecordComposerTile.scss
View file

@ -36,10 +36,10 @@ limitations under the License.
} }
.mx_VoiceRecordComposerTile_delete { .mx_VoiceRecordComposerTile_delete {
width: 14px; // w&h are size of icon width: 24px;
height: 18px; height: 24px;
vertical-align: middle; vertical-align: middle;
margin-right: 11px; // distance from left edge of waveform container (container has some margin too) margin-right: 8px; // distance from left edge of waveform container (container has some margin too)
background-color: $voice-record-icon-color; background-color: $voice-record-icon-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;

4
res/img/element-icons/trashcan.svg
View file

@ -1,3 +1,3 @@
<svg width="12" height="17" viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.857143 14.5C0.857143 15.4491 1.62857 16.5 2.57143 16.5H9.42857C10.3714 16.5 11.1429 15.2542 11.1429 14.3051V5.67692C11.1429 4.72781 10.3714 3.95128 9.42857 3.95128H2.57143C1.62857 3.95128 0.857143 4.72781 0.857143 5.67692V14.5ZM11.1429 1.36282H9L8.39143 0.750218C8.23714 0.59491 8.01429 0.5 7.79143 0.5H4.20857C3.98571 0.5 3.76286 0.59491 3.60857 0.750218L3 1.36282H0.857143C0.385714 1.36282 0 1.75109 0 2.22564C0 2.70019 0.385714 3.08846 0.857143 3.08846H11.1429C11.6143 3.08846 12 2.70019 12 2.22564C12 1.75109 11.6143 1.36282 11.1429 1.36282Z" fill="#737D8C"/> <path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V9C18 7.9 17.1 7 16 7H8C6.9 7 6 7.9 6 9V19ZM18 4H15.5L14.79 3.29C14.61 3.11 14.35 3 14.09 3H9.91C9.65 3 9.39 3.11 9.21 3.29L8.5 4H6C5.45 4 5 4.45 5 5C5 5.55 5.45 6 6 6H18C18.55 6 19 5.55 19 5C19 4.45 18.55 4 18 4Z" fill="#8D99A5"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 679 B

After

Width:  |  Height:  |  Size: 397 B