aboutsummaryrefslogtreecommitdiffhomepage
path: root/share
diff options
context:
space:
mode:
authorGravatar ridiculousfish <corydoras@ridiculousfish.com>2014-02-24 01:56:02 -0800
committerGravatar ridiculousfish <corydoras@ridiculousfish.com>2014-02-24 01:56:02 -0800
commit5e7c01c2518d0e0dd412f675b48ac59e8e84dc93 (patch)
tree3c662d3446c94897639ed00d08d264dae71e0d48 /share
parentde2eea05b4f2b9443d8896dc8c52e0200711a64e (diff)
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.
Diffstat (limited to 'share')
-rw-r--r--share/tools/web_config/fishconfig.css57
-rw-r--r--share/tools/web_config/index.html2
-rw-r--r--share/tools/web_config/js/colorutils.js16
-rw-r--r--share/tools/web_config/js/controllers.js55
-rw-r--r--share/tools/web_config/partials/colors.html180
5 files changed, 244 insertions, 66 deletions
diff --git a/share/tools/web_config/fishconfig.css b/share/tools/web_config/fishconfig.css
index 39d1201a..f018e4ed 100644
--- a/share/tools/web_config/fishconfig.css
+++ b/share/tools/web_config/fishconfig.css
@@ -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;
diff --git a/share/tools/web_config/index.html b/share/tools/web_config/index.html
index ba25a893..8173238d 100644
--- a/share/tools/web_config/index.html
+++ b/share/tools/web_config/index.html
@@ -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>
diff --git a/share/tools/web_config/js/colorutils.js b/share/tools/web_config/js/colorutils.js
index b78b82a7..2bc24d97 100644
--- a/share/tools/web_config/js/colorutils.js
+++ b/share/tools/web_config/js/colorutils.js
@@ -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]
diff --git a/share/tools/web_config/js/controllers.js b/share/tools/web_config/js/controllers.js
index 385e4e37..796e7729 100644
--- a/share/tools/web_config/js/controllers.js
+++ b/share/tools/web_config/js/controllers.js
@@ -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!";
+ }
+ }
})
}
};
diff --git a/share/tools/web_config/partials/colors.html b/share/tools/web_config/partials/colors.html
index 69bf6a47..3738ec2b 100644
--- a/share/tools/web_config/partials/colors.html
+++ b/share/tools/web_config/partials/colors.html
@@ -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')">&gt; quack</span>
- <span 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')">/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 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')">&gt; 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 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>
+
+ <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 data-ng-style="{ 'color': selectedColorScheme.comment}" ng-click="selectColorSetting('comment')"># This is a comment</span>
+
+ <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 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')">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>
+
- <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>
+ <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}">&gt; 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}">&gt; 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>