Replace screen share icons with material design icons

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

2 files changed, 40 insertions, 19 deletions

diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index 5f1c71289..1465d93e6 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -60,8 +60,21 @@
 				v-tooltip="screenSharingButtonTooltip"
 				:aria-label="screenSharingButtonAriaLabel"
 				:class="screenSharingButtonClass"
-				class="app-navigation-entry-utils-menu-button forced-white"
-				@click="toggleScreenSharingMenu" />
+				class="app-navigation-entry-utils-menu-button"
+				@click.stop="toggleScreenSharingMenu">
+				<Monitor
+					v-if="model.attributes.localScreen"
+					:size="24"
+					title=""
+					fill-color="#ffffff"
+					decorative />
+				<MonitorOff
+					v-if="!model.attributes.localScreen"
+					:size="24"
+					title=""
+					fill-color="#ffffff"
+					decorative />
+			</button>
 			<div id="screensharing-menu" :class="{ open: screenSharingMenuOpen }" class="app-navigation-entry-menu">
 				<ul>
 					<li v-if="!model.attributes.localScreen && splitScreenSharingMenu" id="share-screen-entry">
@@ -174,6 +187,8 @@ import Hand from 'vue-material-design-icons/Hand'
 import Microphone from 'vue-material-design-icons/Microphone'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
 import MicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline'
+import Monitor from 'vue-material-design-icons/Monitor'
+import MonitorOff from 'vue-material-design-icons/MonitorOff'
 import Video from 'vue-material-design-icons/Video'
 import VideoOff from 'vue-material-design-icons/VideoOff'
 import VideoOutline from 'vue-material-design-icons/VideoOutline'
@@ -206,6 +221,8 @@ export default {
 		'VideoIcon': Video,
 		VideoOff,
 		VideoOutline,
+		Monitor,
+		MonitorOff,
 	},
 
 	props: {
@@ -365,9 +382,7 @@ export default {
 
 		screenSharingButtonClass() {
 			return {
-				'icon-screen': this.model.attributes.localScreen,
 				'screensharing-disabled': !this.model.attributes.localScreen,
-				'icon-screen-off': !this.model.attributes.localScreen,
 			}
 		},
 
@@ -715,13 +730,9 @@ export default {
 <style lang="scss" scoped>
 @import '../../../assets/variables.scss';
 
-.forced-white {
-	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
 #screensharing-menu {
 	bottom: 44px;
-	left: calc(50% - 40px);
+	left: calc(50% - 64px);
 	right: initial;
 	color: initial;
 	text-shadow: initial;
@@ -745,9 +756,7 @@ export default {
 	background-color: transparent;
 	border: none;
 	margin: 0;
-	width: 44px;
-	height: 44px;
-	background-size: 24px;
+	padding: 0 12px;
 }
 
 .buttons-bar #screensharing-menu button {
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index 0d148e661..b691154ce 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -85,9 +85,15 @@
 					</button>
 					<button v-show="!connectionStateFailedNoRestart"
 						v-tooltip="t('spreed', 'Show screen')"
-						class="screensharingIndicator forced-white icon-screen"
+						class="screensharingIndicator"
 						:class="screenSharingButtonClass"
-						@click="switchToScreen" />
+						@click.stop="switchToScreen">
+						<Monitor
+							:size="24"
+							title=""
+							fill-color="#ffffff"
+							decorative />
+					</button>
 					<button v-show="connectionStateFailedNoRestart"
 						class="iceFailedIndicator forced-white icon-error"
 						:class="{ 'not-failed': !connectionStateFailedNoRestart }"
@@ -108,6 +114,7 @@ import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantMod
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import Microphone from 'vue-material-design-icons/Microphone'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
+import Monitor from 'vue-material-design-icons/Monitor'
 import Video from 'vue-material-design-icons/Video'
 import VideoOff from 'vue-material-design-icons/VideoOff'
 import { PARTICIPANT } from '../../../constants'
@@ -120,6 +127,7 @@ export default {
 		Hand,
 		Microphone,
 		MicrophoneOff,
+		Monitor,
 		'VideoIcon': Video,
 		VideoOff,
 	},
@@ -321,7 +329,14 @@ export default {
 .handIndicator,
 .muteIndicator,
 .hideRemoteVideo,
-.screensharingIndicator,
+.screensharingIndicator {
+	position: relative;
+	display: inline-block;
+	background-color: transparent !important;
+	border: none;
+	padding: 0 12px;
+}
+
 .iceFailedIndicator {
 	position: relative;
 	display: inline-block;
@@ -330,6 +345,7 @@ export default {
 	width: 32px;
 	height: 32px;
 	background-size: 22px;
+	opacity: .8 !important;
 
 	&.hidden {
 		display: none;
@@ -353,8 +369,4 @@ export default {
 	}
 }
 
-.iceFailedIndicator {
-	opacity: .8 !important;
-}
-
 </style>