Replace view icons with material design icons

Signed-off-by: Joas Schilling <coding@schilljs.com>

css/icons.scss

@@ -6,8 +6,6 @@
 @include icon-black-white('emoji-smile', 'spreed', 1);
 @include icon-black-white('lobby', 'spreed', 1);
 @include icon-black-white('text', 'filetypes', 1, true);
-@include icon-black-white('promoted-view', 'spreed', 1);
-@include icon-black-white('grid-view', 'spreed', 1);
 @include icon-black-white('folder-multiple-image', 'spreed', 1);
 
 // Mention bubbles in the chat input and messages
@@ -44,17 +42,6 @@
 	.icon-changelog {
 		background-image: url('../img/changelog.svg');
 	}
-
-	.forced-white {
-		filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-
-		&.icon-promoted-view {
-			background-image: url(icon-color-path('promoted-view', 'spreed', 'fff', 1));
-		}
-		&.icon-grid-view {
-			background-image: url(icon-color-path('toggle-pictures', 'actions', 'fff', 1, true));
-		}
-	}
 }
 
 // The atwho panel is a direct child of the body, so it is not affected by

img/grid-view.svg

@@ -1 +0,0 @@
-<svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><rect width="7" height="7" rx="2"/><rect y="9" width="7" height="7" rx="2"/><rect x="9" width="7" height="7" rx="2"/><rect x="9" y="9" width="7" height="7" rx="2"/></g></svg>

img/promoted-view.svg

@@ -1 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="13" height="9"/><rect x="1" y="12" width="3" height="3"/><rect x="6" y="12" width="3" height="3"/><rect x="11" y="12" width="3" height="3"/></svg>

src/components/CallView/shared/LocalMediaControls.vue

@@ -215,9 +215,16 @@
 				</ActionButton>
 				<!-- Call layout switcher -->
 				<ActionButton v-if="isInCall"
-					:icon="changeViewIconClass"
 					:close-after-click="true"
 					@click="changeView">
+					<GridView v-if="isGrid"
+						slot="icon"
+						:size="20"
+						decorative />
+					<PromotedView v-else
+						slot="icon"
+						:size="20"
+						decorative />
 					{{ changeViewText }}
 				</ActionButton>
 				<ActionSeparator />
@@ -237,11 +244,13 @@ import { emit } from '@nextcloud/event-bus'
 import { showMessage } from '@nextcloud/dialogs'
 import CancelPresentation from '../../missingMaterialDesignIcons/CancelPresentation.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal'
+import GridView from '../../missingMaterialDesignIcons/GridView.vue'
 import HandBackLeft from 'vue-material-design-icons/HandBackLeft'
 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 PresentToAll from '../../missingMaterialDesignIcons/PresentToAll.vue'
+import PromotedView from '../../missingMaterialDesignIcons/PromotedView.vue'
 import Video from 'vue-material-design-icons/Video'
 import VideoOff from 'vue-material-design-icons/VideoOff'
 import Blur from 'vue-material-design-icons/Blur'
@@ -273,10 +282,12 @@ export default {
 		ActionButton,
 		CancelPresentation,
 		DotsHorizontal,
+		GridView,
 		HandBackLeft,
 		Microphone,
 		MicrophoneOff,
 		PresentToAll,
+		PromotedView,
 		VideoIcon: Video,
 		VideoOff,
 		Monitor,
@@ -639,14 +650,6 @@ export default {
 			}
 		},
 
-		changeViewIconClass() {
-			if (this.isGrid) {
-				return 'icon-promoted-view'
-			} else {
-				return 'icon-grid-view'
-			}
-		},
-
 		isGrid() {
 			return this.$store.getters.isGrid
 		},

src/components/missingMaterialDesignIcons/GridView.vue

@@ -0,0 +1,46 @@
+<template functional>
+	<span :aria-hidden="props.decorative"
+		:aria-label="props.title"
+		:class="[data.class, data.staticClass]"
+		class="material-design-icon present-to-all-icon"
+		role="img"
+		v-bind="data.attrs"
+		v-on="listeners">
+		<svg :fill="props.fillColor"
+			class="material-design-icon__svg"
+			:width="props.size"
+			:height="props.size"
+			viewBox="0 0 16 16">
+			<g>
+				<rect width="7" height="7" rx="2" />
+				<rect y="9" width="7" height="7" rx="2" />
+				<rect x="9" width="7" height="7" rx="2" />
+				<rect x="9" y="9" width="7" height="7" rx="2" />
+			</g>
+		</svg>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'GridView',
+	props: {
+		title: {
+			type: String,
+			default: 'Grid View icon',
+		},
+		decorative: {
+			type: Boolean,
+			default: false,
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+		size: {
+			type: Number,
+			default: 24,
+		},
+	},
+}
+</script>

src/components/missingMaterialDesignIcons/PromotedView.vue

@@ -0,0 +1,44 @@
+<template functional>
+	<span :aria-hidden="props.decorative"
+		:aria-label="props.title"
+		:class="[data.class, data.staticClass]"
+		class="material-design-icon present-to-all-icon"
+		role="img"
+		v-bind="data.attrs"
+		v-on="listeners">
+		<svg :fill="props.fillColor"
+			class="material-design-icon__svg"
+			:width="props.size"
+			:height="props.size"
+			viewBox="0 0 16 16">
+			<rect x="1" y="1" width="13" height="9" />
+			<rect x="1" y="12" width="3" height="3" />
+			<rect x="6" y="12" width="3" height="3" />
+			<rect x="11" y="12" width="3" height="3" />
+		</svg>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'PromotedView',
+	props: {
+		title: {
+			type: String,
+			default: 'Promoted View icon',
+		},
+		decorative: {
+			type: Boolean,
+			default: false,
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+		size: {
+			type: Number,
+			default: 24,
+		},
+	},
+}
+</script>