Add colorpicker component

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

css/icons.scss

@@ -78,3 +78,6 @@
   background-size: 20px;
   background-position: center center;
 }
+.icon-colorpicker {
+	background-image: url('../img/color_picker.svg');
+}

package.json

@@ -32,6 +32,7 @@
 		"nextcloud-vue": "^0.10.0",
 		"vue": "^2.5.16",
 		"vue-click-outside": "^1.0.7",
+		"vue-color": "^2.7.0",
 		"vue-infinite-loading": "^2.4.1",
 		"vue-router": "^3.0.1",
 		"vue-smooth-dnd": "^0.8.0",

src/components/ColorPicker.vue

@@ -0,0 +1,100 @@
+<!--
+  - @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 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>
+		</div>
+		<Chrome v-if="showFullPicker" :palette="defaultColors" @input="updateColor" v-model="color"></Chrome>
+	</div>
+</template>
+
+<script>
+	// TODO: import styles manually if possible
+	import { Compact, Chrome } from 'vue-color'
+
+	export default {
+		name: 'ColorPicker',
+		components: {
+			Compact,
+			Chrome
+		},
+		props: ['value'],
+		data() {
+			return {
+				color: { hex: this.value },
+				defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
+				showFullPicker: false,
+			}
+		},
+		methods: {
+			updateColor() {
+				this.$emit('input', this.color)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	div.color-picker {
+		display: block !important;
+	}
+	.color-picker-compact {
+		display: flex;
+	}
+	.custom-color-button {
+		width: 24px;
+		height: 24px;
+		display: block;
+	}
+	.vc-chrome {
+		display: block !important;
+	}
+
+	.vc-compact {
+		padding: 0;
+		border-radius: 0;
+		box-shadow: none;
+		background-color: transparent;
+		width: auto;
+	}
+</style>
+<style lang="scss">
+	.color-picker {
+		.vc-chrome-fields-wrap {
+			display: none !important;
+		}
+
+		.vc-compact-colors {
+			display: flex;
+		}
+		.vc-compact-color-item {
+			display: inline-flex;
+			height: 24px;
+			width: 24px;
+			padding: 0;
+			margin: 0;
+		}
+	}
+</style>

src/components/navigation/AppNavigationAddBoard.vue

@@ -28,27 +28,31 @@
 		</a>
 
 		<!-- edit entry -->
-		<div v-if="editing" class="app-navigation-entry-edit">
+		<div v-if="editing" class="app-navigation-entry-edit-copy">
 			<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>
 		</div>
 	</li>
 </template>
 
 <script>
+import ColorPicker from '../ColorPicker';
 export default {
 	name: 'AppNavigationAddBoard',
+	components: {ColorPicker},
 	directives: {},
 	props: {},
 	data() {
 		return {
 			classes: [],
 			editing: false,
-			loading: false
+			loading: false,
+			color: '#000000'
 		}
 	},
 	computed: {},
@@ -62,8 +66,7 @@ export default {
 			const title = e.currentTarget.childNodes[0].value
 			this.$store.dispatch('createBoard', {
 				title: title,
-				hashedColor: '#000000',
-				color: '000000'
+				color: this.color.hex.substring(1)
 			})
 			this.editing = false
 		},
@@ -74,3 +77,19 @@ 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;
+		display: block;
+		position: absolute;
+		background: #fff;
+		height: auto;
+		z-index: 250;
+		padding-left: 38px !important;
+	}
+</style>

src/services/BoardApi.js

@@ -56,9 +56,8 @@ export class BoardApi {
 	/**
 	 * Creates a new board.
 	 *
-	 * @param {{String title, String color, String hashedColor}} boardData The board data to send.
-	 * 															 hashedColor is the color in hex format, e.g. "#ff0000"
-	 * 															 color is the same color without the "#"
+	 * @param {{String title, String color}} boardData The board data to send.
+	 * 										 color the hexadecimal color value formated /[0-9A-F]{6}/i
 	 * @return Promise
 	 */
 	createBoard(boardData) {