Fix color picker in sidebar

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

src/components/ColorPicker.vue

@@ -21,18 +21,20 @@
   -->
 
 <template>
-	<div class="color-picker">
+	<div v-click-outside="hidePicker" class="color-picker">
 		<div class="color-picker-compact">
-			<Compact :palette="defaultColors" @input="updateColor" v-model="color"></Compact>
-			<div class="custom-color-button icon-colorpicker" :style="{'background-color': color.hex}" @click="showFullPicker=!showFullPicker"></div>
+			<Compact :palette="defaultColors" v-model="color" @input="updateColor" />
+			<div :style="{'background-color': color.hex}" class="custom-color-button icon-colorpicker" @click.prevent="showFullPicker=!showFullPicker" />
 		</div>
-		<Chrome v-if="showFullPicker" :palette="defaultColors" @input="updateColor" v-model="color"></Chrome>
+		<Chrome v-if="showFullPicker" :palette="defaultColors" v-model="color"
+			@input="updateColor" />
 	</div>
 </template>
 
 <script>
 // TODO: import styles manually if possible
 import { Compact, Chrome } from 'vue-color'
+import ClickOutside from 'vue-click-outside'
 
 export default {
 	name: 'ColorPicker',
@@ -40,17 +42,28 @@
 		Compact,
 		Chrome
 	},
-		props: ['value'],
+	directives: {
+		ClickOutside
+	},
+	props: {
+		value: {
+			type: [String, Object],
+			default: null
+		}
+	},
 	data() {
 		return {
 			color: { hex: this.value },
 			defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
-				showFullPicker: false,
+			showFullPicker: false
 		}
 	},
 	methods: {
 		updateColor() {
 			this.$emit('input', this.color)
+		},
+		hidePicker() {
+			this.showFullPicker = false
 		}
 	}
 }
@@ -59,17 +72,28 @@
 <style scoped>
 	div.color-picker {
 		display: block !important;
+		overflow: hidden;
+		border-radius: 3px;
+	}
+</style>
+<style lang="scss">
+	$color-field-width: 27px;
+	#content .color-picker {
+		// this is required to overwrite
+		// #app-navigation .app-navigation-entry-edit form, #app-navigation .app-navigation-entry-edit div
+		// which has a to wide scope in the server styles
+		div {
+			width: auto;
+			display: block;
 		}
 		.color-picker-compact {
 			display: flex;
 		}
 		.custom-color-button {
-		width: 24px;
-		height: 24px;
+			width: $color-field-width;
+			height: $color-field-width;
 			display: block;
-	}
-	.vc-chrome {
-		display: block !important;
+			flex-grow: 1;
 		}
 
 		.vc-compact {
@@ -79,9 +103,11 @@
 			background-color: transparent;
 			width: auto;
 		}
-</style>
-<style lang="scss">
-	.color-picker {
+
+		.vc-chrome {
+			border-radius: 0 3px;
+			box-shadow: 0 0 2px var(--color-box-shadow);
+		}
 		.vc-chrome-fields-wrap {
 			display: none !important;
 		}
@@ -91,10 +117,40 @@
 		}
 		.vc-compact-color-item {
 			display: inline-flex;
-			height: 24px;
-			width: 24px;
+			height: $color-field-width;
+			width: $color-field-width;
 			padding: 0;
 			margin: 0;
 		}
+		.vc-chrome-controls {
+			display: flex;
+		}
+		.vc-chrome-active-color {
+			position: relative;
+			width: 30px;
+			height: 30px;
+			border-radius: 15px;
+			overflow: hidden;
+			z-index: 1;
+		}
+		.vc-chrome-color-wrap {
+			position: relative;
+			width: 36px;
+		}
+		.vc-saturation-pointer {
+			cursor: pointer;
+			position: absolute;
+			width: 12px;
+			height: 10px;
+		}
+		.vc-chrome-alpha-wrap {
+			display: none;
+		}
+		.vc-chrome-hue-wrap {
+			position: relative;
+			height: 10px;
+			margin-bottom: 8px;
+			margin-top: 10px;
+		}
 	}
 </style>

src/components/navigation/AppNavigationAddBoard.vue

@@ -28,20 +28,20 @@
 		</a>
 
 		<!-- edit entry -->
-		<div v-if="editing" class="app-navigation-entry-edit-copy">
+		<div v-if="editing" class="app-navigation-entry-edit">
 			<form @submit.prevent.stop="createBoard">
 				<input :placeholder="t('deck', 'New board title')" type="text">
 				<input type="submit" value="" class="icon-confirm">
 				<input type="submit" value="" class="icon-close"
 					@click.stop.prevent="cancelEdit">
 			</form>
-			<ColorPicker v-model="color"></ColorPicker>
+			<ColorPicker v-model="color" />
 		</div>
 	</li>
 </template>
 
 <script>
-import ColorPicker from '../ColorPicker';
+import ColorPicker from '../ColorPicker'
 export default {
 	name: 'AppNavigationAddBoard',
 	components: { ColorPicker },
@@ -77,19 +77,9 @@ export default {
 	}
 }
 </script>
-<style>
-	#app-navigation .app-navigation-entry-edit-copy {
-		width: calc(100% - 1px);
-		transition: transform 250ms ease-in-out, opacity 250ms ease-in-out, z-index 250ms ease-in-out;
-		position: absolute;
-		left: 0;
-		background-color: var(--color-main-background);
-		box-sizing: border-box;
+<style scoped>
+	#app-navigation .app-navigation-entry-edit div {
+		width: auto;
 		display: block;
-		position: absolute;
-		background: #fff;
-		height: auto;
-		z-index: 250;
-		padding-left: 38px !important;
 	}
 </style>