From 2cc961dcdf54dd8715138c4b098c5739f17cfd9a Mon Sep 17 00:00:00 2001 From: Oskar Kurz Date: Sun, 21 Jan 2018 14:35:37 +0100 Subject: [PATCH 1/4] Implemented a colorpicker for all color selectors. #204, #395 Signed-off-by: oskar --- css/style.scss | 21 +++++++++++-- img/color_picker.svg | 5 +++ js/controller/ColorPickerController.js | 42 ++++++++++++++++++++++++++ templates/part.board.sidebarView.php | 14 ++++++--- templates/part.boardlist.php | 21 +++++++------ templates/part.navigation.php | 14 ++++++--- 6 files changed, 98 insertions(+), 19 deletions(-) create mode 100644 img/color_picker.svg create mode 100644 js/controller/ColorPickerController.js diff --git a/css/style.scss b/css/style.scss index 1f6f77fbd..8b92bb0ee 100644 --- a/css/style.scss +++ b/css/style.scss @@ -4,6 +4,7 @@ * @author Julius Härtl * @author Artem Anufrij * @author Marin Treselj + * @author Oskar Kurz * * @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; @@ -814,6 +817,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; @@ -823,6 +830,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 new file mode 100644 index 000000000..acd651fbb --- /dev/null +++ b/img/color_picker.svg @@ -0,0 +1,5 @@ + + + + +image/svg+xmlOpenclipart diff --git a/js/controller/ColorPickerController.js b/js/controller/ColorPickerController.js new file mode 100644 index 000000000..3c91d0d19 --- /dev/null +++ b/js/controller/ColorPickerController.js @@ -0,0 +1,42 @@ +/* + * @copyright Copyright (c) 2018 Oskar Kurz + * + * @author Oskar Kurz + * + * @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 . + * + */ + +/* 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/part.board.sidebarView.php b/templates/part.board.sidebarView.php index 88ce3de6d..d51852f2c 100644 --- a/templates/part.board.sidebarView.php +++ b/templates/part.board.sidebarView.php @@ -84,8 +84,11 @@ -
-

+
+

+
t('Update')); ?> @@ -99,8 +102,11 @@ -
-

+
+

+
t('Create')); ?> diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php index f116830bf..1fb80c96e 100644 --- a/templates/part.boardlist.php +++ b/templates/part.boardlist.php @@ -33,9 +33,12 @@
-
-

-
+
+
+ +
@@ -102,12 +105,12 @@ -
-
-
+
+
+ +
diff --git a/templates/part.navigation.php b/templates/part.navigation.php index ad38388b8..53dfa592d 100644 --- a/templates/part.navigation.php +++ b/templates/part.navigation.php @@ -38,8 +38,11 @@ -
-
+
+
+
@@ -53,8 +56,11 @@ -
-

+
+

+
From 4a9ef92e5d1103fdde391ee90c2af08180dcc499 Mon Sep 17 00:00:00 2001 From: Oskar Kurz Date: Sat, 3 Feb 2018 17:44:52 +0100 Subject: [PATCH 2/4] Fixed color-picker width. #204, #395 Signed-off-by: oskar --- css/style.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/css/style.scss b/css/style.scss index 8b92bb0ee..9819b3587 100644 --- a/css/style.scss +++ b/css/style.scss @@ -818,7 +818,7 @@ input.input-inline { } label.color { - flex-grow: 0.5; + flex-grow: 1; } .selected { @@ -837,7 +837,10 @@ input.input-inline { background-repeat: no-repeat; opacity: 1; input { + position: absolute; visibility: hidden; + height: 32px; + width: 40px; } } } @@ -905,7 +908,8 @@ input.input-inline { .colorselect { flex-grow: 1; - div { + div, + label { min-width: 32px; } } From 9f58b1ea07c83348a093760ef37de97326a78c5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Sun, 10 Jun 2018 20:43:31 +0200 Subject: [PATCH 3/4] Fix invisible picker and webpack migration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- css/style.scss | 1 + js/controller/ColorPickerController.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/css/style.scss b/css/style.scss index 9819b3587..0469ebbb4 100644 --- a/css/style.scss +++ b/css/style.scss @@ -105,6 +105,7 @@ input.input-inline { .colorselect { div, label { height: 32px; + width: auto; } } form { diff --git a/js/controller/ColorPickerController.js b/js/controller/ColorPickerController.js index 3c91d0d19..fb4c5e119 100644 --- a/js/controller/ColorPickerController.js +++ b/js/controller/ColorPickerController.js @@ -20,6 +20,8 @@ * */ +import app from '../app/App.js'; + /* global oc_defaults OC */ app.controller('ColorPickerController', ['$scope', function($scope) { $scope.hashedColor = ''; From 6c93e99b9bb8bc238e2c5ba747aadfd81c52cca4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Sun, 10 Jun 2018 20:49:06 +0200 Subject: [PATCH 4/4] Use tabs instead of spaces MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- js/controller/ColorPickerController.js | 28 +++++++++++++------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/js/controller/ColorPickerController.js b/js/controller/ColorPickerController.js index fb4c5e119..8de938556 100644 --- a/js/controller/ColorPickerController.js +++ b/js/controller/ColorPickerController.js @@ -23,22 +23,22 @@ import app from '../app/App.js'; /* global oc_defaults OC */ -app.controller('ColorPickerController', ['$scope', function($scope) { - $scope.hashedColor = ''; +app.controller('ColorPickerController', ['$scope', function ($scope) { + $scope.hashedColor = ''; - $scope.setColor = function(object,color) { - object.color = color; - object.hashedColor = '#' + color; + $scope.setColor = function (object, color) { + object.color = color; + object.hashedColor = '#' + color; - return object; - } + return object; + }; - $scope.setHashedColor = function(object) { - object.color = object.hashedColor.substr(1); - return object; - } + $scope.setHashedColor = function (object) { + object.color = object.hashedColor.substr(1); + return object; + }; - $scope.getCustomBackground = function(color) { - return { 'background-color': color }; - }; + $scope.getCustomBackground = function (color) { + return {'background-color': color}; + }; }]);