nikrozman/element-web
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Deduplicate media & voip icons using Compound Design Tokens (#129)

Browse Source 
* Deduplicate media & voip icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2024-10-08 13:00:37 +01:00
committed by GitHub
parent 197168b3ba
commit df4a223eb6
49 changed files with 497 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
res/css/views/audio_messages/_PlayPauseButton.pcss
View File

@@ -21,6 +21,10 @@ Please see LICENSE files in the repository root for full details.
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
top: 6px; /* center */
left: 6px; /* center */
width: 20px;
height: 20px;
}
&.mx_PlayPauseButton_disabled::before {
@@ -28,18 +32,10 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_PlayPauseButton_play::before {
width: 13px;
height: 16px;
top: 8px; /* center */
left: 12px; /* center */
mask-image: url("$(res)/img/element-icons/play.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/play-solid.svg");
}
&.mx_PlayPauseButton_pause::before {
width: 10px;
height: 12px;
top: 10px; /* center */
left: 11px; /* center */
mask-image: url("$(res)/img/element-icons/pause.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/pause-solid.svg");
}
}

4
res/css/views/messages/_LegacyCallEvent.pcss
View File

@@ -75,7 +75,7 @@ Please see LICENSE files in the repository root for full details.
&.mx_LegacyCallEvent_rejected,
&.mx_LegacyCallEvent_noAnswer {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url("$(res)/img/voip/declined-video.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-declined-solid.svg");
}
}
}
@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
&.mx_LegacyCallEvent_video {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url("$(res)/img/voip/missed-video.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-missed-solid.svg");
}
}
}

2
res/css/views/rooms/_MessageComposer.pcss
View File

@@ -253,7 +253,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageComposer_voiceMessage::before {
mask-image: url("$(res)/img/element-icons/mic.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
}
.mx_MessageComposer_voiceBroadcast::before {

2
res/css/views/rooms/_ReplyTile.pcss
View File

@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
font: var(--cpd-font-body-md-regular);
&.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
mask-image: url("$(res)/img/element-icons/speaker.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/volume-on-solid.svg");
}
&.mx_ReplyTile_video .mx_MFileBody_info_icon::before {

12
res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss
View File

@@ -87,19 +87,19 @@ Please see LICENSE files in the repository root for full details.
&.mx_LegacyCallViewButtons_button_mic::before {
height: 20px;
mask-image: url("$(res)/img/element-icons/mic.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
width: 20px;
}
&.mx_LegacyCallViewButtons_button_vid::before {
mask-image: url("$(res)/img/voip/call-view/cam-on.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
&.mx_LegacyCallViewButtons_button_screensharing {
background-color: $accent;
&::before {
mask-image: url("$(res)/img/voip/call-view/screensharing.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg");
background-color: white; /* Same on both themes */
}
}
@@ -118,19 +118,19 @@ Please see LICENSE files in the repository root for full details.
&.mx_LegacyCallViewButtons_button_mic::before {
height: 20px;
mask-image: url("$(res)/img/element-icons/Mic-off.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
width: 20px;
}
&.mx_LegacyCallViewButtons_button_vid::before {
mask-image: url("$(res)/img/voip/call-view/cam-off.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg");
}
&.mx_LegacyCallViewButtons_button_screensharing {
background-color: $call-view-button-on-background;
&::before {
mask-image: url("$(res)/img/voip/call-view/screensharing.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg");
background-color: $call-view-button-on-foreground;
}
}

8
res/css/views/voip/_CallView.pcss
View File

@@ -123,12 +123,12 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_CallView_deviceButton_audio::before {
mask-image: url("$(res)/img/element-icons/mic.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
mask-size: 14px;
}
&.mx_CallView_deviceButton_video::before {
mask-image: url("$(res)/img/voip/call-view/cam-on.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
}
@@ -168,12 +168,12 @@ Please see LICENSE files in the repository root for full details.
.mx_CallView_deviceButton {
&.mx_CallView_deviceButton_audio::before {
mask-image: url("$(res)/img/element-icons/Mic-off.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
mask-size: 18px;
}
&.mx_CallView_deviceButton_video::before {
mask-image: url("$(res)/img/voip/call-view/cam-off.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg");
}
}
}

4
res/css/views/voip/_VideoFeed.pcss
View File

@@ -72,11 +72,11 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_VideoFeed_mic_muted::before {
mask-image: url("$(res)/img/element-icons/Mic-off.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
}
&.mx_VideoFeed_mic_unmuted::before {
mask-image: url("$(res)/img/element-icons/mic.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
}
}
}