From 167448dde1c660af3afba63bea5cc8521077f81c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Wed, 29 Jan 2020 10:59:12 +0100
Subject: [PATCH] added new color picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
---
 src/components/ColorPicker.vue                | 175 ------------------
 src/components/board/TagsTabSidebar.vue       |  31 ++--
 .../navigation/AppNavigationAddBoard.vue      |  23 ++-
 .../navigation/AppNavigationBoard.vue         |   3 +-
 4 files changed, 41 insertions(+), 191 deletions(-)
 delete mode 100644 src/components/ColorPicker.vue

diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue
deleted file mode 100644
index 32e90f1eb..000000000
--- a/src/components/ColorPicker.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  -
-  - @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 v-click-outside="hidePicker" class="color-picker">
-		<div class="color-picker-compact">
-			<Compact v-model="color" :palette="defaultColors" @input="updateColor" />
-			<div :style="{'background-color': color.hex}" class="custom-color-button icon-colorpicker" @click.prevent="showFullPicker=!showFullPicker" />
-		</div>
-		<Chrome v-if="showFullPicker"
-			v-model="color"
-			:palette="defaultColors"
-			@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',
-	components: {
-		Compact,
-		Chrome,
-	},
-	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,
-		}
-	},
-	methods: {
-		updateColor() {
-			this.$emit('input', this.color.hex)
-		},
-		hidePicker() {
-			this.showFullPicker = false
-		},
-	},
-}
-</script>
-
-<style scoped lang="scss">
-	$color-field-width: 27px;
-
-	// #app-navigation .app-navigation-entry-edit form, #app-navigation .app-navigation-entry-edit div
-	// has a to wide scope in the server styles so we need to force some width and display styles
-
-	.color-picker::v-deep {
-		display: block !important;
-		overflow: hidden;
-		border-radius: 3px;
-		margin-bottom: 10px;
-
-		.color-picker-compact {
-			display: flex !important;
-		}
-		.custom-color-button {
-			width: $color-field-width !important;
-			height: $color-field-width;
-			display: inline-flex !important;
-			flex-grow: 1;
-			flex-basis: 44px;
-		}
-
-		.vc-compact {
-			flex-grow: 5;
-			width: initial;
-			max-width: calc(8 * #{$color-field-width});
-			display: block !important;
-			padding: 0;
-			border-radius: 0;
-			box-shadow: none;
-			background-color: transparent;
-		}
-
-		.vc-chrome {
-			width: 100%;
-			border-radius: 0 3px;
-			box-shadow: 0 0 2px var(--color-box-shadow);
-
-			.vc-saturation-pointer, .vc-saturation-circle {
-				width: 12px !important;
-				height: 12px !important;
-			}
-
-		}
-
-		.vc-chrome-fields-wrap, .vc-chrome-body {
-			display: none !important;
-		}
-
-		.vc-compact-colors {
-			display: flex;
-		}
-		.vc-compact-color-item {
-			display: inline-flex;
-			height: $color-field-width;
-			width: 100%;
-			max-width: $color-field-width;
-			padding: 0;
-			margin: 0;
-		}
-		.vc-compact-dot {
-			width: 10px !important;
-			height: 10px;
-			position: unset;
-			border-radius: 50%;
-			opacity: 1;
-			background: #fff;
-			margin: auto;
-		}
-		.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>
diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue
index a6c49659d..a4417e5ab 100644
--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -2,7 +2,11 @@
 	<div>
 		<ul class="labels">
 			<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)">
 						<input v-model="editingLabel.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
@@ -15,7 +19,6 @@
 							class="icon-close"
 							@click="editingLabelId = null">
 					</form>
-					<ColorPicker :value="'#' + editingLabel.color" @input="updateColor" />
 				</template>
 				<template v-else>
 					<div :style="{ backgroundColor: `#${label.color}`, color:textColor(label.color) }" class="label-title">
@@ -33,7 +36,11 @@
 			</li>
 
 			<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">
 						<input v-model="addLabelObj.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
@@ -46,7 +53,6 @@
 							class="icon-close"
 							@click="addLabel=false">
 					</form>
-					<ColorPicker :value="'#' + addLabelObj.color" @input="updateColor" />
 				</template>
 			</li>
 			<button v-if="canManage" @click="clickShowAddLabel()">
@@ -60,7 +66,7 @@
 
 import { mapGetters } from 'vuex'
 import Color from '../../mixins/color'
-import ColorPicker from '../ColorPicker'
+import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
 
 export default {
 	name: 'TagsTabSidebar',
@@ -157,15 +163,18 @@ export default {
 			margin-left: -3px;
 		}
 
-		.color-picker {
-			display: flex;
-		}
-
-		.color-picker-button {
-			width: 100px;
-			margin-left: 20px;
-			border-radius: 6px;
+		.app-navigation-entry-bullet-wrapper {
+		position: absolute;
+		width: 44px !important;
+		margin: 6px;
+		height: 44px;
+		.color0 {
+			width: 30px !important;
+			height: 30px;
+			border-radius: 50%;
+			background-size: 14px;
 		}
+	}
 
 		&.editing {
 			display: block;
diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
index 42f74f2ea..8184c9f16 100644
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -29,6 +29,9 @@
 
 		<!-- edit entry -->
 		<div v-if="editing" class="app-navigation-entry-edit">
+			<ColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
+				<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
+			</ColorPicker>
 			<form @submit.prevent.stop="createBoard">
 				<input :placeholder="t('deck', 'New board title')" type="text" required>
 				<input type="submit" value="" class="icon-confirm">
@@ -37,13 +40,14 @@
 					class="icon-close"
 					@click.stop.prevent="cancelEdit">
 			</form>
-			<ColorPicker v-model="color" />
+
+			<!-- <ColorPicker v-model="color" /> -->
 		</div>
 	</li>
 </template>
 
 <script>
-import ColorPicker from '../ColorPicker'
+import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
 export default {
 	name: 'AppNavigationAddBoard',
 	components: { ColorPicker },
@@ -79,9 +83,22 @@ export default {
 	},
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 	#app-navigation .app-navigation-entry-edit div {
 		width: auto;
 		display: block;
 	}
+	.app-navigation-entry-bullet-wrapper {
+		position: absolute;
+		left: 33px;
+		width: 44px !important;
+		margin: 6px;
+		height: 44px;
+		.color0 {
+			width: 30px !important;
+			height: 30px;
+			border-radius: 50%;
+			background-size: 14px;
+		}
+	}
 </style>
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 9b39149e1..4b6b4b8f0 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -62,7 +62,7 @@
 		<!-- edit entry -->
 		<div v-if="editing" class="app-navigation-entry-edit">
 			<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
-				<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet"></div>
+				<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 			</ColorPicker>
 			<form @submit.prevent.stop="applyEdit">
 				<input v-model="editTitle" type="text" required>
@@ -79,7 +79,6 @@
 <script>
 import { PopoverMenu } from '@nextcloud/vue/dist/Components/PopoverMenu'
 import ClickOutside from 'vue-click-outside'
-// import ColorPicker from '../ColorPicker'
 import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
 
 export default {