feat: added material design icon picker for contexts

Signed-off-by: Elizabeth Danzberger <[email protected]>
nextcloud · Mar 27, 2024 · 8e462ad · 8e462ad
1 parent e2a396e
commit 8e462ad
Show file tree

Hide file tree

Showing 11 changed files with 5,519 additions and 5,246 deletions.
diff --git a/img/material/meta.json b/img/material/meta.json
diff --git a/src/modules/modals/CreateContext.vue b/src/modules/modals/CreateContext.vue
@@ -11,13 +11,17 @@
 					{{ t('tables', 'Title') }}
 				</div>
 				<div class="col-4" style="display: inline-flex;">
-					<!-- TODO replace with Context's icon picker -->
-					<NcEmojiPicker :close-on-select="true" @select="setIcon">
-						<NcButton type="tertiary" :aria-label="t('tables', 'Select icon for the application')"
-							:title="t('tables', 'Select icon')" @click.prevent>
-							{{ icon }}
+					<NcIconPicker :close-on-select="true" @select="setIcon">
+						<NcButton
+							type="tertiary"
+							:aria-label="t('tables', 'Select icon for the application')"
+							:title="t('tables', 'Select icon')"
+							@click.prevent>
+							<template #icon>
+								<NcIconSvgWrapper :svg="icon.svg" />
+							</template>
 						</NcButton>
-					</NcEmojiPicker>
+					</NcIconPicker>
 					<input v-model="title" :class="{ missing: errorTitle }" type="text"
 						:placeholder="t('tables', 'Title of the new application')" @input="titleChangedManually">
 				</div>
@@ -47,19 +51,23 @@
 </template>
 
 <script>
-import { NcModal, NcEmojiPicker, NcButton } from '@nextcloud/vue'
+import { NcModal, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import NcContextResource from '../../shared/components/ncContextResource/NcContextResource.vue'
+import NcIconPicker from '../../shared/components/ncIconPicker/NcIconPicker.vue'
+import svgHelper from '../../shared/components/ncIconPicker/mixins/svgHelper.js'
 
 export default {
 	name: 'CreateContext',
 	components: {
 		NcModal,
-		NcEmojiPicker,
+		NcIconPicker,
 		NcButton,
+		NcIconSvgWrapper,
 		NcContextResource,
 	},
+	mixins: [svgHelper],
 	props: {
 		showModal: {
 			type: Boolean,
@@ -69,7 +77,10 @@ export default {
 	data() {
 		return {
 			title: '',
-			icon: '😀',
+			icon: {
+				name: 'equalizer',
+				svg: null,
+			},
 			customIconChosen: false,
 			customTitleChosen: false,
 			errorTitle: false,
@@ -85,12 +96,17 @@ export default {
 			}
 		},
 	},
+	async mounted() {
+		await this.setIcon('equalizer')
+	},
 	methods: {
 		titleChangedManually() {
 			this.customTitleChosen = true
 		},
-		setIcon(icon) {
-			this.icon = icon
+		async setIcon(iconName) {
+			this.icon.name = iconName
+			this.icon.svg = await this.getContextIcon(iconName)
+
 			this.customIconChosen = true
 		},
 		actionCancel() {
@@ -119,7 +135,7 @@ export default {
 			})
 			const data = {
 				name: this.title,
-				iconName: this.icon,
+				iconName: this.icon.name,
 				description: this.description,
 				nodes: dataResources,
 			}
@@ -133,7 +149,7 @@ export default {
 		reset() {
 			this.title = ''
 			this.errorTitle = false
-			this.icon = '😀'
+			this.icon.name = 'equalizer'
 			this.customIconChosen = false
 			this.customTitleChosen = false
 		},

diff --git a/src/modules/modals/EditContext.vue b/src/modules/modals/EditContext.vue
@@ -11,13 +11,17 @@
 					{{ t('tables', 'Title') }}
 				</div>
 				<div class="col-4" style="display: inline-flex;">
-					<!-- TODO replace with Context's icon picker -->
-					<NcEmojiPicker :close-on-select="true" @select="emoji => icon = emoji">
-						<NcButton type="tertiary" :aria-label="t('tables', 'Select icon for application')"
-							:title="t('tables', 'Select icon')" @click.prevent>
-							{{ icon ? icon : '...' }}
+					<NcIconPicker :close-on-select="true" @select="setIcon">
+						<NcButton
+							type="tertiary"
+							:aria-label="t('tables', 'Select an icon for application')"
+							:title="t('tables', 'Select icon')"
+							@click.prevent>
+							<template #icon>
+								<NcIconSvgWrapper :svg="icon.svg" />
+							</template>
 						</NcButton>
-					</NcEmojiPicker>
+					</NcIconPicker>
 					<input v-model="title" :class="{ missing: errorTitle }" type="text"
 						:placeholder="t('tables', 'Title of the application')">
 				</div>
@@ -47,21 +51,25 @@
 </template>
 
 <script>
-import { NcModal, NcEmojiPicker, NcButton } from '@nextcloud/vue'
+import { NcModal, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import { mapGetters, mapState } from 'vuex'
 import NcContextResource from '../../shared/components/ncContextResource/NcContextResource.vue'
+import NcIconPicker from '../../shared/components/ncIconPicker/NcIconPicker.vue'
 import { NODE_TYPE_TABLE, NODE_TYPE_VIEW } from '../../shared/constants.js'
+import svgHelper from '../../shared/components/ncIconPicker/mixins/svgHelper.js'
 
 export default {
 	name: 'EditContext',
 	components: {
 		NcModal,
-		NcEmojiPicker,
 		NcButton,
+		NcIconPicker,
+		NcIconSvgWrapper,
 		NcContextResource,
 	},
+	mixins: [svgHelper],
 	props: {
 		showModal: {
 			type: Boolean,
@@ -75,7 +83,10 @@ export default {
 	data() {
 		return {
 			title: '',
-			icon: '',
+			icon: {
+				name: 'equalizer',
+				svg: null,
+			},
 			description: '',
 			errorTitle: false,
 			resources: [],
@@ -99,13 +110,17 @@ export default {
 			if (this.contextId) {
 				const context = this.getContext(this.contextId)
 				this.title = context.name
-				this.icon = context.iconName
+				this.setIcon(this.localContext.iconName)
 				this.description = context.description
 				this.resources = context ? [...this.getContextResources(context)] : []
 			}
 		},
 	},
 	methods: {
+		async setIcon(iconName) {
+			this.icon.name = iconName
+			this.icon.svg = await this.getContextIcon(iconName)
+		},
 		actionCancel() {
 			this.reset()
 			this.$emit('close')
@@ -126,13 +141,13 @@ export default {
 				})
 				const data = {
 					name: this.title,
-					iconName: this.icon,
+					iconName: this.icon.name,
 					description: this.description,
 					nodes: dataResources,
 				}
 				const res = await this.$store.dispatch('updateContext', { id: this.contextId, data })
 				if (res) {
-					showSuccess(t('tables', 'Updated context "{icon}{contextTitle}".', { icon: this.icon ? this.icon + ' ' : '', contextTitle: this.title }))
+					showSuccess(t('tables', 'Updated context "{contextTitle}".', { contextTitle: this.title }))
 					this.actionCancel()
 				}
 			}
@@ -141,7 +156,7 @@ export default {
 			const context = this.getContext(this.contextId)
 			this.title = ''
 			this.errorTitle = false
-			this.icon = ''
+			this.icon.name = 'equalizer'
 			this.description = ''
 			this.resources = context ? [...this.getContextResources(context)] : []
 		},

diff --git a/src/modules/navigation/partials/NavigationContextItem.vue b/src/modules/navigation/partials/NavigationContextItem.vue
@@ -4,7 +4,7 @@
 		:to="'/application/' + parseInt(context.id)">
 		<template #icon>
 			<template v-if="context.iconName">
-				{{ context.iconName }}
+				<NcIconSvgWrapper :svg="icon" />
 			</template>
 			<template v-else>
 				<TableIcon :size="20" />
@@ -21,25 +21,27 @@
 	</NcAppNavigationItem>
 </template>
 <script>
-import { NcAppNavigationItem, NcActionButton } from '@nextcloud/vue'
+import { NcAppNavigationItem, NcActionButton, NcIconSvgWrapper } from '@nextcloud/vue'
 import '@nextcloud/dialogs/dist/index.css'
 import { mapGetters } from 'vuex'
 import TableIcon from 'vue-material-design-icons/Table.vue'
 import { emit } from '@nextcloud/event-bus'
 import PlaylistEdit from 'vue-material-design-icons/PlaylistEdit.vue'
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
+import svgHelper from '../../../shared/components/ncIconPicker/mixins/svgHelper.js'
 
 export default {
 	name: 'NavigationContextItem',
 
 	components: {
 		PlaylistEdit,
 		TableIcon,
+		NcIconSvgWrapper,
 		NcAppNavigationItem,
 		NcActionButton,
 	},
 
-	mixins: [permissionsMixin],
+	mixins: [permissionsMixin, svgHelper],
 
 	props: {
 		context: {
@@ -48,9 +50,24 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			icon: null,
+		}
+	},
 	computed: {
 		...mapGetters(['activeContext']),
 	},
+
+	watch: {
+		'context.iconName': {
+			async handler() {
+				this.icon = await this.getContextIcon(this.context.iconName)
+			},
+			immediate: true,
+		},
+	},
+
 	methods: {
 		emit,
 		async editContext() {

diff --git a/src/pages/Context.vue b/src/pages/Context.vue
@@ -2,12 +2,14 @@
 	<div class="row">
 		<div v-if="loading" class="icon-loading" />
 		<div v-if="!loading && context">
-			<div class="content first-row">
-				<div class="row">
-					<h1> {{ activeContext.iconName }}&nbsp; {{ activeContext.name }}</h1>
+			<div class="content context">
+				<div class="row first-row">
+					<h1 class="context__title">
+						<NcIconSvgWrapper :svg="icon" :size="32" style="display: inline-block;" />&nbsp; {{ activeContext.name }}
+					</h1>
 				</div>
-				<div class="row">
-					<h3> {{ activeContext.description }}</h3>
+				<div class="row space-L context__description">
+					{{ activeContext.description }}
 				</div>
 			</div>
 
@@ -35,26 +37,30 @@
 import MainModals from '../modules/modals/Modals.vue'
 import Vuex, { mapState, mapGetters } from 'vuex'
 import Vue from 'vue'
+import { NcIconSvgWrapper } from '@nextcloud/vue'
 import TableWrapper from '../modules/main/sections/TableWrapper.vue'
 import CustomView from '../modules/main/sections/View.vue'
 import { emit } from '@nextcloud/event-bus'
 import { NODE_TYPE_TABLE, NODE_TYPE_VIEW } from '../shared/constants.js'
 import exportTableMixin from '../shared/components/ncTable/mixins/exportTableMixin.js'
+import svgHelper from '../shared/components/ncIconPicker/mixins/svgHelper.js'
 
 Vue.use(Vuex)
 
 export default {
 	components: {
 		MainModals,
+		NcIconSvgWrapper,
 		TableWrapper,
 		CustomView,
 	},
 
-	mixins: [exportTableMixin],
+	mixins: [exportTableMixin, svgHelper],
 
 	data() {
 		return {
 			loading: true,
+			icon: null,
 			viewSetting: {},
 			context: null,
 			contextResources: [],
@@ -110,6 +116,12 @@ export default {
 				await this.reload()
 			}
 		},
+		'context.iconName': {
+			async handler(value) {
+				this.icon = value ? await this.getContextIcon(value) : ''
+			},
+			immediate: true,
+		},
 	},
 
 	async mounted() {
@@ -125,6 +137,7 @@ export default {
 			this.loading = false
 		},
 		async loadContext() {
+			this.icon = await this.getContextIcon(this.activeContext.iconName)
 			this.contextResources = []
 			await this.$store.dispatch('loadContext', { id: this.activeContextId })
 			const index = this.contexts.findIndex(c => parseInt(c.id) === parseInt(this.activeContextId))
@@ -180,11 +193,29 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.content {
-	margin: 50px 50px 0;
+.context {
+	&__title {
+		display: inline-flex;
+	}
+
+	&__description {
+		margin: calc(3 * var(--default-grid-baseline, 4px));
+		max-width: 790px;
+		margin-left: 32px;
+	}
+
+	&:deep(.icon-vue) {
+		min-width: 32px;
+		min-height: 32px;
+	}
 }
 
 .resource {
 	margin: 40px 0;
+
+	&:deep(.row.first-row) {
+		margin-left: 20px;
+		padding-left: 0px;
+	}
 }
 </style>
diff --git a/src/shared/components/ncContextResource/ResourceList.vue b/src/shared/components/ncContextResource/ResourceList.vue
@@ -1,13 +1,10 @@
 <template>
 	<div>
-		<div class="resource-label">
-			{{ t('tables', 'Selected Resources') }}
-		</div>
 		<div v-if="loading" class="icon-loading" />
 		<ul v-if="getResources && getResources.length > 0" class="resource-list">
 			<div v-for="resource in getResources" :key="resource.key" class="row">
 				<div class="fix-col-2">
-					<div style="display:flex; align-items: center;">
+					<div style="display:flex; align-items: center; padding: 10px;">
 						{{ resource.emoji }} &nbsp; {{ resource.title }}
 					</div>
 				</div>