GUACAMOLE-630: Simplify terminal color scheme field structure and styling.

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

@@ -58,9 +58,25 @@ angular.module('form').controller('terminalColorSchemeFieldController', ['$scope
     /**
      * Whether the raw details of the custom color scheme should be shown. By
      * default, such details are hidden.
+     *
+     * @type Boolean
      */
     $scope.detailsShown = false;
 
+    /**
+     * The palette indices of all colors which are considered low-intensity.
+     *
+     * @type Number[]
+     */
+    $scope.lowIntensity = [ 0, 1, 2, 3, 4, 5, 6, 7 ];
+
+    /**
+     * The palette indices of all colors which are considered high-intensity.
+     *
+     * @type Number[]
+     */
+    $scope.highIntensity = [ 8, 9, 10, 11, 12, 13, 14, 15 ];
+
     /**
      * The string value which is assigned to selectedColorScheme if a custom
      * color scheme is selected.

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

@@ -17,15 +17,15 @@
  * under the License.
  */
 
-.form-field .terminal-color-scheme-field {
+.terminal-color-scheme-field {
     max-width: 320px;
 }
 
-.form-field .terminal-color-scheme-field select {
+.terminal-color-scheme-field select {
     width: 100%;
 }
 
-.form-field .terminal-color-scheme-field .custom-color-scheme {
+.terminal-color-scheme-field .custom-color-scheme {
     background: #EEE;
     padding: 0.5em;
     border: 1px solid silver;
@@ -34,26 +34,11 @@
     width: 100%;
 }
 
-.form-field .terminal-color-scheme-field .custom-color-scheme th {
+.terminal-color-scheme-field .custom-color-scheme-section  {
-    text-align: left;
-    font-weight: normal;
-    vertical-align: top;
-    width: 0;
-}
-
-.form-field .terminal-color-scheme-field .custom-color-scheme td {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-.form-field .terminal-color-scheme-field .custom-color-scheme .palette-group {
     display: flex;
-    flex-wrap: wrap;
-    flex: 1;
 }
 
-.form-field .terminal-color-scheme-field .custom-color-scheme .guac-input-color {
+.terminal-color-scheme-field .guac-input-color {
     display: block;
     margin: 2px;
     flex: 1;
@@ -65,30 +50,23 @@
     text-align: center;
     font-size: 0.75em;
     cursor: pointer;
-}
-
-.form-field .terminal-color-scheme-field .custom-color-scheme .guac-input-color.read-only {
-    cursor: not-allowed;
-}
-
-/*
- * 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 {
+.terminal-color-scheme-field .guac-input-color.read-only {
+    cursor: not-allowed;
+}
+
+.terminal-color-scheme-field .guac-input-color.dark {
     color: white;
 }
 
-.form-field .terminal-color-scheme-field .custom-color-scheme .palette .guac-input-color {
+.terminal-color-scheme-field .palette .guac-input-color {
     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 {
+.terminal-color-scheme-field.custom-color-scheme-details-hidden .custom-color-scheme .palette .guac-input-color {
     color: transparent;
 }
 
@@ -96,17 +74,17 @@
  * Custom color scheme details header
  */
 
-.form-field .terminal-color-scheme-field .custom-color-scheme-details-header {
+.terminal-color-scheme-field .custom-color-scheme-details-header {
     font-size: 0.8em;
     margin: 0.5em 0;
     padding: 0;
 }
 
-.form-field .terminal-color-scheme-field .custom-color-scheme-details-header::before {
+.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 {
+.terminal-color-scheme-field.custom-color-scheme-details-visible .custom-color-scheme-details-header::before {
     content: '▾ ';
 }
 
@@ -115,8 +93,8 @@
  */
 
 /* Render show/hide as a link */
-.form-field .terminal-color-scheme-field .custom-color-scheme-hide-details,
+.terminal-color-scheme-field .custom-color-scheme-hide-details,
-.form-field .terminal-color-scheme-field .custom-color-scheme-show-details {
+.terminal-color-scheme-field .custom-color-scheme-show-details {
     color: blue;
     text-decoration: underline;
     cursor: pointer;
@@ -124,15 +102,15 @@
     font-weight: normal;
 }
 
-.form-field .terminal-color-scheme-field .custom-color-scheme-hide-details {
+.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 {
+.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 {
+.terminal-color-scheme-field.custom-color-scheme-details-visible .custom-color-scheme-show-details {
     display: none;
 }
 
@@ -140,11 +118,11 @@
  * Color scheme details
  */
 
-.form-field .terminal-color-scheme-field .custom-color-scheme-details {
+.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 {
+.terminal-color-scheme-field.custom-color-scheme-details-visible .custom-color-scheme-details {
     display: block;
     width: 100%;
     margin: 0.5em 0;

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

@@ -11,83 +11,43 @@
     </select>
 
     <!-- Custom color scheme -->
-    <table class="custom-color-scheme" ng-show="isCustom()">
+    <div class="custom-color-scheme" ng-show="isCustom()">
 
-        <!-- Default foreground and background colors -->
+        <!-- Default foreground color -->
-        <tbody class="default-colors">
+        <div class="custom-color-scheme-section default-color foreground">
-            <tr>
+            <guac-input-color model="customColorScheme.foreground"
-                <td>
+                              palette="defaultPalette">
-                    <div class="palette-group">
+                {{ 'COLOR_SCHEME.FIELD_HEADER_FOREGROUND' | translate }}
-                        <guac-input-color model="customColorScheme.foreground" palette="defaultPalette">{{ 'COLOR_SCHEME.FIELD_HEADER_FOREGROUND' | translate }}</guac-input-color>
+            </guac-input-color>
         </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="palette-group">
-                        <guac-input-color model="customColorScheme.background" palette="defaultPalette">{{ 'COLOR_SCHEME.FIELD_HEADER_BACKGROUND' | translate }}</guac-input-color>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
 
-        <!-- 16-color palette -->
+        <!-- Default background color -->
-        <tbody class="palette">
+        <div class="custom-color-scheme-section default-color background">
-            <tr>
+            <guac-input-color model="customColorScheme.background"
-                <td class="low-intensity-colors">
+                              palette="defaultPalette">
-                    <div class="palette-group">
+                {{ 'COLOR_SCHEME.FIELD_HEADER_BACKGROUND' | translate }}
-                        <div class="palette-group">
+            </guac-input-color>
-                            <div class="palette-group">
-                                <guac-input-color model="customColorScheme.colors[0]" palette="defaultPalette">0</guac-input-color>
-                                <guac-input-color model="customColorScheme.colors[1]" palette="defaultPalette">1</guac-input-color>
         </div>
-                            <div class="palette-group">
-                                <guac-input-color model="customColorScheme.colors[2]" palette="defaultPalette">2</guac-input-color>
-                                <guac-input-color model="customColorScheme.colors[3]" palette="defaultPalette">3</guac-input-color>
-                            </div>
-                        </div>
-                        <div class="palette-group">
-                            <div class="palette-group">
-                                <guac-input-color model="customColorScheme.colors[4]" palette="defaultPalette">4</guac-input-color>
-                                <guac-input-color model="customColorScheme.colors[5]" palette="defaultPalette">5</guac-input-color>
-                            </div>
-                            <div class="palette-group">
-                                <guac-input-color model="customColorScheme.colors[6]" palette="defaultPalette">6</guac-input-color>
-                                <guac-input-color model="customColorScheme.colors[7]" palette="defaultPalette">7</guac-input-color>
-                            </div>
-                        </div>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td class="high-intensity-colors">
-                    <div class="palette-group">
-                        <div class="palette-group">
-                            <div class="palette-group">
-                                <guac-input-color model="customColorScheme.colors[8]" palette="defaultPalette">8</guac-input-color>
-                                <guac-input-color model="customColorScheme.colors[9]" palette="defaultPalette">9</guac-input-color>
-                            </div>
-                            <div class="palette-group">
-                                <guac-input-color model="customColorScheme.colors[10]" palette="defaultPalette">10</guac-input-color>
-                                <guac-input-color model="customColorScheme.colors[11]" palette="defaultPalette">11</guac-input-color>
-                            </div>
-                        </div>
-                        <div class="palette-group">
-                            <div class="palette-group">
-                                <guac-input-color model="customColorScheme.colors[12]" palette="defaultPalette">12</guac-input-color>
-                                <guac-input-color model="customColorScheme.colors[13]" palette="defaultPalette">13</guac-input-color>
-                            </div>
-                            <div class="palette-group">
-                                <guac-input-color model="customColorScheme.colors[14]" palette="defaultPalette">14</guac-input-color>
-                                <guac-input-color model="customColorScheme.colors[15]" palette="defaultPalette">15</guac-input-color>
-                            </div>
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
 
-    </table>
+        <!-- Low intensity portion of 16-color palette -->
+        <div class="custom-color-scheme-section palette low-intensity">
+            <guac-input-color ng-repeat="index in lowIntensity"
+                              model="customColorScheme.colors[index]"
+                              palette="defaultPalette">
+                {{ index }}
+            </guac-input-color>
+        </div>
+
+        <!-- High intensity portion of 16-color palette -->
+        <div class="custom-color-scheme-section palette high-intensity">
+            <guac-input-color ng-repeat="index in highIntensity"
+                              model="customColorScheme.colors[index]"
+                              palette="defaultPalette">
+                {{ index }}
+            </guac-input-color>
+        </div>
+
+    </div>
 
     <!-- Show/hide details -->
     <h3 class="custom-color-scheme-details-header" ng-show="isCustom()">