safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 13:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael Jumper
2019-08-07 23:13:02 -07:00
parent 86d18b061b
commit 32fd94d8d6
3 changed files with 72 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
guacamole/src/main/webapp/app/form/controllers/terminalColorSchemeFieldController.js
View File

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

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

@@ -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 {
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 {
.terminal-color-scheme-field .custom-color-scheme-section {
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,
.form-field .terminal-color-scheme-field .custom-color-scheme-show-details {
.terminal-color-scheme-field .custom-color-scheme-hide-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;

108
guacamole/src/main/webapp/app/form/templates/terminalColorSchemeField.html
View File

@@ -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 -->
<tbody class="default-colors">
<tr>
<td>
<div class="palette-group">
<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">{{ 'COLOR_SCHEME.FIELD_HEADER_BACKGROUND' | translate }}</guac-input-color>
</div>
</td>
</tr>
</tbody>
<!-- Default foreground color -->
<div class="custom-color-scheme-section default-color foreground">
<guac-input-color model="customColorScheme.foreground"
palette="defaultPalette">
{{ 'COLOR_SCHEME.FIELD_HEADER_FOREGROUND' | translate }}
</guac-input-color>
</div>
<!-- 16-color palette -->
<tbody class="palette">
<tr>
<td class="low-intensity-colors">
<div class="palette-group">
<div class="palette-group">
<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>
<!-- Default background color -->
<div class="custom-color-scheme-section default-color background">
<guac-input-color model="customColorScheme.background"
palette="defaultPalette">
{{ 'COLOR_SCHEME.FIELD_HEADER_BACKGROUND' | translate }}
</guac-input-color>
</div>
</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()">