From 5e7c01c2518d0e0dd412f675b48ac59e8e84dc93 Mon Sep 17 00:00:00 2001 From: ridiculousfish Date: Mon, 24 Feb 2014 01:56:02 -0800 Subject: [PATCH] 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. --- share/tools/web_config/fishconfig.css | 57 ++++-- share/tools/web_config/index.html | 2 +- share/tools/web_config/js/colorutils.js | 16 ++ share/tools/web_config/js/controllers.js | 55 +++++- share/tools/web_config/partials/colors.html | 186 ++++++++++++++------ 5 files changed, 247 insertions(+), 69 deletions(-) diff --git a/share/tools/web_config/fishconfig.css b/share/tools/web_config/fishconfig.css index 39d1201ab..f018e4edc 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 ba25a893c..8173238dd 100644 --- a/share/tools/web_config/index.html +++ b/share/tools/web_config/index.html @@ -15,7 +15,7 @@
- fish

+ fish

colors
diff --git a/share/tools/web_config/js/colorutils.js b/share/tools/web_config/js/colorutils.js index b78b82a7d..2bc24d971 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 385e4e375..796e7729a 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 69bf6a479..3738ec2b8 100644 --- a/share/tools/web_config/partials/colors.html +++ b/share/tools/web_config/partials/colors.html @@ -1,65 +1,149 @@
- Click to customize each color:
- {{ selectedColorScheme.name }}
+ {{ selectedColorScheme.name }}
-
+ Background: +
- /bright/vixens - jump - | - dozy - "fowl" - > quack - & -
- echo - 'Errors are the portals to discovery -
- # This is a comment -
- This is an autosuggestion + /bright/vixens + + jump - Apply + | + + dozy + + "fowl" + + > quack + + & + +
+ + echo + + 'Errors are the portals to discovery + +
+ + # This is a comment + +
+ + This is an autosuggestion + + +
+ + Customize + + {{saveThemeButtonTitle}} +
- - - - - - - -
-
-
+
+
Choose a color for {{csUserVisibleTitle}}:
+ + + + + + + +
+
+
+
-
-
-
- - {{colorScheme.name }} -
-
- /bright/vixens - jump - | - dozy - "fowl" - > quack - & -
- echo - 'Errors are the portals to discovery -
- # This is a comment -
- This is an autosuggestion -
-
+
Preview a theme below:
+ +
+
+
+
+ + {{colorScheme.name}} +
+
+ /bright/vixens + jump + | + dozy + "fowl" + > quack + & +
+ echo + 'Errors are the portals to discovery +
+ # This is a comment +
+ This is an autosuggestion +
+
+