muehe/onefinity-firmware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #20 from dacarley/increase-icon-size

Browse Source 
Increased icon and text sizes on control buttons
This commit is contained in:
OneFinityCNC
2021-03-06 11:51:33 -05:00
committed by GitHub
parent dc09843566 33a1fecd87
commit 392c3b3834
3 changed files with 39 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pug/index.pug
View File

@@ -113,7 +113,7 @@ html(lang="en")
a.upgrade-version(v-if="show_upgrade()", href="#admin-general") a.upgrade-version(v-if="show_upgrade()", href="#admin-general")
| Upgrade to v{{latestVersion}} | Upgrade to v{{latestVersion}}
.fa.fa-check(v-if="!show_upgrade() && 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()}} .p {{get_ip_address()}} {{get_ssid()}}
.estop(:class="{active: state.es}") .estop(:class="{active: state.es}")

33
src/pug/templates/control-view.pug
View File

@@ -79,7 +79,7 @@ script#control-view-template(type="text/x-template")
table(width="99%") table(width="99%")
tr tr
td(style="white-space: nowrap;") td(style="white-space: nowrap;")
table(table-layout="fixed") table.control-buttons(table-layout="fixed")
colgroup colgroup
col(style="width:100px") col(style="width:100px")
col(style="width:100px") col(style="width:100px")
@@ -88,11 +88,13 @@ script#control-view-template(type="text/x-template")
col(style="width:100px") col(style="width:100px")
tr tr
td(style="height:100px",align="center") td(style="height:100px",align="center")
button(style="height:100px;width:100px",@click="jog_fn(-1,1,0,0)") &#x2b01 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") td(style="height:100px",align="center")
button(style="height:100px;width:100px",@click="jog_fn(0,1,0,0)") Y+ button(style="height:100px;width:100px",@click="jog_fn(0,1,0,0)") Y+
td(style="height:100px",align="center") td(style="height:100px",align="center")
button(style="height:100px;width:100px",@click="jog_fn(1,1,0,0)") &#x2b00 button(style="height:100px;width:100px",@click="jog_fn(1,1,0,0)")
.fa.fa-arrow-right(style="transform: rotate(-45deg);")
td td
td(style="height:100px",align="center") td(style="height:100px",align="center")
button(style="height:100px;width:100px",,@click="jog_fn(0,0,1,0)") Z+ 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- button(style="height:100px;width:100px",@click="jog_fn(-1,0,0,0)") X-
td(style="height:100px",align="center") td(style="height:100px",align="center")
button(style="height:100px;width:100px",@click="ask_zero_xy_msg = true") 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") td(style="height:100px",align="center")
button(style="height:100px;width:100px",@click="jog_fn(1,0,0,0)") X+ button(style="height:100px;width:100px",@click="jog_fn(1,0,0,0)") X+
td 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 button(style="height:100px;width:100px",@click='ask_zero_z_msg = true') Z0
tr tr
td(style="height:100px",align="center") td(style="height:100px",align="center")
button(style="height:100px;width:100px",@click="jog_fn(-1,-1,0,0)") &#x2b03 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") td(style="height:100px",align="center")
button(style="height:100px;width:100px",@click="jog_fn(0,-1,0,0)") Y- button(style="height:100px;width:100px",@click="jog_fn(0,-1,0,0)") Y-
td(style="height:100px",align="center") td(style="height:100px",align="center")
button(style="height:100px;width:100px",@click="jog_fn(1,-1,0,0)") &#x2b02 button(style="height:100px;width:100px",@click="jog_fn(1,-1,0,0)")
.fa.fa-arrow-right(style="transform: rotate(45deg);")
td td
td(style="height:100px",align="center") td(style="height:100px",align="center")
button(style="height:100px;width:100px",@click="jog_fn(0,0,-1,0)") Z- 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.tstate Max
th.actions th.actions
button.pure-button(:disabled="!can_set_axis", 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()", button.pure-button(title="Home all axes.", @click="home()",
:disabled="!is_idle",style="height:60px;width:60px") :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", button.pure-button(:disabled="!can_set_axis",
title=`Zero {{'${axis}' | upper}} axis offset.`, 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}')`, button.pure-button(:disabled="!is_idle", @click=`home('${axis}')`,
title=`Home {{'${axis}' | upper}} axis.`,style="height:60px;width:60px") 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.`, title=`Home {{'${axis}' | upper}} axis.`,
@click=`set_home('${axis}', axis_position)`) Set @click=`set_home('${axis}', axis_position)`) Set
tr 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: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: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 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}} label {{(progress || 0) | percent}}
.bar(:style="'width:' + (progress || 0) * 100 + '%'") .bar(:style="'width:' + (progress || 0) * 100 + '%'")
tr tr
td(style="white-space: nowrap;text-align:center") td.control-buttons(style="white-space: nowrap;text-align:center")
message(:show.sync=`probe_test`) message(:show.sync=`probe_test`)
h3(slot="header") Test probe connection h3(slot="header") Test probe connection
@@ -389,11 +395,10 @@ script#control-view-template(type="text/x-template")
input(type="file", @change="upload", :disabled="!is_ready", input(type="file", @change="upload", :disabled="!is_ready",
accept="text/*,.nc,.gcode,.gc,.ngc,.txt,.tap,.cnc") accept="text/*,.nc,.gcode,.gc,.ngc,.txt,.tap,.cnc")
a.pure-button(:disabled="!state.selected", download, a(:disabled="!state.selected", download,
:href="'/api/file/' + state.selected", :href="'/api/file/' + state.selected",
title="Download the selected GCode program.",style="height:100px;width:100px") title="Download the selected GCode program.")
br button.pure-button(style="height:100px;width:100px")
br
.fa.fa-download .fa.fa-download
button.pure-button(title="Delete current GCode program.", button.pure-button(title="Delete current GCode program.",

19
src/stylus/style.styl
View File

@@ -120,6 +120,12 @@ tt
.success .success
background green background green
.fa
font-size 150%
.modal-mask .fa
font-size inherit
.fa.error .fa.error
background inherit background inherit
color red color red
@@ -252,6 +258,17 @@ span.unit
table table
border-collapse collapse 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 &:first-child
margin 0.5em 0 margin 0.5em 0
@@ -330,7 +347,6 @@ span.unit
text-align left text-align left
.fa .fa
font-size 140%
margin-left 2px margin-left 2px
margin-right 6px margin-right 6px
@@ -341,7 +357,6 @@ span.unit
text-align left text-align left
.fa .fa
font-size 140%
margin-left 2px margin-left 2px
margin-right 6px margin-right 6px