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 @@ -
-
|
-
|