Merge pull request #5058 from nextcloud/enh/5021/mute-material-design

Replace call icons in buttons bar with material design icons

7 files changed, 195 insertions, 85 deletions

diff --git a/css/icons.scss b/css/icons.scss
index cea8444f2..154b7c03f 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -64,18 +64,6 @@
 		&.icon-grid-view {
 			background-image: url(icon-color-path('toggle-pictures', 'actions', 'fff', 1, true));
 		}
-		&.icon-audio {
-			background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true));
-		}
-		&.icon-audio-off {
-			background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true));
-		}
-		&.icon-video {
-			background-image: url(icon-color-path('video', 'actions', 'fff', 1, true));
-		}
-		&.icon-video-off {
-			background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true));
-		}
 		&.icon-screen {
 			background-image: url(icon-color-path('screen', 'actions', 'fff', 1, true));
 		}
diff --git a/src/PublicShareAuthRequestPasswordButton.vue b/src/PublicShareAuthRequestPasswordButton.vue
index 84825902e..70523a9ea 100644
--- a/src/PublicShareAuthRequestPasswordButton.vue
+++ b/src/PublicShareAuthRequestPasswordButton.vue
@@ -113,7 +113,6 @@ export default {
 
 .request-password-wrapper .icon {
 	position: absolute;
-	top: 23px;
 	right: 23px;
 	pointer-events: none;
 }
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index b53aa98d6..764d8c738 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -782,7 +782,7 @@ export default {
 }
 
 #videos .videoContainer.speaking:not(.videoView) ::v-deep .nameIndicator,
-#videos .videoContainer.videoView.speaking ::v-deep .nameIndicator .icon-audio {
+#videos .videoContainer.videoView.speaking ::v-deep .nameIndicator .microphone-icon {
 	animation: pulse 1s;
 	animation-iteration-count: infinite;
 }
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index 5bef8676f..15559f995 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -28,9 +28,21 @@
 					v-tooltip="audioButtonTooltip"
 					:aria-label="audioButtonAriaLabel"
 					:class="audioButtonClass"
-					class="forced-white"
 					@shortkey="toggleAudio"
-					@click="toggleAudio" />
+					@click.stop="toggleAudio">
+					<Microphone
+						v-if="showMicrophoneOn"
+						:size="24"
+						title=""
+						fill-color="#ffffff"
+						decorative />
+					<MicrophoneOff
+						v-else
+						:size="24"
+						title=""
+						fill-color="#ffffff"
+						decorative />
+				</button>
 				<span v-show="model.attributes.audioAvailable"
 					ref="volumeIndicator"
 					class="volume-indicator" />
@@ -41,17 +53,42 @@
 				v-tooltip="videoButtonTooltip"
 				:aria-label="videoButtonAriaLabel"
 				:class="videoButtonClass"
-				class="forced-white"
 				@shortkey="toggleVideo"
-				@click="toggleVideo" />
+				@click.stop="toggleVideo">
+				<VideoIcon
+					v-if="showVideoOn"
+					:size="24"
+					title=""
+					fill-color="#ffffff"
+					decorative />
+				<VideoOff
+					v-else
+					:size="24"
+					title=""
+					fill-color="#ffffff"
+					decorative />
+			</button>
 			<button
 				v-if="!screenSharingButtonHidden"
 				id="screensharing-button"
 				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">
@@ -161,6 +198,12 @@ import escapeHtml from 'escape-html'
 import { emit } from '@nextcloud/event-bus'
 import { showMessage } from '@nextcloud/dialogs'
 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 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 Popover from '@nextcloud/vue/dist/Components/Popover'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import SpeakingWhileMutedWarner from '../../../utils/webrtc/SpeakingWhileMutedWarner'
@@ -184,6 +227,12 @@ export default {
 		ActionSeparator,
 		ActionButton,
 		Hand,
+		Microphone,
+		MicrophoneOff,
+		'VideoIcon': Video,
+		VideoOff,
+		Monitor,
+		MonitorOff,
 	},
 
 	props: {
@@ -231,13 +280,15 @@ export default {
 
 		audioButtonClass() {
 			return {
-				'icon-audio': this.model.attributes.audioAvailable && this.model.attributes.audioEnabled,
 				'audio-disabled': this.model.attributes.audioAvailable && !this.model.attributes.audioEnabled,
-				'icon-audio-off': !this.model.attributes.audioAvailable || !this.model.attributes.audioEnabled,
 				'no-audio-available': !this.model.attributes.audioAvailable,
 			}
 		},
 
+		showMicrophoneOn() {
+			return this.model.attributes.audioAvailable && this.model.attributes.audioEnabled
+		},
+
 		audioButtonTooltip() {
 			if (!this.model.attributes.audioAvailable) {
 				return {
@@ -286,13 +337,15 @@ export default {
 
 		videoButtonClass() {
 			return {
-				'icon-video': this.model.attributes.videoAvailable && this.model.attributes.videoEnabled,
 				'video-disabled': this.model.attributes.videoAvailable && !this.model.attributes.videoEnabled,
-				'icon-video-off': !this.model.attributes.videoAvailable || !this.model.attributes.videoEnabled,
 				'no-video-available': !this.model.attributes.videoAvailable,
 			}
 		},
 
+		showVideoOn() {
+			return this.model.attributes.videoAvailable && this.model.attributes.videoEnabled
+		},
+
 		videoButtonTooltip() {
 			if (!this.model.attributes.videoAvailable) {
 				return t('spreed', 'No camera')
@@ -327,9 +380,7 @@ export default {
 
 		screenSharingButtonClass() {
 			return {
-				'icon-screen': this.model.attributes.localScreen,
 				'screensharing-disabled': !this.model.attributes.localScreen,
-				'icon-screen-off': !this.model.attributes.localScreen,
 			}
 		},
 
@@ -677,13 +728,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;
@@ -707,9 +754,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 {
@@ -736,8 +781,10 @@ export default {
 
 .buttons-bar button.no-audio-available,
 .buttons-bar button.no-video-available {
-	opacity: .7;
-	cursor: not-allowed;
+	&, & * {
+		opacity: .7;
+		cursor: not-allowed;
+	}
 }
 
 .buttons-bar button.no-audio-available:active,
@@ -770,7 +817,7 @@ export default {
 	opacity: 0.7;
 }
 
-#muteWrapper .icon-audio-off + .volume-indicator {
+#muteWrapper .microphone-off-icon + .volume-indicator {
 	background: linear-gradient(0deg, gray, white 36px);
 }
 
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index a8daaca00..4447c0cc4 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -48,25 +48,62 @@
 					v-show="showVideoOverlay"
 					class="bottom-bar__mediaIndicator">
 					<button v-show="!connectionStateFailedNoRestart"
+						v-if="showMicrophone || showMicrophoneOff"
 						v-tooltip="audioButtonTooltip"
-						class="muteIndicator forced-white"
-						:class="audioButtonClass"
+						class="muteIndicator"
 						:disabled="!model.attributes.audioAvailable || !selfIsModerator"
-						@click="forceMute" />
+						@click.stop="forceMute">
+						<Microphone
+							v-if="showMicrophone"
+							:size="24"
+							title=""
+							fill-color="#ffffff"
+							decorative />
+						<MicrophoneOff
+							v-if="showMicrophoneOff"
+							:size="24"
+							title=""
+							fill-color="#ffffff"
+							decorative />
+					</button>
 					<button v-show="!connectionStateFailedNoRestart && model.attributes.videoAvailable"
 						v-tooltip="videoButtonTooltip"
-						class="hideRemoteVideo forced-white"
-						:class="videoButtonClass"
-						@click="toggleVideo" />
+						class="hideRemoteVideo"
+						@click.stop="toggleVideo">
+						<VideoIcon
+							v-if="showVideoButton"
+							:size="24"
+							title=""
+							fill-color="#ffffff"
+							decorative />
+						<VideoOff
+							v-if="!showVideoButton"
+							:size="24"
+							title=""
+							fill-color="#ffffff"
+							decorative />
+					</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="iceFailedIndicator"
 						:class="{ 'not-failed': !connectionStateFailedNoRestart }"
-						disabled="true" />
+						disabled="true">
+						<AlertCircle
+							:size="24"
+							title=""
+							fill-color="#ffffff"
+							decorative />
+					</button>
 				</div>
 			</transition>
 			<button v-if="hasSelectedVideo && isBig"
@@ -81,6 +118,12 @@
 <script>
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import AlertCircle from 'vue-material-design-icons/AlertCircle'
+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'
 import Hand from 'vue-material-design-icons/Hand'
 
@@ -88,7 +131,13 @@ export default {
 	name: 'VideoBottomBar',
 
 	components: {
+		AlertCircle,
 		Hand,
+		Microphone,
+		MicrophoneOff,
+		Monitor,
+		'VideoIcon': Video,
+		VideoOff,
 	},
 
 	directives: {
@@ -136,16 +185,16 @@ export default {
 	},
 
 	computed: {
+		showMicrophone() {
+			return this.model.attributes.audioAvailable && this.selfIsModerator
+		},
 
-		connectionStateFailedNoRestart() {
-			return this.model.attributes.connectionState === ConnectionState.FAILED_NO_RESTART
+		showMicrophoneOff() {
+			return !this.model.attributes.audioAvailable && this.model.attributes.audioAvailable !== undefined
 		},
 
-		audioButtonClass() {
-			return {
-				'icon-audio': this.model.attributes.audioAvailable && this.selfIsModerator,
-				'icon-audio-off': !this.model.attributes.audioAvailable && this.model.attributes.audioAvailable !== undefined,
-			}
+		connectionStateFailedNoRestart() {
+			return this.model.attributes.connectionState === ConnectionState.FAILED_NO_RESTART
 		},
 
 		audioButtonTooltip() {
@@ -156,11 +205,8 @@ export default {
 			return null
 		},
 
-		videoButtonClass() {
-			return {
-				'icon-video': this.sharedData.videoEnabled,
-				'icon-video-off': !this.sharedData.videoEnabled,
-			}
+		showVideoButton() {
+			return this.sharedData.videoEnabled
 		},
 
 		videoButtonTooltip() {
@@ -297,22 +343,19 @@ export default {
 	display: inline-block;
 	background-color: transparent !important;
 	border: none;
-	width: 32px;
-	height: 32px;
-	background-size: 22px;
+	padding: 0 12px;
+}
 
-	&.hidden {
-		display: none;
-	}
+.iceFailedIndicator {
+	opacity: .8 !important;
 }
 
-.muteIndicator:not(.icon-audio):not(.icon-audio-off),
 .screensharingIndicator.screen-off,
 .iceFailedIndicator.not-failed {
 	display: none;
 }
 
-.muteIndicator.icon-audio-off,
+.muteIndicator[disabled],
 .hideRemoteVideo {
 	opacity: .7;
 }
@@ -324,8 +367,4 @@ export default {
 	}
 }
 
-.iceFailedIndicator {
-	opacity: .8 !important;
-}
-
 </style>
diff --git a/src/components/MediaDevicesPreview.vue b/src/components/MediaDevicesPreview.vue
index ab96a9bc0..75cb93acc 100644
--- a/src/components/MediaDevicesPreview.vue
+++ b/src/components/MediaDevicesPreview.vue
@@ -28,12 +28,21 @@
 		<div class="preview preview-audio">
 			<div v-if="!audioPreviewAvailable"
 				class="preview-not-available">
-				<div v-if="audioStreamError"
-					class="icon icon-error" />
-				<div v-else-if="!audioInputId"
-					class="icon icon-audio-off" />
-				<div v-else-if="!enabled"
-					class="icon icon-audio" />
+				<AlertCircle
+					v-if="audioStreamError"
+					:size="64"
+					title=""
+					fill-color="#999" />
+				<MicrophoneOff
+					v-else-if="!audioInputId"
+					:size="64"
+					title=""
+					fill-color="#999" />
+				<Microphone
+					v-else-if="!enabled"
+					:size="64"
+					title=""
+					fill-color="#999" />
 				<div v-else-if="!audioStream"
 					class="icon icon-loading" />
 				<p v-if="audioStreamErrorMessage">
@@ -44,7 +53,10 @@
 				 reference is always valid once mounted. -->
 			<div v-show="audioPreviewAvailable"
 				class="volume-indicator-wrapper">
-				<div class="icon icon-audio" />
+				<Microphone
+					:size="64"
+					title=""
+					fill-color="#999" />
 				<span ref="volumeIndicator"
 					class="volume-indicator"
 					:style="{ 'height': currentVolumeIndicatorHeight + 'px' }" />
@@ -58,12 +70,21 @@
 		<div class="preview preview-video">
 			<div v-if="!videoPreviewAvailable"
 				class="preview-not-available">
-				<div v-if="videoStreamError"
-					class="icon icon-error" />
-				<div v-else-if="!videoInputId"
-					class="icon icon-video-off" />
-				<div v-else-if="!enabled"
-					class="icon icon-video" />
+				<AlertCircle
+					v-if="videoStreamError"
+					:size="64"
+					title=""
+					fill-color="#999" />
+				<VideoOff
+					v-else-if="!videoInputId"
+					:size="64"
+					title=""
+					fill-color="#999" />
+				<VideoIcon
+					v-else-if="!enabled"
+					:size="64"
+					title=""
+					fill-color="#999" />
 				<div v-else-if="!videoStream"
 					class="icon icon-loading" />
 				<p v-if="videoStreamErrorMessage">
@@ -83,6 +104,11 @@
 <script>
 import attachMediaStream from 'attachmediastream'
 import hark from 'hark'
+import AlertCircle from 'vue-material-design-icons/AlertCircle'
+import Microphone from 'vue-material-design-icons/Microphone'
+import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
+import Video from 'vue-material-design-icons/Video'
+import VideoOff from 'vue-material-design-icons/VideoOff'
 import { mediaDevicesManager } from '../utils/webrtc/index'
 import MediaDevicesSelector from './MediaDevicesSelector'
 
@@ -91,7 +117,12 @@ export default {
 	name: 'MediaDevicesPreview',
 
 	components: {
+		AlertCircle,
 		MediaDevicesSelector,
+		Microphone,
+		MicrophoneOff,
+		'VideoIcon': Video,
+		VideoOff,
 	},
 
 	props: {
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 5070bccfd..de404b4c7 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -72,9 +72,13 @@
 				v-if="showModerationOptions && canFullModerate && isInCall">
 				<ActionSeparator />
 				<ActionButton
-					icon="icon-audio"
 					:close-after-click="true"
 					@click="forceMuteOthers">
+					<MicrophoneOff
+						slot="icon"
+						:size="16"
+						decorative
+						title="" />
 					{{ t('spreed', 'Mute others') }}
 				</ActionButton>
 			</template>
@@ -106,6 +110,7 @@ import CallButton from './CallButton'
 import BrowserStorage from '../../services/BrowserStorage'
 import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
+import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
 import { CONVERSATION, PARTICIPANT } from '../../constants'
 import { generateUrl } from '@nextcloud/router'
 import { callParticipantCollection } from '../../utils/webrtc/index'
@@ -120,6 +125,7 @@ export default {
 		ActionLink,
 		CallButton,
 		ActionSeparator,
+		MicrophoneOff,
 	},
 
 	props: {