Add colorpicker directive

2018-09-05 22:42:24 +02:00 · 2018-09-05 22:42:24 +02:00 · 7d082f99e7
commit 7d082f99e7
parent ee6267f4d6
4 changed files with 172 additions and 15 deletions
--- a/css/src/style.scss
+++ b/css/src/style.scss
@ -187,9 +187,22 @@
 		justify-content: center;
 		align-items: center;

+		.color-selector-label {
+			display: block;
+			height: 24px;
+			width: calc(100% / 9) !important;
+			background-image: url('../img/color_picker.svg');
+			background-repeat: no-repeat;
+			background-position: center center;
+
+			.color-selector {
+				visibility: hidden;
+			}
+		}
+
 		li {
 			height: 24px;
-			width: calc(100% / 10) !important;
+			width: calc(100% / 9) !important;

 			&.selected {
 				border: 1px solid $gray_dark;
--- a/img/color_picker.svg
+++ b/img/color_picker.svg
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg id="Layer_1" width="15" height="15" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+		<path d="m91.645 8.355c-4.474-4.474-11.727-4.474-16.2 0l-13.5 13.501-3.727-3.727c-1.959-1.959-5.134-1.959-7.093 0s-1.959 5.134 0 7.093l3.727 3.727-41.51 41.508c-2.039 2.039-3.149 4.656-3.329 7.324-0.073 1.087-0.347 3.105-0.675 5.292-0.053 0.359-0.212 0.706-0.487 0.983l-3.105 3.106c-0.994 0.994-0.994 2.606 0 3.6l3.493 3.493c0.994 0.994 2.606 0.994 3.6 0l3.106-3.105c0.277-0.275 0.622-0.433 0.981-0.486 2.187-0.329 4.205-0.602 5.293-0.675 2.668-0.18 5.285-1.29 7.325-3.33l41.508-41.508 3.727 3.727c1.959 1.959 5.134 1.959 7.093 0s1.959-5.134 0-7.093l-12.365-12.366 9.697 7.577 12.44-12.441c4.475-4.473 4.474-11.726 1e-3 -16.2zm-26.594 34.394l-20.53 20.53c-0.994 0.994-2.606 0.994-3.6 0l-3.27-3.27c-0.994-0.993-2.605-0.993-3.599 1e-3l-0.616 0.616-2e-3 -2e-3 -14.728 14.727c-0.337 0.337-0.819 0.401-1.076 0.143s-0.194-0.74 0.143-1.076l23.841-23.841 4e-3 4e-3 15.633-15.633c0.994-0.994 2.606-0.994 3.6 0l4.2 4.201c0.994 0.994 0.994 2.606 0 3.6z" fill="#fff"/>
+<metadata><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/><dc:publisher><cc:Agent rdf:about="http://openclipart.org/"><dc:title>Openclipart</dc:title></cc:Agent></dc:publisher></cc:Work><cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/"><cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/><cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/><cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/></cc:License></rdf:RDF></metadata></svg>
--- a/src/components/Colorpicker.vue
+++ b/src/components/Colorpicker.vue
@ -2,7 +2,13 @@
 Nextcloud - Tasks

@author Raimund Schlüßler
+@author Raghu Nayyar
+@author Georg Ehrke
+@author John Molakvoæ
@copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+@copyright 2018 Raghu Nayyar <beingminimal@gmail.com>
+@copyright 2018 Georg Ehrke <oc.list@georgehrke.com>
+@copyright 2018 John Molakvoæ <skjnldsv@protonmail.com>

 This library is free software; you can redistribute it and/or
 modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
@ -20,21 +26,151 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 -->

 <template>
-	<ul class="colorpicker-list">
-		<li ng-repeat="color in colors"
-			ng-class="{ selected: (color===selected) }"
-			ng-click="pick(color)"
-			ng-style="{ 'background-color':color}; " />
-		<li class="randomcolour"
-			ng-click="randomizeColour()"
-			ng-style="{ 'background-color':random}; ">
-			<span class="icon icon-random" />
-		</li>
-	</ul>
+	<div class="colorpicker">
+		<ul class="colorpicker-list">
+			<li v-for="color in colors"
+				:key="color"
+				:class="{ selected: (color===selectedColor) }"
+				:style="{'background-color': color}"
+				@click="pick(color)" />
+			<li v-if="!supportsColorPicker"
+				:style="{'background-color': random}"
+				class="randomcolour"
+				@click="randomizeColour">
+				<span class="icon icon-random" />
+			</li>
+			<label v-if="supportsColorPicker"
+				:style="{'background-color': selectedColor}"
+				class="color-selector-label">
+				<input v-model="selectedColor"
+					@change="pick(selectedColor)"
+					type="color"
+					class="color-selector">
+			</label>
+		</ul>
+	</div>
 </template>

 <script>
 export default {
-	name: 'Colorpicker'
+	name: 'Colorpicker',
+	props: {
+		initialColor: {
+			type: String,
+			default: '#31CC7C'
+		}
+	},
+	data() {
+		return {
+			random: '#31CC7C',
+			colors: [
+				'#31CC7C',
+				'#317CCC',
+				'#FF7A66',
+				'#F1DB50',
+				'#7C31CC',
+				'#CC317C',
+				'#3A3B3D',
+				'#CACBCD'
+			],
+			selectedColor: this.initialColor
+		}
+	},
+	methods: {
+		supportsColorPicker: function() {
+			const inputElement = document.createElement('input')
+			inputElement.setAttribute('type', 'color')
+			return inputElement.type === 'color'
+		},
+		randomizeColour: function() {
+			this.random = this.randColour()
+			this.pick(this.random)
+		},
+		pick: function(color) {
+			this.$emit('color-selected', color)
+		},
+		/*
+		* Generate a random colour with the core generator
+		*/
+		randColour: function() {
+			if (typeof String.prototype.toHsl === 'function') {
+				return this.rgbToHex(this.hslToRgb(Math.random().toString().toHsl()))
+			} else {
+				return this.colors[Math.floor(Math.random() * this.colors.length)]
+			}
+		},
+		/*
+		* Convert rgb array to hex string
+		*/
+		rgbToHex: function(r, g, b) {
+			if (Array.isArray(r)) {
+				g = r[1]
+				b = r[2]
+				r = r[0]
+			}
+			return '#' + parseInt(r, 10).toString(16) + parseInt(g, 10).toString(16) + parseInt(b, 10).toString(16)
+		},
+
+		/* https://github.com/kayellpeee/hsl_rgb_converter
+		* expected hue range: [0, 360)
+		* expected saturation range: [0, 1]
+		* expected lightness range: [0, 1]
+		*/
+		hslToRgb: function(hue, saturation, lightness) {
+			// based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
+			if (Array.isArray(hue)) {
+				saturation = hue[1]
+				lightness = hue[2]
+				hue = hue[0]
+			}
+			if (hue === undefined) {
+				return [0, 0, 0]
+			}
+			saturation /= 100
+			lightness /= 100
+
+			var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation
+			var huePrime = hue / 60
+			var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1))
+
+			huePrime = Math.floor(huePrime)
+			var red
+			var green
+			var blue
+
+			if (huePrime === 0) {
+				red = chroma
+				green = secondComponent
+				blue = 0
+			} else if (huePrime === 1) {
+				red = secondComponent
+				green = chroma
+				blue = 0
+			} else if (huePrime === 2) {
+				red = 0
+				green = chroma
+				blue = secondComponent
+			} else if (huePrime === 3) {
+				red = 0
+				green = secondComponent
+				blue = chroma
+			} else if (huePrime === 4) {
+				red = secondComponent
+				green = 0
+				blue = chroma
+			} else if (huePrime === 5) {
+				red = chroma
+				green = 0
+				blue = secondComponent
+			}
+
+			var lightnessAdjustment = lightness - (chroma / 2)
+			red += lightnessAdjustment
+			green += lightnessAdjustment
+			blue += lightnessAdjustment
+
+			return [Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255)]
+		}
+	}
 }
 </script>
--- a/src/components/TheList.vue
+++ b/src/components/TheList.vue
@ -107,7 +107,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						class="action icon-checkmark"
 						ng-click="saveEdit(calendar)">
 				</form>
-				<colorpicker class="colorpicker" selected="calendar.color" />
+				<colorpicker :initial-color="calendar.color" @color-selected="setColor(calendar, ...arguments)" />
 			</div>
 			<div class="app-navigation-entry-edit caldav">
 				<form>
@ -149,7 +149,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						class="action icon-checkmark"
 						ng-click="create($event)">
 				</form>
-				<colorpicker class="colorpicker" selected="color" />
+				<colorpicker @color-selected="setColor('new', ...arguments)" />
 			</div>
 		</li>
 	</ul>
@ -233,6 +233,9 @@ export default {
 			}
 			url += '?export'
 			return url
+		},
+		setColor: function(calendar, color) {
+			console.log('Set color of ' + calendar.uri + ' to ' + color)
 		}
 	}
 }