From 54ce038e3d6bbd7f6d17dd178a7d1b1990c9d2c4 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mjumper@apache.org>
Date: Wed, 7 Aug 2019 11:30:15 -0700
Subject: [PATCH] GUACAMOLE-630: Allow raw contents of custom color scheme to
 be edited directly.

---
 .../terminalColorSchemeFieldController.js     | 22 ++++++
 .../styles/terminal-color-scheme-field.css    | 78 +++++++++++++++++++
 .../templates/terminalColorSchemeField.html   | 26 ++++++-
 .../src/main/webapp/translations/en.json      | 25 +++---
 4 files changed, 138 insertions(+), 13 deletions(-)

diff --git a/guacamole/src/main/webapp/app/form/controllers/terminalColorSchemeFieldController.js b/guacamole/src/main/webapp/app/form/controllers/terminalColorSchemeFieldController.js
index d2ccbf04d..6c8f37282 100644
--- a/guacamole/src/main/webapp/app/form/controllers/terminalColorSchemeFieldController.js
+++ b/guacamole/src/main/webapp/app/form/controllers/terminalColorSchemeFieldController.js
@@ -55,6 +55,12 @@ angular.module('form').controller('terminalColorSchemeFieldController', ['$scope
      */
     $scope.defaultPalette = new ColorScheme().colors;
 
+    /**
+     * Whether the raw details of the custom color scheme should be shown. By
+     * default, such details are hidden.
+     */
+    $scope.detailsShown = false;
+
     /**
      * The string value which is assigned to selectedColorScheme if a custom
      * color scheme is selected.
@@ -74,6 +80,22 @@ angular.module('form').controller('terminalColorSchemeFieldController', ['$scope
         return $scope.selectedColorScheme === CUSTOM_COLOR_SCHEME;
     };
 
+    /**
+     * Shows the raw details of the custom color scheme. If the details are
+     * already shown, this function has no effect.
+     */
+    $scope.showDetails = function showDetails() {
+        $scope.detailsShown = true;
+    };
+
+    /**
+     * Hides the raw details of the custom color scheme. If the details are
+     * already hidden, this function has no effect.
+     */
+    $scope.hideDetails = function hideDetails() {
+        $scope.detailsShown = false;
+    };
+
     // Keep selected color scheme and custom color scheme in sync with changes
     // to model
     $scope.$watch('model', function modelChanged(model) {
diff --git a/guacamole/src/main/webapp/app/form/styles/terminal-color-scheme-field.css b/guacamole/src/main/webapp/app/form/styles/terminal-color-scheme-field.css
index e34d61903..22679258a 100644
--- a/guacamole/src/main/webapp/app/form/styles/terminal-color-scheme-field.css
+++ b/guacamole/src/main/webapp/app/form/styles/terminal-color-scheme-field.css
@@ -17,6 +17,10 @@
  * under the License.
  */
 
+.form-field .terminal-color-scheme-field {
+    max-width: 320px;
+}
+
 .form-field .terminal-color-scheme-field select {
     width: 100%;
 }
@@ -63,6 +67,14 @@
     cursor: pointer;
 }
 
+/*
+ * Color button font colors
+ */
+
+.form-field .terminal-color-scheme-field .custom-color-scheme .guac-input-color {
+    color: black;
+}
+
 .form-field .terminal-color-scheme-field .custom-color-scheme .guac-input-color.dark {
     color: white;
 }
@@ -71,6 +83,72 @@
     font-weight: bold;
 }
 
+/* Hide palette numbers unless color scheme details are visible */
+.form-field .terminal-color-scheme-field.custom-color-scheme-details-hidden .custom-color-scheme .palette .guac-input-color {
+    color: transparent;
+}
+
+/*
+ * Custom color scheme details header
+ */
+
+.form-field .terminal-color-scheme-field .custom-color-scheme-details-header {
+    font-size: 0.8em;
+    margin: 0.5em 0;
+}
+
+.form-field .terminal-color-scheme-field .custom-color-scheme-details-header::before {
+    content: '▸ ';
+}
+
+.form-field .terminal-color-scheme-field.custom-color-scheme-details-visible .custom-color-scheme-details-header::before {
+    content: '▾ ';
+}
+
+/*
+ * Details show/hide link
+ */
+
+/* Render show/hide as a link */
+.form-field .terminal-color-scheme-field .custom-color-scheme-hide-details,
+.form-field .terminal-color-scheme-field .custom-color-scheme-show-details {
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
+    margin: 0 0.25em;
+    font-weight: normal;
+}
+
+.form-field .terminal-color-scheme-field .custom-color-scheme-hide-details {
+    display: none;
+}
+
+.form-field .terminal-color-scheme-field.custom-color-scheme-details-visible .custom-color-scheme-hide-details {
+    display: inline;
+}
+
+.form-field .terminal-color-scheme-field.custom-color-scheme-details-visible .custom-color-scheme-show-details {
+    display: none;
+}
+
+/*
+ * Color scheme details
+ */
+
+.form-field .terminal-color-scheme-field .custom-color-scheme-details {
+    display: none;
+}
+
+.form-field .terminal-color-scheme-field.custom-color-scheme-details-visible .custom-color-scheme-details {
+    display: block;
+    width: 100%;
+    margin: 0.5em 0;
+}
+
+/*
+ * Color picker
+ */
+
 /* Increase width of color picker to allow two even rows of eight color
  * swatches */
 .guac-input-color-picker[data-theme="monolith"] {
diff --git a/guacamole/src/main/webapp/app/form/templates/terminalColorSchemeField.html b/guacamole/src/main/webapp/app/form/templates/terminalColorSchemeField.html
index 874dced23..2c6e50f1e 100644
--- a/guacamole/src/main/webapp/app/form/templates/terminalColorSchemeField.html
+++ b/guacamole/src/main/webapp/app/form/templates/terminalColorSchemeField.html
@@ -1,9 +1,16 @@
-<div class="terminal-color-scheme-field">
+<div class="terminal-color-scheme-field" ng-class="{
+        'custom-color-scheme-details-visible' : detailsShown,
+        'custom-color-scheme-details-hidden' : !detailsShown
+    }">
+
+    <!-- Pre-defined color scheme options -->
     <select ng-attr-id="{{ fieldId }}" ng-model="selectedColorScheme">
         <option ng-repeat="option in field.options | orderBy: value"
                 ng-value="option">{{ getFieldOption(option) | translate }}</option>
-        <option value="custom">{{ getFieldOption('custom') | translate }}</option>
+        <option value="custom">{{ 'COLOR_SCHEME.FIELD_OPTION_CUSTOM' | translate }}</option>
     </select>
+
+    <!-- Custom color scheme -->
     <table class="custom-color-scheme" ng-show="isCustom()">
 
         <!-- Default foreground and background colors -->
@@ -11,14 +18,14 @@
             <tr>
                 <td>
                     <div class="palette-group">
-                        <guac-input-color model="customColorScheme.foreground" palette="defaultPalette">{{ getFieldHeader(field.name + '-foreground') | translate }}</guac-input-color>
+                        <guac-input-color model="customColorScheme.foreground" palette="defaultPalette">{{ 'COLOR_SCHEME.FIELD_HEADER_FOREGROUND' | translate }}</guac-input-color>
                     </div>
                 </td>
             </tr>
             <tr>
                 <td>
                     <div class="palette-group">
-                        <guac-input-color model="customColorScheme.background" palette="defaultPalette">{{ getFieldHeader(field.name + '-background') | translate }}</guac-input-color>
+                        <guac-input-color model="customColorScheme.background" palette="defaultPalette">{{ 'COLOR_SCHEME.FIELD_HEADER_BACKGROUND' | translate }}</guac-input-color>
                     </div>
                 </td>
             </tr>
@@ -81,4 +88,15 @@
         </tbody>
 
     </table>
+
+    <!-- Show/hide details -->
+    <h3 class="custom-color-scheme-details-header" ng-show="isCustom()">
+        {{'COLOR_SCHEME.SECTION_HEADER_DETAILS' | translate}}
+        <a class="custom-color-scheme-show-details" ng-click="showDetails()">{{'COLOR_SCHEME.ACTION_SHOW_DETAILS' | translate}}</a>
+        <a class="custom-color-scheme-hide-details" ng-click="hideDetails()">{{'COLOR_SCHEME.ACTION_HIDE_DETAILS' | translate}}</a>
+    </h3>
+
+    <!-- Custom color scheme details (internal representation -->
+    <textarea class="custom-color-scheme-details" ng-model="model" ng-show="isCustom()"></textarea>
+
 </div>
diff --git a/guacamole/src/main/webapp/translations/en.json b/guacamole/src/main/webapp/translations/en.json
index 924ad18cc..7b29549bc 100644
--- a/guacamole/src/main/webapp/translations/en.json
+++ b/guacamole/src/main/webapp/translations/en.json
@@ -148,6 +148,22 @@
 
     },
 
+    "COLOR_SCHEME" : {
+
+        "ACTION_CANCEL"       : "@:APP.ACTION_CANCEL",
+        "ACTION_HIDE_DETAILS" : "Hide",
+        "ACTION_SAVE"         : "@:APP.ACTION_SAVE",
+        "ACTION_SHOW_DETAILS" : "Show",
+
+        "FIELD_HEADER_BACKGROUND" : "Background",
+        "FIELD_HEADER_FOREGROUND" : "Foreground",
+
+        "FIELD_OPTION_CUSTOM" : "Custom...",
+
+        "SECTION_HEADER_DETAILS" : "Details:"
+
+    },
+
     "DATA_SOURCE_DEFAULT" : {
         "NAME" : "Default (XML)"
     },
@@ -370,8 +386,6 @@
         "FIELD_HEADER_CLIENT_CERT"     : "Client certificate:",
         "FIELD_HEADER_CLIENT_KEY"      : "Client key:",
         "FIELD_HEADER_COLOR_SCHEME"    : "Color scheme:",
-        "FIELD_HEADER_COLOR_SCHEME_BACKGROUND" : "Background",
-        "FIELD_HEADER_COLOR_SCHEME_FOREGROUND" : "Foreground",
         "FIELD_HEADER_CONTAINER"       : "Container name:",
         "FIELD_HEADER_CREATE_RECORDING_PATH"  : "Automatically create recording path:",
         "FIELD_HEADER_CREATE_TYPESCRIPT_PATH" : "Automatically create typescript path:",
@@ -398,7 +412,6 @@
         "FIELD_OPTION_BACKSPACE_127"   : "Delete (Ctrl-?)",
 
         "FIELD_OPTION_COLOR_SCHEME_BLACK_WHITE" : "Black on white",
-        "FIELD_OPTION_COLOR_SCHEME_CUSTOM"      : "Custom...",
         "FIELD_OPTION_COLOR_SCHEME_EMPTY"       : "",
         "FIELD_OPTION_COLOR_SCHEME_GRAY_BLACK"  : "Gray on black",
         "FIELD_OPTION_COLOR_SCHEME_GREEN_BLACK" : "Green on black",
@@ -554,8 +567,6 @@
 
         "FIELD_HEADER_BACKSPACE"    : "Backspace key sends:",
         "FIELD_HEADER_COLOR_SCHEME" : "Color scheme:",
-        "FIELD_HEADER_COLOR_SCHEME_BACKGROUND" : "Background",
-        "FIELD_HEADER_COLOR_SCHEME_FOREGROUND" : "Foreground",
         "FIELD_HEADER_COMMAND"      : "Execute command:",
         "FIELD_HEADER_CREATE_RECORDING_PATH" : "Automatically create recording path:",
         "FIELD_HEADER_CREATE_TYPESCRIPT_PATH" : "Automatically create typescript path:",
@@ -589,7 +600,6 @@
         "FIELD_OPTION_BACKSPACE_127"   : "Delete (Ctrl-?)",
 
         "FIELD_OPTION_COLOR_SCHEME_BLACK_WHITE" : "Black on white",
-        "FIELD_OPTION_COLOR_SCHEME_CUSTOM"      : "Custom...",
         "FIELD_OPTION_COLOR_SCHEME_EMPTY"       : "",
         "FIELD_OPTION_COLOR_SCHEME_GRAY_BLACK"  : "Gray on black",
         "FIELD_OPTION_COLOR_SCHEME_GREEN_BLACK" : "Green on black",
@@ -636,8 +646,6 @@
 
         "FIELD_HEADER_BACKSPACE"      : "Backspace key sends:",
         "FIELD_HEADER_COLOR_SCHEME"   : "Color scheme:",
-        "FIELD_HEADER_COLOR_SCHEME_BACKGROUND" : "Background",
-        "FIELD_HEADER_COLOR_SCHEME_FOREGROUND" : "Foreground",
         "FIELD_HEADER_CREATE_RECORDING_PATH" : "Automatically create recording path:",
         "FIELD_HEADER_CREATE_TYPESCRIPT_PATH" : "Automatically create typescript path:",
         "FIELD_HEADER_FONT_NAME"      : "Font name:",
@@ -666,7 +674,6 @@
         "FIELD_OPTION_BACKSPACE_127"   : "Delete (Ctrl-?)",
 
         "FIELD_OPTION_COLOR_SCHEME_BLACK_WHITE" : "Black on white",
-        "FIELD_OPTION_COLOR_SCHEME_CUSTOM"      : "Custom...",
         "FIELD_OPTION_COLOR_SCHEME_EMPTY"       : "",
         "FIELD_OPTION_COLOR_SCHEME_GRAY_BLACK"  : "Gray on black",
         "FIELD_OPTION_COLOR_SCHEME_GREEN_BLACK" : "Green on black",