mirror of
https://github.com/fish-shell/fish-shell
synced 2025-01-13 21:44:16 +00:00
Rework color editing in fish_config. Bury customization mode a bit:
initially the user only sees the various themes, and has to activate customization mode to change colors. Tweak the appearance as well.
This commit is contained in:
ridiculousfish
parent
de2eea05b4
commit
5e7c01c251
5 changed files with 247 additions and 69 deletions
|
|
@ -1,5 +1,5 @@
|
|||
body {
|
||||
background-color: #292939;
|
||||
background-color: #292929;
|
||||
font-family: Courier, "Courier New", monospace;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ body {
|
|||
#tab_parent {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 50px;;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
|
|
@ -269,25 +269,26 @@ body {
|
|||
}
|
||||
|
||||
.colorpicker_term256_row {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.colorpicker_term256_cell {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: solid black 1px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.colorpicker_term256_selection_indicator {
|
||||
width: 19px;
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
margin: -2px;
|
||||
border: solid white 3px;
|
||||
margin: -4px;
|
||||
border: solid white 4px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.colorpicker_cell_selected {
|
||||
border: dashed white 3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
|
@ -302,6 +303,18 @@ body {
|
|||
position: relative; /* so that our absolutely positioned elements work */
|
||||
}
|
||||
|
||||
.cs_clickable {
|
||||
border: dotted 1px #777;
|
||||
padding: 4px;
|
||||
margin: -5px;
|
||||
}
|
||||
|
||||
.cs_editing {
|
||||
border: solid 3px #3399FF;
|
||||
padding: 4px;
|
||||
margin: -7px;
|
||||
}
|
||||
|
||||
.colorpicker_text_sample_tight {
|
||||
font-size: 10pt;
|
||||
line-height: 1.2em;
|
||||
|
|
@ -320,14 +333,22 @@ body {
|
|||
}
|
||||
|
||||
.color_picker_background_cells div {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-style: solid;
|
||||
border-color: #777;
|
||||
border-width: 0 0 1px 1px; /* top right bottom left */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.color_picker_background_cells span {
|
||||
float: left;
|
||||
font-size: 12pt;
|
||||
padding-top: 2px;
|
||||
padding-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color_scheme_choice_label {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 3px;
|
||||
|
|
@ -336,9 +357,17 @@ body {
|
|||
white-space: normal;
|
||||
}
|
||||
|
||||
.color_scheme_choices_scrollview {
|
||||
border-top: 1px solid #333;
|
||||
padding-top: 5px;
|
||||
overflow: scroll;
|
||||
max-height: 18em; /* about two and a half boxes */
|
||||
}
|
||||
|
||||
.color_scheme_choices_list {
|
||||
overflow-y: hidden; /* makes our height account for floats */
|
||||
padding: 0 10px 15px 10px; /* top right bottom left */
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.color_scheme_choice_container {
|
||||
|
|
@ -399,11 +428,11 @@ img.delete_icon {
|
|||
position: relative; /* so that our absolutely positioned elements work */
|
||||
}
|
||||
|
||||
.save_button, .prompt_save_button {
|
||||
.save_button, .prompt_save_button, .colors_close_button, .customize_theme_button {
|
||||
border-radius: 5px;
|
||||
border: solid rgba(71,71,71,0.5) 1px;
|
||||
padding: 5px 8px;
|
||||
font-size: 10pt;
|
||||
font-size: 13pt;
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
background-color: rgba(128,128,128,0.2);
|
||||
|
|
@ -411,6 +440,14 @@ img.delete_icon {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.save_button:hover, .customize_theme_button:hover {
|
||||
border-color: rgba(71,71,71,0.9);
|
||||
}
|
||||
|
||||
.button_highlight {
|
||||
background-color: rgba(128,128,128,0.6)
|
||||
}
|
||||
|
||||
.prompt_save_button {
|
||||
background-color: #333;
|
||||
border: solid #525252 1px;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<body>
|
||||
|
||||
<div id="ancestor">
|
||||
<span style="font-size: 16pt; color: #8888FF">fish</span><p id="global_error" class="error_msg" error-message></p>
|
||||
<span style="font-size: 16pt; color: #CCC">fish</span><p id="global_error" class="error_msg" error-message></p>
|
||||
<div id="parent">
|
||||
<div id="tab_parent" ng-controller="main">
|
||||
<div ng-class="{'tab': true, 'selected_tab': currentTab =='colors'}" id="tab_colors" ng-click="changeView('colors')">colors</div>
|
||||
|
|
|
|||
|
|
@ -243,6 +243,17 @@ term_256_colors = [ //247
|
|||
"ffffff",
|
||||
]
|
||||
|
||||
/* Given a color setting name like 'autosuggestion', return the user visible name we present */
|
||||
function user_visible_title_for_setting_name(name) {
|
||||
if (! name) return '';
|
||||
switch (name) {
|
||||
case 'param': return 'parameters';
|
||||
case 'escape': return 'escape sequences';
|
||||
case 'end': return 'statement terminators';
|
||||
default: return name + 's';
|
||||
}
|
||||
}
|
||||
|
||||
/* Returns array of values from a dictionary (or any object) */
|
||||
function dict_values(dict) {
|
||||
var result = [];
|
||||
|
|
@ -265,6 +276,11 @@ function get_colors_as_nested_array(colors, items_per_row) {
|
|||
|
||||
/* Given an RGB color as a hex string, like FF0033, convert to HSL, apply the function to adjust its lightness, then return the new color as an RGB string */
|
||||
function adjust_lightness(color_str, func) {
|
||||
/* Strip off hash prefix */
|
||||
if (color_str[0] == '#') {
|
||||
color_str = color_str.substring(1);
|
||||
}
|
||||
|
||||
/* Hack to handle for example F00 */
|
||||
if (color_str.length == 3) {
|
||||
color_str = color_str[0] + color_str[0] + color_str[1] + color_str[1] + color_str[2] + color_str[2]
|
||||
|
|
|
|||
|
|
@ -12,23 +12,27 @@ controllers.controller("main", function($scope, $location) {
|
|||
|
||||
controllers.controller("colorsController", function($scope, $http) {
|
||||
$scope.changeSelectedColorScheme= function(newScheme) {
|
||||
$scope.selectedColorScheme = newScheme;
|
||||
$scope.selectedColorScheme = angular.copy(newScheme);
|
||||
if ($scope.selectedColorScheme.preferred_background) {
|
||||
$scope.terminalBackgroundColor = $scope.selectedColorScheme.preferred_background;
|
||||
}
|
||||
$scope.selectedColorSetting = 'command';
|
||||
$scope.selectedColorSetting = false;
|
||||
$scope.customizationActive = false;
|
||||
$scope.csEditingType = false;
|
||||
$scope.colorArraysArray = $scope.getColorArraysArray();
|
||||
//TODO: Save button should be shown only when colors are changed
|
||||
$scope.showSaveButton = true;
|
||||
|
||||
$scope.noteThemeChanged();
|
||||
}
|
||||
|
||||
$scope.changeTerminalBackgroundColor = function(color) {
|
||||
$scope.terminalBackgroundColor = color;
|
||||
}
|
||||
|
||||
$scope.text_color_for_color = function(color) {
|
||||
return text_color_for_color(color);
|
||||
}
|
||||
$scope.text_color_for_color = text_color_for_color;
|
||||
|
||||
$scope.border_color_for_color = border_color_for_color;
|
||||
|
||||
$scope.getColorArraysArray = function() {
|
||||
var result = null;
|
||||
|
|
@ -38,13 +42,36 @@ controllers.controller("colorsController", function($scope, $http) {
|
|||
result = get_colors_as_nested_array(term_256_colors, 32);
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
$scope.beginCustomizationWithSetting = function(setting) {
|
||||
if (! $scope.customizationActive) {
|
||||
$scope.customizationActive = true;
|
||||
$scope.selectedColorSetting = setting;
|
||||
$scope.csEditingType = setting;
|
||||
$scope.csUserVisibleTitle = user_visible_title_for_setting_name(setting);
|
||||
}
|
||||
}
|
||||
|
||||
$scope.selectColorSetting = function(name) {
|
||||
$scope.selectedColorSetting = name;
|
||||
$scope.selectedColorSetting = name;
|
||||
$scope.csEditingType = $scope.customizationActive ? name : '';
|
||||
$scope.csUserVisibleTitle = user_visible_title_for_setting_name(name);
|
||||
$scope.beginCustomizationWithSetting(name);
|
||||
}
|
||||
|
||||
$scope.toggleCustomizationActive = function() {
|
||||
if (! $scope.customizationActive) {
|
||||
$scope.beginCustomizationWithSetting($scope.selectedColorSetting || 'command');
|
||||
} else {
|
||||
$scope.customizationActive = false;
|
||||
$scope.selectedColorSetting = '';
|
||||
$scope.csEditingType = '';
|
||||
}
|
||||
}
|
||||
|
||||
$scope.changeSelectedTextColor = function(color) {
|
||||
$scope.selectedColorScheme[$scope.selectedColorSetting] = color;
|
||||
$scope.noteThemeChanged();
|
||||
}
|
||||
|
||||
$scope.sampleTerminalBackgroundColors = ['white', '#' + solarized.base3, '#300', '#003', '#' + solarized.base03, '#232323', 'black'];
|
||||
|
|
@ -65,11 +92,25 @@ controllers.controller("colorsController", function($scope, $http) {
|
|||
$scope.changeSelectedColorScheme(currentScheme);
|
||||
})};
|
||||
|
||||
$scope.saveThemeButtonTitle = "Set Theme";
|
||||
|
||||
$scope.noteThemeChanged = function() {
|
||||
$scope.saveThemeButtonTitle = "Set Theme";
|
||||
}
|
||||
|
||||
$scope.setTheme = function() {
|
||||
var settingNames = ["autosuggestion", "command", "param", "redirection", "comment", "error", "quote", "end"];
|
||||
var remaining = settingNames.length;
|
||||
for (name in settingNames) {
|
||||
var postData = "what=" + settingNames[name] + "&color=" + $scope.selectedColorScheme[settingNames[name]] + "&background_color=&bold=&underline=";
|
||||
$http.post("/set_color/", postData, { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).success(function(data, status, headers, config) {
|
||||
if (status == 200) {
|
||||
remaining -= 1;
|
||||
if (remaining == 0) {
|
||||
/* All styles set! */
|
||||
$scope.saveThemeButtonTitle = "Theme Set!";
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,65 +1,149 @@
|
|||
<div>
|
||||
<!-- ko with: color_picker -->
|
||||
<span style="padding-left: 25px">Click to customize each color: </span><br>
|
||||
<div class="colorpicker_text_sample" ng-style="{'background-color': terminalBackgroundColor}">
|
||||
<span style="position: absolute; left: 10px; top: -6px;" data-ng-style="{'color': text_color_for_color(selectedColorScheme.preferred_background || 'white')}">{{ selectedColorScheme.name }}</span><br>
|
||||
<span style="position: absolute; left: 10px; top: 3px;" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}">{{ selectedColorScheme.name }}</span><br>
|
||||
<div class="color_picker_background_cells">
|
||||
<div ng-style="{'background-color': color}" ng-repeat="color in sampleTerminalBackgroundColors" ng-click="changeTerminalBackgroundColor(color)"></div>
|
||||
<span data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}">Background: </span>
|
||||
<div ng-style="{'background-color': color}" ng-repeat="color in sampleTerminalBackgroundColors" ng-click="changeTerminalBackgroundColor(color)" title="Preview with this background color.
|
||||
|
||||
fish cannot change the background color of your terminal. Refer to your terminal documentation to set its background color."></div>
|
||||
</div>
|
||||
<!-- This is the sample text -->
|
||||
<span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">/bright/vixens</span>
|
||||
<span data-ng-style="{ 'color': selectedColorScheme.param}" ng-click="selectColorSetting('param')">jump</span>
|
||||
<span data-ng-style="{ 'color': selectedColorScheme.end}" ng-click="selectColorSetting('end')">|</span>
|
||||
<span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">dozy</span>
|
||||
<span data-ng-style="{ 'color': selectedColorScheme.quote}" ng-click="selectColorSetting('quote')"> "fowl" </span>
|
||||
<span data-ng-style="{ 'color': selectedColorScheme.redirection}" ng-click="selectColorSetting('redirection')">> quack</span>
|
||||
<span data-ng-style="{ 'color': selectedColorScheme.end}" ng-click="selectColorSetting('end')">&</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">echo</span>
|
||||
<span data-ng-style="{ 'color': selectedColorScheme.error}" ng-click="selectColorSetting('error')">'Errors are the portals to discovery</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': selectedColorScheme.comment}" ng-click="selectColorSetting('comment')"># This is a comment</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">Th</span><span data-ng-style="{ 'color': selectedColorScheme.autosuggestion }" ng-click="selectColorSetting('autosuggestion')"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</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}"
|
||||
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}"
|
||||
ng-click="selectColorSetting('param')">jump</span>
|
||||
|
||||
<span class="save_button" style="position: absolute; right: 5px; bottom: 5px;" title="Terminal background color is not set automatically on Apply. See your terminal documentation to set its background color." data-ng-style="{'color': text_color_for_color(selectedColorScheme.preferred_background || 'white')}" ng-show="showSaveButton" ng-click="setTheme()">Apply</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}"
|
||||
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}"
|
||||
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}"
|
||||
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}"
|
||||
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}"
|
||||
ng-click="selectColorSetting('end')">&</span>
|
||||
|
||||
<br>
|
||||
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
|
||||
ng-mouseenter="csHoveredType = 'command'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ '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}"
|
||||
ng-click="selectColorSetting('error')">'Errors are the portals to discovery</span>
|
||||
|
||||
<br>
|
||||
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'comment'}"
|
||||
ng-mouseenter="csHoveredType = 'comment'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ 'color': selectedColorScheme.comment}"
|
||||
ng-click="selectColorSetting('comment')"># This is a comment</span>
|
||||
|
||||
<br>
|
||||
|
||||
<span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
|
||||
ng-mouseenter="csHoveredType = 'command'"
|
||||
ng-mouseleave="csHoveredType = false"
|
||||
data-ng-style="{ '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 }"
|
||||
ng-click="selectColorSetting('autosuggestion')">s is an autosuggestion</span>
|
||||
|
||||
|
||||
<div style="position: absolute; right: 5px; bottom: 5px;">
|
||||
|
||||
<span class="customize_theme_button"
|
||||
ng-class="{button_highlight: customizationActive}"
|
||||
data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}"
|
||||
ng-click="toggleCustomizationActive();">Customize</span>
|
||||
|
||||
<span class="save_button"
|
||||
data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}"
|
||||
ng-show="showSaveButton"
|
||||
ng-click="setTheme()">{{saveThemeButtonTitle}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!-- /ko -->
|
||||
</table>
|
||||
<div ng-show="customizationActive">
|
||||
<div style="margin: 10px 0 7px 35px;">Choose a color for {{csUserVisibleTitle}}:</div>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!-- /ko -->
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="color_scheme_choices_list">
|
||||
<div class="color_scheme_choice_container" data-ng-repeat="colorScheme in colorSchemes" ng-click="changeSelectedColorScheme(colorScheme)">
|
||||
<div class="color_scheme_choice_label">
|
||||
<!-- This click/clickBubble nonsense is so that we can have a separate URL inside a parent with an onClick handler -->
|
||||
<span>{{colorScheme.name }}</span><!--a data-bind="if: $data.url, click: function(){return true;}, clickBubble: false, attr: { href: $data.url}"><img class="external_link_img" src="external_link.png"></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>
|
||||
<br>
|
||||
<span data-ng-style="{'color': colorScheme.command}">echo</span>
|
||||
<span data-ng-style="{'color': colorScheme.error}">'Errors are the portals to discovery</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': colorScheme.comment}"># This is a comment</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': colorScheme.command}">Th</span><span data-ng-style="{ 'color': colorScheme.autosuggestion}"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 10px 0 7px 35px;">Preview a theme below:</div>
|
||||
|
||||
<div class="color_scheme_choices_scrollview">
|
||||
<div class="color_scheme_choices_list">
|
||||
<div class="color_scheme_choice_container" data-ng-repeat="colorScheme in colorSchemes" ng-click="changeSelectedColorScheme(colorScheme)">
|
||||
<div class="color_scheme_choice_label">
|
||||
<!-- This click/clickBubble nonsense is so that we can have a separate URL inside a parent with an onClick handler -->
|
||||
<span style="color: #AAA">{{colorScheme.name}}</span><!--a data-bind="if: $data.url, click: function(){return true;}, clickBubble: false, attr: { href: $data.url}"><img class="external_link_img" src="external_link.png"></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>
|
||||
<br>
|
||||
<span data-ng-style="{'color': colorScheme.command}">echo</span>
|
||||
<span data-ng-style="{'color': colorScheme.error}">'Errors are the portals to discovery</span>
|
||||
<br>
|
||||
<span data-ng-style="{ '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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue