Redesign UI to add some color,
eliminate the FAB, and make dialogs look better Add an about page
This commit is contained in:
parent
a291d68fa9
commit
67a40cfb84
9 changed files with 318 additions and 51 deletions
64
src/ncounter/About.svelte
Normal file
64
src/ncounter/About.svelte
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<div class="about">
|
||||
<button class="close" on:click={ () => { dispatch('close'); } }><i class="material-icons">close</i></button>
|
||||
<header>
|
||||
<h1>NCounter</h1>
|
||||
<h2>Release |BUILD_DATE|</h2>
|
||||
<h2>© |BUILD_YEAR|</h2>
|
||||
</header>
|
||||
<div class="licenses">
|
||||
<h2>Open Source License Information</h2>
|
||||
<Licenses></Licenses>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
import Licenses from './Licenses.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
<style>
|
||||
.about {
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.about > header {
|
||||
flex: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.licenses h2{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.licenses {
|
||||
margin-top: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,27 +1,36 @@
|
|||
<div class="app">
|
||||
<button class="add" on:click="{ showAdd }"><i class="material-icons">add</i></button>
|
||||
{#each $counters as counter}
|
||||
<Counter counterId={ counter.id }></Counter>
|
||||
{/each}
|
||||
<div class="counter-list">
|
||||
{#each $counters as counter}
|
||||
<Counter counterId={ counter.id }></Counter>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="tool-bar">
|
||||
<button class="add" on:click="{ showAdd }"><i class="material-icons">add</i></button>
|
||||
<button class="about" on:click="{ () => { showAbout = true; } }">?</button>
|
||||
</div>
|
||||
</div>
|
||||
{#if showAddDialog}
|
||||
<div class="dialog">
|
||||
<div class="dialog-content">
|
||||
<label>Name: <input type="text" bind:value={newCounter.title} use:focus/></label>
|
||||
<label>Initial Value: <input type="number" bind:value={newCounter.initialValue} /></label>
|
||||
<label>Target: <input type="number" bind:value={newCounter.max} /></label>
|
||||
<label>Save history: <input type="checkbox" bind:checked={newCounter.saveHistory} /></label>
|
||||
<label>Name<input type="text" bind:value={newCounter.title} use:focus/></label>
|
||||
<label>Initial Value<input type="number" bind:value={newCounter.initialValue} /></label>
|
||||
<label>Target<input type="number" bind:value={newCounter.max} /></label>
|
||||
<label>Save history<input type="checkbox" bind:checked={newCounter.saveHistory} /></label>
|
||||
<button on:click={ () => { showAddDialog = false; } }>Cancel</button>
|
||||
<button class="ok" on:click={ add }>OK</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if showAbout}
|
||||
<About on:close="{ () => { showAbout = false; } }"></About>
|
||||
{/if}
|
||||
<script>
|
||||
import About from './About.svelte';
|
||||
import Counter from './Counter.svelte';
|
||||
import { counters } from './db.js';
|
||||
|
||||
let showAddDialog = false;
|
||||
|
||||
let showAbout = false;
|
||||
let newCounter = null;
|
||||
|
||||
function focus(node){
|
||||
|
|
@ -50,34 +59,16 @@ function add(){
|
|||
showAddDialog = false;
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
position: fixed;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
background-color: #90C090;
|
||||
border-radius: 50%;
|
||||
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
<style lang="scss">
|
||||
.ok {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.app {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -85,7 +76,35 @@ function add(){
|
|||
left: 0;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.counter-list {
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
flex: 1 0 0;
|
||||
|
||||
background-color: #8baec6;
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
flex: none;
|
||||
|
||||
display: flex;
|
||||
|
||||
border-top: 2px solid #3A86B7;
|
||||
}
|
||||
|
||||
.tool-bar > button {
|
||||
background-color: #3A86B7;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tool-bar > button:focus, .tool-bar > button:hover {
|
||||
border: 2px solid #303030;
|
||||
}
|
||||
|
||||
.about {
|
||||
margin-left: auto;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -27,10 +27,10 @@
|
|||
{#if showEditDialog}
|
||||
<div class="dialog">
|
||||
<div class="dialog-content">
|
||||
<label>Name: <input type="text" bind:value={editingCounter.title} use:focus/></label>
|
||||
<label>Initial Value: <input type="number" bind:value={editingCounter.initialValue} /></label>
|
||||
<label>Target: <input type="number" bind:value={editingCounter.max} /></label>
|
||||
<label>Save history: <input type="checkbox" bind:checked={editingCounter.saveHistory} /></label>
|
||||
<label>Name<input type="text" bind:value={editingCounter.title} use:focus/></label>
|
||||
<label>Initial Value<input type="number" bind:value={editingCounter.initialValue} /></label>
|
||||
<label>Target<input type="number" bind:value={editingCounter.max} /></label>
|
||||
<label>Save history<input type="checkbox" bind:checked={editingCounter.saveHistory} /></label>
|
||||
<button on:click={ () => { showEditDialog = false; } }>Cancel</button>
|
||||
<button class="ok" on:click={ finishEdit }>OK</button>
|
||||
</div>
|
||||
|
|
@ -122,7 +122,10 @@ function remove(){
|
|||
<style>
|
||||
.counter{
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
margin-bottom: 12px;
|
||||
|
||||
background-color: #FCFCFC;
|
||||
|
||||
margin-bottom: 4px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -130,10 +133,6 @@ function remove(){
|
|||
padding: 5px;
|
||||
}
|
||||
|
||||
.counter:last-child {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -151,7 +150,7 @@ header {
|
|||
}
|
||||
|
||||
.reset {
|
||||
margin-left: 24px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.reset + button {
|
||||
|
|
@ -159,7 +158,7 @@ header {
|
|||
}
|
||||
|
||||
.history {
|
||||
margin-right: 24px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.dialog-value {
|
||||
|
|
|
|||
|
|
@ -107,8 +107,6 @@ function close(){
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -124,6 +122,8 @@ function close(){
|
|||
|
||||
.table-container {
|
||||
position: relative;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.close {
|
||||
|
|
|
|||
39
src/ncounter/Licenses.svelte
Normal file
39
src/ncounter/Licenses.svelte
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<div>
|
||||
{#each licenses as license}
|
||||
<header>
|
||||
<h1>{license.name} by {license.author}</h1>
|
||||
<div>Source: <a href="{license.repository}" target="_blank">{license.repository}</a></div>
|
||||
</header>
|
||||
<pre>{license.licenseText}</pre>
|
||||
{/each}
|
||||
{#if !licenses}
|
||||
<progress></progress>
|
||||
{/if}
|
||||
</div>
|
||||
<script>
|
||||
let licenses = [];
|
||||
|
||||
(async () => {
|
||||
licenses = await fetch('oss-licenses.json')
|
||||
.then(response => {
|
||||
if(response.ok)
|
||||
return response.json();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
header {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
white-space: pre-wrap;
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -25,7 +25,21 @@ body {
|
|||
button {
|
||||
background: 0;
|
||||
border: 0;
|
||||
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
button:focus, button:hover {
|
||||
border: 2px solid #3A86B7;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
|
|
@ -47,14 +61,13 @@ button {
|
|||
}
|
||||
|
||||
.dialog-content {
|
||||
background-color: #E0E0E0;
|
||||
background-color: #FCFCFC;
|
||||
pointer-events: all;
|
||||
|
||||
width: 300px;
|
||||
width: 315px;
|
||||
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
padding: 5px;
|
||||
padding: 10px;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -64,16 +77,30 @@ button {
|
|||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
align-items: center;
|
||||
height: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dialog-content > label > input {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.dialog-content input[type='text'], .dialog-content input[type='number'] {
|
||||
width: 175px;
|
||||
}
|
||||
|
||||
.dialog-content button {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dialog-content button:focus, .dialog-content button:hover {
|
||||
border: 0;
|
||||
outline: 2px solid #3A86B7;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue