Fix styling in label color picker and pick random default colors

Signed-off-by: Julius Härtl <jus@bitgrid.net>

package-lock.json

@@ -3570,9 +3570,9 @@
 			}
 		},
 		"@nextcloud/vue": {
-			"version": "1.2.8",
+			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-1.2.8.tgz",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-1.3.0.tgz",
-			"integrity": "sha512-YEiI+Cu7v+xRXgZ15vK/pcbOEyOcy6PHI90/JMHsVJVVGTYijy5oeG4izQFc0+/oC1idgbShrwN4Cr1W1JfxWA==",
+			"integrity": "sha512-zqSLvrp+pX012qNBbJBuE/Z9MPv/A6fovsro2nkGCoO0ppBD+W9gmjzLa6D9jRHN24+BmDWB3lNGd9T/G0q3Fw==",
 			"requires": {
 				"@nextcloud/axios": "^1.1.0",
 				"@nextcloud/router": "^1.0.0",

package.json

@@ -32,7 +32,7 @@
 		"@nextcloud/axios": "^1.3.1",
 		"@nextcloud/l10n": "^1.0.1",
 		"@nextcloud/router": "^1.0.0",
-		"@nextcloud/vue": "^1.2.8",
+		"@nextcloud/vue": "^1.3.0",
 		"fuse.js": "^3.4.6",
 		"nextcloud-server": "^0.15.10",
 		"nextcloud-vue-collections": "^0.7.1",

src/components/board/BoardSidebar.vue

@@ -25,22 +25,32 @@
 		:actions="[]"
 		:title="board.title"
 		@close="closeSidebar">
-		<AppSidebarTab :order="0" name="Sharing" icon="icon-shared">
+		<AppSidebarTab id="sharing"
+			:order="0"
+			:name="t('deck', 'Sharing')"
+			icon="icon-shared">
 			<SharingTabSidebar :board="board" />
 		</AppSidebarTab>
 
-		<AppSidebarTab :order="1" name="Tags" icon="icon-tag">
+		<AppSidebarTab id="tags"
+			:order="1"
+			:name="t('deck', 'Tags')"
+			icon="icon-tag">
 			<TagsTabSidebar :board="board" />
 		</AppSidebarTab>
 
 		<AppSidebarTab v-if="canEdit"
+			id="deleted"
 			:order="2"
-			name="Deleted items"
+			:name="t('deck', 'Deleted items')"
 			icon="icon-delete">
 			<DeletedTabSidebar :board="board" />
 		</AppSidebarTab>
 
-		<AppSidebarTab :order="3" name="Timeline" icon="icon-activity">
+		<AppSidebarTab id="activity"
+			:order="3"
+			:name="t('deck', 'Timeline')"
+			icon="icon-activity">
 			<TimelineTabSidebar :board="board" />
 		</AppSidebarTab>
 	</AppSidebar>

src/components/board/TagsTabSidebar.vue

@@ -4,10 +4,10 @@
 			<li v-for="label in labels" :key="label.id" :class="{editing: (editingLabelId === label.id)}">
 				<!-- Edit Tag -->
 				<template v-if="editingLabelId === label.id">
-					<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
-						<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
-					</ColorPicker>
 					<form class="label-form" @submit.prevent="updateLabel(label)">
+						<ColorPicker class="color-picker-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
+							<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker" />
+						</ColorPicker>
 						<input v-model="editingLabel.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
 							:disabled="!editLabelObjValidated"
@@ -38,10 +38,10 @@
 			<li v-if="addLabel" class="editing">
 				<!-- New Tag -->
 				<template>
-					<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
-						<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
-					</ColorPicker>
 					<form class="label-form" @submit.prevent="clickAddLabel">
+						<ColorPicker class="color-picker-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
+							<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker" />
+						</ColorPicker>
 						<input v-model="addLabelObj.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
 							:disabled="!addLabelObjValidated"
@@ -81,7 +81,7 @@ export default {
 			addLabelObj: null,
 			addLabel: false,
 			missingDataLabel: t('deck', 'title and color value must be provided'),
-			defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
+			defaultColors: ['31CC7C', '17CCC', 'FF7A66', 'F1DB50', '7C31CC', 'CC317C', '3A3B3D', 'CACBCD'],
 		}
 	},
 	computed: {
@@ -133,7 +133,7 @@ export default {
 			this.editingLabelId = null
 		},
 		clickShowAddLabel() {
-			this.addLabelObj = { cardId: null, color: '000000', title: '' }
+			this.addLabelObj = { cardId: null, color: this.defaultColors[Math.floor(Math.random() * this.defaultColors.length)], title: '' }
 			this.addLabel = true
 		},
 		clickAddLabel() {
@@ -145,9 +145,13 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+	$clickable-area: 37px;
+
 	.labels li {
 		display: flex;
 		margin-bottom: 3px;
+		align-items: stretch;
+		height: $clickable-area;
 
 		.label-title {
 			flex-grow: 1;
@@ -158,23 +162,27 @@ export default {
 			}
 		}
 		&:not(.editing) button {
-			width: 44px;
+			width: $clickable-area;
-			margin: 0;
+			margin: 0 0 0 -3px;
-			margin-left: -3px;
 		}
 
-		.app-navigation-entry-bullet-wrapper {
+		.color-picker-wrapper {
-		position: absolute;
+			&, &::v-deep > .trigger {
-		width: 44px !important;
+				width: $clickable-area;
-		margin: 6px;
+				padding: 3px;
-		height: 44px;
+				display: flex;
-		.color0 {
+				align-items: stretch;
-			width: 30px !important;
+				position: relative;
-			height: 30px;
+			}
-			border-radius: 50%;
+
-			background-size: 14px;
+			.color0 {
+				position: absolute;
+				width: calc(#{$clickable-area} - 6px);
+				height: calc(#{$clickable-area} - 6px);
+				background-size: 14px;
+				border-radius: 50%;
+			}
 		}
-	}
 
 		&.editing {
 			display: block;
@@ -187,12 +195,11 @@ export default {
 		}
 		button,
 		input:not([type='text']):last-child {
-			border-bottom-right-radius: var(--border-radius);
+			min-width: $clickable-area;
-			border-top-right-radius: var(--border-radius);
+			border-radius: 0 var(--border-radius) var(--border-radius) 0;
-			border-bottom-left-radius: 0;
-			border-top-left-radius: 0;
 			margin-left: -1px;
 			width: 35px;
+			background-color: var(--color-main-background);
 		}
 	}
 </style>

src/components/card/CardSidebar.vue

@@ -26,7 +26,10 @@
 		:subtitle="subtitle"
 		@close="closeSidebar">
 		<template #secondary-actions />
-		<AppSidebarTab :order="0" name="Details" icon="icon-home">
+		<AppSidebarTab id="details"
+			:order="0"
+			:name="t('deck', 'Details')"
+			icon="icon-home">
 			<div class="section-wrapper">
 				<div v-tooltip="t('deck', 'Tags')" class="section-label icon-tag">
 					<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
@@ -117,15 +120,24 @@
 			<VueEasymde ref="markdownEditor" v-model="copiedCard.description" :configs="mdeConfig" />
 		</AppSidebarTab>
 
-		<AppSidebarTab :order="1" :name="t('deck', 'Attachments')" icon="icon-attach">
+		<AppSidebarTab id="attachments"
+			:order="1"
+			:name="t('deck', 'Attachments')"
+			icon="icon-attach">
 			<CardSidebarTabAttachments :card="currentCard" />
 		</AppSidebarTab>
 
-		<AppSidebarTab :order="2" :name="t('deck', 'Comments')" icon="icon-comment">
+		<AppSidebarTab id="comments"
+			:order="2"
+			:name="t('deck', 'Comments')"
+			icon="icon-comment">
 			<CardSidebarTabComments :card="currentCard" />
 		</AppSidebarTab>
 
-		<AppSidebarTab :order="3" :name="t('deck', 'Timeline')" icon="icon-activity">
+		<AppSidebarTab id="timeline"
+			:order="3"
+			:name="t('deck', 'Timeline')"
+			icon="icon-activity">
 			<CardSidebarTabActivity :card="currentCard" />
 		</AppSidebarTab>
 	</AppSidebar>