Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 12:45:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

update call icons

Browse Source
This commit is contained in:
Bruno Windels 2020-07-08 17:30:50 +02:00
parent 7dad56ca86
commit 571bd30898
13 changed files with 50 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
res/css/structures/_RoomView.scss
View File

@ -261,7 +261,7 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_voipButton { .mx_RoomView_voipButton {
float: right; float: right;
margin-right: 13px; margin-right: 13px;
margin-top: 10px; margin-top: 13px;
cursor: pointer; cursor: pointer;
} }

2
res/css/views/dialogs/_UserSettingsDialog.scss
View File

@ -26,7 +26,7 @@ limitations under the License.
} }
.mx_UserSettingsDialog_voiceIcon::before { .mx_UserSettingsDialog_voiceIcon::before {
mask-image: url('$(res)/img/element-icons/voice-call.svg'); mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
} }
.mx_UserSettingsDialog_bellIcon::before { .mx_UserSettingsDialog_bellIcon::before {

11
res/css/views/rooms/_MessageComposer.scss
View File

@ -196,22 +196,27 @@ limitations under the License.
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
} }
&.mx_MessageComposer_hangup::before {
background-color: $warning-color;
} }
}
.mx_MessageComposer_upload::before { .mx_MessageComposer_upload::before {
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg'); mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
} }
.mx_MessageComposer_hangup::before { .mx_MessageComposer_hangup::before {
mask-image: url('$(res)/img/hangup.svg'); mask-image: url('$(res)/img/element-icons/call/hangup.svg');
} }
.mx_MessageComposer_voicecall::before { .mx_MessageComposer_voicecall::before {
mask-image: url('$(res)/img/element-icons/voice-call.svg'); mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
} }
.mx_MessageComposer_videocall::before { .mx_MessageComposer_videocall::before {
mask-image: url('$(res)/img/element-icons/video-call.svg'); mask-image: url('$(res)/img/element-icons/call/video-call.svg');
} }
.mx_MessageComposer_emoji::before { .mx_MessageComposer_emoji::before {

6
res/img/element-icons/call/fullscreen.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 4H4V10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 20L20 20L20 14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 4L9.5 9.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
<path d="M14.5 14.5L20 20" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 479 B

3
res/img/element-icons/call/hangup.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0084 7.75648C10.3211 7.69163 6.85136 8.12949 6.00781 8.35133C5.95792 8.36445 5.90044 8.37912 5.83616 8.39552C4.54101 8.72607 0.48272 9.76183 0.0442423 13.0436C-0.295466 15.5862 1.40575 16.3558 2.25618 16.2386C2.84479 16.1648 4.5301 15.8983 6.08724 15.6189C7.61629 15.3446 7.61551 14.3359 7.61499 13.6538C7.61498 13.6413 7.61497 13.6288 7.61497 13.6165L7.61497 12.2453C7.61497 11.8961 7.94315 11.6942 8.3958 11.6396C9.99822 11.422 11.3359 11.4213 12.0055 11.4213L12.0112 11.4213C12.6807 11.4213 14.0018 11.422 15.6042 11.6396C16.0569 11.6942 16.385 11.8961 16.385 12.2453L16.385 13.6165C16.385 13.6289 16.385 13.6413 16.385 13.6538C16.3845 14.3359 16.3837 15.3446 17.9128 15.619C19.4699 15.8983 21.1552 16.1648 21.7438 16.2386C22.5942 16.3558 24.2955 15.5862 23.9558 13.0436C23.5173 9.76183 19.459 8.72608 18.1638 8.39553C18.0996 8.37913 18.0421 8.36446 17.9922 8.35134C17.1487 8.1295 13.6956 7.69163 12.0084 7.75648Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

4
res/img/element-icons/video-call.svg → res/img/element-icons/call/video-call.svg
View File

@ -1,4 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" 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 7C0 5.34315 1.34315 4 3 4H14C15.6569 4 17 5.34315 17 7V17C17 18.6569 15.6569 20 14 20H3C1.34315 20 0 18.6569 0 17V7Z" fill="black"/> <path d="M0 7C0 5.34315 1.34315 4 3 4H14C15.6569 4 17 5.34315 17 7V17C17 18.6569 15.6569 20 14 20H3C1.34315 20 0 18.6569 0 17V7Z" fill="white"/>
<path d="M19 9L22.3753 6.29976C23.0301 5.77595 24 6.24212 24 7.08062V16.9194C24 17.7579 23.0301 18.2241 22.3753 17.7002L19 15V9Z" fill="black"/> <path d="M19 9L22.3753 6.29976C23.0301 5.77595 24 6.24212 24 7.08062V16.9194C24 17.7579 23.0301 18.2241 22.3753 17.7002L19 15V9Z" fill="white"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 393 B

After

Width:  |  Height:  |  Size: 393 B

5
res/img/element-icons/call/video-muted.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 3L19 21" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 5H4.41122L17 17.615V20.415C16.9914 20.4057 16.9825 20.3965 16.9735 20.3874L1.98909 5.37176C1.93823 5.32079 1.88324 5.27646 1.82519 5.23876C2.18599 5.08505 2.58306 5 3 5ZM0.386676 6.52565C0.140502 6.96107 0 7.46413 0 8V18C0 19.6569 1.34315 21 3 21H14.7593L0.573407 6.78449C0.495634 6.70656 0.433392 6.619 0.386676 6.52565ZM17 8V14.7837L7.2367 5H14C15.6569 5 17 6.34315 17 8Z" fill="white"/>
<path d="M19 10L22.3753 7.29976C23.0301 6.77595 24 7.24212 24 8.08062V17.9194C24 18.7579 23.0301 19.2241 22.3753 18.7002L19 16V10Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 793 B

0
res/img/element-icons/voice-call.svg → res/img/element-icons/call/voice-call.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

4
res/img/element-icons/call/voice-muted.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3L21 21" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6.59209V12C8 14.2091 9.79086 16 12 16C13.4616 16 14.7402 15.216 15.4381 14.0457L8 6.59209ZM16.8804 15.491C15.7918 17.0102 14.0115 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.9381C15.1511 19.6699 17.037 18.5476 18.3077 16.9213L16.8804 15.491ZM19.3589 15.1433L17.7917 13.5729C17.9275 13.0716 18 12.5443 18 12C18 11.4477 18.4477 11 19 11C19.5523 11 20 11.4477 20 12C20 13.1159 19.7715 14.1783 19.3589 15.1433ZM16 11.7774L8.43077 4.19238C9.09091 2.89149 10.4413 2 12 2C14.2091 2 16 3.79086 16 6V11.7774Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 913 B

3
res/img/element-icons/call/voice-unmuted.svg Normal file
View File

@ -0,0 +1,3 @@
<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 6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6V12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12V6ZM5 11C5.55228 11 6 11.4477 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12C18 11.4477 18.4477 11 19 11C19.5523 11 20 11.4477 20 12C20 16.0796 16.9463 19.446 13 19.9381V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V19.9381C7.05369 19.446 4 16.0796 4 12C4 11.4477 4.44772 11 5 11Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 587 B

6
res/img/element-icons/room/in-call.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 9C16 9 17 10.2857 17 12C17 13.7143 16 15 16 15" stroke="white" stroke-width="2" stroke-linecap="round"/>
<path d="M19 6C19 6 21 8.57143 21 12C21 15.4286 19 18 19 18" stroke="white" stroke-width="2" stroke-linecap="round"/>
<rect x="2" y="8" width="11" height="8" rx="2" fill="white"/>
<path d="M7 8L11.3598 4.36682C12.0111 3.82405 13 4.2872 13 5.13504V18.865C13 19.7128 12.0111 20.176 11.3598 19.6332L7 16V8Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 541 B

2
src/components/structures/RoomStatusBar.js
View File

@ -173,7 +173,7 @@ export default createReactClass({
if (this.props.hasActiveCall) { if (this.props.hasActiveCall) {
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
return ( return (
<TintableSvg src={require("../../../res/img/sound-indicator.svg")} width="23" height="20" /> <TintableSvg src={require("../../../res/img/element-icons/room/in-call.svg")} width="23" height="20" />
); );
} }

17
src/components/structures/RoomView.js
View File

@ -1933,25 +1933,29 @@ export default createReactClass({
} }
if (inCall) { if (inCall) {
let zoomButton; let voiceMuteButton; let videoMuteButton; let zoomButton; let videoMuteButton;
if (call.type === "video") { if (call.type === "video") {
zoomButton = ( zoomButton = (
<div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title={_t("Fill screen")}> <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title={_t("Fill screen")}>
<TintableSvg src={require("../../../res/img/fullscreen.svg")} width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} /> <TintableSvg src={require("../../../res/img/element-icons/call/fullscreen.svg")} width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
</div> </div>
); );
videoMuteButton = videoMuteButton =
<div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}> <div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
<TintableSvg src={call.isLocalVideoMuted() ? require("../../../res/img/video-unmute.svg") : require("../../../res/img/video-mute.svg")} <TintableSvg src={call.isLocalVideoMuted() ?
require("../../../res/img/element-icons/call/video-muted.svg") :
require("../../../res/img/element-icons/call/video-call.svg")}
alt={call.isLocalVideoMuted() ? _t("Click to unmute video") : _t("Click to mute video")} alt={call.isLocalVideoMuted() ? _t("Click to unmute video") : _t("Click to mute video")}
width="31" height="27" /> width="" height="27" />
</div>; </div>;
} }
voiceMuteButton = const voiceMuteButton =
<div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}> <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
<TintableSvg src={call.isMicrophoneMuted() ? require("../../../res/img/voice-unmute.svg") : require("../../../res/img/voice-mute.svg")} <TintableSvg src={call.isMicrophoneMuted() ?
require("../../../res/img/element-icons/call/voice-muted.svg") :
require("../../../res/img/element-icons/call/voice-unmuted.svg")}
alt={call.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")} alt={call.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")}
width="21" height="26" /> width="21" height="26" />
</div>; </div>;
@ -1963,7 +1967,6 @@ export default createReactClass({
{ videoMuteButton } { videoMuteButton }
{ zoomButton } { zoomButton }
{ statusBar } { statusBar }
<TintableSvg className="mx_RoomView_voipChevron" src={require("../../../res/img/voip-chevron.svg")} width="22" height="17" />
</div>; </div>;
} }