From a15a00ab6bb7cf6933000f0ffced149339f0382e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Tue, 28 Jan 2020 11:58:03 +0100
Subject: [PATCH] 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>
---
 .../navigation/AppNavigationBoard.vue         | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index b15149e61..69b091f55 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -69,7 +69,12 @@
 					class="icon-close"
 					@click.stop.prevent="cancelEdit">
 			</form>
-			<ColorPicker v-model="editColor" />
+			<!-- <ColorPicker v-model="editColor" /> -->
+			<ColorPicker :value="`#${board.color}`" @input="updateColor">
+				<div :style="{ backgroundColor: getColor }" class="color0">
+					Click to choose color
+				</div>
+			</ColorPicker>
 		</div>
 	</router-link>
 </template>
@@ -77,7 +82,8 @@
 <script>
 import { PopoverMenu } from '@nextcloud/vue/dist/Components/PopoverMenu'
 import ClickOutside from 'vue-click-outside'
-import ColorPicker from '../ColorPicker'
+// import ColorPicker from '../ColorPicker'
+import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
 
 export default {
 	name: 'AppNavigationBoard',
@@ -107,6 +113,12 @@ export default {
 		}
 	},
 	computed: {
+		getColor() {
+			if (this.editColor !== '') {
+				return this.editColor
+			}
+			return this.board.color
+		},
 		undoText: function() {
 			// todo translation
 			return 'deleted ' + this.board.title
@@ -232,6 +244,9 @@ export default {
 		hideMenu() {
 			this.menuOpen = false
 		},
+		updateColor(newColor) {
+			this.editColor = newColor
+		},
 		applyEdit(e) {
 			this.editing = false
 			if (this.editTitle || this.editColor) {
@@ -264,4 +279,8 @@ export default {
 	#app-navigation #deck-navigation .editing {
 		height: auto !important;
 	}
+	.color0 {
+		border-radius: 6px;
+		height: 25px;
+	}
 </style>