GUACAMOLE-630: Move color scheme headers within color buttons.
diff --git a/guacamole/src/main/webapp/app/form/directives/guacInputColor.js b/guacamole/src/main/webapp/app/form/directives/guacInputColor.js
index e5cd3bf..24ab501 100644
--- a/guacamole/src/main/webapp/app/form/directives/guacInputColor.js
+++ b/guacamole/src/main/webapp/app/form/directives/guacInputColor.js
@@ -23,10 +23,37 @@
*/
angular.module('form').directive('guacInputColor', [function guacInputColor() {
+ /**
+ * Returns whether the given color is relatively dark. A color is
+ * considered dark if white text would be more visible over a background
+ * of that color (provide better contrast) than black text.
+ *
+ * @param {HSVaColor} color
+ * The color to test.
+ *
+ * @returns {Boolean}
+ * true if the given color is relatively dark (white text would provide
+ * better contrast than black), false otherwise.
+ */
+ var isDark = function isDark(color) {
+
+ var rgb = color.toRGBA();
+
+ // Convert RGB to luminance in HSL space (as defined by the
+ // relative luminance formula given by the W3C for accessibility)
+ var luminance = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
+
+ // Consider the background to be dark if white text over that
+ // background would provide better contrast than black
+ return luminance <= 153; // 153 is the component value 0.6 converted from 0-1 to the 0-255 range
+
+ };
+
var config = {
restrict: 'E',
replace: true,
templateUrl: 'app/form/templates/guacInputColor.html',
+ transclude: true
};
config.scope = {
@@ -58,6 +85,15 @@
var $q = $injector.get('$q');
var $translate = $injector.get('$translate');
+ /**
+ * Whether the color currently selected is "dark" in the sense that the
+ * color white will have higher contrast against it than the color
+ * black.
+ *
+ * @type Boolean
+ */
+ $scope.dark = false;
+
// Init color picker after required translation strings are available
$q.all({
'save' : $translate('APP.ACTION_SAVE'),
@@ -128,6 +164,7 @@
pickr.on('save', function colorChanged(color) {
$scope.$evalAsync(function updateModel() {
$scope.model = color.toHEXA().toString();
+ $scope.dark = isDark(pickr.getColor());
});
});
@@ -135,6 +172,7 @@
pickr.on('init', function pickrReady(color) {
$scope.$watch('model', function modelChanged(model) {
pickr.setColor(model);
+ $scope.dark = isDark(pickr.getColor());
});
});
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 e3b393d..e34d619 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
@@ -57,6 +57,18 @@
height: 1.5em;
min-width: 1.25em;
border-radius: 0.15em;
+ line-height: 1.5em;
+ text-align: center;
+ font-size: 0.75em;
+ cursor: pointer;
+}
+
+.form-field .terminal-color-scheme-field .custom-color-scheme .guac-input-color.dark {
+ color: white;
+}
+
+.form-field .terminal-color-scheme-field .custom-color-scheme .palette .guac-input-color {
+ font-weight: bold;
}
/* Increase width of color picker to allow two even rows of eight color
diff --git a/guacamole/src/main/webapp/app/form/templates/guacInputColor.html b/guacamole/src/main/webapp/app/form/templates/guacInputColor.html
index de6f15e..35af778 100644
--- a/guacamole/src/main/webapp/app/form/templates/guacInputColor.html
+++ b/guacamole/src/main/webapp/app/form/templates/guacInputColor.html
@@ -1 +1,3 @@
-<div input class="guac-input-color" ng-style="{ 'background-color' : model }"></div>
\ No newline at end of file
+<div class="guac-input-color" ng-class="{ 'dark' : dark }" ng-style="{ 'background-color' : model }">
+ <ng-transclude></ng-transclude>
+</div>
\ No newline at end of file
diff --git a/guacamole/src/main/webapp/app/form/templates/terminalColorSchemeField.html b/guacamole/src/main/webapp/app/form/templates/terminalColorSchemeField.html
index 5a2db3a..8da6a79 100644
--- a/guacamole/src/main/webapp/app/form/templates/terminalColorSchemeField.html
+++ b/guacamole/src/main/webapp/app/form/templates/terminalColorSchemeField.html
@@ -9,18 +9,16 @@
<!-- Default foreground and background colors -->
<tbody class="default-colors">
<tr>
- <th>{{ getFieldHeader(field.name + '-foreground') | translate }}</th>
<td>
<div class="palette-group">
- <guac-input-color model="customColorScheme.foreground" palette="defaultPalette"></guac-input-color>
+ <guac-input-color model="customColorScheme.foreground" palette="defaultPalette">{{ getFieldHeader(field.name + '-foreground') | translate }}</guac-input-color>
</div>
</td>
</tr>
<tr>
- <th>{{ getFieldHeader(field.name + '-background') | translate }}</th>
<td>
<div class="palette-group">
- <guac-input-color model="customColorScheme.background" palette="defaultPalette"></guac-input-color>
+ <guac-input-color model="customColorScheme.background" palette="defaultPalette">{{ getFieldHeader(field.name + '-background') | translate }}</guac-input-color>
</div>
</td>
</tr>
@@ -29,27 +27,26 @@
<!-- 16-color palette -->
<tbody class="palette">
<tr>
- <th rowspan="2">{{ getFieldHeader(field.name + '-palette') | translate }}</th>
<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"></guac-input-color>
- <guac-input-color model="customColorScheme.colors[1]" palette="defaultPalette"></guac-input-color>
+ <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"></guac-input-color>
- <guac-input-color model="customColorScheme.colors[3]" palette="defaultPalette"></guac-input-color>
+ <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"></guac-input-color>
- <guac-input-color model="customColorScheme.colors[5]" palette="defaultPalette"></guac-input-color>
+ <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"></guac-input-color>
- <guac-input-color model="customColorScheme.colors[7]" palette="defaultPalette"></guac-input-color>
+ <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>
@@ -60,22 +57,22 @@
<div class="palette-group">
<div class="palette-group">
<div class="palette-group">
- <guac-input-color model="customColorScheme.colors[8]" palette="defaultPalette"></guac-input-color>
- <guac-input-color model="customColorScheme.colors[9]" palette="defaultPalette"></guac-input-color>
+ <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"></guac-input-color>
- <guac-input-color model="customColorScheme.colors[11]" palette="defaultPalette"></guac-input-color>
+ <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"></guac-input-color>
- <guac-input-color model="customColorScheme.colors[13]" palette="defaultPalette"></guac-input-color>
+ <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"></guac-input-color>
- <guac-input-color model="customColorScheme.colors[15]" palette="defaultPalette"></guac-input-color>
+ <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>
diff --git a/guacamole/src/main/webapp/translations/en.json b/guacamole/src/main/webapp/translations/en.json
index 19ee828..924ad18 100644
--- a/guacamole/src/main/webapp/translations/en.json
+++ b/guacamole/src/main/webapp/translations/en.json
@@ -370,9 +370,8 @@
"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_COLOR_SCHEME_PALETTE" : "Palette:",
+ "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:",
@@ -555,9 +554,8 @@
"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_COLOR_SCHEME_PALETTE" : "Palette:",
+ "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:",
@@ -638,9 +636,8 @@
"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_COLOR_SCHEME_PALETTE" : "Palette:",
+ "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:",
