diff options
author | 2014-02-24 01:56:02 -0800 | |
---|---|---|
committer | 2014-02-24 01:56:02 -0800 | |
commit | 5e7c01c2518d0e0dd412f675b48ac59e8e84dc93 (patch) | |
tree | 3c662d3446c94897639ed00d08d264dae71e0d48 /share | |
parent | de2eea05b4f2b9443d8896dc8c52e0200711a64e (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.css | 57 | ||||
-rw-r--r-- | share/tools/web_config/index.html | 2 | ||||
-rw-r--r-- | share/tools/web_config/js/colorutils.js | 16 | ||||
-rw-r--r-- | share/tools/web_config/js/controllers.js | 55 | ||||
-rw-r--r-- | share/tools/web_config/partials/colors.html | 180 |
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')">> 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')">> 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}">> 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> |