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

theme config improvements

Browse Source
box-drawing
Ondřej Hruška 7 years ago
parent 8d7cd8ac19
commit a2fbabef66
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
8 changed files with 266 additions and 148 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. 42
      js/term/themes.js
  2. 49
      lang/en.php
  3. 6
      pages/cfg_system.php
  4. 267
      pages/cfg_term.php
  5. 6
      sass/form/_form_elements.scss
  6. 13
      sass/form/_form_layout.scss
  7. 2
      sass/pages/_about.scss
  8. 29
      sass/pages/_term.scss

42
js/term/themes.js
Unescape View File

@ -24,10 +24,6 @@ const themes = exports.themes = [
'#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'
], ],
[ // Solarized dark
'#073642', '#dc322f', '#859900', '#b58900', '#268bd2', '#d33682', '#2aa198', '#eee8d5',
'#002b36', '#cb4b16', '#586e75', '#657b83', '#839496', '#6c71c4', '#93a1a1', '#fdf6e3'
],
[ // CGA NTSC [ // CGA NTSC
'#000000', '#69001A', '#117800', '#769100', '#1A00A6', '#8019AB', '#289E76', '#A4A4A4', '#000000', '#69001A', '#117800', '#769100', '#1A00A6', '#8019AB', '#289E76', '#A4A4A4',
'#484848', '#C54E76', '#6DD441', '#D2ED46', '#765BFF', '#DC75FF', '#84FAD2', '#FFFFFF' '#484848', '#C54E76', '#6DD441', '#D2ED46', '#765BFF', '#DC75FF', '#84FAD2', '#FFFFFF'
@ -47,15 +43,16 @@ const themes = exports.themes = [
] ]
exports.fgbgThemes = [ exports.fgbgThemes = [
['#aaaaaa', '#000000'], // grey_on_black ['#AAAAAA', '#000000'], // GREY_ON_BLACK
['#000000', '#ffffdd'], // black_on_yellow ['#EFF0F1', '#31363B'], // BREEZE
['#000000', '#ffffff'], // black_on_white ['#FFFFFF', '#000000'], // WHITE_ON_BLACK
['#ffffff', '#000000'], // white_on_black ['#00FF00', '#000000'], // GREEN_ON_BLACK
['#00ff00', '#000000'], // green_on_black ['#E53C00', '#000000'], // ORANGE_ON_BLACK
['#e53c00', '#000000'], // orange_on_black ['#FFFFFF', '#300A24'], // AMBIENCE
['#ffffff', '#300a24'], // ambience ['#839496', '#002B36'], // SOLARIZED_DARK
['#657b83', '#fdf6e3'], // solarized_light ['#657B83', '#FDF6E3'], // SOLARIZED_LIGHT
['#839496', '#002b36'] // solarized_dark ['#000000', '#FFFFDD'], // BLACK_ON_YELLOW
['#000000', '#FFFFFF'] // BLACK_ON_WHITE
] ]
let colorTable256 = null let colorTable256 = null
@ -91,13 +88,24 @@ exports.buildColorTable = function () {
exports.SELECTION_FG = '#333' exports.SELECTION_FG = '#333'
exports.SELECTION_BG = '#b2d7fe' 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) { exports.themePreview = function (n) {
document.querySelectorAll('[data-fg]').forEach((elem) => { document.querySelectorAll('[data-fg]').forEach((elem) => {
let shade = +elem.dataset.fg let shade = elem.dataset.fg
elem.style.color = themes[n][shade] if (/^\d+$/.test(shade)) shade = resolveColor(n, shade)
elem.style.color = shade
}) })
document.querySelectorAll('[data-bg]').forEach((elem) => { document.querySelectorAll('[data-bg]').forEach((elem) => {
let shade = +elem.dataset.bg let shade = elem.dataset.bg
elem.style.backgroundColor = themes[n][shade] if (/^\d+$/.test(shade)) shade = resolveColor(n, shade)
elem.style.backgroundColor = shade
}) })
} }

49
lang/en.php
Unescape View File

@ -45,10 +45,18 @@ return [
'term.example' => 'Default colors preview', '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.reset_screen' => 'Reset screen & parser',
'term.term_title' => 'Header text', 'term.term_title' => 'Header text',
'term.term_width' => 'Width / height', 'term.term_width' => 'Width',
'term.default_fg_bg' => 'Text / background', 'term.term_height' => 'Height',
'term.buttons' => 'Button labels', 'term.buttons' => 'Button labels',
'term.theme' => 'Color scheme', 'term.theme' => 'Color scheme',
'term.cursor_shape' => 'Cursor style', 'term.cursor_shape' => 'Cursor style',
@ -62,6 +70,9 @@ return [
'term.crlf_mode' => 'Enter sends CR+LF', 'term.crlf_mode' => 'Enter sends CR+LF',
'term.want_all_fn' => 'Capture all keys<br>(F5, F11, F12…)', 'term.want_all_fn' => 'Capture all keys<br>(F5, F11, F12…)',
'term.button_msgs' => 'Button codes<br>(ASCII, dec, CSV)', 'term.button_msgs' => 'Button codes<br>(ASCII, dec, CSV)',
'term.color_fg' => 'Foreground',
'term.color_bg' => 'Background',
'term.colors_preview' => 'Preview',
'cursor.block_blink' => 'Block, blinking', 'cursor.block_blink' => 'Block, blinking',
'cursor.block_steady' => 'Block, steady', 'cursor.block_steady' => 'Block, steady',
@ -70,23 +81,23 @@ return [
'cursor.bar_blink' => 'I-bar, blinking', 'cursor.bar_blink' => 'I-bar, blinking',
'cursor.bar_steady' => 'I-bar, steady', 'cursor.bar_steady' => 'I-bar, steady',
// terminal color labels // // terminal color labels
'color.0' => 'Black', // 'color.0' => 'Black',
'color.1' => 'Red', // 'color.1' => 'Red',
'color.2' => 'Green', // 'color.2' => 'Green',
'color.3' => 'Yellow', // 'color.3' => 'Yellow',
'color.4' => 'Blue', // 'color.4' => 'Blue',
'color.5' => 'Purple', // 'color.5' => 'Purple',
'color.6' => 'Cyan', // 'color.6' => 'Cyan',
'color.7' => 'Silver', // 'color.7' => 'Silver',
'color.8' => 'Gray', // 'color.8' => 'Gray',
'color.9' => 'Light Red', // 'color.9' => 'Light Red',
'color.10' => 'Light Green', // 'color.10' => 'Light Green',
'color.11' => 'Light Yellow', // 'color.11' => 'Light Yellow',
'color.12' => 'Light Blue', // 'color.12' => 'Light Blue',
'color.13' => 'Light Purple', // 'color.13' => 'Light Purple',
'color.14' => 'Light Cyan', // 'color.14' => 'Light Cyan',
'color.15' => 'White', // 'color.15' => 'White',
'net.explain_sta' => ' 'net.explain_sta' => '
Switch off Dynamic IP to configure the static IP address.', Switch off Dynamic IP to configure the static IP address.',

6
pages/cfg_system.php
Unescape View File

@ -5,7 +5,7 @@
<?= tr('system.explain_persist') ?> <?= tr('system.explain_persist') ?>
</div> </div>
<div class="Row buttons2"> <div class="Row buttons">
<a class="button icn-restore" <a class="button icn-restore"
onclick="return confirm('<?= tr('system.confirm_restore') ?>');" onclick="return confirm('<?= tr('system.confirm_restore') ?>');"
href="<?= e(url('restore_defaults')) ?>"> href="<?= e(url('restore_defaults')) ?>">
@ -13,11 +13,11 @@
</a> </a>
</div> </div>
<div class="Row buttons2"> <div class="Row buttons">
<a onclick="writeDefaults(); return false;" href="#"><?= tr('system.write_defaults') ?></a> <a onclick="writeDefaults(); return false;" href="#"><?= tr('system.write_defaults') ?></a>
</div> </div>
<div class="Row buttons2"> <div class="Row buttons">
<a onclick="return confirm('<?= tr('system.confirm_restore_hard') ?>');" <a onclick="return confirm('<?= tr('system.confirm_restore_hard') ?>');"
href="<?= e(url('restore_hard')) ?>"> href="<?= e(url('restore_hard')) ?>">
<?= tr('system.restore_hard') ?> <?= tr('system.restore_hard') ?>

267
pages/cfg_term.php
Unescape View File

@ -2,11 +2,11 @@
<a href="<?= e(url('reset_screen')) ?>"><?= tr('term.reset_screen') ?></a> <a href="<?= e(url('reset_screen')) ?>"><?= tr('term.reset_screen') ?></a>
</div> </div>
<form class="Box mobopen str" action="<?= e(url('term_set')) ?>" method="GET" id='form-initial'> <form class="Box mobopen str" action="<?= e(url('term_set')) ?>" method="GET" id='form-scheme'>
<h2><?= tr('term.defaults') ?></h2> <h2><?= tr('term.color_scheme') ?></h2>
<div class="Row explain"> <div class="Row explain">
<?= tr('term.explain_initials') ?> <?= tr('term.explain_scheme') ?>
</div> </div>
<div class="Row"> <div class="Row">
@ -26,75 +26,115 @@
</div> </div>
<div class="Row color-preview"> <div class="Row color-preview">
<div class="colorprev"> <label><?= tr("term.color_fg") ?></label>
<span data-fg=0 data-bg="0" style="text-shadow: 0 0 4px white;">30</span><!-- <div>
--><span data-fg=1 data-bg="0">31</span><!-- <div class="colorprev fg">
--><span data-fg=2 data-bg="0">32</span><!-- <span data-fg=0 data-bg=0 style="text-shadow: 0 0 4px white;">0</span><!--
--><span data-fg=3 data-bg="0">33</span><!-- --><span data-fg=1 data-bg=0>1</span><!--
--><span data-fg=4 data-bg="0">34</span><!-- --><span data-fg=2 data-bg=0>2</span><!--
--><span data-fg=5 data-bg="0">35</span><!-- --><span data-fg=3 data-bg=0>3</span><!--
--><span data-fg=6 data-bg="0">36</span><!-- --><span data-fg=4 data-bg=0>4</span><!--
--><span data-fg=7 data-bg="0">37</span> --><span data-fg=5 data-bg=0>5</span><!--
--><span data-fg=6 data-bg=0>6</span><!--
--><span data-fg=7 data-bg=0>7</span>
</div>
<div class="colorprev fg">
<span data-fg=8 data-bg=0>8</span><!--
--><span data-fg=9 data-bg=0>9</span><!--
--><span data-fg=10 data-bg=0>10</span><!--
--><span data-fg=11 data-bg=0>11</span><!--
--><span data-fg=12 data-bg=0>12</span><!--
--><span data-fg=13 data-bg=0>13</span><!--
--><span data-fg=14 data-bg=0>14</span><!--
--><span data-fg=15 data-bg=0>15</span>
</div>
</div> </div>
</div>
<div class="colorprev"> <div class="Row color-preview">
<span data-fg=8 data-bg="0">90</span><!-- <label><?= tr("term.color_bg") ?></label>
--><span data-fg=9 data-bg="0">91</span><!-- <div>
--><span data-fg=10 data-bg="0">92</span><!-- <div class="colorprev bg">
--><span data-fg=11 data-bg="0">93</span><!-- <span data-bg=0 data-fg=15>0</span><!--
--><span data-fg=12 data-bg="0">94</span><!-- --><span data-bg=1 data-fg=15>1</span><!--
--><span data-fg=13 data-bg="0">95</span><!-- --><span data-bg=2 data-fg=15>2</span><!--
--><span data-fg=14 data-bg="0">96</span><!-- --><span data-bg=3 data-fg=0>3</span><!--
--><span data-fg=15 data-bg="0">97</span> --><span data-bg=4 data-fg=15>4</span><!--
--><span data-bg=5 data-fg=15>5</span><!--
--><span data-bg=6 data-fg=15>6</span><!--
--><span data-bg=7 data-fg=0>7</span>
</div>
<div class="colorprev bg">
<span data-bg=8 data-fg=15>8</span><!--
--><span data-bg=9 data-fg=0>9</span><!--
--><span data-bg=10 data-fg=0>10</span><!--
--><span data-bg=11 data-fg=0>11</span><!--
--><span data-bg=12 data-fg=0>12</span><!--
--><span data-bg=13 data-fg=0>13</span><!--
--><span data-bg=14 data-fg=0>14</span><!--
--><span data-bg=15 data-fg=0>15</span>
</div>
</div> </div>
</div>
<div class="colorprev"> <div class="Row">
<span data-bg=0 data-fg="15">40</span><!-- <div class="SubRow">
--><span data-bg=1 data-fg="15">41</span><!-- <label for="default_fg"><?= tr("term.color_fg") ?></label>
--><span data-bg=2 data-fg="15">42</span><!-- <input type="text" name="default_fg" id="default_fg" class="short" value="%default_fg%">
--><span data-bg=3 data-fg="0">43</span><!--
--><span data-bg=4 data-fg="15">44</span><!--
--><span data-bg=5 data-fg="15">45</span><!--
--><span data-bg=6 data-fg="15">46</span><!--
--><span data-bg=7 data-fg="0">47</span>
</div> </div>
<div class="SubRow">
<div class="colorprev"> <label for="default_bg"><?= tr("term.color_bg") ?></label>
<span data-bg=8 data-fg="15">100</span><!-- <input type="text" name="default_bg" id="default_bg" class="short" value="%default_bg%">
--><span data-bg=9 data-fg="0">101</span><!--
--><span data-bg=10 data-fg="0">102</span><!--
--><span data-bg=11 data-fg="0">103</span><!--
--><span data-bg=12 data-fg="0">104</span><!--
--><span data-bg=13 data-fg="0">105</span><!--
--><span data-bg=14 data-fg="0">106</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 id="color-example" data-fg="" data-bg=""> <label><?= tr("term.colors_preview") ?></label>
<div class="color-example" data-fg="" data-bg="">
<?= tr("term.example") ?> <?= tr("term.example") ?>
</div> </div>
</div> </div>
<div class="Row color-preview">
<label><?= tr("term.fgbg_presets") ?></label>
<div id="fgbg_presets"></div>
</div>
<div class="Row"> <div class="Row">
<label><?= tr("term.default_fg_bg") ?></label> <label><?= tr("term.cursor_shape") ?></label>
<select name="default_fg" id="default_fg" class="short" onchange="showColor()"> <select name="cursor_shape" id="cursor_shape">
<?php for($i=0; $i<16; $i++): ?> <option value="0"><?= tr("cursor.block_blink") ?></option>
<option value="<?=$i?>"><?= tr("color.$i") ?></option> <option value="2"><?= tr("cursor.block_steady") ?></option>
<?php endfor; ?> <option value="3"><?= tr("cursor.underline_blink") ?></option>
</select>&nbsp;<!-- <option value="4"><?= tr("cursor.underline_steady") ?></option>
--><select name="default_bg" id="default_bg" class="short" onchange="showColor()"> <option value="5"><?= tr("cursor.bar_blink") ?></option>
<?php for($i=0; $i<16; $i++): ?> <option value="6"><?= tr("cursor.bar_steady") ?></option>
<option value="<?=$i?>"><?= tr("color.$i") ?></option>
<?php endfor; ?>
</select> </select>
</div> </div>
<div class="Row buttons">
<a class="button icn-ok" href="#" onclick="qs('#form-scheme').submit()"><?= tr('apply') ?></a>
</div>
</form>
<form class="Box fold str" action="<?= e(url('term_set')) ?>" method="GET" id='form-initial'>
<h2><?= tr('term.defaults') ?></h2>
<div class="Row explain">
<?= tr('term.explain_initials') ?>
</div>
<div class="Row"> <div class="Row">
<label for="term_width"><?= tr('term.term_width') ?></label> <div class="SubRow">
<input type="number" step=1 min=1 max=255 name="term_width" id="term_width" value="%term_width%" required>&nbsp;<!-- <label for="term_width"><?= tr('term.term_width') ?></label>
--><input type="number" step=1 min=1 max=255 name="term_height" id="term_height" value="%term_height%" required> <input type="number" step=1 min=1 max=255 name="term_width" id="term_width" value="%term_width%" required>
</div>
<div class="SubRow">
<label for="term_height"><?= tr('term.term_height') ?></label>
<input type="number" step=1 min=1 max=255 name="term_height" id="term_height" value="%term_height%" required>
</div>
</div> </div>
<div class="Row"> <div class="Row">
@ -110,23 +150,20 @@
<div class="Row"> <div class="Row">
<label><?= tr("term.buttons") ?></label> <label><?= tr("term.buttons") ?></label>
<input class="short" type="text" name="btn1" id="btn1" value="%h:btn1%">&nbsp; <input class="tiny" type="text" name="btn1" id="btn1" value="%h:btn1%">
<input class="short" type="text" name="btn2" id="btn2" value="%h:btn2%">&nbsp; <input class="tiny" type="text" name="btn2" id="btn2" value="%h:btn2%">
<input class="short" type="text" name="btn3" id="btn3" value="%h:btn3%">&nbsp; <input class="tiny" type="text" name="btn3" id="btn3" value="%h:btn3%">
<input class="short" type="text" name="btn4" id="btn4" value="%h:btn4%">&nbsp; <input class="tiny" type="text" name="btn4" id="btn4" value="%h:btn4%">
<input class="short" type="text" name="btn5" id="btn5" value="%h:btn5%"> <input class="tiny" type="text" name="btn5" id="btn5" value="%h:btn5%">
</div> </div>
<div class="Row"> <div class="Row">
<label><?= tr("term.cursor_shape") ?></label> <label><?= tr("term.button_msgs") ?></label>
<select name="cursor_shape" id="cursor_shape"> <input class="tiny" type="text" name="bm1" id="bm1" value="%h:bm1%">
<option value="0"><?= tr("cursor.block_blink") ?></option> <input class="tiny" type="text" name="bm2" id="bm2" value="%h:bm2%">
<option value="2"><?= tr("cursor.block_steady") ?></option> <input class="tiny" type="text" name="bm3" id="bm3" value="%h:bm3%">
<option value="3"><?= tr("cursor.underline_blink") ?></option> <input class="tiny" type="text" name="bm4" id="bm4" value="%h:bm4%">
<option value="4"><?= tr("cursor.underline_steady") ?></option> <input class="tiny" type="text" name="bm5" id="bm5" value="%h:bm5%">
<option value="5"><?= tr("cursor.bar_blink") ?></option>
<option value="6"><?= tr("cursor.bar_steady") ?></option>
</select>
</div> </div>
<div class="Row buttons"> <div class="Row buttons">
@ -144,10 +181,11 @@
<div class="Row"> <div class="Row">
<label for="uart_baud"><?= tr('uart.baud') ?><span class="mq-phone">&nbsp;(bps)</span></label> <label for="uart_baud"><?= tr('uart.baud') ?><span class="mq-phone">&nbsp;(bps)</span></label>
<select name="uart_baud" id="uart_baud" class="short"> <select name="uart_baud" id="uart_baud" class="short">
<?php foreach([ <?php
300, 600, 1200, 2400, 4800, 9600, 19200, 38400, foreach([
57600, 74880, 115200, 230400, 460800, 921600, 1843200, 3686400, 300, 600, 1200, 2400, 4800, 9600, 19200, 38400,
] as $b): 57600, 74880, 115200, 230400, 460800, 921600, 1843200, 3686400,
] as $b):
?><option value="<?=$b?>"><?= number_format($b, 0, ',', '.') ?></option> ?><option value="<?=$b?>"><?= number_format($b, 0, ',', '.') ?></option>
<?php endforeach; ?> <?php endforeach; ?>
</select> </select>
@ -157,11 +195,12 @@
<div class="Row"> <div class="Row">
<label for="uart_parity"><?= tr('uart.parity') ?></label> <label for="uart_parity"><?= tr('uart.parity') ?></label>
<select name="uart_parity" id="uart_parity" class="short"> <select name="uart_parity" id="uart_parity" class="short">
<?php foreach([ <?php
2 => tr('uart.parity.none'), foreach([
1 => tr('uart.parity.odd'), 2 => tr('uart.parity.none'),
0 => tr('uart.parity.even'), 1 => tr('uart.parity.odd'),
] as $k => $label): 0 => tr('uart.parity.even'),
] as $k => $label):
?><option value="<?=$k?>"><?=$label?></option> ?><option value="<?=$k?>"><?=$label?></option>
<?php endforeach; ?> <?php endforeach; ?>
</select> </select>
@ -170,11 +209,12 @@
<div class="Row"> <div class="Row">
<label for="uart_stopbits"><?= tr('uart.stop_bits') ?></label> <label for="uart_stopbits"><?= tr('uart.stop_bits') ?></label>
<select name="uart_stopbits" id="uart_stopbits" class="short"> <select name="uart_stopbits" id="uart_stopbits" class="short">
<?php foreach([ <?php
1 => tr('uart.stop_bits.one'), foreach([
2 => tr('uart.stop_bits.one_and_half'), 1 => tr('uart.stop_bits.one'),
3 => tr('uart.stop_bits.two'), 2 => tr('uart.stop_bits.one_and_half'),
] as $k => $label): 3 => tr('uart.stop_bits.two'),
] as $k => $label):
?><option value="<?=$k?>"><?=$label?></option> ?><option value="<?=$k?>"><?=$label?></option>
<?php endforeach; ?> <?php endforeach; ?>
</select> </select>
@ -210,15 +250,6 @@
<span class="mq-no-phone">&nbsp;ms</span> <span class="mq-no-phone">&nbsp;ms</span>
</div> </div>
<div class="Row">
<label><?= tr("term.button_msgs") ?></label>
<input class="short" type="text" name="bm1" id="bm1" value="%h:bm1%">&nbsp;
<input class="short" type="text" name="bm2" id="bm2" value="%h:bm2%">&nbsp;
<input class="short" type="text" name="bm3" id="bm3" value="%h:bm3%">&nbsp;
<input class="short" type="text" name="bm4" id="bm4" value="%h:bm4%">&nbsp;
<input class="short" type="text" name="bm5" id="bm5" value="%h:bm5%">
</div>
<div class="Row checkbox" > <div class="Row checkbox" >
<label><?= tr('term.fn_alt_mode') ?></label><!-- <label><?= tr('term.fn_alt_mode') ?></label><!--
--><span class="box" tabindex=0 role=checkbox></span> --><span class="box" tabindex=0 role=checkbox></span>
@ -255,8 +286,6 @@
</form> </form>
<script> <script>
$('#default_fg').val(%default_fg%);
$('#default_bg').val(%default_bg%);
$('#cursor_shape').val(%cursor_shape%); $('#cursor_shape').val(%cursor_shape%);
$('#theme').val(%theme%); $('#theme').val(%theme%);
@ -265,18 +294,58 @@
$('#uart_stopbits').val(%uart_stopbits%); $('#uart_stopbits').val(%uart_stopbits%);
function showColor() { function showColor() {
var ex = qs('#color-example'); var ex = qs('.color-example');
ex.dataset.fg = +$('#default_fg').val(); var fg = $('#default_fg').val();
ex.dataset.bg = +$('#default_bg').val(); var bg = $('#default_bg').val();
if (/^\d+$/.test(fg)) fg = +fg;
else if (!/^#[\da-f]{3,6}$/i.test(fg)) {
fg = 'black';
}
if (/^\d+$/.test(bg)) bg = +bg;
else if (!/^#[\da-f]{3,6}$/i.test(bg)) {
bg = 'black';
}
ex.dataset.fg = fg;
ex.dataset.bg = bg;
themes.themePreview(+$('#theme').val()) themes.themePreview(+$('#theme').val())
} }
showColor(); showColor();
$('.colorprev span').on('click', function() { $('#default_fg').on('input', showColor)
var fg = this.dataset.fg; $('#default_bg').on('input', showColor)
$('.colorprev.bg span').on('click', function() {
var bg = this.dataset.bg; var bg = this.dataset.bg;
if (typeof fg != 'undefined') $('#default_fg').val(fg);
if (typeof bg != 'undefined') $('#default_bg').val(bg); if (typeof bg != 'undefined') $('#default_bg').val(bg);
showColor() showColor()
}); });
$('.colorprev.fg span').on('click', function() {
var fg = this.dataset.fg;
if (typeof fg != 'undefined') $('#default_fg').val(fg);
showColor()
});
var $presets = $('#fgbg_presets');
for(var i = 0; i < themes.fgbgThemes.length; i++) {
fg = themes.fgbgThemes[i][0];
bg = themes.fgbgThemes[i][1];
$presets
.htmlAppend(
'<span class="preset" ' +
'data-xfg="'+fg+'" data-xbg="'+bg+'" ' +
'style="color:'+fg+';background:'+bg+'">&nbsp;['+i+']&nbsp;</span>');
if ((i+1)%5==0) $presets.htmlAppend('<br>');
}
$('.preset').on('click', function() {
$('#default_fg').val(this.dataset.xfg)
$('#default_bg').val(this.dataset.xbg)
showColor()
});
</script> </script>

6
sass/form/_form_elements.scss
Unescape View File

@ -2,10 +2,14 @@
#{$all-text-inputs}, select, label.select-wrap { #{$all-text-inputs}, select, label.select-wrap {
width: $form-field-w; width: $form-field-w;
margin-right: 3px;
} }
input[type="number"], input.short, select.short { 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 { #{$all-text-inputs}, select {

13
sass/form/_form_layout.scss
Unescape View File

@ -23,6 +23,17 @@ form { @include naked(); }
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
.SubRow {
display: flex;
flex-direction: row;
@include media($phone) {
flex-direction: column;
margin: 6px auto;
width: 100%;
}
}
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }
@ -54,7 +65,7 @@ form { @include naked(); }
} }
// buttons2 is the same style, but different selector for use in the admin page // buttons2 is the same style, but different selector for use in the admin page
&.buttons, &.buttons2 { &.buttons {
margin: 16px auto; margin: 16px auto;
input, .button { input, .button {
margin-right: dist(-1); margin-right: dist(-1);

2
sass/pages/_about.scss
Unescape View File

@ -36,7 +36,7 @@
span { span {
display: inline-block; display: inline-block;
width: 2em; width: 2em;
padding: dist(-2) 0; padding: 2px 0;
text-align: center; text-align: center;
} }
} }

29
sass/pages/_term.scss
Unescape View File

@ -267,20 +267,35 @@ body.term {
} }
// //
.Row.color-preview { .color-example {
font-family: monospace; font-family: monospace;
font-size: 16pt; font-size: 14pt;
display: block; padding: 4px 6px;
margin-bottom: 0; }
padding-left: $form-label-w; .preset {
cursor: pointer;
font-family: monospace;
font-size: 14pt;
}
.Row.color-preview {
label {
align-self: center;
}
@include media($phone) { @include media($phone) {
padding-left: 0; font-size: 12pt;
font-size: 14pt; align-items: flex-start;
label {
align-self: flex-start;
}
} }
.colorprev { .colorprev {
font-family: monospace;
font-size: 14pt;
display:block; display:block;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;

Write Preview
Loading…
Cancel
Save