Merge pull request #447 from raimund-schluessler/fix/noid/tag-style

fix: adjust tag style to NcSelect
raimund-schluessler · Jan 5, 2024 · 60203a8 · 60203a8
2 parents a8192e4 + 8543862
commit 60203a8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -60,7 +60,7 @@ import {
 
 import Folder from 'vue-material-design-icons/Folder.vue'
 import MapMarker from 'vue-material-design-icons/MapMarker.vue'
-import Tag from 'vue-material-design-icons/Tag.vue'
+import TagMultiple from 'vue-material-design-icons/TagMultiple.vue'
 
 export default {
 	name: 'App',
@@ -72,7 +72,7 @@ export default {
 		AppNavigationSettings,
 		Folder,
 		MapMarker,
-		Tag,
+		TagMultiple,
 	},
 	data() {
 		return {
@@ -91,7 +91,7 @@ export default {
 				{
 					name: t('inventory', 'Tags'),
 					id: 'tags',
-					icon: 'Tag',
+					icon: 'TagMultiple',
 				},
 			],
 		}

diff --git a/src/components/TagList.vue b/src/components/TagList.vue
@@ -45,22 +45,28 @@ export default {
 	display: flex;
 
 	li {
-		background-color: var(--color-background-dark);
-		border: var(--vs-selected-border-width) var(--vs-selected-border-style) var(--vs-selected-border-color);
-		border-radius: var(--border-radius-large);
-		color: var(--color-main-text);
-		margin-right: var(--default-grid-baseline);
-		min-height: 36px;
+		height: 32px;
+		overflow: hidden;
+		display: flex;
+		padding: 0 8px 0 12px;
+		background-color: var(--color-primary-element-light);
+		border: none;
+		border-radius: 18px !important;
+		margin: 4px 2px;
+		align-items: center;
+		cursor: pointer;
 
 		&:last-child {
 			margin-right: 0;
 		}
 
 		a {
-			display: flex;
-			align-items: center;
-			padding: 0 .5em;
-			min-height: 34px;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			width: 100%;
+			text-align: center;
+			cursor: pointer;
 		}
 	}
 }

diff --git a/src/views/AppContent/Tags.vue b/src/views/AppContent/Tags.vue
@@ -33,7 +33,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		<NcEmptyContent v-else :name="loading ? t('inventory', 'Loading available tags.') : t('inventory', 'Please select a tag to search for.')">
 			<template #icon>
 				<NcLoadingIcon v-if="loading" />
-				<Tag v-else :size="50" />
+				<TagMultiple v-else :size="50" />
 			</template>
 		</NcEmptyContent>
 	</div>
@@ -50,7 +50,7 @@ import {
 	NcSelect,
 } from '@nextcloud/vue'
 
-import Tag from 'vue-material-design-icons/Tag.vue'
+import TagMultiple from 'vue-material-design-icons/TagMultiple.vue'
 
 import { mapGetters, mapActions } from 'vuex'
 
@@ -60,7 +60,7 @@ export default {
 		NcLoadingIcon,
 		NcSelect,
 		EntityTable,
-		Tag,
+		TagMultiple,
 	},
 	beforeRouteUpdate(to, from, next) {
 		if (to.params.path !== from.params.path) {