GUACAMOLE-630: Switch to Pickr for color picker.

guacamole/pom.xml

@@ -501,6 +501,13 @@
             <version>1.0.10</version>
         </dependency>
 
+        <!-- Pickr (JavaScript color picker) -->
+        <dependency>
+            <groupId>org.webjars.npm</groupId>
+            <artifactId>simonwep__pickr</artifactId>
+            <version>1.2.6</version>
+        </dependency>
+
     </dependencies>
 
 </project>

guacamole/src/licenses/LICENSE

@@ -688,6 +688,37 @@ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 
+Pickr (https://simonwep.github.io/pickr/)
+-----------------------------------------
+
+    Version: 1.2.6
+    From: 'Simon Reinisch' (https://github.com/Simonwep/)
+    License(s):
+        MIT (bundled/pickr-1.2.6/LICENSE)
+
+MIT License
+
+Copyright (c) 2019 Simon Reinisch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
 Simple Logging Facade for Java (http://slf4j.org/)
 --------------------------------------------------
 

guacamole/src/licenses/bundled/pickr-1.2.6/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Simon Reinisch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

guacamole/src/main/webapp/app/form/controllers/terminalColorSchemeFieldController.js

@@ -47,6 +47,14 @@ angular.module('form').controller('terminalColorSchemeFieldController', ['$scope
      */
     $scope.customColorScheme = new ColorScheme();
 
+    /**
+     * The array of colors to include within the color picker as pre-defined
+     * options for convenience.
+     *
+     * @type String[]
+     */
+    $scope.defaultPalette = new ColorScheme().colors;
+
     /**
      * The string value which is assigned to selectedColorScheme if a custom
      * color scheme is selected.

guacamole/src/main/webapp/app/form/directives/guacInputColor.js

@@ -0,0 +1,147 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * A directive which implements a color input field, leveraging the "Pickr"
+ * color picker.
+ */
+angular.module('form').directive('guacInputColor', [function guacInputColor() {
+
+    var config = {
+        restrict: 'E',
+        replace: true,
+        templateUrl: 'app/form/templates/guacInputColor.html',
+    };
+
+    config.scope = {
+
+        /**
+         * The current selected color value, in standard 6-digit hexadecimal
+         * RGB notation. When the user selects a different color using this
+         * directive, this value will updated accordingly.
+         *
+         * @type String
+         */
+        model: '=',
+
+        /**
+         * An optional array of colors to include within the color picker as a
+         * convenient selection of pre-defined colors. The colors within the
+         * array must be in standard 6-digit hexadecimal RGB notation.
+         *
+         * @type String[]
+         */
+        palette: '='
+
+    };
+
+    config.controller = ['$scope', '$element', '$injector',
+        function guacInputColorController($scope, $element, $injector) {
+
+        // Required services
+        var $q         = $injector.get('$q');
+        var $translate = $injector.get('$translate');
+
+        // Init color picker after required translation strings are available
+        $q.all({
+            'save'   : $translate('APP.ACTION_SAVE'),
+            'cancel' : $translate('APP.ACTION_CANCEL')
+        }).then(function stringsRetrieved(strings) {
+
+            /**
+             * An instance of the "Pickr" color picker, bound to the underlying
+             * element of this directive.
+             *
+             * @type Pickr
+             */
+            var pickr = Pickr.create({
+
+                // Bind color picker to the underlying element of this directive
+                el : $element[0],
+
+                // Wrap color picker dialog in Guacamole-specific class for
+                // sake of additional styling
+                appClass : 'guac-input-color-picker',
+
+                // Display color details as hex
+                defaultRepresentation : 'HEX',
+
+                // Use "monolith" theme, as a nice balance between "nano" (does
+                // not work in Internet Explorer) and "classic" (too big)
+                theme : 'monolith',
+
+                // Leverage the container element as the button which shows the
+                // picker, relying on our own styling for that button
+                useAsButton  : true,
+                appendToBody : true,
+
+                // Do not include opacity controls
+                lockOpacity : true,
+
+                // Include a selection of palette entries for convenience and
+                // reference
+                swatches : $scope.palette || [],
+
+                components: {
+
+                    // Include hue and color preview controls
+                    preview : true,
+                    hue     : true,
+
+                    // Display only a text color input field and the save and
+                    // cancel buttons (no clear button)
+                    interaction: {
+                        input  : true,
+                        save   : true,
+                        cancel : true
+                    }
+
+                },
+
+                // Use translation strings for buttons
+                strings : strings
+
+            });
+
+            // Hide color picker after user clicks "cancel"
+            pickr.on('cancel', function colorChangeCanceled() {
+                pickr.hide();
+            });
+
+            // Keep model in sync with changes to the color picker
+            pickr.on('save', function colorChanged(color) {
+                $scope.$evalAsync(function updateModel() {
+                    $scope.model = color.toHEXA().toString();
+                });
+            });
+
+            // Keep color picker in sync with changes to the model
+            pickr.on('init', function pickrReady(color) {
+                $scope.$watch('model', function modelChanged(model) {
+                    pickr.setColor(model);
+                });
+            });
+
+        }, angular.noop);
+
+    }];
+
+    return config;
+
+}]);

guacamole/src/main/webapp/app/form/styles/terminal-color-scheme-field.css

@@ -41,8 +41,6 @@
     width: 100%;
     margin: 0;
     padding: 0;
-    display: flex;
-    flex-wrap: wrap;
 }
 
 .form-field .terminal-color-scheme-field .custom-color-scheme .palette-group {
@@ -51,8 +49,26 @@
     flex: 1;
 }
 
-.form-field .terminal-color-scheme-field .custom-color-scheme input[type="color"] {
+.form-field .terminal-color-scheme-field .custom-color-scheme .guac-input-color {
     display: block;
     margin: 2px;
     flex: 1;
+    width: 1.5em;
+    height: 1.5em;
+    min-width: 1.25em;
+    border-radius: 0.15em;
+}
+
+/* Increase width of color picker to allow two even rows of eight color
+ * swatches */
+.guac-input-color-picker[data-theme="monolith"] {
+    width: 16.25em;
+}
+
+/* Remove Guacamole-specific styles inherited from the generic button rules */
+.guac-input-color-picker[data-theme="monolith"] button {
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    box-shadow: none;
 }

guacamole/src/main/webapp/app/form/templates/guacInputColor.html

@@ -0,0 +1 @@
+<div input class="guac-input-color" ng-style="{ 'background-color' : model }"></div>

guacamole/src/main/webapp/app/form/templates/terminalColorSchemeField.html

@@ -11,13 +11,17 @@
             <tr>
                 <th>{{ getFieldHeader(field.name + '-foreground') | translate }}</th>
                 <td>
-                    <input type="color" ng-model="customColorScheme.foreground">
+                    <div class="palette-group">
+                        <guac-input-color model="customColorScheme.foreground" palette="defaultPalette"></guac-input-color>
+                    </div>
                 </td>
             </tr>
             <tr>
                 <th>{{ getFieldHeader(field.name + '-background') | translate }}</th>
                 <td>
-                    <input type="color" ng-model="customColorScheme.background">
+                    <div class="palette-group">
+                        <guac-input-color model="customColorScheme.background" palette="defaultPalette"></guac-input-color>
+                    </div>
                 </td>
             </tr>
         </tbody>
@@ -29,45 +33,50 @@
                 <td class="low-intensity-colors">
                     <div class="palette-group">
                         <div class="palette-group">
-                            <input type="color" ng-model="customColorScheme.colors[0]">
+                            <div class="palette-group">
-                            <input type="color" ng-model="customColorScheme.colors[1]">
+                                <guac-input-color model="customColorScheme.colors[0]" palette="defaultPalette"></guac-input-color>
+                                <guac-input-color model="customColorScheme.colors[1]" palette="defaultPalette"></guac-input-color>
+                            </div>
+                            <div class="palette-group">
+                                <guac-input-color model="customColorScheme.colors[2]" palette="defaultPalette"></guac-input-color>
+                                <guac-input-color model="customColorScheme.colors[3]" palette="defaultPalette"></guac-input-color>
+                            </div>
                         </div>
                         <div class="palette-group">
-                            <input type="color" ng-model="customColorScheme.colors[2]">
+                            <div class="palette-group">
-                            <input type="color" ng-model="customColorScheme.colors[3]">
+                                <guac-input-color model="customColorScheme.colors[4]" palette="defaultPalette"></guac-input-color>
-                        </div>
+                                <guac-input-color model="customColorScheme.colors[5]" palette="defaultPalette"></guac-input-color>
-                    </div>
+                            </div>
-                    <div class="palette-group">
+                            <div class="palette-group">
-                        <div class="palette-group">
+                                <guac-input-color model="customColorScheme.colors[6]" palette="defaultPalette"></guac-input-color>
-                            <input type="color" ng-model="customColorScheme.colors[4]">
+                                <guac-input-color model="customColorScheme.colors[7]" palette="defaultPalette"></guac-input-color>
-                            <input type="color" ng-model="customColorScheme.colors[5]">
+                            </div>
-                        </div>
-                        <div class="palette-group">
-                            <input type="color" ng-model="customColorScheme.colors[6]">
-                            <input type="color" ng-model="customColorScheme.colors[7]">
                         </div>
                     </div>
+                </td>
             </tr>
             <tr>
                 <td class="high-intensity-colors">
                     <div class="palette-group">
                         <div class="palette-group">
-                            <input type="color" ng-model="customColorScheme.colors[8]">
+                            <div class="palette-group">
-                            <input type="color" ng-model="customColorScheme.colors[9]">
+                                <guac-input-color model="customColorScheme.colors[8]" palette="defaultPalette"></guac-input-color>
+                                <guac-input-color model="customColorScheme.colors[9]" palette="defaultPalette"></guac-input-color>
+                            </div>
+                            <div class="palette-group">
+                                <guac-input-color model="customColorScheme.colors[10]" palette="defaultPalette"></guac-input-color>
+                                <guac-input-color model="customColorScheme.colors[11]" palette="defaultPalette"></guac-input-color>
+                            </div>
                         </div>
                         <div class="palette-group">
-                            <input type="color" ng-model="customColorScheme.colors[10]">
+                            <div class="palette-group">
-                            <input type="color" ng-model="customColorScheme.colors[11]">
+                                <guac-input-color model="customColorScheme.colors[12]" palette="defaultPalette"></guac-input-color>
-                        </div>
+                                <guac-input-color model="customColorScheme.colors[13]" palette="defaultPalette"></guac-input-color>
-                    </div>
+                            </div>
-                    <div class="palette-group">
+                            <div class="palette-group">
-                        <div class="palette-group">
+                                <guac-input-color model="customColorScheme.colors[14]" palette="defaultPalette"></guac-input-color>
-                            <input type="color" ng-model="customColorScheme.colors[12]">
+                                <guac-input-color model="customColorScheme.colors[15]" palette="defaultPalette"></guac-input-color>
-                            <input type="color" ng-model="customColorScheme.colors[13]">
+                            </div>
-                        </div>
-                        <div class="palette-group">
-                            <input type="color" ng-model="customColorScheme.colors[14]">
-                            <input type="color" ng-model="customColorScheme.colors[15]">
                         </div>
                     </div>
                 </td>

guacamole/src/main/webapp/index.html

@@ -27,6 +27,7 @@
         <link rel="icon" type="image/png" href="images/logo-64.png"/>
         <link rel="icon" type="image/png" sizes="144x144" href="images/logo-144.png"/>
         <link rel="apple-touch-icon" type="image/png" href="images/logo-144.png"/>
+        <link rel="stylesheet" type="text/css" href="webjars/simonwep__pickr/1.2.6/dist/themes/monolith.min.css"/>
         <link rel="stylesheet" type="text/css" href="app.css?v=${project.version}">
         <title ng-bind="page.title | translate"></title>
     </head>
@@ -88,6 +89,9 @@
         <!-- JSTZ -->
         <script type="text/javascript" src="webjars/jstz/1.0.10/dist/jstz.min.js"></script>
 
+        <!-- Pickr (color picker) -->
+        <script type="text/javascript" src="webjars/simonwep__pickr/1.2.6/dist/pickr.es5.min.js"></script>
+
         <!-- Polyfills for the "datalist" element, Blob and the FileSaver API -->
         <script type="text/javascript" src="webjars/blob-polyfill/1.0.20150320/Blob.js"></script>
         <script type="text/javascript" src="webjars/datalist-polyfill/1.14.0/datalist-polyfill.min.js"></script>