mirror of
https://github.com/fish-shell/fish-shell.git
synced 2026-06-05 16:21:15 -03:00
fish_config: 'Webify' color definitions
The colors defined in `colorutils.js` are specified in fish format, and therefore RGB values lack the leading `#` character and do not fully follow the html/css spec (w3.org/TR/css-color-4/#typedef-hex-color). Web config sends these values as-is to the browser, without first converting to a browser-friendly format. While this (somehow) works for the most part, a few colors get lost along the way and do not display in the customization selector nor in the preview when selected. This behavior was seen in Firefox. To fix this, let's prepend the missing '#' character to all RGB colors defined in `colorutils.js`.
This commit is contained in:
Charles Gould
committed by
ridiculousfish
ridiculousfish
parent
2083acec2e
commit
c2fe319af0
@@ -192,34 +192,35 @@ function master_color_for_color(color_str) {
|
||||
}
|
||||
|
||||
/* Given a color name, like 'normal' or 'red' or 'FF00F0', return an RGB color string (or empty
|
||||
string) */
|
||||
string). If multiple colors are given, as in '555 brblack', interpret the first color. */
|
||||
function interpret_color(str) {
|
||||
str = str.toLowerCase();
|
||||
if (str == 'black') return '000000';
|
||||
if (str == 'red') return '800000';
|
||||
if (str == 'green') return '008000';
|
||||
if (str == 'brown') return '725000';
|
||||
if (str == 'yellow') return '808000';
|
||||
if (str == 'blue') return '000080';
|
||||
if (str == 'magenta') return '800080';
|
||||
if (str == 'purple') return '800080';
|
||||
if (str == 'cyan') return '008080';
|
||||
if (str == 'white') return 'c0c0c0';
|
||||
if (str == 'grey') return 'e5e5e5';
|
||||
if (str == 'brgrey') return '555555';
|
||||
if (str == 'brblack') return '808080';
|
||||
if (str == 'brred') return 'ff0000';
|
||||
if (str == 'brgreen') return '00ff00';
|
||||
if (str == 'brbrown') return 'ffff00';
|
||||
if (str == 'bryellow') return 'ffff00';
|
||||
if (str == 'brblue') return '0000ff';
|
||||
if (str == 'brmagenta') return 'ff00ff';
|
||||
if (str == 'brpurple') return 'ff00ff';
|
||||
if (str == 'brcyan') return '00ffff';
|
||||
if (str == 'brwhite') return 'ffffff';
|
||||
if (!str) return '';
|
||||
str = str.toLowerCase().split(" ")[0];
|
||||
if (str == 'black') return '#000000';
|
||||
if (str == 'red') return '#800000';
|
||||
if (str == 'green') return '#008000';
|
||||
if (str == 'brown') return '#725000';
|
||||
if (str == 'yellow') return '#808000';
|
||||
if (str == 'blue') return '#000080';
|
||||
if (str == 'magenta') return '#800080';
|
||||
if (str == 'purple') return '#800080';
|
||||
if (str == 'cyan') return '#008080';
|
||||
if (str == 'white') return '#c0c0c0';
|
||||
if (str == 'grey') return '#e5e5e5';
|
||||
if (str == 'brgrey') return '#555555';
|
||||
if (str == 'brblack') return '#808080';
|
||||
if (str == 'brred') return '#ff0000';
|
||||
if (str == 'brgreen') return '#00ff00';
|
||||
if (str == 'brbrown') return '#ffff00';
|
||||
if (str == 'bryellow') return '#ffff00';
|
||||
if (str == 'brblue') return '#0000ff';
|
||||
if (str == 'brmagenta') return '#ff00ff';
|
||||
if (str == 'brpurple') return '#ff00ff';
|
||||
if (str == 'brcyan') return '#00ffff';
|
||||
if (str == 'brwhite') return '#ffffff';
|
||||
if (str == 'normal') return '';
|
||||
if (str == 'reset') return '';
|
||||
return str
|
||||
return '#' + str
|
||||
}
|
||||
|
||||
var color_scheme_fish_default = {
|
||||
|
||||
@@ -34,6 +34,8 @@ controllers.controller("colorsController", function($scope, $http) {
|
||||
|
||||
$scope.border_color_for_color = border_color_for_color;
|
||||
|
||||
$scope.interpret_color = interpret_color;
|
||||
|
||||
$scope.getColorArraysArray = function() {
|
||||
var result = null;
|
||||
if ( $scope.selectedColorScheme.colors && $scope.selectedColorScheme.colors.length > 0)
|
||||
@@ -165,7 +167,6 @@ controllers.controller("promptController", function($scope, $http) {
|
||||
$scope.fetchSamplePrompts= function() {
|
||||
$http.get("sample_prompts/").then(function(arg) {
|
||||
$scope.samplePrompts = arg.data;
|
||||
$scope.samplePromptsArrayArray = get_colors_as_nested_array($scope.samplePrompts, 1);
|
||||
|
||||
if ($scope.selectedPrompt == null) {
|
||||
$scope.selectPrompt($scope.samplePrompts[0]);
|
||||
|
||||
@@ -14,43 +14,43 @@ fish cannot change the background color of your terminal. Refer to your terminal
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
|
||||
ng-mouseenter="csHoveredType = 'command'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.command}"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.command)}"
|
||||
ng-click="selectColorSetting('command')">/bright/vixens</span>
|
||||
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'param'}"
|
||||
ng-mouseenter="csHoveredType = 'param'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.param}"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.param)}"
|
||||
ng-click="selectColorSetting('param')">jump</span>
|
||||
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
|
||||
ng-mouseenter="csHoveredType = 'end'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.end}"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.end)}"
|
||||
ng-click="selectColorSetting('end')">|</span>
|
||||
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
|
||||
ng-mouseenter="csHoveredType = 'command'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.command}"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.command)}"
|
||||
ng-click="selectColorSetting('command')">dozy</span>
|
||||
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'quote'}"
|
||||
ng-mouseenter="csHoveredType = 'quote'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.quote}"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.quote)}"
|
||||
ng-click="selectColorSetting('quote')"> "fowl"</span>
|
||||
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'redirection'}"
|
||||
ng-mouseenter="csHoveredType = 'redirection'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.redirection}"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.redirection)}"
|
||||
ng-click="selectColorSetting('redirection')">> quack</span>
|
||||
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
|
||||
ng-mouseenter="csHoveredType = 'end'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.end}"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.end)}"
|
||||
ng-click="selectColorSetting('end')">&</span>
|
||||
|
||||
<br>
|
||||
@@ -58,13 +58,13 @@ fish cannot change the background color of your terminal. Refer to your terminal
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
|
||||
ng-mouseenter="csHoveredType = 'command'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.command}"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.command)}"
|
||||
ng-click="selectColorSetting('command')">echo</span>
|
||||
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'error'}"
|
||||
ng-mouseenter="csHoveredType = 'error'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.error}"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.error)}"
|
||||
ng-click="selectColorSetting('error')">'Errors are the portals to discovery</span>
|
||||
|
||||
<br>
|
||||
@@ -72,7 +72,7 @@ fish cannot change the background color of your terminal. Refer to your terminal
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'comment'}"
|
||||
ng-mouseenter="csHoveredType = 'comment'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.comment}"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.comment)}"
|
||||
ng-click="selectColorSetting('comment')"># This is a comment</span>
|
||||
|
||||
<br>
|
||||
@@ -80,13 +80,13 @@ fish cannot change the background color of your terminal. Refer to your terminal
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
|
||||
ng-mouseenter="csHoveredType = 'command'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.command}"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.command)}"
|
||||
ng-click="selectColorSetting('command')">Th</span><span
|
||||
class="fake_cursor"><span style="visibility: hidden">i</span></span><span
|
||||
ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'autosuggestion'}"
|
||||
ng-mouseenter="csHoveredType = 'autosuggestion'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.autosuggestion }"
|
||||
data-ng-style="{ 'color': interpret_color(selectedColorScheme.autosuggestion)}"
|
||||
ng-click="selectColorSetting('autosuggestion')">s is an autosuggestion</span>
|
||||
|
||||
|
||||
@@ -110,8 +110,8 @@ fish cannot change the background color of your terminal. Refer to your terminal
|
||||
<table class="colorpicker_term256" style="margin: 0px 20px;">
|
||||
<tbody>
|
||||
<tr class="colorpicker_term256_row" data-ng-repeat="color_array in colorArraysArray">
|
||||
<td class="colorpicker_term256_cell" data-ng-style="{'background-color': color, 'color': color}" ng-click="changeSelectedTextColor(color)" ng-repeat="color in color_array">
|
||||
<div class="colorpicker_term256_selection_indicator" ng-show="selectedColorScheme[selectedColorSetting] == color" ng-style="{'border-color': border_color_for_color(color)}"</div>
|
||||
<td class="colorpicker_term256_cell" data-ng-style="{'background-color': interpret_color(color)}" ng-click="changeSelectedTextColor(color)" ng-repeat="color in color_array">
|
||||
<div class="colorpicker_term256_selection_indicator" ng-show="selectedColorScheme[selectedColorSetting] == color" ng-style="{'border-color': interpret_color(border_color_for_color(color))}"</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -130,20 +130,20 @@ fish cannot change the background color of your terminal. Refer to your terminal
|
||||
<a data-ng-show="colorScheme.url" style="text-decoration: none; color: inherit;" ng-href="{{colorScheme.url}}">➚</a>
|
||||
</div>
|
||||
<div class="colorpicker_text_sample_tight" data-ng-style="{'background-color': colorScheme.preferred_background}">
|
||||
<span data-ng-style="{'color': colorScheme.command}">/bright/vixens</span>
|
||||
<span data-ng-style="{'color': colorScheme.param}">jump</span>
|
||||
<span data-ng-style="{'color': colorScheme.end}">|</span>
|
||||
<span data-ng-style="{'color': colorScheme.command}">dozy</span>
|
||||
<span data-ng-style="{'color': colorScheme.quote}"> "fowl" </span>
|
||||
<span data-ng-style="{'color': colorScheme.redirection}">> quack</span>
|
||||
<span data-ng-style="{'color': colorScheme.end}">&</span>
|
||||
<span data-ng-style="{'color': interpret_color(colorScheme.command)}">/bright/vixens</span>
|
||||
<span data-ng-style="{'color': interpret_color(colorScheme.param)}">jump</span>
|
||||
<span data-ng-style="{'color': interpret_color(colorScheme.end)}">|</span>
|
||||
<span data-ng-style="{'color': interpret_color(colorScheme.command)}">dozy</span>
|
||||
<span data-ng-style="{'color': interpret_color(colorScheme.quote)}"> "fowl" </span>
|
||||
<span data-ng-style="{'color': interpret_color(colorScheme.redirection)}">> quack</span>
|
||||
<span data-ng-style="{'color': interpret_color(colorScheme.end)}">&</span>
|
||||
<br>
|
||||
<span data-ng-style="{'color': colorScheme.command}">echo</span>
|
||||
<span data-ng-style="{'color': colorScheme.error}">'Errors are the portals to discovery</span>
|
||||
<span data-ng-style="{'color': interpret_color(colorScheme.command)}">echo</span>
|
||||
<span data-ng-style="{'color': interpret_color(colorScheme.error)}">'Errors are the portals to discovery</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': colorScheme.comment}"># This is a comment</span>
|
||||
<span data-ng-style="{'color': interpret_color(colorScheme.comment)}"># This is a comment</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': colorScheme.command}">Th</span><span class="fake_cursor"><span style="visibility: hidden">i</span></span><span data-ng-style="{ 'color': colorScheme.autosuggestion}">s is an autosuggestion</span>
|
||||
<span data-ng-style="{'color': interpret_color(colorScheme.command)}">Th</span><span class="fake_cursor"><span style="visibility: hidden">i</span></span><span data-ng-style="{ 'color': interpret_color(colorScheme.autosuggestion)}">s is an autosuggestion</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user