diff options
Diffstat (limited to 'share/tools/web_config/partials/colors.html')
| -rw-r--r-- | share/tools/web_config/partials/colors.html | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/share/tools/web_config/partials/colors.html b/share/tools/web_config/partials/colors.html new file mode 100644 index 00000000..032ed310 --- /dev/null +++ b/share/tools/web_config/partials/colors.html @@ -0,0 +1,150 @@ +<div> + <!-- ko with: color_picker --> + <div class="colorpicker_text_sample" ng-style="{'background-color': terminalBackgroundColor}"> + <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"> + <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 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 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> + + <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 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 --> + {{colorScheme.name}} + <a data-ng-show="colorScheme.url" style="text-decoration: none; color: inherit;" href="{{colorScheme.url}}">➚</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> |