Skip to content

Commit

Permalink
Improved UI focus contrast and made 'x' a shortcut to 'multiply'
Browse files Browse the repository at this point in the history
  • Loading branch information
@zainafzal08
zainafzal08 committed Oct 21, 2019
1 parent b159dff commit e4a010e
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 58 deletions.
2 changes: 1 addition & 1 deletion js/foam/apps/calc/Calc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ CLASS({
name: "mult",
label: "×",
speechLabel: "multiply",
keyboardShortcuts: [ "*" ],
keyboardShortcuts: [ "*", "x" ],
f: function (a1, a2) { return a1 * a2; }
},
{
Expand Down
14 changes: 7 additions & 7 deletions js/foam/apps/calc/CalcView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,18 +285,18 @@ CLASS({
justify-content: center;
display: flex;
align-items: center;
background-color: #4b4b4b;
background-color: #333333;
}
.rhs-ops {
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(68, 68, 68);
background: #777;
background: #4a4a4a;
}
.rhs-ops .button {
background-color: #777;
background-color: #4a4a4a;
}
.history {
Expand Down Expand Up @@ -340,20 +340,20 @@ CLASS({
.secondaryButtons {
padding-left: 30px;
background: rgb(52, 153, 128);
background: #00796b;
}
.secondaryButtons .button {
background: rgb(52, 153, 128);
background: #00796b;
}
.tertiaryButtons {
padding-left: 35px;
background: rgb(29, 233, 182);
background: #1DE9B6;
}
.tertiaryButtons .button {
background: rgb(29, 233, 182);
background: #1DE9B6;
}
.keypad {
Expand Down
38 changes: 19 additions & 19 deletions js/foam/apps/calc/MainButtonsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,43 +18,43 @@ CLASS({
],
templates: [
function toHTML() {/*
<div id="%%id" class="buttons button-row" style="background:#4b4b4b;">
<div id="%%id" class="buttons button-row" style="background:#121212;">
<div class="button-column" style="flex-grow: 3;-webkit-flex-grow: 3;">
<div class="button-row">
$$7{tabIndex: 101, arrowNav: ['.f1', '[4]', null, '[8]']}
$$8{tabIndex: 102, arrowNav: ['.f1', '[5]', '[7]', '[9]']}
$$9{tabIndex: 103, arrowNav: ['.f1', '[6]', '[8]', '[ac]' ]}
$$7{tabIndex: 101, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['.f1', '[4]', null, '[8]']}
$$8{tabIndex: 102, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['.f1', '[5]', '[7]', '[9]']}
$$9{tabIndex: 103, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['.f1', '[6]', '[8]', '[ac]' ]}
</div>
<div class="button-row">
$$4{tabIndex: 104, arrowNav: ['[7]', '[1]', null, '[5]']}
$$5{tabIndex: 105, arrowNav: ['[8]', '[2]', '[4]', '[6]']}
$$6{tabIndex: 106, arrowNav: ['[9]', '[3]', '[5]', '[plus]']}
$$4{tabIndex: 104, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[7]', '[1]', null, '[5]']}
$$5{tabIndex: 105, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[8]', '[2]', '[4]', '[6]']}
$$6{tabIndex: 106, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[9]', '[3]', '[5]', '[plus]']}
</div>
<div class="button-row">
$$1{tabIndex: 107, arrowNav: ['[4]', '[point]', null, '[2]']}
$$2{tabIndex: 108, arrowNav: ['[5]', '[0]', '[1]', '[3]']}
$$3{tabIndex: 109, arrowNav: ['[6]', '[equals]', '[2]', '[minus]']}
$$1{tabIndex: 107, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[4]', '[point]', null, '[2]']}
$$2{tabIndex: 108, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[5]', '[0]', '[1]', '[3]']}
$$3{tabIndex: 109, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[6]', '[equals]', '[2]', '[minus]']}
</div>
<div class="button-row">
$$point{tabIndex: 111, arrowNav: ['[1]', null, null, '[0]']}
$$0{tabIndex: 111, arrowNav: ['[2]', null, '[point]', '[equals]']}
$$equals{tabIndex: 112, arrowNav: ['[3]', null, '[0]', '[mult]']}
$$point{tabIndex: 111, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[1]', null, null, '[0]']}
$$0{tabIndex: 111, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[2]', null, '[point]', '[equals]']}
$$equals{tabIndex: 112, haloColor: 'rgba(255, 255, 255, 0.3)', arrowNav: ['[3]', null, '[0]', '[mult]']}
</div>
</div>
<%
this.X.registerModel(this.CalcButton.xbind({
background: '#777',
background: '#4a4a4a',
width: 70,
height: 45,
font: '300 26px Roboto'
}), 'foam.ui.ActionButton');
%>
<div class="button-column rhs-ops" style="flex-grow: 1;-webkit-flex-grow: 1;padding-top: 7px; padding-bottom: 10px;">
$$ac{tabIndex: 201, arrowNav: ['.f1', '[plus]', '[9]', '[backspace]'], font: '300 24px Roboto'}
$$plus{tabIndex: 202, arrowNav: ['[ac]', '[minus]', '[6]', '[e]']}
$$minus{tabIndex: 203, arrowNav: ['[plus]', '[div]', '[3]', '[inv]']}
$$div{tabIndex: 204, arrowNav: ['[minus]', '[mult]', '[3]', '[inv]']}
$$mult{tabIndex: 205, arrowNav: ['[div]', null, '[equals]', '[sign]']}
$$ac{tabIndex: 201, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['.f1', '[plus]', '[9]', '[backspace]'], font: '300 24px Roboto'}
$$plus{tabIndex: 202, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[ac]', '[minus]', '[6]', '[e]']}
$$minus{tabIndex: 203, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[plus]', '[div]', '[3]', '[inv]']}
$$div{tabIndex: 204, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[minus]', '[mult]', '[3]', '[inv]']}
$$mult{tabIndex: 205, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[div]', null, '[equals]', '[sign]']}
</div>
</div>
*/}
Expand Down
34 changes: 17 additions & 17 deletions js/foam/apps/calc/SecondaryButtonsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ CLASS({
function toHTML() {/*
<%
this.X.registerModel(this.CalcButton.xbind({
background: 'rgb(52, 153, 128)',
background: '#00796b',
width: 61,
height: 61,
font: '300 20px Roboto'
Expand All @@ -29,28 +29,28 @@ CLASS({
<div id="%%id" class="buttons button-row secondaryButtons">
<div class="button-column" style="flex-grow: 1;-webkit-flex-grow: 1;">
<div class="button-row">
$$backspace{tabIndex: 311, arrowNav: ['.f1', '[e]', '[ac]', '[round]'], label: '⌫'}
$$round{tabIndex: 312, arrowNav: ['.f1', '[ln]', '[backspace]', '[fetch]']}
$$fetch{tabIndex: 313, arrowNav: ['.f1', '[log]', '[round]', '[store]']}
$$store{tabIndex: 314, arrowNav: ['.f1', '[exp]', '[fetch]', '[deg]']}
$$backspace{tabIndex: 311, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['.f1', '[e]', '[ac]', '[round]'], label: '⌫'}
$$round{tabIndex: 312, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['.f1', '[ln]', '[backspace]', '[fetch]']}
$$fetch{tabIndex: 313, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['.f1', '[log]', '[round]', '[store]']}
$$store{tabIndex: 314, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['.f1', '[exp]', '[fetch]', '[deg]']}
</div>
<div class="button-row">
$$e{tabIndex: 321, arrowNav: ['[backspace]', '[inv]', '[plus]', '[ln]']}
$$ln{tabIndex: 322, arrowNav: ['[round]', '[pow]', '[e]', '[log]']}
$$log{tabIndex: 323, arrowNav: ['[fetch]', '[sqroot]', '[ln]', '[exp]']}
$$exp{tabIndex: 324, arrowNav: ['[store]', '[root]', '[log]', '[sin]']}
$$e{tabIndex: 321, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[backspace]', '[inv]', '[plus]', '[ln]']}
$$ln{tabIndex: 322, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[round]', '[pow]', '[e]', '[log]']}
$$log{tabIndex: 323, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[fetch]', '[sqroot]', '[ln]', '[exp]']}
$$exp{tabIndex: 324, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[store]', '[root]', '[log]', '[sin]']}
</div>
<div class="button-row">
$$inv{tabIndex: 331, arrowNav: ['[e]', '[sign]', '[div]', '[pow]']}
$$pow{tabIndex: 332, arrowNav: ['[ln]', '[percent]', '[inv]', '[sqroot]']}
$$sqroot{tabIndex: 333, arrowNav: ['[log]', '[square]', '[pow]', '[root]']}
$$root{tabIndex: 334, arrowNav: ['[exp]', '[pi]', '[sqroot]', '[cos]']}
$$inv{tabIndex: 331, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[e]', '[sign]', '[div]', '[pow]']}
$$pow{tabIndex: 332, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[ln]', '[percent]', '[inv]', '[sqroot]']}
$$sqroot{tabIndex: 333, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[log]', '[square]', '[pow]', '[root]']}
$$root{tabIndex: 334, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[exp]', '[pi]', '[sqroot]', '[cos]']}
</div>
<div class="button-row">
$$sign{tabIndex: 341, arrowNav: ['[inv]', null, '[mult]', '[percent]']}
$$percent{tabIndex: 342, arrowNav: ['[pow]', null, '[sign]', '[square]']}
$$square{tabIndex: 343, arrowNav: ['[sqroot]', null, '[percent]', '[pi]']}
$$pi{tabIndex: 344, arrowNav: ['[root]', null, '[square]', '[tan]']}
$$sign{tabIndex: 341, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[inv]', null, '[mult]', '[percent]']}
$$percent{tabIndex: 342, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[pow]', null, '[sign]', '[square]']}
$$square{tabIndex: 343, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[sqroot]', null, '[percent]', '[pi]']}
$$pi{tabIndex: 344, haloColor: 'rgba(255, 255, 255, 0.4)', arrowNav: ['[root]', null, '[square]', '[tan]']}
</div>
</div>
</div>
Expand Down
28 changes: 14 additions & 14 deletions js/foam/apps/calc/TertiaryButtonsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,32 @@ CLASS({
this.X.registerModel(this.CalcButton.xbind({
width: 61,
height: 61,
color: 'rgb(80, 80, 80)',
background: 'rgb(29, 233, 182)',
color: '#444',
background: '#1DE9B6',
font: '300 18px Roboto'
}), 'foam.ui.ActionButton');
%>
<div id="%%id" class="buttons button-row tertiaryButtons">
<div class="button-column" style="flex-grow: 1;-webkit-flex-grow: 1;">
<div class="button-row">
$$deg{tabIndex: 411, arrowNav: ['.f1', '[sin]', '[store]', '[rad]']}
$$rad{tabIndex: 412, arrowNav: ['.f1', '[asin]', '[deg]', '[fact]']}
$$fact{tabIndex: 413, arrowNav: ['.f1', '[mod]', '[rad]', null]}
$$deg{tabIndex: 411, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['.f1', '[sin]', '[store]', '[rad]']}
$$rad{tabIndex: 412, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['.f1', '[asin]', '[deg]', '[fact]']}
$$fact{tabIndex: 413, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['.f1', '[mod]', '[rad]', null]}
</div>
<div class="button-row">
$$sin{tabIndex: 421, arrowNav: ['[deg]', '[cos]', '[exp]', '[asin]']}
$$asin{tabIndex: 422, arrowNav: ['[rad]', '[acos]', '[sin]', '[mod]']}
$$mod{tabIndex: 423, arrowNav: ['[fact]', '[p]', '[asin]', null]}
$$sin{tabIndex: 421, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[deg]', '[cos]', '[exp]', '[asin]']}
$$asin{tabIndex: 422, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[rad]', '[acos]', '[sin]', '[mod]']}
$$mod{tabIndex: 423, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[fact]', '[p]', '[asin]', null]}
</div>
<div class="button-row">
$$cos{tabIndex: 431, arrowNav: ['[sin]', '[tan]', '[root]', '[acos]']}
$$acos{tabIndex: 432, arrowNav: ['[asin]', '[atan]', '[cos]', '[p]']}
$$p{tabIndex: 433, arrowNav: ['[mod]', '[c]', '[acos]', null]}
$$cos{tabIndex: 431, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[sin]', '[tan]', '[root]', '[acos]']}
$$acos{tabIndex: 432, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[asin]', '[atan]', '[cos]', '[p]']}
$$p{tabIndex: 433, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[mod]', '[c]', '[acos]', null]}
</div>
<div class="button-row">
$$tan{tabIndex: 441, arrowNav: ['[cos]', null, '[pi]', '[atan]']}
$$atan{tabIndex: 442, arrowNav: ['[acos]', null, '[tan]', '[c]']}
$$c{tabIndex: 443, arrowNav: ['[p]', null, '[atan]', null]}
$$tan{tabIndex: 441, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[cos]', null, '[pi]', '[atan]']}
$$atan{tabIndex: 442, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[acos]', null, '[tan]', '[c]']}
$$c{tabIndex: 443, haloColor: 'rgba(0, 0, 0, 0.2)', arrowNav: ['[p]', null, '[atan]', null]}
</div>
</div>
</div>
Expand Down

0 comments on commit e4a010e

Please sign in to comment.