mirror of
https://github.com/fish-shell/fish-shell
synced 2024-11-12 07:57:22 +00:00
Initial work to add support for new colors tab
This commit is contained in:
Siteshwar Vashisht
parent
bf656577d9
commit
5f6ec391e3
4 changed files with 900 additions and 5 deletions
447
share/tools/web_config/fishconfig.css
Normal file
447
share/tools/web_config/fishconfig.css
Normal file
|
|
@ -0,0 +1,447 @@
|
|||
body {
|
||||
background-color: #292939;
|
||||
font-family: Courier, "Courier New", monospace;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#ancestor {
|
||||
width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
#parent {
|
||||
width: 100%;
|
||||
min-height: 480px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
#tab_parent {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 50px;;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: table-cell;
|
||||
border: 1px solid #111;
|
||||
border-right: none;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 15px;
|
||||
font-size: 17pt;
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
background-color: #292929;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tab_parent :first-child {
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
|
||||
#tab_parent :last-child {
|
||||
border-right: 1px solid #111;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
|
||||
.tab_first {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.tab_last {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.selected_tab {
|
||||
background-color: black;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
#tab_contents {
|
||||
padding-top: 35px;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
clear: both;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.master_detail_table {
|
||||
display: table;
|
||||
margin-top: 10px;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.master {
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
min-width: 200px;
|
||||
font-size: 16pt;
|
||||
padding-bottom: 20px;
|
||||
padding-top: 35px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: table-cell;
|
||||
border: 1px solid #555;
|
||||
background-color: #181818;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
border-radius: 5;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detail_function {
|
||||
white-space: pre-wrap;
|
||||
width: 100%;
|
||||
font-size: 11pt;
|
||||
color: #BBB;
|
||||
}
|
||||
|
||||
.master_element {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 11px;
|
||||
padding-left: 5px;
|
||||
padding-right: 22px;
|
||||
font-size: 12pt;
|
||||
/* Make our border overlap the detail, even if we're unselected (so it doesn't jump when selected) */
|
||||
position: relative;
|
||||
left: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
|
||||
.selected_master_elem {
|
||||
border: 1px solid #555;
|
||||
border-right: none;
|
||||
background-color: #181818;
|
||||
|
||||
border-top-left-radius: 5;
|
||||
border-bottom-left-radius: 5;
|
||||
|
||||
/* Pad one less than .master_element, to accomodate our border. */
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.master_element_text {
|
||||
text-decoration: none;
|
||||
padding-bottom: 1px;
|
||||
border-bottom-style: inherit;
|
||||
border-bottom-color: inherit;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.master_element_description {
|
||||
text-decoration: none;
|
||||
padding-top: 15px;
|
||||
font-size: 10pt;
|
||||
border-bottom-style: inherit;
|
||||
border-bottom-color: inherit;
|
||||
border-bottom-width: 1px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selected_master_elem > .master_element_description {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* We have a newline between the label and description; hide it initially, but show it when it's selected */
|
||||
.master_element > br { display: none; }
|
||||
.selected_master_elem > br { display: inherit; }
|
||||
|
||||
/* Set this class to suppress the border bottom on master_element_texts with visible descriptions */
|
||||
.master_element_no_border { border-bottom-width: 0 }
|
||||
|
||||
.colorpicker_term256 {
|
||||
border: solid #444 1px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.colorpicker_modifiers {
|
||||
margin-top: 10px;
|
||||
display:inline-block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: #AAA;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.colorpicker_modifier_cell {
|
||||
cursor: pointer;
|
||||
display:inline-block;
|
||||
text-align: center;
|
||||
border: groove #333 2px;
|
||||
padding: 5px;
|
||||
margin-top: 5px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.modifier_cell_selected {
|
||||
color: #CCC;
|
||||
border-color: #AAA;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.data_table {
|
||||
table-layout:fixed;
|
||||
color: #CCC;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.data_table_row {
|
||||
}
|
||||
|
||||
.data_table_cell {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
vertical-align: top;
|
||||
overflow:hidden;
|
||||
border-bottom: #444 dotted 1px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.history_text {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
vertical-align: top;
|
||||
overflow:hidden;
|
||||
border-bottom: #444 dotted 1px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.history_delete {
|
||||
width: 20px;
|
||||
border-bottom: #444 dotted 1px;
|
||||
}
|
||||
|
||||
/* The CSS we apply when a table row is filtered */
|
||||
.data_table_row_filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no_overflow {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.colorpicker_target {
|
||||
margin: 0 0 -50px 0;
|
||||
position: relative;
|
||||
bottom: 47px;
|
||||
float: left; /* for some reason this makes the cells that it overlaps (before adjusting its bottom) clickable in Safari */
|
||||
}
|
||||
|
||||
.colorpicker_target_tab {
|
||||
cursor: pointer;
|
||||
color: #555;
|
||||
border: solid 1px #555;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
display: inline-block;
|
||||
background-color: black;
|
||||
margin-right: -2px;
|
||||
min-width: 110px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.colorpicker_target_selected {
|
||||
background-color: #181818; /* same as #detail */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.colorpicker_term256_row {
|
||||
}
|
||||
|
||||
.colorpicker_term256_cell {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: solid black 1px;
|
||||
}
|
||||
|
||||
.colorpicker_term256_selection_indicator {
|
||||
width: 19px;
|
||||
height: 16px;
|
||||
margin: -2px;
|
||||
border: solid white 3px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.colorpicker_cell_selected {
|
||||
border: dashed white 3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.colorpicker_text_sample, .colorpicker_text_sample_tight {
|
||||
font-size: 12pt;
|
||||
padding: 25px;
|
||||
margin: 5px 20px 25px 20px; /* top right bottom left */
|
||||
cursor: pointer;
|
||||
line-height: 1.8em;
|
||||
border: solid #777 1px;
|
||||
position: relative; /* so that our absolutely positioned elements work */
|
||||
}
|
||||
|
||||
.colorpicker_text_sample_tight {
|
||||
font-size: 10pt;
|
||||
line-height: 1.2em;
|
||||
margin: 0px 6px;
|
||||
max-width: 220px;
|
||||
padding: 5px;
|
||||
white-space:nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
.color_picker_background_cells {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.color_picker_background_cells div {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-style: solid;
|
||||
border-color: #777;
|
||||
border-width: 0 0 1px 1px; /* top right bottom left */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.color_scheme_choice_label {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 12pt;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.color_scheme_choices_list {
|
||||
overflow-y: hidden; /* makes our height account for floats */
|
||||
padding: 0 10px 15px 10px; /* top right bottom left */
|
||||
}
|
||||
|
||||
.color_scheme_choice_container {
|
||||
float: left;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.fake_cursor {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.error_msg {
|
||||
color: red;
|
||||
font-size: 12pt;
|
||||
margin-left: 24pt;
|
||||
margin-top: 5pt;
|
||||
margin-bottom: 5pt;
|
||||
}
|
||||
|
||||
img.delete_icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#table_filter_container {
|
||||
/* top right bottom left*/
|
||||
padding: 0 10 10 30;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.filter_text_box {
|
||||
width: 250px;
|
||||
padding: 5 10 5 10;
|
||||
background-color: #888;
|
||||
border: #222 solid 3px;
|
||||
border-radius: 15px;
|
||||
font-size: 12pt;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text_box_transient {
|
||||
color: #C8C8C8;
|
||||
}
|
||||
|
||||
.prompt_demo {
|
||||
/* This is the div that holds what the prompt looks like */
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
border-radius: 5px;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.save_button, .prompt_save_button {
|
||||
border-radius: 5px;
|
||||
border: solid rgba(71,71,71,0.5) 1px;
|
||||
padding: 5px 8px;
|
||||
font-size: 12pt;
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
background-color: rgba(128,128,128,0.2);
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prompt_save_button:hover {
|
||||
background-color: #333;
|
||||
border: solid #525252 1px;
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
.prompt_demo_text {
|
||||
white-space: pre;
|
||||
line-height: 170%;
|
||||
padding: 4px 12px;
|
||||
font-size: 14pt;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
height: 72px; /* this is really the min height */
|
||||
}
|
||||
|
||||
.prompt_function {
|
||||
/* This is the div that holds the prompt function's definition */
|
||||
width: 100%;
|
||||
color: #BBB;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.prompt_function_text {
|
||||
white-space: pre-wrap;
|
||||
padding: 25px 3px;
|
||||
}
|
||||
|
||||
.external_link_img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-top;
|
||||
margin-left: 10px;
|
||||
};
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
|
||||
<title>fish shell configuration</title>
|
||||
<link rel="stylesheet" type="text/css" href="webconfig.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="fishconfig.css"/>
|
||||
<script type="text/javascript" src="jquery.js"></script>
|
||||
<script type="text/javascript" src="angular.js"></script>
|
||||
<script type="text/javascript" src="webconfig.js"></script>
|
||||
|
|
|
|||
99
share/tools/web_config/partials/new_colors.html
Normal file
99
share/tools/web_config/partials/new_colors.html
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<div ng-controller="newColorsController">
|
||||
<!-- ko with: color_picker -->
|
||||
<span style="padding-left: 25px">Click to customize each color:</span><br>
|
||||
<div class="colorpicker_text_sample" data-bind="style: {backgroundColor: selected_sample_text_background_color}">
|
||||
<div class="color_picker_background_cells" data-bind="foreach: sample_text_background_colors">
|
||||
<div data-bind="style: { 'backgroundColor': $data}, click: $parent.selected_sample_text_background_color"></div>
|
||||
</div>
|
||||
<!-- This is the sample text -->
|
||||
<span data-ng-style="{ 'color': selectedSettings.command}">/bright/vixens</span>
|
||||
<span data-ng-style="{ 'color': selectedSettings.param}">jump</span>
|
||||
<span data-ng-style="{ 'color': selectedSettings.end}">|</span>
|
||||
<span data-ng-style="{ 'color': selectedSettings.command}">dozy</span>
|
||||
<span data-ng-style="{ 'color': selectedSettings.quote}"> "fowl" </span>
|
||||
<span data-ng-style="{ 'color': selectedSettings.redirection}">> quack</span>
|
||||
<span data-ng-style="{ 'color': selectedSettings.end}">&</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': selectedSettings.command}">echo</span>
|
||||
<span data-ng-style="{ 'color': selectedSettings.error}">'Errors are the portals to discovery</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': selectedSettings.comment}"># This is a comment</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': selectedSettings.command}">Th</span><span data-ng-style="{ 'color': selectedSettings.autosuggestion }"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</span>
|
||||
|
||||
<span class="save_button" style="position: absolute; right: 5px; bottom: 5px;" data-ng-style="{'color': text_color_for_color(selectedSettings.preferred_background)}">Apply</span>
|
||||
|
||||
</div>
|
||||
|
||||
<table class="colorpicker_term256" style="margin: 0px 20px;">
|
||||
<tbody>
|
||||
<tr class="colorpicker_term256_row" data-ng-repeat="color_array in color_arrays_array">
|
||||
<td class="colorpicker_term256_cell"
|
||||
data-ng-style="{'backgroundColor': color, 'color': color, 'border-color': border_color_for_color(color)}"
|
||||
data-ng-repeat="color in color_array">
|
||||
<!--css: { 'colorpicker_cell_selected': color === $parents[1].selected_color()}, click: $parents[1].select_color" -->
|
||||
</td>
|
||||
|
||||
<!--td class="colorpicker_term256_cell"
|
||||
data-bind="style: {'backgroundColor': '#' + $data, 'color': '#' + $data, 'border-color': 'black'},
|
||||
click: $parents[1].select_color">
|
||||
<div class="colorpicker_term256_selection_indicator" data-bind="visible: $data === $parents[1].selected_color(), style: {borderColor: border_color_for_color($data) }">hi</div>
|
||||
</td-->
|
||||
</tr>
|
||||
</tbody>
|
||||
<!-- /ko -->
|
||||
</table>
|
||||
|
||||
<div class="color_scheme_choices_list">
|
||||
<div class="color_scheme_choice_container" data-ng-repeat="color_scheme in color_schemes" data-ng-click="console.log('called'); selectedSettings = color_scheme">
|
||||
<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>{{color_scheme.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="{'backgroundColor: preferred_background':true}">
|
||||
<span data-ng-style="{'color': color_scheme.command}">/bright/vixens</span>
|
||||
<span data-ng-style="{'color': color_scheme.param}">jump</span>
|
||||
<span data-ng-style="{'color': color_scheme.end}">|</span>
|
||||
<span data-ng-style="{'color': color_scheme.command}">dozy</span>
|
||||
<span data-ng-style="{'color': color_scheme.quote}"> "fowl" </span>
|
||||
<span data-ng-style="{'color': color_scheme.redirection}">> quack</span>
|
||||
<span data-ng-style="{'color': color_scheme.end}">&</span>
|
||||
<br>
|
||||
<span data-ng-style="{'color': color_scheme.command}">echo</span>
|
||||
<span data-ng-style="{'color': color_scheme.error}">'Errors are the portals to discovery</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': color_scheme.comment}"># This is a comment</span>
|
||||
<br>
|
||||
<span data-ng-style="{ 'color': color_scheme.command}">Th</span><span data-ng-style="{ 'color': color_scheme.autosuggestion}"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: none">
|
||||
<div class="master_detail_table">
|
||||
<div class="master" data-bind="foreach: color_settings">
|
||||
<div class="master_element"
|
||||
data-bind="text: name,
|
||||
style: {color: label_color},
|
||||
click: $parent.selected_setting,
|
||||
css: {selected_master_elem: $parent.selected_setting() == $data}
|
||||
"></div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<table class="colorpicker_term256">
|
||||
<tbody>
|
||||
<tr class="colorpicker_term256_row" data-ng-repeat="color_array in color_arrays_array">
|
||||
<td class="colorpicker_term256_cell"
|
||||
data-ng-style="{'backgroundColor': color, 'color': color, 'border-color': border_color_for_color(color)}"
|
||||
data-ng-repeat="color in color_array">
|
||||
<!--css: { 'colorpicker_cell_selected': color === $parents[1].selected_color()}, click: $parents[1].select_color" -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!-- /ko -->
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
|
|
@ -21,8 +21,8 @@ webconfig.config(
|
|||
["$routeProvider", function($routeProvider) {
|
||||
$routeProvider
|
||||
.when("/colors", {
|
||||
controller: "colorsController",
|
||||
templateUrl: "partials/colors.html"
|
||||
controller: "newColorsController",
|
||||
templateUrl: "partials/new_colors.html"
|
||||
})
|
||||
.when("/prompt", {
|
||||
controller: "promptController",
|
||||
|
|
@ -61,7 +61,7 @@ webconfig.controller("main", function($scope, $location) {
|
|||
return cls;
|
||||
}
|
||||
})
|
||||
|
||||
/*
|
||||
webconfig.controller("colorsController", function($scope, $http) {
|
||||
$scope.term256Colors = [ "ffd7d7", "d7afaf", "af8787", "875f5f", "5f0000", "870000", "af0000", "d70000", "ff0000", "ff5f5f", "d75f5f", "d78787", "ff8787", "ffafaf", "ffaf87", "ffaf5f", "ffaf00", "ff875f", "ff8700", "ff5f00", "d75f00", "af5f5f", "af5f00", "d78700", "d7875f", "af875f", "af8700", "875f00", "d7af87", "ffd7af", "ffd787", "ffd75f", "d7af00", "d7af5f", "ffd700", "ffff5f", "ffff00", "ffff87", "ffffaf", "ffffd7", "d7ff00", "afd75f", "d7d700", "d7d787", "d7d7af", "afaf87", "87875f", "5f5f00", "878700", "afaf00", "afaf5f", "d7d75f", "d7ff5f", "d7ff87", "87ff00", "afff00", "afff5f", "afd700", "87d700", "87af00", "5f8700", "87af5f", "5faf00", "afd787", "d7ffd7", "d7ffaf", "afffaf", "afff87", "5fff00", "5fd700", "87d75f", "5fd75f", "87ff5f", "5fff5f", "87ff87", "afd7af", "87d787", "87d7af", "87af87", "5f875f", "5faf5f", "005f00", "008700", "00af00", "00d700", "00ff00", "00ff5f", "5fff87", "00ff87", "87ffaf", "afffd7", "5fd787", "00d75f", "5faf87", "00af5f", "5fffaf", "00ffaf", "5fd7af", "00d787", "00875f", "00af87", "00d7af", "5fffd7", "87ffd7", "00ffd7", "d7ffff", "afd7d7", "87afaf", "5f8787", "5fafaf", "87d7d7", "5fd7d7", "5fffff", "00ffff", "87ffff", "afffff", "00d7d7", "00d7ff", "5fd7ff", "5fafd7", "00afd7", "00afff", "0087af", "00afaf", "008787", "005f5f", "005f87", "0087d7", "0087ff", "5fafff", "87afff", "5f87d7", "5f87ff", "005fd7", "005fff", "005faf", "5f87af", "87afd7", "afd7ff", "87d7ff", "d7d7ff", "afafd7", "8787af", "afafff", "8787d7", "8787ff", "5f5fff", "5f5fd7", "5f5faf", "5f5f87", "00005f", "000087", "0000af", "0000d7", "0000ff", "5f00ff", "5f00d7", "5f00af", "5f0087", "8700af", "8700d7", "8700ff", "af00ff", "af00d7", "d700ff", "d75fff", "d787ff", "ffafd7", "ffafff", "ffd7ff", "d7afff", "d7afd7", "af87af", "af87d7", "af87ff", "875fd7", "875faf", "875fff", "af5fff", "af5fd7", "af5faf", "d75fd7", "d787d7", "ff87ff", "ff5fff", "ff5fd7", "ff00ff", "ff00af", "ff00d7", "d700af", "d700d7", "af00af", "870087", "5f005f", "87005f", "af005f", "af0087", "d70087", "d7005f", "ff0087", "ff005f", "ff5f87", "d75f87", "d75faf", "ff5faf", "ff87af", "ff87d7", "d787af", "af5f87", "875f87", "000000", "080808", "121212", "1c1c1c", "262626", "303030", "3a3a3a", "444444", "4e4e4e", "585858", "5f5f5f", "626262", "6c6c6c", "767676", "808080", "878787", "8a8a8a", "949494", "9e9e9e", "a8a8a8", "afafaf", "b2b2b2", "bcbcbc", "c6c6c6", "d0d0d0", "d7d7d7", "dadada", "e4e4e4", "eeeeee", "ffffff", ];
|
||||
|
||||
|
|
@ -133,6 +133,355 @@ webconfig.controller("colorsController", function($scope, $http) {
|
|||
|
||||
$scope.fetchColors();
|
||||
});
|
||||
*/
|
||||
|
||||
webconfig.controller("newColorsController", function($scope, $http) {
|
||||
$scope.term256Colors = [ "ffd7d7", "d7afaf", "af8787", "875f5f", "5f0000", "870000", "af0000", "d70000", "ff0000", "ff5f5f", "d75f5f", "d78787", "ff8787", "ffafaf", "ffaf87", "ffaf5f", "ffaf00", "ff875f", "ff8700", "ff5f00", "d75f00", "af5f5f", "af5f00", "d78700", "d7875f", "af875f", "af8700", "875f00", "d7af87", "ffd7af", "ffd787", "ffd75f", "d7af00", "d7af5f", "ffd700", "ffff5f", "ffff00", "ffff87", "ffffaf", "ffffd7", "d7ff00", "afd75f", "d7d700", "d7d787", "d7d7af", "afaf87", "87875f", "5f5f00", "878700", "afaf00", "afaf5f", "d7d75f", "d7ff5f", "d7ff87", "87ff00", "afff00", "afff5f", "afd700", "87d700", "87af00", "5f8700", "87af5f", "5faf00", "afd787", "d7ffd7", "d7ffaf", "afffaf", "afff87", "5fff00", "5fd700", "87d75f", "5fd75f", "87ff5f", "5fff5f", "87ff87", "afd7af", "87d787", "87d7af", "87af87", "5f875f", "5faf5f", "005f00", "008700", "00af00", "00d700", "00ff00", "00ff5f", "5fff87", "00ff87", "87ffaf", "afffd7", "5fd787", "00d75f", "5faf87", "00af5f", "5fffaf", "00ffaf", "5fd7af", "00d787", "00875f", "00af87", "00d7af", "5fffd7", "87ffd7", "00ffd7", "d7ffff", "afd7d7", "87afaf", "5f8787", "5fafaf", "87d7d7", "5fd7d7", "5fffff", "00ffff", "87ffff", "afffff", "00d7d7", "00d7ff", "5fd7ff", "5fafd7", "00afd7", "00afff", "0087af", "00afaf", "008787", "005f5f", "005f87", "0087d7", "0087ff", "5fafff", "87afff", "5f87d7", "5f87ff", "005fd7", "005fff", "005faf", "5f87af", "87afd7", "afd7ff", "87d7ff", "d7d7ff", "afafd7", "8787af", "afafff", "8787d7", "8787ff", "5f5fff", "5f5fd7", "5f5faf", "5f5f87", "00005f", "000087", "0000af", "0000d7", "0000ff", "5f00ff", "5f00d7", "5f00af", "5f0087", "8700af", "8700d7", "8700ff", "af00ff", "af00d7", "d700ff", "d75fff", "d787ff", "ffafd7", "ffafff", "ffd7ff", "d7afff", "d7afd7", "af87af", "af87d7", "af87ff", "875fd7", "875faf", "875fff", "af5fff", "af5fd7", "af5faf", "d75fd7", "d787d7", "ff87ff", "ff5fff", "ff5fd7", "ff00ff", "ff00af", "ff00d7", "d700af", "d700d7", "af00af", "870087", "5f005f", "87005f", "af005f", "af0087", "d70087", "d7005f", "ff0087", "ff005f", "ff5f87", "d75f87", "d75faf", "ff5faf", "ff87af", "ff87d7", "d787af", "af5f87", "875f87", "000000", "080808", "121212", "1c1c1c", "262626", "303030", "3a3a3a", "444444", "4e4e4e", "585858", "5f5f5f", "626262", "6c6c6c", "767676", "808080", "878787", "8a8a8a", "949494", "9e9e9e", "a8a8a8", "afafaf", "b2b2b2", "bcbcbc", "c6c6c6", "d0d0d0", "d7d7d7", "dadada", "e4e4e4", "eeeeee", "ffffff", ];
|
||||
|
||||
/* Returns array of values from a dictionary (or any object) */
|
||||
function dict_values(dict) {
|
||||
var result = [];
|
||||
for (var i in dict) result.push(dict[i]);
|
||||
return result;
|
||||
}
|
||||
|
||||
/* Return the array of colors as an array of N arrays of length items_per_row */
|
||||
function get_colors_as_nested_array(colors, items_per_row) {
|
||||
var result = new Array();
|
||||
for (var idx = 0; idx < colors.length; idx += items_per_row) {
|
||||
var row = new Array();
|
||||
for (var subidx = 0; subidx < items_per_row && idx + subidx < colors.length; subidx++) {
|
||||
row.push(colors[idx + subidx]);
|
||||
}
|
||||
result.push(row);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
$scope.text_color_for_color = function (color_str) {
|
||||
/* Use this function to make a color that contrasts well with the given color */
|
||||
var adjust = .5
|
||||
function compute_constrast(lightness){
|
||||
var new_lightness = lightness + adjust
|
||||
if (new_lightness > 1.0 || new_lightness < 0.0) {
|
||||
new_lightness -= 2 * adjust
|
||||
}
|
||||
return new_lightness
|
||||
}
|
||||
return adjust_lightness(color_str, compute_constrast);
|
||||
}
|
||||
|
||||
/* Our colors. The array itself is never modified, but may be replaced. */
|
||||
$scope.color_arrays_array = get_colors_as_nested_array($scope.term256Colors, 32);
|
||||
|
||||
var color_scheme_fish_default = {
|
||||
"name": "fish default",
|
||||
"colors": [],
|
||||
'preferred_background': 'black',
|
||||
|
||||
'autosuggestion': '555',
|
||||
'command': '005fd7',
|
||||
'param': '00afff',
|
||||
'redirection': '00afff',
|
||||
'comment': '990000',
|
||||
'error': 'ff0000',
|
||||
'escape': '00a6b2',
|
||||
'operator': '00a6b2',
|
||||
'quote': '999900',
|
||||
'end': '009900'
|
||||
};
|
||||
|
||||
|
||||
var TomorrowTheme = {
|
||||
tomorrow_night: {'Background': '1d1f21', 'Current Line': '282a2e', 'Selection': '373b41', 'Foreground': 'c5c8c6', 'Comment': '969896', 'Red': 'cc6666', 'Orange': 'de935f', 'Yellow': 'f0c674', 'Green': 'b5bd68', 'Aqua': '8abeb7', 'Blue': '81a2be', 'Purple': 'b294bb'
|
||||
},
|
||||
|
||||
tomorrow: {'Background': 'ffffff', 'Current Line': 'efefef', 'Selection': 'd6d6d6', 'Foreground': '4d4d4c', 'Comment': '8e908c', 'Red': 'c82829', 'Orange': 'f5871f', 'Yellow': 'eab700', 'Green': '718c00', 'Aqua': '3e999f', 'Blue': '4271ae', 'Purple': '8959a8'
|
||||
},
|
||||
|
||||
tomorrow_night_bright: {'Background': '000000', 'Current Line': '2a2a2a', 'Selection': '424242', 'Foreground': 'eaeaea', 'Comment': '969896', 'Red': 'd54e53', 'Orange': 'e78c45', 'Yellow': 'e7c547', 'Green': 'b9ca4a', 'Aqua': '70c0b1', 'Blue': '7aa6da', 'Purple': 'c397d8'},
|
||||
|
||||
apply: function(theme, receiver){
|
||||
receiver['autosuggestion'] = theme['Comment']
|
||||
receiver['command'] = theme['Purple']
|
||||
receiver['comment'] = theme['Yellow'] /* we want to use comment for autosuggestions */
|
||||
receiver['end'] = theme['Purple']
|
||||
receiver['error'] = theme['Red']
|
||||
receiver['param'] = theme['Blue']
|
||||
receiver['quote'] = theme['Green']
|
||||
receiver['redirection'] = theme['Aqua']
|
||||
|
||||
receiver['colors'] = []
|
||||
for (var key in theme) receiver['colors'].push(theme[key])
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var solarized = {
|
||||
base03: '002b36', base02: '073642', base01: '586e75', base00: '657b83', base0: '839496', base1: '93a1a1', base2: 'eee8d5', base3: 'fdf6e3', yellow: 'b58900', orange: 'cb4b16', red: 'dc322f', magenta: 'd33682', violet: '6c71c4', blue: '268bd2', cyan: '2aa198', green: '859900'
|
||||
};
|
||||
|
||||
/* Sample color schemes */
|
||||
var color_scheme_solarized_light = {
|
||||
name: "Solarized Light",
|
||||
colors: dict_values(solarized),
|
||||
|
||||
preferred_background: '#' + solarized.base3,
|
||||
|
||||
autosuggestion: solarized.base1,
|
||||
command: solarized.base01,
|
||||
comment: solarized.base1,
|
||||
end: solarized.blue,
|
||||
error: solarized.red,
|
||||
param: solarized.base00,
|
||||
quote: solarized.base0,
|
||||
redirection: solarized.violet,
|
||||
|
||||
url: 'http://ethanschoonover.com/solarized'
|
||||
};
|
||||
|
||||
var color_scheme_solarized_dark = {
|
||||
name: "Solarized Dark",
|
||||
colors: dict_values(solarized),
|
||||
preferred_background: '#' + solarized.base03,
|
||||
|
||||
autosuggestion: solarized.base01,
|
||||
command: solarized.base1,
|
||||
comment: solarized.base01,
|
||||
end: solarized.blue,
|
||||
error: solarized.red,
|
||||
param: solarized.base0,
|
||||
quote: solarized.base00,
|
||||
redirection: solarized.violet,
|
||||
|
||||
url: 'http://ethanschoonover.com/solarized'
|
||||
};
|
||||
|
||||
var color_scheme_tomorrow = {
|
||||
name: 'Tomorrow',
|
||||
preferred_background: 'white',
|
||||
url: 'https://github.com/chriskempson/tomorrow-theme'
|
||||
}
|
||||
TomorrowTheme.apply(TomorrowTheme.tomorrow, color_scheme_tomorrow)
|
||||
|
||||
var color_scheme_tomorrow_night = {
|
||||
name: 'Tomorrow Night',
|
||||
preferred_background: '#232323',
|
||||
url: 'https://github.com/chriskempson/tomorrow-theme'
|
||||
}
|
||||
TomorrowTheme.apply(TomorrowTheme.tomorrow_night, color_scheme_tomorrow_night)
|
||||
|
||||
var color_scheme_tomorrow_night_bright = {
|
||||
'name': 'Tomorrow Night Bright',
|
||||
'preferred_background': 'black',
|
||||
'url': 'https://github.com/chriskempson/tomorrow-theme',
|
||||
|
||||
}
|
||||
TomorrowTheme.apply(TomorrowTheme.tomorrow_night_bright, color_scheme_tomorrow_night_bright)
|
||||
|
||||
function construct_scheme_analogous(label, background, color_list) {
|
||||
return {
|
||||
name: label,
|
||||
preferred_background: background,
|
||||
colors: color_list,
|
||||
|
||||
command: color_list[0],
|
||||
quote: color_list[6],
|
||||
param: color_list[5],
|
||||
autosuggestion: color_list[4],
|
||||
|
||||
error: color_list[9],
|
||||
comment: color_list[12],
|
||||
|
||||
end: color_list[10],
|
||||
redirection: color_list[11]
|
||||
};
|
||||
}
|
||||
|
||||
function construct_scheme_triad(label, background, color_list) {
|
||||
return {
|
||||
name: label,
|
||||
preferred_background: background,
|
||||
colors: color_list,
|
||||
|
||||
command: color_list[0],
|
||||
quote: color_list[2],
|
||||
param: color_list[1],
|
||||
autosuggestion: color_list[3],
|
||||
redirection: color_list[4],
|
||||
|
||||
error: color_list[8],
|
||||
comment: color_list[10],
|
||||
|
||||
end: color_list[7],
|
||||
};
|
||||
}
|
||||
|
||||
function construct_scheme_complementary(label, background, color_list) {
|
||||
return {
|
||||
name: label,
|
||||
preferred_background: background,
|
||||
colors: color_list,
|
||||
|
||||
command: color_list[0],
|
||||
quote: color_list[4],
|
||||
param: color_list[3],
|
||||
autosuggestion: color_list[2],
|
||||
redirection: color_list[6],
|
||||
|
||||
error: color_list[5],
|
||||
comment: color_list[8],
|
||||
|
||||
end: color_list[9],
|
||||
};
|
||||
}
|
||||
|
||||
function construct_color_scheme_mono(label, background, from_end) {
|
||||
var mono_colors = ['000000', '121212', '1c1c1c', '262626', '303030', '3a3a3a', '444444', '4e4e4e', '585858', '5f5f5f', '626262', '6c6c6c', '767676', '808080', '878787', '8a8a8a', '949494', '9e9e9e', 'a8a8a8', 'afafaf', 'b2b2b2', 'bcbcbc', 'c6c6c6', 'd0d0d0', 'd7d7d7', 'dadada', 'e4e4e4', 'eeeeee', 'ffffff'];
|
||||
|
||||
if (from_end) mono_colors.reverse();
|
||||
|
||||
return {
|
||||
name: label,
|
||||
preferred_background: background,
|
||||
colors: mono_colors,
|
||||
|
||||
autosuggestion: '777777',
|
||||
command: mono_colors[0],
|
||||
comment: mono_colors[7],
|
||||
end: mono_colors[12],
|
||||
error: mono_colors[20],
|
||||
param: mono_colors[4],
|
||||
quote: mono_colors[10],
|
||||
redirection: mono_colors[15]
|
||||
};
|
||||
}
|
||||
|
||||
var additional_color_schemes = [
|
||||
construct_scheme_analogous('Snow Day', 'white', ['164CC9', '325197', '072D83', '4C7AE4', '7596E4', '4319CC', '4C3499', '260885', '724EE5', '9177E5', '02BDBD', '248E8E', '007B7B', '39DEDE', '65DEDE']),
|
||||
|
||||
construct_scheme_analogous('Lava', '#232323', ['FF9400', 'BF8330', 'A66000', 'FFAE40', 'FFC473', 'FFC000', 'BF9C30', 'A67D00', 'FFD040', 'FFDD73', 'FF4C00', 'BF5B30', 'A63100', 'FF7940', 'FF9D73']),
|
||||
|
||||
construct_scheme_analogous('Seaweed', '#232323', ['00BF32', '248F40', '007C21', '38DF64', '64DF85', '04819E', '206676', '015367', '38B2CE', '60B9CE', '8EEB00', '7CB02C', '5C9900', 'ACF53D', 'C0F56E']),
|
||||
|
||||
construct_scheme_triad('Fairground', '#003', ['0772A1', '225E79', '024A68', '3BA3D0', '63AFD0', 'D9005B', 'A3295C', '8D003B', 'EC3B86', 'EC6AA1', 'FFE100', 'BFAE30', 'A69200', 'FFE840', 'FFEE73']),
|
||||
|
||||
construct_scheme_complementary('Bay Cruise', 'black', ['009999', '1D7373', '006363', '33CCCC', '5CCCCC', 'FF7400', 'BF7130', 'A64B00', 'FF9640', 'FFB273']),
|
||||
|
||||
{
|
||||
'name': 'Old School',
|
||||
'preferred_background': 'black',
|
||||
|
||||
colors: ['00FF00', '30BE30', '00A400', '44FF44', '7BFF7B', 'FF0000', 'BE3030', 'A40000', 'FF7B7B', '777777', 'CCCCCC'],
|
||||
|
||||
autosuggestion: '777777',
|
||||
command: '00FF00',
|
||||
comment: '30BE30',
|
||||
end: 'FF7B7B',
|
||||
error: 'A40000',
|
||||
param: '30BE30',
|
||||
quote: '44FF44',
|
||||
redirection: '7BFF7B'
|
||||
},
|
||||
|
||||
{
|
||||
'name': 'Just a Touch',
|
||||
'preferred_background': 'black',
|
||||
|
||||
colors: ['B0B0B0', '969696', '789276', 'F4F4F4', 'A0A0F0', '666A80', 'F0F0F0', 'D7D7D7', 'B7B7B7', 'FFA779', 'FAFAFA'],
|
||||
|
||||
autosuggestion: '9C9C9C',
|
||||
command: 'F4F4F4',
|
||||
comment: 'B0B0B0',
|
||||
end: '969696',
|
||||
error: 'FFA779',
|
||||
param: 'A0A0F0',
|
||||
quote: '666A80',
|
||||
redirection: 'FAFAFA'
|
||||
},
|
||||
|
||||
construct_color_scheme_mono('Mono Lace', 'white', false),
|
||||
construct_color_scheme_mono('Mono Smoke', 'black', true)
|
||||
];
|
||||
|
||||
/* Array of FishColorSchemes */
|
||||
$scope.color_schemes = [color_scheme_fish_default, color_scheme_solarized_light, color_scheme_solarized_dark, color_scheme_tomorrow, color_scheme_tomorrow_night, color_scheme_tomorrow_night_bright];
|
||||
for (var i=0; i < additional_color_schemes.length; i++)
|
||||
$scope.color_schemes.push(additional_color_schemes[i])
|
||||
|
||||
var supported_setting_names = ['autosuggestion', 'command', 'comment', 'end', 'error', 'param', 'quote', 'redirection'];
|
||||
|
||||
$scope.selectedSettings = $scope.color_schemes[0];
|
||||
$scope.color_settings = $scope.color_schemes.colors;
|
||||
|
||||
range = function(start, end) {
|
||||
var result = [];
|
||||
for (var i = start; i <= end; i++) {
|
||||
result.push(i);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
$scope.selectedColorConfig = null;
|
||||
$scope.itemsPerRow = range(0, 15);
|
||||
$scope.totalRows = range(0, $scope.term256Colors.length/$scope.itemsPerRow.length);
|
||||
$scope.selectedCell = null;
|
||||
$scope.target = "text";
|
||||
|
||||
$scope.selectConfig = function(newSelection) {
|
||||
$scope.selectedColorConfig = newSelection;
|
||||
//console.log("Color :" + $scope.colorConfig[$scope.selectedColorConfig].color.toLowerCase() + $scope.term256Colors.indexOf($scope.colorConfig[$scope.selectedColorConfig].color.toLowerCase()));
|
||||
if ($scope.target == "background") {
|
||||
$scope.selectedCell = $scope.term256Colors.indexOf($scope.selectedColorConfig.background.toLowerCase());
|
||||
}
|
||||
else {
|
||||
$scope.selectedCell = $scope.term256Colors.indexOf($scope.selectedColorConfig.color.toLowerCase());
|
||||
}
|
||||
}
|
||||
|
||||
$scope.pickedColorCell = function(index) {
|
||||
console.log("color picked" + index + " " + $scope.term256Colors[index]);
|
||||
$scope.selectedCell = index;
|
||||
|
||||
if ($scope.target == "background") {
|
||||
$scope.selectedColorConfig.background = $scope.term256Colors[$scope.selectedCell];
|
||||
}
|
||||
else {
|
||||
$scope.selectedColorConfig.color = $scope.term256Colors[$scope.selectedCell];
|
||||
}
|
||||
|
||||
$scope.setColor();
|
||||
}
|
||||
|
||||
$scope.pickedColorPickerTarget = function(target) {
|
||||
console.log("Picked " + target);
|
||||
$scope.target = target;
|
||||
// Update selection in color picker
|
||||
$scope.selectConfig($scope.selectedColorConfig);
|
||||
}
|
||||
|
||||
$scope.setUnderline = function() {
|
||||
$scope.selectedColorConfig.underline = !$scope.selectedColorConfig.underline;
|
||||
$scope.setColor();
|
||||
}
|
||||
|
||||
$scope.fetchColors = function() {
|
||||
$http.get("/colors/").success(function(data, status, headers, config) {
|
||||
$scope.colorConfigs = data;
|
||||
$scope.selectedColorConfig = data[0];
|
||||
$scope.selectedCell = $scope.term256Colors.indexOf($scope.selectedColorConfig.color);
|
||||
})};
|
||||
|
||||
$scope.setColor = function() {
|
||||
var config = $scope.selectedColorConfig;
|
||||
var postData = "what=" + config.name + "&color=" + config.color + "&background_color="+ config.background + "&bold=" + config.bold + "&underline=" + config.underline;
|
||||
$http.post("/set_color/", postData, { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).success(function(data, status, headers, config) {
|
||||
console.log(data);
|
||||
})
|
||||
};
|
||||
|
||||
$scope.fetchColors();
|
||||
});
|
||||
|
||||
webconfig.controller("promptController", function($scope, $http) {
|
||||
$scope.selectedPrompt = null;
|
||||
|
|
|
|||
Loading…
Reference in a new issue