summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--css/icons.scss13
-rw-r--r--img/grid-view.svg1
-rw-r--r--img/promoted-view.svg1
-rw-r--r--src/components/CallView/shared/LocalMediaControls.vue21
-rw-r--r--src/components/missingMaterialDesignIcons/GridView.vue46
-rw-r--r--src/components/missingMaterialDesignIcons/PromotedView.vue44
6 files changed, 102 insertions, 24 deletions
diff --git a/css/icons.scss b/css/icons.scss
index a396d348c..0e0702496 100644
--- a/css/icons.scss
+++ b/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
diff --git a/img/grid-view.svg b/img/grid-view.svg
deleted file mode 100644
index f9e0d9259..000000000
--- a/img/grid-view.svg
+++ /dev/null
@@ -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>
diff --git a/img/promoted-view.svg b/img/promoted-view.svg
deleted file mode 100644
index 8a50397ed..000000000
--- a/img/promoted-view.svg
+++ /dev/null
@@ -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>
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index b938b06b5..1b3ae7941 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/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
},
diff --git a/src/components/missingMaterialDesignIcons/GridView.vue b/src/components/missingMaterialDesignIcons/GridView.vue
new file mode 100644
index 000000000..ed1e3be41
--- /dev/null
+++ b/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>
diff --git a/src/components/missingMaterialDesignIcons/PromotedView.vue b/src/components/missingMaterialDesignIcons/PromotedView.vue
new file mode 100644
index 000000000..550bbdcf2
--- /dev/null
+++ b/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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-07 12:44:48 +0000