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

Use compound Mic icons everywhere (#9849)

Browse source
This commit is contained in:
Michael Weimann 2023-01-02 14:36:58 +01:00 committed by GitHub
parent 0f7a2ce6df
commit ecb3e7a197
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 22 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -254,7 +254,7 @@ limitations under the License.
} }
.mx_MessageComposer_voiceMessage::before { .mx_MessageComposer_voiceMessage::before {
mask-image: url("$(res)/img/voip/mic-on-mask.svg"); mask-image: url("$(res)/img/element-icons/mic.svg");
} }
.mx_MessageComposer_voiceBroadcast::before { .mx_MessageComposer_voiceBroadcast::before {

8
res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss
View file

@ -94,7 +94,9 @@ limitations under the License.
} }
&.mx_LegacyCallViewButtons_button_mic::before { &.mx_LegacyCallViewButtons_button_mic::before {
mask-image: url("$(res)/img/voip/call-view/mic-on.svg"); height: 20px;
mask-image: url("$(res)/img/element-icons/mic.svg");
width: 20px;
} }
&.mx_LegacyCallViewButtons_button_vid::before { &.mx_LegacyCallViewButtons_button_vid::before {
@ -123,7 +125,9 @@ limitations under the License.
} }
&.mx_LegacyCallViewButtons_button_mic::before { &.mx_LegacyCallViewButtons_button_mic::before {
mask-image: url("$(res)/img/voip/call-view/mic-off.svg"); height: 20px;
mask-image: url("$(res)/img/element-icons/Mic-off.svg");
width: 20px;
} }
&.mx_LegacyCallViewButtons_button_vid::before { &.mx_LegacyCallViewButtons_button_vid::before {

6
res/css/views/voip/_CallView.pcss
View file

@ -135,7 +135,8 @@ limitations under the License.
} }
&.mx_CallView_deviceButton_audio::before { &.mx_CallView_deviceButton_audio::before {
mask-image: url("$(res)/img/voip/call-view/mic-on.svg"); mask-image: url("$(res)/img/element-icons/mic.svg");
mask-size: 14px;
} }
&.mx_CallView_deviceButton_video::before { &.mx_CallView_deviceButton_video::before {
@ -179,7 +180,8 @@ limitations under the License.
.mx_CallView_deviceButton { .mx_CallView_deviceButton {
&.mx_CallView_deviceButton_audio::before { &.mx_CallView_deviceButton_audio::before {
mask-image: url("$(res)/img/voip/call-view/mic-off.svg"); mask-image: url("$(res)/img/element-icons/Mic-off.svg");
mask-size: 14px;
} }
&.mx_CallView_deviceButton_video::before { &.mx_CallView_deviceButton_video::before {

8
res/css/views/voip/_VideoFeed.pcss
View file

@ -70,8 +70,8 @@ limitations under the License.
&::before { &::before {
position: absolute; position: absolute;
content: ""; content: "";
width: 16px; width: 17px;
height: 16px; height: 17px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
@ -80,11 +80,11 @@ limitations under the License.
} }
&.mx_VideoFeed_mic_muted::before { &.mx_VideoFeed_mic_muted::before {
mask-image: url("$(res)/img/voip/mic-muted.svg"); mask-image: url("$(res)/img/element-icons/Mic-off.svg");
} }
&.mx_VideoFeed_mic_unmuted::before { &.mx_VideoFeed_mic_unmuted::before {
mask-image: url("$(res)/img/voip/mic-unmuted.svg"); mask-image: url("$(res)/img/element-icons/mic.svg");
} }
} }
} }

5
res/img/element-icons/Mic-off.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.21924 0.380761C1.71155 -0.12692 0.888441 -0.12692 0.380761 0.380761C-0.12692 0.888441 -0.12692 1.71155 0.380761 2.21924L7.79998 9.63846V13C7.79998 15.8719 10.1281 18.2 13 18.2C13.9643 18.2 14.8674 17.9375 15.6416 17.48L17.5195 19.358C16.2459 20.2649 14.6882 20.7988 13.0059 20.8L13 20.8L12.9941 20.8C8.68896 20.7968 5.19999 17.3058 5.19999 13C5.19999 12.282 4.61796 11.7 3.89999 11.7C3.18202 11.7 2.59999 12.282 2.59999 13C2.59999 18.3035 6.56977 22.6798 11.7 23.3195V24.7C11.7 25.4179 12.282 26 13 26C13.7179 26 14.3 25.4179 14.3 24.7V23.3195C16.1989 23.0827 17.9388 22.334 19.3773 21.2158L23.7808 25.6192C24.2884 26.1269 25.1115 26.1269 25.6192 25.6192C26.1269 25.1115 26.1269 24.2884 25.6192 23.7808L2.21924 0.380761Z" fill="currentColor"/>
<path d="M20.5292 15.0447L22.5665 17.0862C23.103 15.8318 23.4 14.4506 23.4 13C23.4 12.282 22.818 11.7 22.1 11.7C21.382 11.7 20.8 12.282 20.8 13C20.8 13.7075 20.7058 14.393 20.5292 15.0447Z" fill="currentColor"/>
<path d="M8.36 2.85008L18.2 12.7106V5.20001C18.2 2.32813 15.8719 1.87345e-05 13 1.87345e-05C10.9737 1.87345e-05 9.21819 1.15894 8.36 2.85008Z" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

0
res/img/element-icons/Mic.svg → res/img/element-icons/mic.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 450 B

After

Width:  |  Height:  |  Size: 450 B

3
res/img/voip/call-view/mic-off.svg
View file

@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.70711 2.29289C3.31658 1.90237 2.68342 1.90237 2.29289 2.29289C1.90237 2.68342 1.90237 3.31658 2.29289 3.70711L8 9.41421V12C8 14.2091 9.79086 16 12 16C12.7418 16 13.4365 15.7981 14.032 15.4462L15.4765 16.8907C14.4957 17.5892 13.2958 18 12 18C8.68629 18 6 15.3137 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 16.0796 7.05369 19.446 11 19.9381V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V19.9381C14.4607 19.756 15.7991 19.18 16.9056 18.3199L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L3.70711 2.29289ZM17.7917 13.5729L19.3589 15.1433C19.7715 14.1783 20 13.1159 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5443 17.9275 13.0716 17.7917 13.5729ZM8.43077 4.19238L16 11.7774V6C16 3.79086 14.2091 2 12 2C10.4413 2 9.09091 2.89149 8.43077 4.19238Z" fill="#21262C"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

3
res/img/voip/call-view/mic-on.svg
View file

@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.09999 6.15C8.09999 3.99609 9.84608 2.25 12 2.25C14.1539 2.25 15.9 3.99609 15.9 6.15V11.9825C15.9 14.1365 14.1539 15.8825 12 15.8825C9.84608 15.8825 8.09999 14.1365 8.09999 11.9825V6.15ZM5.1748 10.7375C5.86516 10.7375 6.4248 11.2972 6.4248 11.9875C6.4248 15.0574 8.91483 17.5493 11.9915 17.5538C11.9943 17.5538 11.9972 17.5538 12 17.5538C12.0028 17.5538 12.0056 17.5538 12.0084 17.5538C15.085 17.5492 17.5748 15.0573 17.5748 11.9875C17.5748 11.2972 18.1344 10.7375 18.8248 10.7375C19.5152 10.7375 20.0748 11.2972 20.0748 11.9875C20.0748 16.0189 17.115 19.3576 13.25 19.9577V20.7513C13.25 21.4416 12.6904 22.0013 12 22.0013C11.3096 22.0013 10.75 21.4416 10.75 20.7513V19.9578C6.88482 19.3578 3.9248 16.0191 3.9248 11.9875C3.9248 11.2972 4.48445 10.7375 5.1748 10.7375Z" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 945 B

5
res/img/voip/mic-muted.svg
View file

@ -1,5 +0,0 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.9206 1.0544C1.68141 0.815201 1.29359 0.815201 1.0544 1.0544C0.815201 1.29359 0.815201 1.68141 1.0544 1.9206L4.55 5.41621V7C4.55 8.3531 5.6469 9.45 7 9.45C7.45436 9.45 7.87983 9.32632 8.24458 9.11079L9.12938 9.99558C8.52863 10.4234 7.7937 10.675 7 10.675C4.97035 10.675 3.325 9.02965 3.325 7C3.325 6.66173 3.05077 6.3875 2.7125 6.3875C2.37423 6.3875 2.1 6.66173 2.1 7C2.1 9.49877 3.97038 11.5607 6.3875 11.8621V12.5125C6.3875 12.8508 6.66173 13.125 7 13.125C7.33827 13.125 7.6125 12.8508 7.6125 12.5125V11.8621C8.50718 11.7505 9.32696 11.3978 10.0047 10.8709L12.0794 12.9456C12.3186 13.1848 12.7064 13.1848 12.9456 12.9456C13.1848 12.7064 13.1848 12.3186 12.9456 12.0794L1.9206 1.0544Z" fill="white"/>
<path d="M10.5474 7.96338L11.5073 8.92525C11.7601 8.33424 11.9 7.68346 11.9 7C11.9 6.66173 11.6258 6.3875 11.2875 6.3875C10.9492 6.3875 10.675 6.66173 10.675 7C10.675 7.33336 10.6306 7.65634 10.5474 7.96338Z" fill="white"/>
<path d="M4.81385 2.21784L9.45 6.86366V3.325C9.45 1.9719 8.3531 0.875 7 0.875C6.04532 0.875 5.21818 1.42104 4.81385 2.21784Z" fill="white"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

3
res/img/voip/mic-on-mask.svg
View file

@ -1,3 +0,0 @@
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09999 4.15C6.09999 1.99609 7.84608 0.25 9.99999 0.25C12.1539 0.25 13.9 1.99609 13.9 4.15V9.98254C13.9 12.1365 12.1539 13.8825 9.99999 13.8825C7.84608 13.8825 6.09999 12.1365 6.09999 9.98254V4.15ZM3.1748 8.73755C3.86516 8.73755 4.4248 9.29719 4.4248 9.98755C4.4248 13.0574 6.91483 15.5493 9.9915 15.5538C9.99433 15.5538 9.99717 15.5538 10 15.5538C10.0028 15.5538 10.0056 15.5538 10.0084 15.5538C13.085 15.5492 15.5748 13.0573 15.5748 9.98755C15.5748 9.29719 16.1344 8.73755 16.8248 8.73755C17.5152 8.73755 18.0748 9.29719 18.0748 9.98755C18.0748 14.0189 15.115 17.3576 11.25 17.9577V18.7513C11.25 19.4416 10.6904 20.0013 10 20.0013C9.30964 20.0013 8.75 19.4416 8.75 18.7513V17.9578C4.88483 17.3578 1.9248 14.0191 1.9248 9.98755C1.9248 9.29719 2.48445 8.73755 3.1748 8.73755Z" fill="#C1C6CD"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 951 B

4
res/img/voip/mic-unmuted.svg
View file

@ -1,4 +0,0 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.4645 3.29384C4.4645 1.95795 5.59973 0.875 7.0001 0.875C8.40048 0.875 9.53571 1.95795 9.53571 3.29384V6.91127C9.53571 8.24716 8.40048 9.33011 7.0001 9.33011C5.59973 9.33011 4.4645 8.24716 4.4645 6.91127V3.29384Z" fill="white"/>
<path d="M2.56269 6.1391C3.01153 6.1391 3.37539 6.4862 3.37539 6.91437C3.37539 8.81701 4.99198 10.3617 6.99032 10.3666C6.99359 10.3666 6.99686 10.3666 7.00014 10.3666C7.0034 10.3666 7.00665 10.3666 7.0099 10.3666C9.00814 10.3616 10.6246 8.81694 10.6246 6.91437C10.6246 6.4862 10.9885 6.1391 11.4373 6.1391C11.8861 6.1391 12.25 6.4862 12.25 6.91437C12.25 9.41469 10.3257 11.4854 7.81283 11.8576V12.3497C7.81283 12.7779 7.44898 13.125 7.00014 13.125C6.5513 13.125 6.18744 12.7779 6.18744 12.3497V11.8576C3.67448 11.4855 1.75 9.41478 1.75 6.91437C1.75 6.4862 2.11386 6.1391 2.56269 6.1391Z" fill="white"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 945 B

2
src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
View file

@ -17,7 +17,7 @@ import classNames from "classnames";
import { LiveBadge, VoiceBroadcastLiveness } from "../.."; import { LiveBadge, VoiceBroadcastLiveness } from "../..";
import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg"; import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
import { Icon as MicrophoneIcon } from "../../../../res/img/voip/call-view/mic-on.svg"; import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/mic.svg";
import { Icon as TimerIcon } from "../../../../res/img/element-icons/Timer.svg"; import { Icon as TimerIcon } from "../../../../res/img/element-icons/Timer.svg";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import RoomAvatar from "../../../components/views/avatars/RoomAvatar"; import RoomAvatar from "../../../components/views/avatars/RoomAvatar";

2
src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
View file

@ -22,7 +22,7 @@ import { VoiceBroadcastHeader } from "../atoms/VoiceBroadcastHeader";
import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg"; import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg";
import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg"; import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
import { Icon as RecordIcon } from "../../../../res/img/element-icons/Record.svg"; import { Icon as RecordIcon } from "../../../../res/img/element-icons/Record.svg";
import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/Mic.svg"; import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/mic.svg";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection"; import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection";
import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu"; import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu";