GUACAMOLE-630: Allow raw contents of custom color scheme to be edited directly.

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) {

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"] {

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>