diff --git a/src/App.vue b/src/App.vue
index 4023f107..3d2767b7 100644
--- 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
index ae5af64d..bef26f7d 100644
--- 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
index ac0ff3ff..9cc10a97 100644
--- a/src/views/AppContent/Tags.vue
+++ b/src/views/AppContent/Tags.vue
@@ -33,7 +33,7 @@ License along with this library. If not, see .
-
+
@@ -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) {