From 3dcb3fe972afe5f793c162f0171df53e324be44e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Mon, 18 Sep 2017 01:56:04 +0200 Subject: [PATCH] removed themes from css and added 256color preview in help page --- _debug_replacements.php | 2 +- js/index.js | 2 + js/themes.js | 31 ++++++++++- pages/cfg_term.php | 83 +++++++++++++++--------------- pages/help.php | 3 ++ pages/help/sgr_colors.php | 105 ++++++++++++++++++++++++-------------- sass/pages/_term.scss | 72 -------------------------- 7 files changed, 142 insertions(+), 156 deletions(-) diff --git a/_debug_replacements.php b/_debug_replacements.php index 56fad84..1cb41a4 100644 --- a/_debug_replacements.php +++ b/_debug_replacements.php @@ -90,5 +90,5 @@ return [ 'uart_stopbits' => 1, 'uart_parity' => 2, - 'theme' => 0, + 'theme' => 7, ]; diff --git a/js/index.js b/js/index.js index c65b387..24d776e 100644 --- a/js/index.js +++ b/js/index.js @@ -12,3 +12,5 @@ const { qs } = require('./utils') window.termInit = require('./term') window.$ = $ window.qs = qs + +window.themes = require('./themes') diff --git a/js/themes.js b/js/themes.js index d54a81e..f957b06 100644 --- a/js/themes.js +++ b/js/themes.js @@ -1,10 +1,10 @@ -exports.themes = [ +const themes = exports.themes = [ [ // Tango '#111213', '#CC0000', '#4E9A06', '#C4A000', '#3465A4', '#75507B', '#06989A', '#D3D7CF', '#555753', '#EF2929', '#8AE234', '#FCE94F', '#729FCF', '#AD7FA8', '#34E2E2', '#EEEEEC' ], - [ // Linux + [ // Linux (CGA) '#000000', '#aa0000', '#00aa00', '#aa5500', '#0000aa', '#aa00aa', '#00aaaa', '#aaaaaa', '#555555', '#ff5555', '#55ff55', '#ffff55', '#5555ff', '#ff55ff', '#55ffff', '#ffffff' ], @@ -23,6 +23,22 @@ exports.themes = [ [ // Solarized '#073642', '#dc322f', '#859900', '#b58900', '#268bd2', '#d33682', '#2aa198', '#eee8d5', '#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 } + +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] + }) +} diff --git a/pages/cfg_term.php b/pages/cfg_term.php index e4dba6b..14110ec 100644 --- a/pages/cfg_term.php +++ b/pages/cfg_term.php @@ -13,63 +13,66 @@
- 3031323334353637 + 3031323334353637
- 9091929394959697 + 9091929394959697
- 4041424344454647 + 4041424344454647
- 100101102103104105106107 + 100101102103104105106107
-
+
@@ -208,13 +211,9 @@ function showColor() { var ex = qs('#color-example'); - ex.className = ''; - ex.classList.add('fg'+$('#default_fg').val()); - ex.classList.add('bg'+$('#default_bg').val()); - var th = $('#theme').val(); - $('.color-preview').forEach(function(e) { - e.className = 'Row color-preview theme-'+th; - }); + ex.dataset.fg = +$('#default_fg').val(); + ex.dataset.bg = +$('#default_bg').val(); + themes.themePreview(+$('#theme').val()) } showColor(); diff --git a/pages/help.php b/pages/help.php index 12bbb45..e577a72 100644 --- a/pages/help.php +++ b/pages/help.php @@ -22,4 +22,7 @@ function hpfold(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) diff --git a/pages/help/sgr_colors.php b/pages/help/sgr_colors.php index b9a0e55..0d9dd5a 100644 --- a/pages/help/sgr_colors.php +++ b/pages/help/sgr_colors.php @@ -1,5 +1,5 @@ -
+

Commands: Color SGR

@@ -19,49 +19,49 @@

Foreground colors

- 30 - 31 - 32 - 33 - 34 - 35 - 36 - 37 + 3031323334353637
- 90 - 91 - 92 - 93 - 94 - 95 - 96 - 97 + 9091929394959697

Background colors

- 40 - 41 - 42 - 43 - 44 - 45 - 46 - 47 + 4041424344454647
- 100 - 101 - 102 - 103 - 104 - 105 - 106 - 107 + 100101102103104105106107

256-color palette

@@ -69,13 +69,40 @@

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), - send `CSI 38 ; 5 ; n m`, where `n` is the color to set. Use 48 for background colors. + send `CSI 38 ; 5 ; n m`, where `n` is the color to set. Use `CSI 48 ; 5 ; n m` for background colors.

-

- For a fererence of all 256 shades please refer to - jonasjacek.github.io/colors - or look it up elsewhere. -

+
+
+ + diff --git a/sass/pages/_term.scss b/sass/pages/_term.scss index bb781c9..6f80d86 100755 --- a/sass/pages/_term.scss +++ b/sass/pages/_term.scss @@ -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 .bold { font-weight: bold !important;