From 6c38f8f0acbd261592d89ab0647ffa639cdf823a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Attila=20Sz=C5=91ke?= Date: Sat, 23 Mar 2024 22:51:16 +0100 Subject: [PATCH] feat: loader shown on init, icon set is new --- package.json | 1 - src/App.svelte | 20 +++++++++-- src/lib/components/Spinner.svelte | 58 +++++++++++++++++++++++++++++++ src/lib/layouts/ViewHeader.svelte | 10 ++++-- src/view/List.svelte | 17 +++++++-- src/view/Record.svelte | 36 +++++++++++++------ yarn.lock | 8 ----- 7 files changed, 122 insertions(+), 28 deletions(-) create mode 100644 src/lib/components/Spinner.svelte diff --git a/package.json b/package.json index 595f8b7..3526e28 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "dependencies": { "@tauri-apps/api": "1.5.3", "dayjs": "1.11.10", - "svelte-icons": "2.1.0", "ts-toolbelt": "^9.6.0" }, "devDependencies": { diff --git a/src/App.svelte b/src/App.svelte index 1de0dbe..cdd02b6 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -6,14 +6,17 @@ import List from './view/List.svelte'; import { todaysHighlight } from './store'; import { exit } from '@tauri-apps/api/process'; + import Spinner from './lib/components/Spinner.svelte'; + import { fade } from 'svelte/transition'; enum AppState { + Loading, Menu, Record, List } - let state: AppState = AppState.Menu; + let state: AppState = AppState.Loading; const init = async () => { const result = await commands.getTodaysHighlight(); @@ -36,7 +39,11 @@ const toMenu = () => (state = AppState.Menu); -{#if state === AppState.Menu} +{#if state === AppState.Loading} +
+ +
+{:else if state === AppState.Menu} (state = AppState.Record)} on:toList={() => (state = AppState.List)} @@ -47,3 +54,12 @@ {:else if state === AppState.List} {/if} + + diff --git a/src/lib/components/Spinner.svelte b/src/lib/components/Spinner.svelte new file mode 100644 index 0000000..cd1e639 --- /dev/null +++ b/src/lib/components/Spinner.svelte @@ -0,0 +1,58 @@ +
+ + diff --git a/src/lib/layouts/ViewHeader.svelte b/src/lib/layouts/ViewHeader.svelte index bfe4b93..8677de9 100644 --- a/src/lib/layouts/ViewHeader.svelte +++ b/src/lib/layouts/ViewHeader.svelte @@ -1,13 +1,17 @@
@@ -30,7 +34,7 @@ display: flex; & svg { - width: 32px; + width: 40px; } &:hover { diff --git a/src/view/List.svelte b/src/view/List.svelte index 982df8e..e239cc6 100644 --- a/src/view/List.svelte +++ b/src/view/List.svelte @@ -2,7 +2,6 @@ import { commands } from '../bindings'; import dayjs from 'dayjs'; import RandomEmoji from '../lib/components/RandomEmoji.svelte'; - import FaRegCalendarAlt from 'svelte-icons/fa/FaRegCalendarAlt.svelte'; import { happyEmojis, sadEmojis } from '../lib/constants/emojis'; import ViewHeader from '@/lib/layouts/ViewHeader.svelte'; import ViewMain from '@/lib/layouts/ViewMain.svelte'; @@ -11,7 +10,19 @@

Highlights

- + {#await commands.listHighlights()} @@ -114,7 +125,7 @@ padding: 8px; & svg { - width: 32px; + width: 40px; } &:hover { diff --git a/src/view/Record.svelte b/src/view/Record.svelte index 3faea0d..afd4c5a 100644 --- a/src/view/Record.svelte +++ b/src/view/Record.svelte @@ -2,7 +2,6 @@ import { createEventDispatcher } from 'svelte'; import ViewHeader from '@/lib/layouts/ViewHeader.svelte'; import ViewMain from '@/lib/layouts/ViewMain.svelte'; - import FaPlus from 'svelte-icons/fa/FaPlus.svelte'; import type { CreateHighlightRequest } from '@/bindings'; import type { Nullable } from 'ts-toolbelt/out/Object/Nullable'; import RandomEmoji from '@/lib/components/RandomEmoji.svelte'; @@ -31,19 +30,18 @@ [HighlightKind.BEST]: { content: null, kind: HighlightKind.BEST } }; - $: submitDisabled = kind === 'WORST' ? !model['WORST'].content : !model['BEST'].content; - - // Középen legyen egy átkattinható BEST|WORST radio gomb ami vált boldog és szomorú textarea között - // alatta submit gomb, enterre is megy - // alatta pedig random színes listában amit felvittél, lehet prop - // random emoji a válaszott rádiógomb mellett + $: submitDisabled = + submitting || (kind === 'WORST' ? !model['WORST'].content : !model['BEST'].content); + let submitting = false; const submit = () => { + submitting = true; const highlight = model[kind]; if (highlight.content) { dispatch('submit', { content: highlight.content, kind }); model[kind].content = ''; } + submitting = false; }; @@ -88,7 +86,18 @@ {#if kind === HighlightKind.WORST} @@ -169,7 +178,6 @@ align-items: center; background: transparent; border: none; - color: var(--very-dark); display: flex; transition: color 0.2s ease; width: 40px; @@ -186,13 +194,19 @@ color: var(--light); cursor: default; } + + & button:disabled:hover { + background: transparent; + color: var(--light); + cursor: default; + } } & textarea { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; border-color: var(--dark); - border-radius: 8px; border-style: solid; - border-top-left-radius: 0; border-width: 4px; font-size: small; padding: 0; diff --git a/yarn.lock b/yarn.lock index 8c3573a..383f218 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4390,13 +4390,6 @@ __metadata: languageName: node linkType: hard -"svelte-icons@npm:2.1.0": - version: 2.1.0 - resolution: "svelte-icons@npm:2.1.0" - checksum: 10c0/1150b9f67302e3b3b2b7d403d5695a5e11d3f77a10393516b719ce3b306e9a300a0fc02be9ff328a2488723feccdad7709329a97c7d43d55605ab00566a482f2 - languageName: node - linkType: hard - "svelte-preprocess@npm:^5.1.3": version: 5.1.3 resolution: "svelte-preprocess@npm:5.1.3" @@ -4738,7 +4731,6 @@ __metadata: stylelint-prettier: "npm:5.0.0" svelte: "npm:4.2.12" svelte-check: "npm:3.6.6" - svelte-icons: "npm:2.1.0" ts-toolbelt: "npm:^9.6.0" tslib: "npm:2.6.2" typescript: "npm:5.3.3"