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

all accessible and nice, also added icons

Browse Source
This commit is contained in:
MightyPork
2017-07-23 18:22:57 +02:00
parent 5f3cb6685d
commit 7f8f7d8ad1
20 changed files with 401 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html_orig/_pages.php
+19 -13
View File
@@ -4,34 +4,40 @@ $pages = [];
if (! function_exists('pg')) {
/** Add a page */
function pg($key, $bc, $path, $titleKey = null)
function pg($key, $bc, $icon, $path, $titleKey = null)
{
global $pages;
$pages[$key] = (object) [
'key' => $key,
'bodyclass' => $bc,
'path' => $path,
'icon' => $icon ? "icn-$icon" : '',
'label' => tr("menu.$key"),
'title' => $titleKey ? tr($titleKey) : tr("menu.$key"),
];
}
}
pg('cfg_wifi', 'cfg', '/cfg/wifi');
pg('cfg_wifi_conn', '', '/cfg/wifi/connecting');
pg('wifi_connstatus', 'api', '/cfg/wifi/connstatus');
pg('wifi_set', 'api', '/cfg/wifi/set');
pg('wifi_scan', 'api', '/cfg/wifi/scan');
pg('cfg_wifi', 'cfg', 'wifi', '/cfg/wifi');
pg('cfg_wifi_conn', '', '', '/cfg/wifi/connecting');
pg('wifi_connstatus', 'api', '', '/cfg/wifi/connstatus');
pg('wifi_set', 'api', '', '/cfg/wifi/set');
pg('wifi_scan', 'api', '', '/cfg/wifi/scan');
pg('cfg_network', 'cfg', '/cfg/network');
pg('network_set', 'api', '/cfg/network/set');
pg('cfg_network', 'cfg', 'network', '/cfg/network');
pg('network_set', 'api', '', '/cfg/network/set');
pg('cfg_app', 'cfg', '/cfg/app');
pg('app_set', 'api', '/cfg/app/set');
pg('cfg_app', 'cfg', 'terminal', '/cfg/app');
pg('app_set', 'api', '', '/cfg/app/set');
pg('help', 'cfg page-help', '/help');
pg('about', 'cfg page-about', '/about');
pg('term', 'term', '/', 'title.term');
pg('cfg_admin', 'cfg', 'persist', '/cfg/admin');
pg('write_defaults', 'api', '', '/cfg/admin/write_defaults');
pg('restore_defaults', 'api', '', '/cfg/admin/restore_defaults');
pg('restore_hard', 'api', '', '/cfg/admin/restore_hard');
pg('help', 'cfg page-help', 'help', '/help');
pg('about', 'cfg page-about', 'about', '/about');
pg('term', 'term', '', '/', 'title.term');
// ajax API
html_orig/css/app.css
+108 -12
View File
File diff suppressed because one or more lines are too long
html_orig/fontello/fontello-9ba19eb0.zip
BIN
View File
Binary file not shown.
html_orig/js/app.js
+38 -4
View File
@@ -715,6 +715,19 @@ function bool(x) {
return (x === 1 || x === '1' || x === true || x === 'true');
}
/**
* Filter 'spacebar' and 'return' from keypress handler,
* and when they're pressed, fire the callback.
* use $(...).on('keypress', cr(handler))
*/
function cr(hdl) {
return function(e) {
if (e.which == 10 || e.which == 13 || e.which == 32) {
hdl();
}
};
}
/** Extend an objects with options */
function extend(defaults, options) {
var target = {};
@@ -893,18 +906,30 @@ $.ready(function () {
$(box).toggleClass('checked', inp.value);
$(x).on('click', function() {
var hdl = function() {
inp.value = 1 - inp.value;
$(box).toggleClass('checked', inp.value)
});
};
$(x).on('click', hdl).on('keypress', cr(hdl));
});
// Expanding boxes on mobile
$('.Box.mobcol').forEach(function(x) {
var h = x.querySelector('h2');
$(h).on('click', function() {
var hdl = function() {
$(x).toggleClass('expanded');
});
};
$(h).on('click', hdl).on('keypress', cr(hdl));
});
qsa('form').forEach(function(x) {
$(x).on('keypress', function(e) {
if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) {
x.submit();
}
})
});
// loader dots...
@@ -967,6 +992,15 @@ $.ready(function () {
Modal.init();
Notify.init();
// remove tabindixes from h2 if wide
if (window.innerWidth > 550) {
qsa('.Box h2').forEach(function (x) {
x.removeAttribute('tabindex');
});
qs('#brand').removeAttribute('tabindex');
}
});
$._loader = function(vis) {
html_orig/jssrc/appcommon.js
+25 -4
View File
@@ -7,18 +7,30 @@ $.ready(function () {
$(box).toggleClass('checked', inp.value);
$(x).on('click', function() {
var hdl = function() {
inp.value = 1 - inp.value;
$(box).toggleClass('checked', inp.value)
});
};
$(x).on('click', hdl).on('keypress', cr(hdl));
});
// Expanding boxes on mobile
$('.Box.mobcol').forEach(function(x) {
var h = x.querySelector('h2');
$(h).on('click', function() {
var hdl = function() {
$(x).toggleClass('expanded');
});
};
$(h).on('click', hdl).on('keypress', cr(hdl));
});
qsa('form').forEach(function(x) {
$(x).on('keypress', function(e) {
if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) {
x.submit();
}
})
});
// loader dots...
@@ -81,6 +93,15 @@ $.ready(function () {
Modal.init();
Notify.init();
// remove tabindixes from h2 if wide
if (window.innerWidth > 550) {
qsa('.Box h2').forEach(function (x) {
x.removeAttribute('tabindex');
});
qs('#brand').removeAttribute('tabindex');
}
});
$._loader = function(vis) {
html_orig/jssrc/utils.js
+13
View File
@@ -12,6 +12,19 @@ function bool(x) {
return (x === 1 || x === '1' || x === true || x === 'true');
}
/**
* Filter 'spacebar' and 'return' from keypress handler,
* and when they're pressed, fire the callback.
* use $(...).on('keypress', cr(handler))
*/
function cr(hdl) {
return function(e) {
if (e.which == 10 || e.which == 13 || e.which == 32) {
hdl();
}
};
}
/** Extend an objects with options */
function extend(defaults, options) {
var target = {};
html_orig/lang/en.php
+19
View File
@@ -9,6 +9,7 @@ return [
'menu.about' => 'About ESPTerm',
'menu.help' => 'Quick Reference',
'menu.term' => 'Back to Terminal',
'menu.cfg_admin' => 'Reset & Restore',
'menu.cfg_wifi_conn' => 'Connecting to External Network',
'title.term' => 'Terminal',
@@ -93,6 +94,7 @@ return [
'wifi.sta_active_pw' => '🔒',
'wifi.sta_active_nopw' => '🔓 Open access',
'wifi.connected_ip_is' => 'Connected, IP is ',
'wifi.sta_password' => 'Password:',
'wifi.scanning' => 'Scanning',
'wifi.scan_now' => 'Start scanning!',
@@ -109,6 +111,23 @@ return [
'wifi.conn.working' => "Connecting to selected AP",
'wifi.conn.fail' => "Connection failed, check settings & try again. Cause: ",
'admin.confirm_restore' => 'Restore all settings to their default values?',
'admin.confirm_restore_hard' =>
'Restore to firmware default settings? This will reset ' .
'all active settings and switch to AP mode with the default SSID.',
'admin.confirm_store_defaults' =>
'Enter admin password to confirm you want to store the current settings as defaults.',
'admin.password' => 'Admin password:',
'admin.restore_defaults' => 'Reset to default settings',
'admin.write_defaults' => 'Save current settings as default',
'admin.restore_hard' => 'Reset to firmware default settings',
'admin.explain' => '
ESPTerm contains two persistent memory banks, one for default and
one for active settings. Active settings can be stored as defaults
by the administrator. Use the following button to revert all
active settings to their stored default values.
',
'apply' => 'Apply!',
'enabled' => 'Enabled',
'disabled' => 'Disabled',
html_orig/pages/_cfg_menu.php
+10 -7
View File
@@ -1,16 +1,19 @@
<nav id="menu">
<div id="brand" onclick="$('#menu').toggleClass('expanded')"><?= tr('appname') ?></div>
<div id="brand" tabindex=0><?= tr('appname') ?></div>
<?php
// generate the menu
foreach($_pages as $k => $page) {
foreach ($_pages as $k => $page) {
if (strpos($page->bodyclass, 'cfg') === false) continue;
$sel = ($_GET['page'] == $k) ? ' class="selected"' : '';
$sel = ($_GET['page'] == $k) ? 'selected' : '';
$text = $page->label;
$url = e(url($k));
echo "<a href=\"$url\"$sel>$text</a>";
echo "<a href=\"$url\" class=\"$page->icon $sel\">$text</a>";
}
?><a href="<?= e(url('term')) ?>"><?= tr('menu.term') ?></a>
?><a href="<?= e(url('term')) ?>" class="icn-back"><?= tr('menu.term') ?></a>
</nav>
<script>
function menuOpen() { $('#menu').toggleClass('expanded') }
$('#brand').on('click', menuOpen).on('keypress', cr(menuOpen));
</script>
html_orig/pages/cfg_admin.php
+34
View File
@@ -0,0 +1,34 @@
<div class="Box">
<div class="Row explain">
<?= tr('admin.explain') ?>
</div>
<div class="Row buttons">
<a class="button icn-restore"
onclick="return confirm('<?= tr('admin.confirm_restore') ?>');"
href="<?= e(url('restore_defaults')) ?>"
>
<?= tr('admin.restore_defaults') ?>
</a>
</div>
<div class="Row buttons">
<a onclick="writeDefaults(); return false;" href="#"><?= tr('admin.write_defaults') ?></a>
</div>
<div class="Row buttons">
<a onclick="return confirm('<?= tr('admin.confirm_restore_hard') ?>');"
href="<?= e(url('restore_hard')) ?>"
>
<?= tr('admin.restore_hard') ?>
</a>
</div>
</div>
<script>
function writeDefaults() {
var pw = prompt('<?= tr('admin.confirm_store_defaults') ?>');
if (!pw) return;
location.href = <?=json_encode(url('write_defaults')) ?> + '?pw=' + pw;
}
</script>
html_orig/pages/cfg_app.php
+5 -5
View File
@@ -1,10 +1,6 @@
<form class="Box mobopen str" action="<?= e(url('app_set')) ?>" method="GET">
<form class="Box mobopen str" action="<?= e(url('app_set')) ?>" method="GET" id='form-1'>
<h2><?= tr('app.defaults') ?></h2>
<div class="Row buttons">
<input type="submit" value="<?= tr('apply') ?>">
</div>
<div class="Row explain">
<?= tr('app.explain_initials') ?>
</div>
@@ -68,4 +64,8 @@
<label for="btn5"><?= tr("app.btn5") ?></label>
<input class="short" type="text" name="btn5" id="btn5" value="%btn5%">
</div>
<div class="Row buttons">
<a class="button icn-ok" href="#" onclick="qs('#form-1').submit()"><?= tr('apply') ?></a>
</div>
</form>
html_orig/pages/cfg_network.php
+12 -12
View File
@@ -2,12 +2,8 @@
$ipmask='pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"';
?>
<form class="Box str mobcol" action="<?= e(url('network_set')) ?>" method="GET">
<h2><?= tr('net.ap') ?></h2>
<div class="Row buttons">
<input type="submit" value="<?= tr('apply') ?>">
</div>
<form class="Box str mobcol" action="<?= e(url('network_set')) ?>" method="GET" id="form-1">
<h2 tabindex=0><?= tr('net.ap') ?></h2>
<div class="Row explain">
<?= tr('net.explain_ap') ?>
@@ -38,14 +34,14 @@ $ipmask='pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"';
<label for="ap_addr_mask"><?= tr('net.ap_addr_mask') ?></label>
<input type="text" name="ap_addr_mask" id="ap_addr_mask" value="%ap_addr_mask%" <?=$ipmask?> required>
</div>
</form>
<form class="Box str mobcol" action="<?= e(url('network_set')) ?>" method="GET">
<h2><?= tr('net.sta') ?></h2>
<div class="Row buttons">
<input type="submit" value="<?= tr('apply') ?>">
<a class="button icn-ok" href="#" onclick="qs('#form-1').submit()"><?= tr('apply') ?></a>
</div>
</form>
<form class="Box str mobcol" action="<?= e(url('network_set')) ?>" method="GET" id="form-2">
<h2 tabindex=0><?= tr('net.sta') ?></h2>
<div class="Row explain">
<?= tr('net.explain_sta') ?>
@@ -53,7 +49,7 @@ $ipmask='pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"';
<div class="Row checkbox">
<label><?= tr('net.sta_dhcp_enable') ?></label><!--
--><span class="box"></span>
--><span class="box" tabindex=0 role=checkbox></span>
<input type="hidden" name="sta_dhcp_enable" value="%sta_dhcp_enable%">
</div>
@@ -71,6 +67,10 @@ $ipmask='pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"';
<label for="sta_addr_gw"><?= tr('net.sta_addr_gw') ?></label>
<input type="text" name="sta_addr_gw" id="sta_addr_gw" value="%sta_addr_gw%" <?=$ipmask?> required>
</div>
<div class="Row buttons">
<a class="button icn-ok" href="#" onclick="qs('#form-2').submit()"><?= tr('apply') ?></a>
</div>
</form>
<div class="Box mobcol">
html_orig/pages/cfg_wifi.php
+21 -19
View File
@@ -1,13 +1,9 @@
<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="GET">
<h2><?= tr('wifi.ap') ?></h2>
<div class="Row buttons">
<input type="submit" value="<?= tr('apply') ?>">
</div>
<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="GET" id="form-1">
<h2 tabindex=0><?= tr('wifi.ap') ?></h2>
<div class="Row checkbox">
<label><?= tr('wifi.enable') ?></label><!--
--><span class="box"></span>
--><span class="box" tabindex=0></span>
<input type="hidden" name="ap_enable" value="%ap_enable%">
</div>
@@ -37,21 +33,21 @@
<div class="Row checkbox">
<label><?= tr('wifi.ap_hidden') ?></label><!--
--><span class="box"></span>
--><span class="box" tabindex=0></span>
<input type="hidden" name="ap_hidden" value="%ap_hidden%">
</div>
<div class="Row buttons">
<a class="button icn-ok" href="#" onclick="qs('#form-1').submit()"><?= tr('apply') ?></a>
</div>
</form>
<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="GET">
<h2><?= tr('wifi.sta') ?></h2>
<div class="Row buttons">
<input type="submit" value="<?= tr('apply') ?>">
</div>
<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="GET" id="form-2">
<h2 tabindex=0><?= tr('wifi.sta') ?></h2>
<div class="Row checkbox">
<label><?= tr('wifi.enable') ?></label><!--
--><span class="box"></span>
--><span class="box" tabindex=0></span>
<input type="hidden" name="sta_enable" value="%sta_enable%">
</div>
@@ -68,7 +64,7 @@
<div class="nopasswd"><?= tr('wifi.sta_active_nopw') ?></div>
<div class="ip"></div>
</div>
<a class="forget" id="forget-sta">×</a>
<a class="forget" href="#" id="forget-sta">×</a>
</div>
</div>
<div class="AP-preview-nil" id="sta-nw-nil">
@@ -78,11 +74,15 @@
<div id="ap-box">
<label><?= tr('wifi.select_ssid') ?></label>
<div id="ap-scan"><a onclick="startScanning(); return false"><?= tr('wifi.scan_now') ?></a></div>
<div id="ap-scan"><a href="#" onclick="startScanning(); return false"><?= tr('wifi.scan_now') ?></a></div>
<div id="ap-loader" class="hidden"><?= tr('wifi.scanning') ?><span class="anim-dots">.</span></div>
<div id="ap-noscan" class="hidden"><?= tr('wifi.cant_scan_no_sta') ?></div>
<div id="ap-list" class="hidden"></div>
</div>
<div class="Row buttons">
<a class="button icn-ok" href="#" onclick="qs('#form-2').submit()"><?= tr('apply') ?></a>
</div>
</form>
<div class="Modal hidden" id="psk-modal">
@@ -120,6 +120,7 @@
// Forget STA credentials
$('#forget-sta').on('click', function() {
selectSta('', '', '');
return false;
});
// Display selected STA SSID etc
@@ -194,11 +195,12 @@
if (ap.enc > 4) return; // hide unsupported auths
var item = document.createElement('div');
var item = mk('div');
var $item = $(item)
.data('ssid', ap.essid)
.data('pwd', ap.enc)
.attr('tabindex', 0)
.addClass('AP');
// mark current SSID
@@ -206,7 +208,7 @@
$item.addClass('selected');
}
var inner = document.createElement('div');
var inner = mk('div');
$(inner).addClass('inner')
.htmlAppend('<div class="rssi">{0}</div>'.format(ap.rssi_perc))
.htmlAppend('<div class="essid" title="{0}">{0}</div>'.format($.htmlEscape(ap.essid)))
html_orig/sass/_fontello-embedded.scss
+57
View File
File diff suppressed because one or more lines are too long
html_orig/sass/app.scss
+2
View File
@@ -1,4 +1,5 @@
@import "normalize";
@import "fontello-embedded";
@import "lib/bourbon/bourbon";
@import "grid-settings";
@@ -10,6 +11,7 @@ $form-label-w: 160px;
$form-label-gap: 8px;
$form-field-w: 250px;
$c-red-outline: #ff0099;
$c-form-label-fg: white;
$c-form-field-bg: #3c3c3c;
$c-form-field-fg: white;
html_orig/sass/form/_buttons.scss
+10 -1
View File
@@ -31,9 +31,18 @@ button, input[type=submit], .button {
min-width: initial;
}
text-shadow: 1.5px 1.5px 2px rgba(black, 0.6);
&::before {
vertical-align: -1px;
margin-left: 0;
}
text-shadow: 1.5px 1.5px 2px rgba(black, 0.4);
@include fancy-btn-colors($btn-blue-f, $btn-blue-b, $btn-blue-fa, $btn-blue-ba);
&:focus {
outline-color: $c-red-outline;
}
}
//input[type="submit"], .btn-green {
html_orig/sass/form/_fancy_button_mixins.scss
+1 -1
View File
@@ -7,7 +7,7 @@
border-radius: 2px;
padding: 0 0.6em;
border: 0 none;
outline: 0 none !important;
//outline: 0 none !important;
line-height: 1.8em;
font-size: 1.1em;
margin-bottom: 3px;
html_orig/sass/form/_form_elements.scss
+3 -2
View File
@@ -7,8 +7,8 @@
color: $c-form-field-fg;
padding: 6px;
line-height: 1em;
outline: 0 none !important;
-moz-outline: 0 none !important;
//outline: 0 none !important;
//-moz-outline: 0 none !important;
font-weight: normal;
&:focus, &:hover {
@@ -21,6 +21,7 @@
line-height: $h;
.box {
overflow: hidden;
width: $h;
height: $h;
border: 1px solid #808080;
html_orig/sass/layout/_box.scss
+5
View File
@@ -9,6 +9,10 @@
margin-top: dist(-1);
}
h1, h2 {
overflow: hidden;
}
h1 + & {
margin-top: 0;
}
@@ -45,6 +49,7 @@
@include media($phone) {
right: dist(0);
top: 1.8em;
margin: 1rem auto;
}
html_orig/sass/layout/_menu.scss
+16 -4
View File
@@ -69,15 +69,27 @@
box-shadow: 0 0 5px rgba(black, .5);
}
&:focus {
outline-color: $c-red-outline;
}
//&::before {
// content: "▸";
// padding-right: .5rem;
// position: relative;
// top: -0.1rem;
//}
// Fontello
&::before {
content: "▸";
padding-right: .5rem;
position: relative;
top: -0.1rem;
vertical-align: -2px;
margin-left: 0;
margin-right: 15px;
}
@include media($phone) {
display: none;
&::before {margin-left: 10px;}
}
}
html_orig/sass/layout/_modal.scss
+3 -1
View File
@@ -27,7 +27,9 @@
background: #1c1c1e;
border-left: 6px solid $c-form-highlight;
border-right: 6px solid $c-form-highlight;
box-shadow: 0 0 2px 0 #434349, 0 0 6px 0 black;
border-top: 1px solid $c-form-highlight;
border-bottom: 1px solid $c-form-highlight;
box-shadow: 0 0 6px 0 black;
border-radius: 6px;