espterm
/
espterm-front-end
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

removed themes from css and added 256color preview in help page

Browse Source
box-drawing
Ondřej Hruška 7 years ago
parent 865efe41f7
commit 3dcb3fe972
7 changed files with 142 additions and 156 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      _debug_replacements.php
  2. 2
      js/index.js
  3. 31
      js/themes.js
  4. 83
      pages/cfg_term.php
  5. 3
      pages/help.php
  6. 105
      pages/help/sgr_colors.php
  7. 72
      sass/pages/_term.scss

2
_debug_replacements.php
Unescape View File

@ -90,5 +90,5 @@ return [
'uart_stopbits' => 1, 'uart_stopbits' => 1,
'uart_parity' => 2, 'uart_parity' => 2,
'theme' => 0, 'theme' => 7,
]; ];

2
js/index.js
Unescape View File

@ -12,3 +12,5 @@ const { qs } = require('./utils')
window.termInit = require('./term') window.termInit = require('./term')
window.$ = $ window.$ = $
window.qs = qs window.qs = qs
window.themes = require('./themes')

31
js/themes.js
Unescape View File

@ -1,10 +1,10 @@
exports.themes = [ const themes = exports.themes = [
[ // Tango [ // Tango
'#111213', '#CC0000', '#4E9A06', '#C4A000', '#3465A4', '#75507B', '#06989A', '#D3D7CF', '#111213', '#CC0000', '#4E9A06', '#C4A000', '#3465A4', '#75507B', '#06989A', '#D3D7CF',
'#555753', '#EF2929', '#8AE234', '#FCE94F', '#729FCF', '#AD7FA8', '#34E2E2', '#EEEEEC' '#555753', '#EF2929', '#8AE234', '#FCE94F', '#729FCF', '#AD7FA8', '#34E2E2', '#EEEEEC'
], ],
[ // Linux [ // Linux (CGA)
'#000000', '#aa0000', '#00aa00', '#aa5500', '#0000aa', '#aa00aa', '#00aaaa', '#aaaaaa', '#000000', '#aa0000', '#00aa00', '#aa5500', '#0000aa', '#aa00aa', '#00aaaa', '#aaaaaa',
'#555555', '#ff5555', '#55ff55', '#ffff55', '#5555ff', '#ff55ff', '#55ffff', '#ffffff' '#555555', '#ff5555', '#55ff55', '#ffff55', '#5555ff', '#ff55ff', '#55ffff', '#ffffff'
], ],
@ -23,6 +23,22 @@ exports.themes = [
[ // Solarized [ // Solarized
'#073642', '#dc322f', '#859900', '#b58900', '#268bd2', '#d33682', '#2aa198', '#eee8d5', '#073642', '#dc322f', '#859900', '#b58900', '#268bd2', '#d33682', '#2aa198', '#eee8d5',
'#002b36', '#cb4b16', '#586e75', '#657b83', '#839496', '#6c71c4', '#93a1a1', '#fdf6e3' '#002b36', '#cb4b16', '#586e75', '#657b83', '#839496', '#6c71c4', '#93a1a1', '#fdf6e3'
],
[ // CGA NTSC
'#000000', '#69001A', '#117800', '#769100', '#1A00A6', '#8019AB', '#289E76', '#A4A4A4',
'#484848', '#C54E76', '#6DD441', '#D2ED46', '#765BFF', '#DC75FF', '#84FAD2', '#FFFFFF'
],
[ // ZX Spectrum
'#000000', '#aa0000', '#00aa00', '#aaaa00', '#0000aa', '#aa00aa', '#00aaaa', '#aaaaaa',
'#000000', '#ff0000', '#00FF00', '#ffff00', '#0000ff', '#ff00ff', '#00ffff', '#ffffff'
],
[ // Apple II
'#000000', '#722640', '#0E5940', '#808080', '#40337F', '#E434FE', '#1B9AFE', '#BFB3FF',
'#404C00', '#E46501', '#1BCB01', '#BFCC80', '#808080', '#F1A6BF', '#8DD9BF', '#ffffff'
],
[ // Commodore
'#000000', '#8D3E37', '#55A049', '#AAB95D', '#40318D', '#80348B', '#72C1C8', '#D59F74',
'#8B5429', '#B86962', '#94E089', '#FFFFB2', '#8071CC', '#AA5FB6', '#87D6DD', '#ffffff'
] ]
] ]
@ -55,3 +71,14 @@ exports.buildColorTable = function () {
return colorTable256 return colorTable256
} }
exports.themePreview = function (n) {
document.querySelectorAll('[data-fg]').forEach((elem) => {
let shade = +elem.dataset.fg
elem.style.color = themes[n][shade]
})
document.querySelectorAll('[data-bg]').forEach((elem) => {
let shade = +elem.dataset.bg
elem.style.backgroundColor = themes[n][shade]
})
}

83
pages/cfg_term.php
Unescape View File

@ -13,63 +13,66 @@
<label for="theme"><?= tr("term.theme") ?></label> <label for="theme"><?= tr("term.theme") ?></label>
<select name="theme" id="theme" class="short" onchange="showColor()"> <select name="theme" id="theme" class="short" onchange="showColor()">
<option value="0">Tango</option> <option value="0">Tango</option>
<option value="1">Linux</option> <option value="1">Linux (CGA)</option>
<option value="2">XTerm</option> <option value="2">XTerm</option>
<option value="3">Rxvt</option> <option value="3">Rxvt</option>
<option value="4">Ambience</option> <option value="4">Ambience</option>
<option value="5">Solarized</option> <option value="5">Solarized</option>
<option value="6">CGA NTSC</option>
<option value="7">ZX Spectrum</option>
<option value="8">Apple II</option>
<option value="9">Commodore</option>
</select> </select>
</div> </div>
<div class="Row color-preview"> <div class="Row color-preview">
<div class="colorprev"> <div class="colorprev">
<span data-fg=0 class="bg0 fg0">30</span><!-- <span data-fg=0 data-bg="0">30</span><!--
--><span data-fg=1 class="bg0 fg1">31</span><!-- --><span data-fg=1 data-bg="0">31</span><!--
--><span data-fg=2 class="bg0 fg2">32</span><!-- --><span data-fg=2 data-bg="0">32</span><!--
--><span data-fg=3 class="bg0 fg3">33</span><!-- --><span data-fg=3 data-bg="0">33</span><!--
--><span data-fg=4 class="bg0 fg4">34</span><!-- --><span data-fg=4 data-bg="0">34</span><!--
--><span data-fg=5 class="bg0 fg5">35</span><!-- --><span data-fg=5 data-bg="0">35</span><!--
--><span data-fg=6 class="bg0 fg6">36</span><!-- --><span data-fg=6 data-bg="0">36</span><!--
--><span data-fg=7 class="bg0 fg7">37</span> --><span data-fg=7 data-bg="0">37</span>
</div> </div>
<div class="colorprev"> <div class="colorprev">
<span data-fg=8 class="bg0 fg8">90</span><!-- <span data-fg=8 data-bg="0">90</span><!--
--><span data-fg=9 class="bg0 fg9">91</span><!-- --><span data-fg=9 data-bg="0">91</span><!--
--><span data-fg=10 class="bg0 fg10">92</span><!-- --><span data-fg=10 data-bg="0">92</span><!--
--><span data-fg=11 class="bg0 fg11">93</span><!-- --><span data-fg=11 data-bg="0">93</span><!--
--><span data-fg=12 class="bg0 fg12">94</span><!-- --><span data-fg=12 data-bg="0">94</span><!--
--><span data-fg=13 class="bg0 fg13">95</span><!-- --><span data-fg=13 data-bg="0">95</span><!--
--><span data-fg=14 class="bg0 fg14">96</span><!-- --><span data-fg=14 data-bg="0">96</span><!--
--><span data-fg=15 class="bg0 fg15">97</span> --><span data-fg=15 data-bg="0">97</span>
</div> </div>
<div class="colorprev"> <div class="colorprev">
<span data-bg=0 class="bg0 fg15">40</span><!-- <span data-bg=0 data-fg="15">40</span><!--
--><span data-bg=1 class="bg1 fg15">41</span><!-- --><span data-bg=1 data-fg="15">41</span><!--
--><span data-bg=2 class="bg2 fg15">42</span><!-- --><span data-bg=2 data-fg="15">42</span><!--
--><span data-bg=3 class="bg3 fg0">43</span><!-- --><span data-bg=3 data-fg="0">43</span><!--
--><span data-bg=4 class="bg4 fg15">44</span><!-- --><span data-bg=4 data-fg="15">44</span><!--
--><span data-bg=5 class="bg5 fg15">45</span><!-- --><span data-bg=5 data-fg="15">45</span><!--
--><span data-bg=6 class="bg6 fg15">46</span><!-- --><span data-bg=6 data-fg="15">46</span><!--
--><span data-bg=7 class="bg7 fg0">47</span> --><span data-bg=7 data-fg="0">47</span>
</div> </div>
<div class="colorprev"> <div class="colorprev">
<span data-bg=8 class="bg8 fg15">100</span><!-- <span data-bg=8 data-fg="15">100</span><!--
--><span data-bg=9 class="bg9 fg0">101</span><!-- --><span data-bg=9 data-fg="0">101</span><!--
--><span data-bg=10 class="bg10 fg0">102</span><!-- --><span data-bg=10 data-fg="0">102</span><!--
--><span data-bg=11 class="bg11 fg0">103</span><!-- --><span data-bg=11 data-fg="0">103</span><!--
--><span data-bg=12 class="bg12 fg0">104</span><!-- --><span data-bg=12 data-fg="0">104</span><!--
--><span data-bg=13 class="bg13 fg0">105</span><!-- --><span data-bg=13 data-fg="0">105</span><!--
--><span data-bg=14 class="bg14 fg0">106</span><!-- --><span data-bg=14 data-fg="0">106</span><!--
--><span data-bg=15 class="bg15 fg0">107</span> --><span data-bg=15 data-fg="0">107</span>
</div> </div>
</div> </div>
<div class="Row color-preview"> <div class="Row color-preview">
<div style=" <div id="color-example" data-fg="" data-bg="">
" id="color-example">
<?= tr("term.example") ?> <?= tr("term.example") ?>
</div> </div>
</div> </div>
@ -208,13 +211,9 @@
function showColor() { function showColor() {
var ex = qs('#color-example'); var ex = qs('#color-example');
ex.className = ''; ex.dataset.fg = +$('#default_fg').val();
ex.classList.add('fg'+$('#default_fg').val()); ex.dataset.bg = +$('#default_bg').val();
ex.classList.add('bg'+$('#default_bg').val()); themes.themePreview(+$('#theme').val())
var th = $('#theme').val();
$('.color-preview').forEach(function(e) {
e.className = 'Row color-preview theme-'+th;
});
} }
showColor(); showColor();

3
pages/help.php
Unescape View File

@ -22,4 +22,7 @@
function hpfold(yes) { function hpfold(yes) {
$('.fold').toggleClass('expanded', !!yes); $('.fold').toggleClass('expanded', !!yes);
} }
// show theme colors - but this is a static page, so we don't know the current theme.
themes.themePreview(1)
</script> </script>

105
pages/help/sgr_colors.php
Unescape View File

@ -1,5 +1,5 @@
<div class="Box fold theme-1"> <div class="Box fold">
<h2>Commands: Color SGR</h2> <h2>Commands: Color SGR</h2>
<div class="Row v"> <div class="Row v">
@ -19,49 +19,49 @@
<h3>Foreground colors</h3> <h3>Foreground colors</h3>
<div class="colorprev"> <div class="colorprev">
<span class="bg7 fg0">30</span> <span data-bg="7" data-fg="0">30</span><!--
<span class="bg0 fg1">31</span> --><span data-bg="0" data-fg="1">31</span><!--
<span class="bg0 fg2">32</span> --><span data-bg="0" data-fg="2">32</span><!--
<span class="bg0 fg3">33</span> --><span data-bg="0" data-fg="3">33</span><!--
<span class="bg0 fg4">34</span> --><span data-bg="0" data-fg="4">34</span><!--
<span class="bg0 fg5">35</span> --><span data-bg="0" data-fg="5">35</span><!--
<span class="bg0 fg6">36</span> --><span data-bg="0" data-fg="6">36</span><!--
<span class="bg0 fg7">37</span> --><span data-bg="0" data-fg="7">37</span>
</div> </div>
<div class="colorprev"> <div class="colorprev">
<span class="bg0 fg8">90</span> <span data-bg="0" data-fg="8">90</span><!--
<span class="bg0 fg9">91</span> --><span data-bg="0" data-fg="9">91</span><!--
<span class="bg0 fg10">92</span> --><span data-bg="0" data-fg="10">92</span><!--
<span class="bg0 fg11">93</span> --><span data-bg="0" data-fg="11">93</span><!--
<span class="bg0 fg12">94</span> --><span data-bg="0" data-fg="12">94</span><!--
<span class="bg0 fg13">95</span> --><span data-bg="0" data-fg="13">95</span><!--
<span class="bg0 fg14">96</span> --><span data-bg="0" data-fg="14">96</span><!--
<span class="bg0 fg15">97</span> --><span data-bg="0" data-fg="15">97</span>
</div> </div>
<h3>Background colors</h3> <h3>Background colors</h3>
<div class="colorprev"> <div class="colorprev">
<span class="bg0 fg15">40</span> <span data-bg="0" data-fg="15">40</span><!--
<span class="bg1 fg15">41</span> --><span data-bg="1" data-fg="15">41</span><!--
<span class="bg2 fg15">42</span> --><span data-bg="2" data-fg="15">42</span><!--
<span class="bg3 fg0">43</span> --><span data-bg="3" data-fg="0">43</span><!--
<span class="bg4 fg15">44</span> --><span data-bg="4" data-fg="15">44</span><!--
<span class="bg5 fg15">45</span> --><span data-bg="5" data-fg="15">45</span><!--
<span class="bg6 fg15">46</span> --><span data-bg="6" data-fg="15">46</span><!--
<span class="bg7 fg0">47</span> --><span data-bg="7" data-fg="0">47</span>
</div> </div>
<div class="colorprev"> <div class="colorprev">
<span class="bg8 fg15">100</span> <span data-bg="8" data-fg="15">100</span><!--
<span class="bg9 fg0">101</span> --><span data-bg="9" data-fg="0">101</span><!--
<span class="bg10 fg0">102</span> --><span data-bg="10" data-fg="0">102</span><!--
<span class="bg11 fg0">103</span> --><span data-bg="11" data-fg="0">103</span><!--
<span class="bg12 fg0">104</span> --><span data-bg="12" data-fg="15">104</span><!--
<span class="bg13 fg0">105</span> --><span data-bg="13" data-fg="0">105</span><!--
<span class="bg14 fg0">106</span> --><span data-bg="14" data-fg="0">106</span><!--
<span class="bg15 fg0">107</span> --><span data-bg="15" data-fg="0">107</span>
</div> </div>
<h3>256-color palette</h3> <h3>256-color palette</h3>
@ -69,13 +69,40 @@
<p> <p>
ESPTerm supports in total 256 standard colors. The dark and bright basic colors are ESPTerm supports in total 256 standard colors. The dark and bright basic colors are
numbered 0-7 and 8-15. To use colors higher than 15 (or 0-15 using this simpler numbering), numbered 0-7 and 8-15. To use colors higher than 15 (or 0-15 using this simpler numbering),
send `CSI 38 ; 5 ; <i>n</i> m`, where `n` is the color to set. Use 48 for background colors. send `CSI 38 ; 5 ; <i>n</i> m`, where `n` is the color to set. Use `CSI 48 ; 5 ; <i>n</i> m` for background colors.
</p> </p>
<p> <div class="colorprev" id="pal256">
For a fererence of all 256 shades please refer to </div>
<a href="https://jonasjacek.github.io/colors/">jonasjacek.github.io/colors</a>
or look it up elsewhere.
</p>
</div> </div>
</div> </div>
<script>
$.ready(function() {
var wrap = qs('#pal256');
var table = themes.buildColorTable();
for (var i = 0; i < 256; i++) {
var el = document.createElement('span')
var clr = table[i]
if (i < 16) {
clr = themes.themes[1][i]
}
el.style.color = 'black'
if ( i < 7 || i == 12 || i == 8 ||
(i >= 16 && i <= 33) ||
(i >= 52 && i <= 69) ||
(i >= 88 && i <= 99) ||
(i >= 124 && i <= 129)) {
el.style.color = 'white'
}
el.textContent = ""+i
el.style.backgroundColor = clr
wrap.appendChild(el)
if (i==15||(i-16)%24==23) {
el = document.createElement('br')
wrap.appendChild(el)
}
}
});
</script>

72
sass/pages/_term.scss
Unescape View File

@ -203,78 +203,6 @@ body.term {
} }
} }
// Tango
.theme-0 {
$term-colors:
#111213, #CC0000, #4E9A06, #C4A000, #3465A4, #75507B, #06989A, #D3D7CF,
#555753, #EF2929, #8AE234, #FCE94F, #729FCF, #AD7FA8, #34E2E2, #EEEEEC;
@for $i from 1 through length($term-colors) {
$c: nth($term-colors, $i);
.fg#{$i - 1} { color: $c; }
.bg#{$i - 1} { background-color: $c; }
}
}
// Linux
.theme-1 {
$term-colors:
#000000, #aa0000, #00aa00, #aa5500, #0000aa, #aa00aa, #00aaaa, #aaaaaa,
#555555, #ff5555, #55ff55, #ffff55, #5555ff, #ff55ff, #55ffff, #ffffff;
@for $i from 1 through length($term-colors) {
$c: nth($term-colors, $i);
.fg#{$i - 1} { color: $c; }
.bg#{$i - 1} { background-color: $c; }
}
}
// xterm
.theme-2 {
$term-colors:
#000000, #cd0000, #00cd00, #cdcd00, #0000ee, #cd00cd, #00cdcd, #e5e5e5,
#7f7f7f, #ff0000, #00ff00, #ffff00, #5c5cff, #ff00ff, #00ffff, #ffffff;
@for $i from 1 through length($term-colors) {
$c: nth($term-colors, $i);
.fg#{$i - 1} { color: $c; }
.bg#{$i - 1} { background-color: $c; }
}
}
// rxvt
.theme-3 {
$term-colors:
#000000, #cd0000, #00cd00, #cdcd00, #0000cd, #cd00cd, #00cdcd, #faebd7,
#404040, #ff0000, #00ff00, #ffff00, #0000ff, #ff00ff, #00ffff, #ffffff;
@for $i from 1 through length($term-colors) {
$c: nth($term-colors, $i);
.fg#{$i - 1} { color: $c; }
.bg#{$i - 1} { background-color: $c; }
}
}
// Ambience
.theme-4 {
$term-colors:
#2e3436, #cc0000, #4e9a06, #c4a000, #3465a4, #75507b, #06989a, #d3d7cf,
#555753, #ef2929, #8ae234, #fce94f, #729fcf, #ad7fa8, #34e2e2, #eeeeec;
@for $i from 1 through length($term-colors) {
$c: nth($term-colors, $i);
.fg#{$i - 1} { color: $c; }
.bg#{$i - 1} { background-color: $c; }
}
}
// Solarized
.theme-5 {
$term-colors:
#073642, #dc322f, #859900, #b58900, #268bd2, #d33682, #2aa198, #eee8d5,
#002b36, #cb4b16, #586e75, #657b83, #839496, #6c71c4, #93a1a1, #fdf6e3;
@for $i from 1 through length($term-colors) {
$c: nth($term-colors, $i);
.fg#{$i - 1} { color: $c; }
.bg#{$i - 1} { background-color: $c; }
}
}
// Attributes // Attributes
.bold { .bold {
font-weight: bold !important; font-weight: bold !important;

Write Preview
Loading…
Cancel
Save