Added button panel to kalk_web

This commit is contained in:
PaddiM8 2021-01-09 01:19:52 +01:00
parent f87faa7302
commit 2d356f396b
10 changed files with 36 additions and 84 deletions

View File

@ -1,27 +0,0 @@
package com.getcapacitor.myapp;
import android.content.Context;
import androidx.test.platform.app.InstrumentationRegistry;
import androidx.test.ext.junit.runners.AndroidJUnit4;
import org.junit.Test;
import org.junit.runner.RunWith;
import static org.junit.Assert.*;
/**
* Instrumented test, which will execute on an Android device.
*
* @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
*/
@RunWith(AndroidJUnit4.class)
public class ExampleInstrumentedTest {
@Test
public void useAppContext() throws Exception {
// Context of the app under test.
Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
assertEquals("com.getcapacitor.app", appContext.getPackageName());
}
}

View File

@ -1,17 +0,0 @@
package com.getcapacitor.myapp;
import org.junit.Test;
import static org.junit.Assert.*;
/**
* Example local unit test, which will execute on the development machine (host).
*
* @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
*/
public class ExampleUnitTest {
@Test
public void addition_isCorrect() throws Exception {
assertEquals(4, 2 + 2);
}
}

View File

@ -268,9 +268,9 @@
"integrity": "sha512-HAWcL2dzOr5KY1/tXoHmMXkjvFuxwWXrljPyUkYtyzlQUKeeKbQkH0B7t9N0sAMw+n+9zw4nxiavPp7DbcKaNw=="
},
"@paddim8/kalk-component": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/@paddim8/kalk-component/-/kalk-component-1.0.8.tgz",
"integrity": "sha512-xaxhUlapu/r2DDE4zzP2UutvhoQLoObEDuDQHAEvMUdEh4UkZYPOPyd1BZiNnJ1u93TE216fznJMNaNpAF99Ug==",
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/@paddim8/kalk-component/-/kalk-component-1.0.11.tgz",
"integrity": "sha512-pHeApcNdNskT7YL00u4CC/ivbGpOyQIEm4sdSeGPM7rJ/3cU60cjRmYLO8gGXjtJuSvzTFDgf8U6g+bEFVroYA==",
"requires": {
"@paddim8/kalk": "^1.4.2",
"shadow-selection-polyfill": "^1.1.0"

View File

@ -16,7 +16,7 @@
"@capacitor/android": "^2.4.5",
"@capacitor/cli": "^2.4.5",
"@capacitor/core": "^2.4.5",
"@paddim8/kalk-component": "^1.0.8"
"@paddim8/kalk-component": "^1.0.11"
},
"devDependencies": {
"@capacitor-community/electron": "^1.3.2",

View File

@ -23,7 +23,7 @@
<body>
<div class="calculator">
<kalk-calculator autofocus="true">
<kalk-calculator autofocus="true" buttonpanel="true" numberrow="true">
<console-line>kalk</console-line>
<console-line>
<span class="hint">Type 'help' for instructions.</span>

View File

@ -12,7 +12,6 @@ body {
font-family: "Hack", sans-serif;
color: white;
background-color: #2e2e2e;
padding: 10px 20px 10px 20px;
}
.hint {

View File

@ -1 +1 @@
body{width:100%;height:100%;padding:0;margin:0}.calculator{width:100%;height:100vh;box-sizing:border-box;font-family:"Hack", sans-serif;color:white;background-color:#2e2e2e;padding:10px 20px 10px 20px}.hint{color:#c3c3c3}
body{width:100%;height:100%;padding:0;margin:0}.calculator{width:100%;height:100vh;box-sizing:border-box;font-family:"Hack", sans-serif;color:white;background-color:#2e2e2e}.hint{color:#c3c3c3}

View File

@ -11,7 +11,6 @@ body
font-family: "Hack", sans-serif
color: white
background-color: lighten(#212121, 5%)
padding: 10px 20px 10px 20px
.hint
color: #c3c3c3

View File

@ -1,6 +1,6 @@
{
"name": "@paddim8/kalk-component",
"version": "1.0.9",
"version": "1.0.11",
"description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
"svelte": "src/main.ts",
"main": "public/build/bundle.js",

View File

@ -375,32 +375,21 @@
.button-panel {
display: grid;
grid-template-columns: repeat(4, auto);
padding-right: 1.82vw;
grid-template-columns: repeat(10, auto);
grid-template-rows: repeat(3, auto);
}
.arrow {
.left {
grid-area: left-arrow;
}
.right {
grid-area: right-arrow;
}
}
.number-row,
.button-panel {
width: 100%;
button {
$margin: 2px;
$margin: 4px;
margin-right: $margin;
margin-bottom: $margin;
position: relative;
border: 0;
border-right: $margin solid transparent;
$padding: 2.5vw;
$font-size: 8vw;
padding: calc(#{$padding} - #{$margin} / 2);
font-size: $font-size;
padding: 2.5vw;
font-size: 6.5vw;
line-height: 1.2;
background-color: inherit;
font-family: inherit;
@ -424,6 +413,19 @@
bottom: 0px;
background-color: rgba(0, 0, 0, 0.2);
}
button:last-child {
margin-right: 0;
}
}
.arrow.left {
grid-area: 1 / 1 / span 2 / 1;
}
.arrow.right {
margin-right: 0;
grid-area: 1 / 10 / span 2 / 10;
}
}
</style>
@ -470,21 +472,17 @@
<button
class="arrow left"
on:click={(e) => handleArrowClick(e, true)}>←</button>
<div class="text-input-buttons">
{#each buttonRowValues as value}
<button on:click={handleButtonClick}>{value}</button>
{/each}
</div>
{#each buttonRowValues as value}
<button on:click={handleButtonClick}>{value}</button>
{/each}
<button
class="arrow right"
on:click={(e) => handleArrowClick(e, false)}>→</button>
</section>
{/if}
{#if numberrow}
<section class="number-row">
{#each numberRowValues as value}
<button on:click={handleButtonClick}>{value}</button>
{/each}
{#if numberrow}
{#each numberRowValues as value}
<button on:click={handleButtonClick}>{value}</button>
{/each}
{/if}
</section>
{/if}
</div>