fix(tags): Make unreadable tags readable

src/components/Envelope.vue

@@ -28,7 +28,7 @@
 				class="app-content-list-item-star svg icon-important"
 				:data-starred="isImportant ? 'true' : 'false'"
 				@click.prevent="hasWriteAcl ? onToggleImportant() : false"
 				v-html="importantSvg" />
 			<JunkIcon v-if="data.flags.$junk"
 				:size="18"
 				class="app-content-list-item-star junk-icon-style"
@@ -288,14 +288,7 @@
 			</template>
 		</template>
 		<template #extra>
-			<div v-for="tag in tags"
-				:key="tag.id"
-				class="tag-group">
-				<div class="tag-group__bg"
-					:style="{'background-color': tag.color}" />
-				<span class="tag-group__label"
-					:style="{color: tag.color}">{{ tag.displayName }} </span>
-			</div>
+			<TagGroup :tags="tags" />
 			<MoveModal v-if="showMoveModal"
 				:account="account"
 				:envelopes="[data]"
@@ -357,6 +350,7 @@
 import TagIcon from 'vue-material-design-icons/Tag.vue'
 import TagModal from './TagModal.vue'
 import EventModal from './EventModal.vue'
+import TagGroup from './TagGroup.vue'
 import TaskModal from './TaskModal.vue'
 import EnvelopePrimaryActions from './EnvelopePrimaryActions.vue'
 import { hiddenTags } from './tags.js'
@@ -393,6 +387,7 @@
 		MoveModal,
 		OpenInNewIcon,
 		PlusIcon,
+		TagGroup,
 		TagIcon,
 		TagModal,
 		Star,
@@ -960,31 +955,6 @@
 :deep(.list-item__extra) {
 	margin-left: 41px !important;
 }
-.tag-group__label {
-	margin: 0 7px;
-	z-index: 2;
-	font-size: calc(var(--default-font-size) * 0.8);
-	font-weight: bold;
-	padding-left: 2px;
-	padding-right: 2px;
-}
-.tag-group__bg {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	opacity: 15%;
-}
-.tag-group {
-	display: inline-block;
-	border: 1px solid transparent;
-	border-radius: var(--border-radius-pill);
-	position: relative;
-	margin: 0 1px;
-	overflow: hidden;
-	left: 4px;
-}
 .list-item__wrapper:deep() {
 	list-style: none;
 }

src/components/Tag.vue

@@ -0,0 +1,87 @@
+<!--
+  - @copyright 2023 Christoph Wurst <[email protected]>
+  -
+  - @author 2023 Christoph Wurst <[email protected]>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<div class="tag"
+		:class="{ 'tag--small': small }"
+		:style="{ 'background-color': convertHex(color, 0.2) }">
+		<span class="tag__label"
+			:style="{ 'color': convertHex(color, 0.8) }">{{ label }}</span>
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'Tag',
+	props: {
+		label: {
+			required: true,
+			type: String,
+		},
+		color: {
+			required: true,
+			type: String,
+		},
+		small: {
+			default: false,
+			type: Boolean,
+		},
+	},
+	methods: {
+		convertHex(color, opacity) {
+			if (color.length === 4) {
+				const r = parseInt(color.substring(1, 2), 16)
+				const g = parseInt(color.substring(2, 3), 16)
+				const b = parseInt(color.substring(3, 4), 16)
+				return `rgba(${r}, ${g}, ${b}, ${opacity})`
+			} else {
+				const r = parseInt(color.substring(1, 3), 16)
+				const g = parseInt(color.substring(3, 5), 16)
+				const b = parseInt(color.substring(5, 7), 16)
+				return `rgba(${r}, ${g}, ${b}, ${opacity})`
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.tag {
+	display: inline-block;
+	border-radius: var(--border-radius-pill);
+	padding: 4px 12px;
+
+	&__label {
+		font-size: var(--default-font-size);
+		font-weight: bold;
+		filter: brightness(0.3);
+	}
+
+	&--small {
+		padding: 0 8px;
+
+		.tag__label {
+			font-size: calc(var(--default-font-size) * 0.8);
+		}
+	}
+}
+</style>

src/components/TagItem.vue → src/components/TagEditor.vue

@@ -1,12 +1,6 @@
 <template>
-	<div class="tag-group">
-		<button class="tag-group__label"
-			:style="{
-				color: convertHex(tag.color, 1),
-				'background-color': convertHex(tag.color, 0.15)
-			}">
-			{{ tag.displayName }}
-		</button>
+	<div class="tag-editor">
+		<Tag class="tag-editor__tag" :label="tag.displayName" :color="tag.color" />
 		<Actions :force-menu="true">
 			<NcActionButton v-if="renameTagLabel"
 				@click="openEditTag">
@@ -57,8 +51,10 @@ import { showInfo } from '@nextcloud/dialogs'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import IconEdit from 'vue-material-design-icons/Pencil.vue'
 
+import Tag from './Tag.vue'
+
 export default {
-	name: 'TagItem',
+	name: 'TagEditor',
 	components: {
 		NcColorPicker,
 		Actions,
@@ -68,6 +64,7 @@ export default {
 		IconLoading,
 		DeleteIcon,
 		IconEdit,
+		Tag,
 	},
 	props: {
 		tag: {
@@ -196,7 +193,7 @@ export default {
 		position: relative;
 	}
 }
-.tag-group {
+.tag-editor {
 	display: block;
 	position: relative;
 	margin: 0 1px;
@@ -211,17 +208,6 @@ export default {
 		background-color: var(--color-border-dark);
 	}
 }
-.tag-group__label {
-	z-index: 2;
-	font-weight: bold;
-	border: none;
-	background-color: transparent;
-	padding-left: 10px;
-	padding-right: 10px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	max-width: 94px;
-}
 .action-item {
 	right: 8px;
 	float: right;

src/components/TagGroup.vue

@@ -0,0 +1,58 @@
+<!--
+  - @copyright 2023 Christoph Wurst <[email protected]>
+  -
+  - @author 2023 Christoph Wurst <[email protected]>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<div class="tag-group">
+		<Tag v-for="tag in tags"
+			:key="tag.id"
+			class="tag-group__tag"
+			:label="tag.displayName"
+			:color="tag.color"
+			:small="true" />
+	</div>
+</template>
+
+<script>
+import Tag from './Tag.vue'
+
+export default {
+	name: 'TagGroup',
+	components: {
+		Tag,
+	},
+	props: {
+		tags: {
+			required: true,
+			type: Array,
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.tag-group {
+	padding: 0 6px;
+
+	&__tag {
+		margin: 1px;
+	}
+}
+</style>

src/components/TagModal.vue

@@ -31,7 +31,7 @@
 			<h2 class="tag-title">
 				{{ t('mail', 'Add default tags') }}
 			</h2>
-			<TagItem v-for="tag in tags"
+			<TagEditor v-for="tag in tags"
 				:key="tag.id"
 				:tag="tag"
 				:envelopes="envelopes"
@@ -68,7 +68,7 @@
 <script>
 import { NcModal as Modal, NcActionText as ActionText, NcActionInput as ActionInput, NcLoadingIcon as IconLoading, NcButton } from '@nextcloud/vue'
 import DeleteTagModal from './DeleteTagModal.vue'
-import TagItem from './TagItem.vue'
+import TagEditor from './TagEditor.vue'
 import IconTag from 'vue-material-design-icons/Tag.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import { showError, showInfo } from '@nextcloud/dialogs'
@@ -90,7 +90,7 @@ export default {
 		DeleteTagModal,
 		IconTag,
 		IconLoading,
-		TagItem,
+		TagEditor,
 		NcButton,
 		IconAdd,
 	},