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) {