From 33a1fecd870b8b32c0180a01d9e4d6cd2cc2f158 Mon Sep 17 00:00:00 2001 From: David Carley Date: Fri, 5 Mar 2021 21:30:43 -0800 Subject: [PATCH] Increased icon and text sizes on control buttons --- src/pug/index.pug | 2 +- src/pug/templates/control-view.pug | 37 +++++++++++++++++------------- src/stylus/style.styl | 19 +++++++++++++-- 3 files changed, 39 insertions(+), 19 deletions(-) diff --git a/src/pug/index.pug b/src/pug/index.pug index 8d40cbb..177a5d1 100644 --- a/src/pug/index.pug +++ b/src/pug/index.pug @@ -113,7 +113,7 @@ html(lang="en") a.upgrade-version(v-if="show_upgrade()", href="#admin-general") | Upgrade to v{{latestVersion}} .fa.fa-check(v-if="!show_upgrade() && latestVersion", - title="Firmware up to date") + title="Firmware up to date" style="font-size: inherit") .p {{get_ip_address()}} {{get_ssid()}} .estop(:class="{active: state.es}") diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug index 58baee0..e329921 100644 --- a/src/pug/templates/control-view.pug +++ b/src/pug/templates/control-view.pug @@ -79,7 +79,7 @@ script#control-view-template(type="text/x-template") table(width="99%") tr td(style="white-space: nowrap;") - table(table-layout="fixed") + table.control-buttons(table-layout="fixed") colgroup col(style="width:100px") col(style="width:100px") @@ -88,11 +88,13 @@ script#control-view-template(type="text/x-template") col(style="width:100px") tr td(style="height:100px",align="center") - button(style="height:100px;width:100px",@click="jog_fn(-1,1,0,0)") ⬁ + button(style="height:100px;width:100px",@click="jog_fn(-1,1,0,0)") + .fa.fa-arrow-right(style="transform: rotate(-135deg);") td(style="height:100px",align="center") button(style="height:100px;width:100px",@click="jog_fn(0,1,0,0)") Y+ td(style="height:100px",align="center") - button(style="height:100px;width:100px",@click="jog_fn(1,1,0,0)") ⬀ + button(style="height:100px;width:100px",@click="jog_fn(1,1,0,0)") + .fa.fa-arrow-right(style="transform: rotate(-45deg);") td td(style="height:100px",align="center") button(style="height:100px;width:100px",,@click="jog_fn(0,0,1,0)") Z+ @@ -101,7 +103,7 @@ script#control-view-template(type="text/x-template") button(style="height:100px;width:100px",@click="jog_fn(-1,0,0,0)") X- td(style="height:100px",align="center") button(style="height:100px;width:100px",@click="ask_zero_xy_msg = true") - .fa.fa-bullseye + .fa.fa-bullseye(style="font-size: 172%") td(style="height:100px",align="center") button(style="height:100px;width:100px",@click="jog_fn(1,0,0,0)") X+ td @@ -109,11 +111,13 @@ script#control-view-template(type="text/x-template") button(style="height:100px;width:100px",@click='ask_zero_z_msg = true') Z0 tr td(style="height:100px",align="center") - button(style="height:100px;width:100px",@click="jog_fn(-1,-1,0,0)") ⬃ + button(style="height:100px;width:100px",@click="jog_fn(-1,-1,0,0)") + .fa.fa-arrow-right(style="transform: rotate(135deg);") td(style="height:100px",align="center") button(style="height:100px;width:100px",@click="jog_fn(0,-1,0,0)") Y- td(style="height:100px",align="center") - button(style="height:100px;width:100px",@click="jog_fn(1,-1,0,0)") ⬂ + button(style="height:100px;width:100px",@click="jog_fn(1,-1,0,0)") + .fa.fa-arrow-right(style="transform: rotate(45deg);") td td(style="height:100px",align="center") button(style="height:100px;width:100px",@click="jog_fn(0,0,-1,0)") Z- @@ -130,7 +134,8 @@ script#control-view-template(type="text/x-template") //th.tstate Max th.actions button.pure-button(:disabled="!can_set_axis", - title="Zero all axis offsets.", @click="zero()",style="height:60px;width:60px") ∅ + title="Zero all axis offsets.", @click="zero()",style="height:60px;width:60px") + .fa.fa-map-marker button.pure-button(title="Home all axes.", @click="home()", :disabled="!is_idle",style="height:60px;width:60px") @@ -170,7 +175,8 @@ script#control-view-template(type="text/x-template") button.pure-button(:disabled="!can_set_axis", title=`Zero {{'${axis}' | upper}} axis offset.`, - @click=`zero('${axis}')`,style="height:60px;width:60px") ∅ + @click=`zero('${axis}')`,style="height:60px;width:60px") + .fa.fa-map-marker button.pure-button(:disabled="!is_idle", @click=`home('${axis}')`, title=`Home {{'${axis}' | upper}} axis.`,style="height:60px;width:60px") @@ -220,7 +226,7 @@ script#control-view-template(type="text/x-template") title=`Home {{'${axis}' | upper}} axis.`, @click=`set_home('${axis}', axis_position)`) Set tr - td(style="white-space: nowrap;") + td.control-buttons(style="white-space: nowrap;") button(style="height:100px;width:100px;font-weight:normal",id="jog_button_fine",@click=`set_jog_incr('fine')`) 0.1 button(style="height:100px;width:100px;font-weight:bold",id="jog_button_small",@click=`set_jog_incr('small')`) 1.0 button(style="height:100px;width:100px;font-weight:normal",id="jog_button_medium",@click=`set_jog_incr('medium')`) 10 @@ -305,7 +311,7 @@ script#control-view-template(type="text/x-template") label {{(progress || 0) | percent}} .bar(:style="'width:' + (progress || 0) * 100 + '%'") tr - td(style="white-space: nowrap;text-align:center") + td.control-buttons(style="white-space: nowrap;text-align:center") message(:show.sync=`probe_test`) h3(slot="header") Test probe connection @@ -389,12 +395,11 @@ script#control-view-template(type="text/x-template") input(type="file", @change="upload", :disabled="!is_ready", accept="text/*,.nc,.gcode,.gc,.ngc,.txt,.tap,.cnc") - a.pure-button(:disabled="!state.selected", download, - :href="'/api/file/' + state.selected", - title="Download the selected GCode program.",style="height:100px;width:100px") - br - br - .fa.fa-download + a(:disabled="!state.selected", download, + :href="'/api/file/' + state.selected", + title="Download the selected GCode program.") + button.pure-button(style="height:100px;width:100px") + .fa.fa-download button.pure-button(title="Delete current GCode program.", @click="deleteGCode = true", diff --git a/src/stylus/style.styl b/src/stylus/style.styl index 6219eca..da2ee4e 100644 --- a/src/stylus/style.styl +++ b/src/stylus/style.styl @@ -120,6 +120,12 @@ tt .success background green +.fa + font-size 150% + +.modal-mask .fa + font-size inherit + .fa.error background inherit color red @@ -252,6 +258,17 @@ span.unit table border-collapse collapse + // Make sure buttons don't turn into circles + button + -webkit-appearance none + border-radius 2px + border-width 1px + border-color darkgrey + + // The jogging buttons, etc. + .control-buttons button + font-size 150% + &:first-child margin 0.5em 0 @@ -330,7 +347,6 @@ span.unit text-align left .fa - font-size 140% margin-left 2px margin-right 6px @@ -341,7 +357,6 @@ span.unit text-align left .fa - font-size 140% margin-left 2px margin-right 6px