safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-10-30 00:23:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUACAMOLE-630: Move color scheme headers within color buttons.

Browse Source
This commit is contained in:
Michael Jumper
2019-08-06 23:09:20 -07:00
parent f9bfac9de2
commit a1a8be6fe5
5 changed files with 77 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
guacamole/src/main/webapp/app/form/directives/guacInputColor.js
View File

@@ -23,10 +23,37 @@
*/ */
angular.module('form').directive('guacInputColor', [function guacInputColor() { 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 = { var config = {
restrict: 'E', restrict: 'E',
replace: true, replace: true,
templateUrl: 'app/form/templates/guacInputColor.html', templateUrl: 'app/form/templates/guacInputColor.html',
transclude: true
}; };
config.scope = { config.scope = {
@@ -58,6 +85,15 @@ angular.module('form').directive('guacInputColor', [function guacInputColor() {
var $q = $injector.get('$q'); var $q = $injector.get('$q');
var $translate = $injector.get('$translate'); 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 // Init color picker after required translation strings are available
$q.all({ $q.all({
'save' : $translate('APP.ACTION_SAVE'), 'save' : $translate('APP.ACTION_SAVE'),
@@ -128,6 +164,7 @@ angular.module('form').directive('guacInputColor', [function guacInputColor() {
pickr.on('save', function colorChanged(color) { pickr.on('save', function colorChanged(color) {
$scope.$evalAsync(function updateModel() { $scope.$evalAsync(function updateModel() {
$scope.model = color.toHEXA().toString(); $scope.model = color.toHEXA().toString();
$scope.dark = isDark(pickr.getColor());
}); });
}); });
@@ -135,6 +172,7 @@ angular.module('form').directive('guacInputColor', [function guacInputColor() {
pickr.on('init', function pickrReady(color) { pickr.on('init', function pickrReady(color) {
$scope.$watch('model', function modelChanged(model) { $scope.$watch('model', function modelChanged(model) {
pickr.setColor(model); pickr.setColor(model);
$scope.dark = isDark(pickr.getColor());
}); });
}); });

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

@@ -57,6 +57,18 @@
height: 1.5em; height: 1.5em;
min-width: 1.25em; min-width: 1.25em;
border-radius: 0.15em; 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 /* Increase width of color picker to allow two even rows of eight color

4
guacamole/src/main/webapp/app/form/templates/guacInputColor.html
View File

@@ -1 +1,3 @@
<div input class="guac-input-color" ng-style="{ 'background-color' : model }"></div> <div class="guac-input-color" ng-class="{ 'dark' : dark }" ng-style="{ 'background-color' : model }">
<ng-transclude></ng-transclude>
</div>

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

@@ -9,18 +9,16 @@
<!-- Default foreground and background colors --> <!-- Default foreground and background colors -->
<tbody class="default-colors"> <tbody class="default-colors">
<tr> <tr>
<th>{{ getFieldHeader(field.name + '-foreground') | translate }}</th>
<td> <td>
<div class="palette-group"> <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> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<th>{{ getFieldHeader(field.name + '-background') | translate }}</th>
<td> <td>
<div class="palette-group"> <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> </div>
</td> </td>
</tr> </tr>
@@ -29,27 +27,26 @@
<!-- 16-color palette --> <!-- 16-color palette -->
<tbody class="palette"> <tbody class="palette">
<tr> <tr>
<th rowspan="2">{{ getFieldHeader(field.name + '-palette') | translate }}</th>
<td class="low-intensity-colors"> <td class="low-intensity-colors">
<div class="palette-group"> <div class="palette-group">
<div class="palette-group"> <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[0]" palette="defaultPalette">0</guac-input-color>
<guac-input-color model="customColorScheme.colors[1]" palette="defaultPalette"></guac-input-color> <guac-input-color model="customColorScheme.colors[1]" palette="defaultPalette">1</guac-input-color>
</div> </div>
<div class="palette-group"> <div class="palette-group">
<guac-input-color model="customColorScheme.colors[2]" 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"></guac-input-color> <guac-input-color model="customColorScheme.colors[3]" palette="defaultPalette">3</guac-input-color>
</div> </div>
</div> </div>
<div class="palette-group"> <div class="palette-group">
<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[4]" palette="defaultPalette">4</guac-input-color>
<guac-input-color model="customColorScheme.colors[5]" palette="defaultPalette"></guac-input-color> <guac-input-color model="customColorScheme.colors[5]" palette="defaultPalette">5</guac-input-color>
</div> </div>
<div class="palette-group"> <div class="palette-group">
<guac-input-color model="customColorScheme.colors[6]" 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"></guac-input-color> <guac-input-color model="customColorScheme.colors[7]" palette="defaultPalette">7</guac-input-color>
</div> </div>
</div> </div>
</div> </div>
@@ -60,22 +57,22 @@
<div class="palette-group"> <div class="palette-group">
<div class="palette-group"> <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[8]" palette="defaultPalette">8</guac-input-color>
<guac-input-color model="customColorScheme.colors[9]" palette="defaultPalette"></guac-input-color> <guac-input-color model="customColorScheme.colors[9]" palette="defaultPalette">9</guac-input-color>
</div> </div>
<div class="palette-group"> <div class="palette-group">
<guac-input-color model="customColorScheme.colors[10]" 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"></guac-input-color> <guac-input-color model="customColorScheme.colors[11]" palette="defaultPalette">11</guac-input-color>
</div> </div>
</div> </div>
<div class="palette-group"> <div class="palette-group">
<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[12]" palette="defaultPalette">12</guac-input-color>
<guac-input-color model="customColorScheme.colors[13]" palette="defaultPalette"></guac-input-color> <guac-input-color model="customColorScheme.colors[13]" palette="defaultPalette">13</guac-input-color>
</div> </div>
<div class="palette-group"> <div class="palette-group">
<guac-input-color model="customColorScheme.colors[14]" 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"></guac-input-color> <guac-input-color model="customColorScheme.colors[15]" palette="defaultPalette">15</guac-input-color>
</div> </div>
</div> </div>
</div> </div>

15
guacamole/src/main/webapp/translations/en.json
View File

@@ -370,9 +370,8 @@
"FIELD_HEADER_CLIENT_CERT" : "Client certificate:", "FIELD_HEADER_CLIENT_CERT" : "Client certificate:",
"FIELD_HEADER_CLIENT_KEY" : "Client key:", "FIELD_HEADER_CLIENT_KEY" : "Client key:",
"FIELD_HEADER_COLOR_SCHEME" : "Color scheme:", "FIELD_HEADER_COLOR_SCHEME" : "Color scheme:",
"FIELD_HEADER_COLOR_SCHEME_BACKGROUND" : "Background:", "FIELD_HEADER_COLOR_SCHEME_BACKGROUND" : "Background",
"FIELD_HEADER_COLOR_SCHEME_FOREGROUND" : "Foreground:", "FIELD_HEADER_COLOR_SCHEME_FOREGROUND" : "Foreground",
"FIELD_HEADER_COLOR_SCHEME_PALETTE" : "Palette:",
"FIELD_HEADER_CONTAINER" : "Container name:", "FIELD_HEADER_CONTAINER" : "Container name:",
"FIELD_HEADER_CREATE_RECORDING_PATH" : "Automatically create recording path:", "FIELD_HEADER_CREATE_RECORDING_PATH" : "Automatically create recording path:",
"FIELD_HEADER_CREATE_TYPESCRIPT_PATH" : "Automatically create typescript path:", "FIELD_HEADER_CREATE_TYPESCRIPT_PATH" : "Automatically create typescript path:",
@@ -555,9 +554,8 @@
"FIELD_HEADER_BACKSPACE" : "Backspace key sends:", "FIELD_HEADER_BACKSPACE" : "Backspace key sends:",
"FIELD_HEADER_COLOR_SCHEME" : "Color scheme:", "FIELD_HEADER_COLOR_SCHEME" : "Color scheme:",
"FIELD_HEADER_COLOR_SCHEME_BACKGROUND" : "Background:", "FIELD_HEADER_COLOR_SCHEME_BACKGROUND" : "Background",
"FIELD_HEADER_COLOR_SCHEME_FOREGROUND" : "Foreground:", "FIELD_HEADER_COLOR_SCHEME_FOREGROUND" : "Foreground",
"FIELD_HEADER_COLOR_SCHEME_PALETTE" : "Palette:",
"FIELD_HEADER_COMMAND" : "Execute command:", "FIELD_HEADER_COMMAND" : "Execute command:",
"FIELD_HEADER_CREATE_RECORDING_PATH" : "Automatically create recording path:", "FIELD_HEADER_CREATE_RECORDING_PATH" : "Automatically create recording path:",
"FIELD_HEADER_CREATE_TYPESCRIPT_PATH" : "Automatically create typescript path:", "FIELD_HEADER_CREATE_TYPESCRIPT_PATH" : "Automatically create typescript path:",
@@ -638,9 +636,8 @@
"FIELD_HEADER_BACKSPACE" : "Backspace key sends:", "FIELD_HEADER_BACKSPACE" : "Backspace key sends:",
"FIELD_HEADER_COLOR_SCHEME" : "Color scheme:", "FIELD_HEADER_COLOR_SCHEME" : "Color scheme:",
"FIELD_HEADER_COLOR_SCHEME_BACKGROUND" : "Background:", "FIELD_HEADER_COLOR_SCHEME_BACKGROUND" : "Background",
"FIELD_HEADER_COLOR_SCHEME_FOREGROUND" : "Foreground:", "FIELD_HEADER_COLOR_SCHEME_FOREGROUND" : "Foreground",
"FIELD_HEADER_COLOR_SCHEME_PALETTE" : "Palette:",
"FIELD_HEADER_CREATE_RECORDING_PATH" : "Automatically create recording path:", "FIELD_HEADER_CREATE_RECORDING_PATH" : "Automatically create recording path:",
"FIELD_HEADER_CREATE_TYPESCRIPT_PATH" : "Automatically create typescript path:", "FIELD_HEADER_CREATE_TYPESCRIPT_PATH" : "Automatically create typescript path:",
"FIELD_HEADER_FONT_NAME" : "Font name:", "FIELD_HEADER_FONT_NAME" : "Font name:",