Implemented a colorpicker for all color selectors. nextcloud#204, nex…

…tcloud#395 Signed-off-by: oskar <oskar.kurz@gmail.com>
ossie · Jan 21, 2018 · a5410a5 · a5410a5
1 parent 7ffe11e
commit a5410a5
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 20 deletions.
diff --git a/css/style.scss b/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,10 @@ input.input-inline {
 		}
 	}
 	.app-navigation-entry-edit {
-		.colorselect div{
-			height: 32px;
+		.colorselect {
+			div, label {
+				height: 32px;
+			}
 		}
 		form {
 			display: flex;
@@ -813,6 +816,10 @@ input.input-inline {
 		border: none;
 	}
 
+	label.color {
+		flex-grow: 0.5;
+	}
+
 	.selected {
 		background-image: url('../../../core/img/actions/checkmark.svg');
 		background-position: center center;
@@ -822,6 +829,16 @@ 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 {
+			visibility: hidden;
+		}
+	}
 }
 
 .labels {

diff --git a/img/color_picker.svg b/img/color_picker.svg
diff --git a/js/controller/ColorPickerController.js b/js/controller/ColorPickerController.js
@@ -0,0 +1,42 @@
+/*
+ * @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/>.
+ *
+ */
+
+/* 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 };
+    };
+}]);
diff --git a/templates/main.php b/templates/main.php
@@ -45,7 +45,7 @@
 	// Load seperate JS files when debug mode is enabled
 	$js = [
 		'app' => ['App', 'Config', 'Run'],
-		'controller' => ['AppController', 'BoardController', 'CardController', 'ListController'],
+		'controller' => ['AppController', 'BoardController', 'CardController', 'ListController', 'ColorPickerController'],
 		'directive' => ['appnavigationentryutils', 'appPopoverMenuUtils', 'autofocusoninsert', 'avatar', 'contactsmenudelete', 'elastic', 'search', 'datepicker', 'timepicker'],
 		'filters' => ['boardFilterAcl', 'cardFilter', 'cardSearchFilter', 'iconWhiteFilter', 'lightenColorFilter', 'orderObjectBy', 'dateFilters', 'textColorFilter', 'withoutAssignedUsers'],
 		'service' => ['ApiService', 'BoardService', 'CardService', 'LabelService', 'StackService', 'StatusService'],

diff --git a/templates/part.board.sidebarView.php b/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="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="colorselect" ng-controller="ColorPickerController">
+                            <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="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="colorselect" ng-controller="ColorPickerController">
+                            <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>

diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php
@@ -33,9 +33,12 @@
 				<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="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>
+						<div class="colorselect" ng-controller="ColorPickerController">
+                            <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>
 			</td>
@@ -102,12 +105,12 @@ class="ng-pristine ng-valid" ng-submit="boardCreate()">
 					<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="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' }"></div>
-					</div>
+                    <div class="colorselect" ng-controller="ColorPickerController">
+                        <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>
+                        <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>
 				</form>
 			</td>
 			<td></td>

diff --git a/templates/part.navigation.php b/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="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="colorselect" ng-controller="ColorPickerController">
+				<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="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="colorselect" ng-controller="ColorPickerController">
+				<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>