Merge pull request #468 from nextcloud/feature/405/color-picker

Implemented a colorpicker for all color selectors

css/style.scss

@@ -4,6 +4,7 @@
  * @author Julius Härtl <jus@bitgrid.net>
  * @author Artem Anufrij <artem.anufrij@live.de>
  * @author Marin Treselj <marin@pixelipo.com>
+ * @author Oskar Kurz <oskar.kurz@gmail.com>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -101,8 +102,11 @@ input.input-inline {
 		}
 	}
 	.app-navigation-entry-edit {
-		.colorselect div{
+		.colorselect {
+			div, label {
 				height: 32px;
+				width: auto;
+			}
 		}
 		form {
 			display: flex;
@@ -814,6 +818,10 @@ input.input-inline {
 		border: none;
 	}
 
+	label.color {
+		flex-grow: 1;
+	}
+
 	.selected {
 		background-image: url('../../../core/img/actions/checkmark.svg');
 		background-position: center center;
@@ -823,6 +831,19 @@ input.input-inline {
 			background-image: url('../../../core/img/actions/checkmark-white.svg');
 		}
 	}
+
+	.colorselect-label {
+		background-image: url('../img/color_picker.svg');
+		background-position: center center;
+		background-repeat: no-repeat;
+		opacity: 1;
+		input {
+			position: absolute;
+			visibility: hidden;
+			height: 32px;
+			width: 40px;
+		}
+	}
 }
 
 .labels {
@@ -888,7 +909,8 @@ input.input-inline {
 		.colorselect {
 			flex-grow: 1;
 
-			div {
+			div,
+			label {
 				min-width: 32px;
 			}
 		}

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>

js/controller/ColorPickerController.js

@@ -0,0 +1,44 @@
+/*
+ * @copyright Copyright (c) 2018 Oskar Kurz <oskar.kurz@gmail.com>
+ *
+ * @author Oskar Kurz <oskar.kurz@gmail.com>
+ *
+ * @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/>.
+ *
+ */
+
+import app from '../app/App.js';
+
+/* global oc_defaults OC */
+app.controller('ColorPickerController', ['$scope', function ($scope) {
+	$scope.hashedColor = '';
+
+	$scope.setColor = function (object, color) {
+		object.color = color;
+		object.hashedColor = '#' + color;
+
+		return object;
+	};
+
+	$scope.setHashedColor = function (object) {
+		object.color = object.hashedColor.substr(1);
+		return object;
+	};
+
+	$scope.getCustomBackground = function (color) {
+		return {'background-color': color};
+	};
+}]);

templates/part.board.sidebarView.php

@@ -84,8 +84,11 @@
                                 <input type="text" ng-model="label.title" class="input-inline" ng-style="{'background-color':'#{{label.color}}','color':'{{ label.color|textColorFilter }}'}" autofocus-on-insert maxlength="100"/>
                             </form>
                         </div>
-                        <div class="colorselect">
+                        <div class="colorselect" ng-controller="ColorPickerController">
-                            <div class="color" ng-repeat="c in defaultColors" ng-style="{'background-color':'#{{ c }}'}" ng-click="label.color=c" ng-class="{'selected': (c == label.color) }"><br /></div>
+                            <div class="color" ng-repeat="c in defaultColors" ng-style="{'background-color':'#{{ c }}'}" ng-click="label=setColor(label,c);" ng-class="{'selected': (c == label.color) }"><br /></div>
+                            <label class="colorselect-label color" ng-style="getCustomBackground(label.hashedColor)" ng-init="label.hashedColor='#' + label.color">
+                                <input class="color" type="color" ng-model="label.hashedColor" value="#{{label.color}}" ng-change="label=setHashedColor(label)"/>
+                            </label>
                         </div>
                     </div>
                     <a ng-if="boardservice.canManage() && label.edit" ng-click="labelUpdate(label)" class="icon" title="<?php p($l->t('Update')); ?>"><i class="icon icon-checkmark" ></i><span class="hidden-visually"><?php p($l->t('Update')); ?></span></a>
@@ -99,8 +102,11 @@
                                 <input type="text" class="input-inline" ng-model="newLabel.title" ng-style="{'color':'{{ newLabel.color|textColorFilter }}'};" autofocus-on-insert maxlength="100" />
                             </form>
                         </div>
-                        <div class="colorselect">
+                        <div class="colorselect" ng-controller="ColorPickerController">
-                            <div class="color" ng-repeat="c in defaultColors" ng-style="{'background-color':'#{{ c }}'}" ng-click="newLabel.color=c" ng-class="{'selected': (c == newLabel.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
+                            <div class="color" ng-repeat="c in defaultColors" ng-style="{'background-color':'#{{ c }}'}" ng-click="newLabel=setColor(newLabel,c)" ng-class="{'selected': (c == newLabel.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
+                            <label class="colorselect-label color" ng-style="getCustomBackground(newLabel.hashedColor)" ng-init="newLabel.hashedColor='#' + newLabel.color">
+                                <input class="color" type="color" ng-model="newLabel.hashedColor" value="#{{newLabel.color}}" ng-change="newLabel=setHashedColor(newLabel)"/>
+                            </label>
                         </div>
                     </div>
                     <a ng-click="labelCreate(newLabel)" class="icon" title="<?php p($l->t('Create')); ?>"><i class="icon icon-checkmark" ></i><span class="hidden-visually"><?php p($l->t('Create')); ?></span></a>

templates/part.boardlist.php

@@ -33,8 +33,11 @@
 				<div class="app-navigation-entry-edit" ng-show="b.status.edit">
 					<form ng-disabled="isAddingList" class="ng-pristine ng-valid" ng-submit="boardUpdate(b)">
 						<input class="edit ng-valid ng-empty" type="text" autofocus-on-insert ng-model="b.title" maxlength="100" ng-model-options="{ debounce: 250 }">
-						<div class="colorselect">
+						<div class="colorselect" ng-controller="ColorPickerController">
-							<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b.color=c" ng-class="{'selected': (c == b.color) }"><br /></div>
+                            <div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b=setColor(b,c)" ng-class="{'selected': (c == b.color) }"></div>
+                            <label class="colorselect-label color" ng-style="getCustomBackground(b.hashedColor)" ng-init="b.hashedColor='#' + b.color">
+                                <input class="color" type="color" ng-model="b.hashedColor" value="#{{b.color}}" ng-change="b=setHashedColor(b)"/>
+                            </label>
                         </div>
 					</form>
 				</div>
@@ -102,11 +105,11 @@
 					<input class="edit ng-valid ng-empty"
 						   type="text" placeholder="<?php p($l->t('New board title')); ?>"
 						   autofocus-on-insert ng-model="newBoard.title" maxlength="100" ng-model-options="{ debounce: 250 }">
-					<div class="colorselect">
+                    <div class="colorselect" ng-controller="ColorPickerController">
-						<div class="color" ng-repeat="c in ::colors"
+                        <div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="selectColor(c);b=setColor(b,c);"ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"></div>
-							 ng-style="{'background-color':'#{{ c }}'}"
+                        <label class="colorselect-label color" ng-style="getCustomBackground(newBoard.hashedColor)" ng-init="newBoard.hashedColor='#' + newBoard.color">
-							 ng-click="selectColor(c)"
+                            <input class="color" type="color" ng-model="newBoard.hashedColor" value="#{{newBoard.color}}" ng-change="newBoard=setHashedColor(newBoard)"/>
-							 ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"></div>
+                        </label>
                     </div>
 				</form>
 			</td>

templates/part.navigation.php

@@ -38,8 +38,11 @@
 				<input class="edit ng-valid ng-empty" type="text" autofocus-on-insert ng-model="b.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 				<input type="submit" value="" class="action icon-checkmark svg">
 			</form>
-			<div class="colorselect">
+			<div class="colorselect" ng-controller="ColorPickerController">
-				<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b.color=c" ng-class="{'selected': (c == b.color) }"></div>
+				<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b=setColor(b,c)" ng-class="{'selected': (c == b.color) }"></div>
+                <label class="colorselect-label color" ng-style="getCustomBackground(b.hashedColor)" ng-init="b.hashedColor='#' + b.color">
+                    <input class="color" type="color" ng-model="b.hashedColor" value="#{{b.color}}" ng-change="b=setHashedColor(b)"/>
+                </label>
 			</div>
 		</div>
 	</li>
@@ -53,8 +56,11 @@
 				<input class="edit ng-valid ng-empty" type="text" placeholder="<?php p($l->t('New board title')); ?>" autofocus-on-insert ng-model="newBoard.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 				<input type="submit" value="" class="action icon-checkmark svg">
 			</form>
-			<div class="colorselect">
+			<div class="colorselect" ng-controller="ColorPickerController">
-				<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="selectColor(c)" ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
+				<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="selectColor(c);newBoard=setColor(newBoard,c)" ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
+                <label class="colorselect-label color" ng-style="getCustomBackground(newBoard.hashedColor)" ng-init="newBoard.hashedColor='#' + newBoard.color">
+                    <input class="color" type="color" ng-model="newBoard.hashedColor" value="#{{newBoard.color}}" ng-change="newBoard=setHashedColor(newBoard)"/>
+                </label>
 			</div>
 		</div>
 	</li>