1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
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>
|
