From a2fbabef665eb87dffda9bc59588fb8b3cb7883e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Mon, 25 Sep 2017 01:30:08 +0200 Subject: [PATCH] theme config improvements --- js/term/themes.js | 42 +++--- lang/en.php | 49 ++++--- pages/cfg_system.php | 6 +- pages/cfg_term.php | 267 +++++++++++++++++++++------------- sass/form/_form_elements.scss | 6 +- sass/form/_form_layout.scss | 13 +- sass/pages/_about.scss | 2 +- sass/pages/_term.scss | 29 +++- 8 files changed, 266 insertions(+), 148 deletions(-) diff --git a/js/term/themes.js b/js/term/themes.js index ff0e6fd..a37dab4 100644 --- a/js/term/themes.js +++ b/js/term/themes.js @@ -24,10 +24,6 @@ const themes = exports.themes = [ '#073642', '#dc322f', '#859900', '#b58900', '#268bd2', '#d33682', '#2aa198', '#eee8d5', '#002b36', '#cb4b16', '#586e75', '#657b83', '#839496', '#6c71c4', '#93a1a1', '#fdf6e3' ], - [ // Solarized dark - '#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' @@ -47,15 +43,16 @@ const themes = exports.themes = [ ] exports.fgbgThemes = [ - ['#aaaaaa', '#000000'], // grey_on_black - ['#000000', '#ffffdd'], // black_on_yellow - ['#000000', '#ffffff'], // black_on_white - ['#ffffff', '#000000'], // white_on_black - ['#00ff00', '#000000'], // green_on_black - ['#e53c00', '#000000'], // orange_on_black - ['#ffffff', '#300a24'], // ambience - ['#657b83', '#fdf6e3'], // solarized_light - ['#839496', '#002b36'] // solarized_dark + ['#AAAAAA', '#000000'], // GREY_ON_BLACK + ['#EFF0F1', '#31363B'], // BREEZE + ['#FFFFFF', '#000000'], // WHITE_ON_BLACK + ['#00FF00', '#000000'], // GREEN_ON_BLACK + ['#E53C00', '#000000'], // ORANGE_ON_BLACK + ['#FFFFFF', '#300A24'], // AMBIENCE + ['#839496', '#002B36'], // SOLARIZED_DARK + ['#657B83', '#FDF6E3'], // SOLARIZED_LIGHT + ['#000000', '#FFFFDD'], // BLACK_ON_YELLOW + ['#000000', '#FFFFFF'] // BLACK_ON_WHITE ] let colorTable256 = null @@ -91,13 +88,24 @@ exports.buildColorTable = function () { exports.SELECTION_FG = '#333' exports.SELECTION_BG = '#b2d7fe' +function resolveColor (themeN, shade) { + shade = +shade + if (shade < 16) shade = themes[themeN][shade] + else { + shade = exports.buildColorTable()[shade] + } + return shade +} + exports.themePreview = function (n) { document.querySelectorAll('[data-fg]').forEach((elem) => { - let shade = +elem.dataset.fg - elem.style.color = themes[n][shade] + let shade = elem.dataset.fg + if (/^\d+$/.test(shade)) shade = resolveColor(n, shade) + elem.style.color = shade }) document.querySelectorAll('[data-bg]').forEach((elem) => { - let shade = +elem.dataset.bg - elem.style.backgroundColor = themes[n][shade] + let shade = elem.dataset.bg + if (/^\d+$/.test(shade)) shade = resolveColor(n, shade) + elem.style.backgroundColor = shade }) } diff --git a/lang/en.php b/lang/en.php index 8d602ed..569d766 100644 --- a/lang/en.php +++ b/lang/en.php @@ -45,10 +45,18 @@ return [ 'term.example' => 'Default colors preview', + 'term.explain_scheme' => ' + To select default text and background color, click on the + preview palette. Alternatively, use numbers 0-15 for theme colors, 16-255 for standard + colors and hex (#FFF or #FFFFFF) for True Color (24-bit). + ', + + 'term.fgbg_presets' => 'Presets', + 'term.color_scheme' => 'Color Scheme', 'term.reset_screen' => 'Reset screen & parser', 'term.term_title' => 'Header text', - 'term.term_width' => 'Width / height', - 'term.default_fg_bg' => 'Text / background', + 'term.term_width' => 'Width', + 'term.term_height' => 'Height', 'term.buttons' => 'Button labels', 'term.theme' => 'Color scheme', 'term.cursor_shape' => 'Cursor style', @@ -62,6 +70,9 @@ return [ 'term.crlf_mode' => 'Enter sends CR+LF', 'term.want_all_fn' => 'Capture all keys
(F5, F11, F12…)', 'term.button_msgs' => 'Button codes
(ASCII, dec, CSV)', + 'term.color_fg' => 'Foreground', + 'term.color_bg' => 'Background', + 'term.colors_preview' => 'Preview', 'cursor.block_blink' => 'Block, blinking', 'cursor.block_steady' => 'Block, steady', @@ -70,23 +81,23 @@ return [ 'cursor.bar_blink' => 'I-bar, blinking', 'cursor.bar_steady' => 'I-bar, steady', - // terminal color labels - 'color.0' => 'Black', - 'color.1' => 'Red', - 'color.2' => 'Green', - 'color.3' => 'Yellow', - 'color.4' => 'Blue', - 'color.5' => 'Purple', - 'color.6' => 'Cyan', - 'color.7' => 'Silver', - 'color.8' => 'Gray', - 'color.9' => 'Light Red', - 'color.10' => 'Light Green', - 'color.11' => 'Light Yellow', - 'color.12' => 'Light Blue', - 'color.13' => 'Light Purple', - 'color.14' => 'Light Cyan', - 'color.15' => 'White', +// // terminal color labels +// 'color.0' => 'Black', +// 'color.1' => 'Red', +// 'color.2' => 'Green', +// 'color.3' => 'Yellow', +// 'color.4' => 'Blue', +// 'color.5' => 'Purple', +// 'color.6' => 'Cyan', +// 'color.7' => 'Silver', +// 'color.8' => 'Gray', +// 'color.9' => 'Light Red', +// 'color.10' => 'Light Green', +// 'color.11' => 'Light Yellow', +// 'color.12' => 'Light Blue', +// 'color.13' => 'Light Purple', +// 'color.14' => 'Light Cyan', +// 'color.15' => 'White', 'net.explain_sta' => ' Switch off Dynamic IP to configure the static IP address.', diff --git a/pages/cfg_system.php b/pages/cfg_system.php index 9c864bb..bcf99f9 100644 --- a/pages/cfg_system.php +++ b/pages/cfg_system.php @@ -5,7 +5,7 @@ -
+
@@ -13,11 +13,11 @@
-
+
-
+
diff --git a/pages/cfg_term.php b/pages/cfg_term.php index 9c58e6f..6e2d911 100644 --- a/pages/cfg_term.php +++ b/pages/cfg_term.php @@ -2,11 +2,11 @@
-
-

+ +

- +
@@ -26,75 +26,115 @@
-
- 3031323334353637 + +
+
+ 01234567 +
+ +
+ 89101112131415 +
+
-
- 9091929394959697 +
+ +
+
+ 01234567 +
+ +
+ 89101112131415 +
+
-
- 4041424344454647 +
+
+ +
- -
- 100101102103104105106107 +
+ +
-
+ +
+
+ +
+
+
- -   + + + + + +
+
+ +
+ + +
+

+ +
+ +
+
- -   +
+ + +
+
+ + +
@@ -110,23 +150,20 @@
-   -   -   -   - + + + + +
- - + + + + + +
@@ -144,10 +181,11 @@
@@ -157,11 +195,12 @@
@@ -170,11 +209,12 @@
@@ -210,15 +250,6 @@  ms
-
- -   -   -   -   - -
-
@@ -255,8 +286,6 @@ diff --git a/sass/form/_form_elements.scss b/sass/form/_form_elements.scss index d66e94c..9186edd 100755 --- a/sass/form/_form_elements.scss +++ b/sass/form/_form_elements.scss @@ -2,10 +2,14 @@ #{$all-text-inputs}, select, label.select-wrap { width: $form-field-w; + margin-right: 3px; } input[type="number"], input.short, select.short { - width: $form-field-w/2; + width: 123.5px; +} +input.tiny, select.tiny { + width: 90px; } #{$all-text-inputs}, select { diff --git a/sass/form/_form_layout.scss b/sass/form/_form_layout.scss index d835bd1..6e76b4e 100755 --- a/sass/form/_form_layout.scss +++ b/sass/form/_form_layout.scss @@ -23,6 +23,17 @@ form { @include naked(); } align-items: center; flex-wrap: wrap; + .SubRow { + display: flex; + flex-direction: row; + + @include media($phone) { + flex-direction: column; + margin: 6px auto; + width: 100%; + } + } + &:first-child { margin-top: 0; } @@ -54,7 +65,7 @@ form { @include naked(); } } // buttons2 is the same style, but different selector for use in the admin page - &.buttons, &.buttons2 { + &.buttons { margin: 16px auto; input, .button { margin-right: dist(-1); diff --git a/sass/pages/_about.scss b/sass/pages/_about.scss index 70d8e7a..91a1cda 100644 --- a/sass/pages/_about.scss +++ b/sass/pages/_about.scss @@ -36,7 +36,7 @@ span { display: inline-block; width: 2em; - padding: dist(-2) 0; + padding: 2px 0; text-align: center; } } diff --git a/sass/pages/_term.scss b/sass/pages/_term.scss index 191fd72..0bbc809 100755 --- a/sass/pages/_term.scss +++ b/sass/pages/_term.scss @@ -267,20 +267,35 @@ body.term { } // -.Row.color-preview { +.color-example { font-family: monospace; - font-size: 16pt; - display: block; - margin-bottom: 0; + font-size: 14pt; + padding: 4px 6px; +} - padding-left: $form-label-w; +.preset { + cursor: pointer; + font-family: monospace; + font-size: 14pt; +} + +.Row.color-preview { + label { + align-self: center; + } @include media($phone) { - padding-left: 0; - font-size: 14pt; + font-size: 12pt; + align-items: flex-start; + + label { + align-self: flex-start; + } } .colorprev { + font-family: monospace; + font-size: 14pt; display:block; margin: 0; cursor: pointer;