From 828c52eecb7f70c7e30e870c1d7a9374c8a3aac2 Mon Sep 17 00:00:00 2001 From: "s0wlz (Matthias Puchstein)" Date: Fri, 27 Feb 2026 11:50:33 +0100 Subject: [PATCH] transitioned to picocss and removed most styling --- index.html | 49 ++++---------- package.json | 5 +- pnpm-lock.yaml | 8 +++ src-tauri/src/lib.rs | 7 -- src/app/dom.ts | 20 +----- src/app/init.ts | 36 ++-------- src/assets/tauri.svg | 6 -- src/assets/typescript.svg | 25 ------- src/assets/vite.svg | 1 - src/features/countdown/view.ts | 14 ++-- src/styles.css | 4 +- src/styles/base.css | 117 --------------------------------- src/styles/countdown.css | 43 ++---------- 13 files changed, 46 insertions(+), 289 deletions(-) delete mode 100644 src/assets/tauri.svg delete mode 100644 src/assets/typescript.svg delete mode 100644 src/assets/vite.svg delete mode 100644 src/styles/base.css diff --git a/index.html b/index.html index 11ac6b8..9a78244 100644 --- a/index.html +++ b/index.html @@ -1,43 +1,16 @@ - - - - + + + + Tauri App - - + + - -
-

Welcome to Tauri

- -
- - - - - - - - - -
-

Click on the Tauri logo to learn more about the framework

- -
- - -
-

-
- + +
+
+
+ diff --git a/package.json b/package.json index e1a8936..0a2a465 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,13 @@ "tauri": "tauri" }, "dependencies": { + "@picocss/pico": "^2.1.1", "@tauri-apps/api": "^2", "@tauri-apps/plugin-opener": "^2" }, "devDependencies": { "@tauri-apps/cli": "^2", - "vite": "^6.0.3", - "typescript": "~5.6.2" + "typescript": "~5.6.2", + "vite": "^6.0.3" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4e63c5c..2deadcb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@picocss/pico': + specifier: ^2.1.1 + version: 2.1.1 '@tauri-apps/api': specifier: ^2 version: 2.10.1 @@ -183,6 +186,9 @@ packages: cpu: [x64] os: [win32] + '@picocss/pico@2.1.1': + resolution: {integrity: sha512-kIDugA7Ps4U+2BHxiNHmvgPIQDWPDU4IeU6TNRdvXQM1uZX+FibqDQT2xUOnnO2yq/LUHcwnGlu1hvf4KfXnMg==} + '@rollup/rollup-android-arm-eabi@4.58.0': resolution: {integrity: sha512-mr0tmS/4FoVk1cnaeN244A/wjvGDNItZKR8hRhnmCzygyRXYtKF5jVDSIILR1U97CTzAYmbgIj/Dukg62ggG5w==} cpu: [arm] @@ -579,6 +585,8 @@ snapshots: '@esbuild/win32-x64@0.25.12': optional: true + '@picocss/pico@2.1.1': {} + '@rollup/rollup-android-arm-eabi@4.58.0': optional: true diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index dbc91d0..3587f70 100644 --- a/src-tauri/src/lib.rs +++ b/src-tauri/src/lib.rs @@ -8,12 +8,6 @@ use crate::countdown::commands::{ }; pub use app_state::AppState; -// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/ -#[tauri::command] -fn greet(name: &str) -> String { - format!("Hello, {}! You've been greeted from Rust!", name) -} - #[cfg_attr(mobile, tauri::mobile_entry_point)] pub fn run() { let app_state = AppState::new(); @@ -21,7 +15,6 @@ pub fn run() { .manage(app_state) .plugin(tauri_plugin_opener::init()) .invoke_handler(tauri::generate_handler![ - greet, countdown_start, countdown_reset, countdown_pause, diff --git a/src/app/dom.ts b/src/app/dom.ts index 045e8b1..7dbd002 100644 --- a/src/app/dom.ts +++ b/src/app/dom.ts @@ -1,21 +1,7 @@ -export type GreetDom = { - form: HTMLFormElement; - input: HTMLInputElement; - message: HTMLElement; -}; - export function getMainContainer(): HTMLElement | null { - return document.querySelector(".container"); + return document.querySelector(".container"); } -export function getGreetDom(): GreetDom | null { - const form = document.querySelector("#greet-form"); - const input = document.querySelector("#greet-input"); - const message = document.querySelector("#greet-msg"); - - if (!form || !input || !message) { - return null; - } - - return { form, input, message }; +export function getDiv(id: string): HTMLElement | null { + return document.getElementById(id); } diff --git a/src/app/init.ts b/src/app/init.ts index 73c01c4..27b537a 100644 --- a/src/app/init.ts +++ b/src/app/init.ts @@ -1,33 +1,9 @@ -import { initCountdownController } from "../features/countdown/controller"; -import { invokeCommand } from "../shared/tauri/invoke"; -import { getGreetDom, getMainContainer } from "./dom"; - -async function greet(name: string, messageEl: HTMLElement): Promise { - try { - const message = await invokeCommand("greet", { name }); - messageEl.textContent = message; - } catch (error) { - messageEl.textContent = `greet error: ${String(error)}`; - } -} - -function bindGreetForm(): void { - const greetDom = getGreetDom(); - if (!greetDom) { - return; - } - - greetDom.form.addEventListener("submit", (event) => { - event.preventDefault(); - void greet(greetDom.input.value, greetDom.message); - }); -} +import {initCountdownController} from "../features/countdown/controller"; +import {getDiv} from "./dom"; export async function initApp(): Promise { - bindGreetForm(); - - const container = getMainContainer(); - if (container) { - await initCountdownController(container); - } + const countdownContainer = getDiv("countdown-container"); + if (countdownContainer) { + await initCountdownController(countdownContainer); + } } diff --git a/src/assets/tauri.svg b/src/assets/tauri.svg deleted file mode 100644 index 31b62c9..0000000 --- a/src/assets/tauri.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/assets/typescript.svg b/src/assets/typescript.svg deleted file mode 100644 index 30a5edd..0000000 --- a/src/assets/typescript.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - diff --git a/src/assets/vite.svg b/src/assets/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/src/assets/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/features/countdown/view.ts b/src/features/countdown/view.ts index 2b7cb5a..7dff44e 100644 --- a/src/features/countdown/view.ts +++ b/src/features/countdown/view.ts @@ -3,8 +3,8 @@ import {CountdownSnapshot} from "./types.ts"; export type CountdownView = { onStart: (handler: () => void) => void; - onPause: (handler: () => void) => void; onResume: (handler: () => void) => void; + onPause: (handler: () => void) => void; onReset: (handler: () => void) => void; onRefresh: (handler: () => void) => void; setSnapshot: (snapshot: CountdownSnapshot) => void; @@ -13,6 +13,8 @@ export type CountdownView = { function makeButton(label: string): HTMLButtonElement { const button = document.createElement("button"); + button.id = "cd-btn-" + label.toLowerCase(); + button.className = "countdown-btn" button.type = "button"; button.textContent = label; return button; @@ -29,12 +31,12 @@ export function createCountdownView(container: HTMLElement): CountdownView { actions.className = "countdown-actions"; const startButton = makeButton("Start"); - const pauseButton = makeButton("Pause"); const resumeButton = makeButton("Resume"); + const pauseButton = makeButton("Pause"); const resetButton = makeButton("Reset"); const refreshButton = makeButton("Refresh"); - actions.append(startButton, pauseButton, resumeButton, resetButton, refreshButton); + actions.append(startButton, resumeButton, pauseButton, resetButton, refreshButton); const summary = document.createElement("p"); summary.className = "countdown-summary"; @@ -53,12 +55,12 @@ export function createCountdownView(container: HTMLElement): CountdownView { onStart(handler) { startButton.addEventListener("click", handler); }, - onPause(handler) { - pauseButton.addEventListener("click", handler); - }, onResume(handler) { resumeButton.addEventListener("click", handler); }, + onPause(handler) { + pauseButton.addEventListener("click", handler); + }, onReset(handler) { resetButton.addEventListener("click", handler); }, diff --git a/src/styles.css b/src/styles.css index 05495d8..a268815 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,2 +1,2 @@ -@import "./styles/base.css"; -@import "./styles/countdown.css"; +@import "@picocss/pico/css/pico.classless.jade.min.css"; +@import "./styles/countdown.css"; \ No newline at end of file diff --git a/src/styles/base.css b/src/styles/base.css deleted file mode 100644 index c64afbf..0000000 --- a/src/styles/base.css +++ /dev/null @@ -1,117 +0,0 @@ -.logo.vite:hover { - filter: drop-shadow(0 0 2em #747bff); -} - -.logo.typescript:hover { - filter: drop-shadow(0 0 2em #2d79c7); -} - -:root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; - color: #0f0f0f; - background-color: #f6f6f6; - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -.container { - margin: 0; - padding-top: 10vh; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: 0.75s; -} - -.logo.tauri:hover { - filter: drop-shadow(0 0 2em #24c8db); -} - -.row { - display: flex; - justify-content: center; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} - -a:hover { - color: #535bf2; -} - -h1 { - text-align: center; -} - -input, -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - color: #0f0f0f; - background-color: #ffffff; - transition: border-color 0.25s; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -} - -button { - cursor: pointer; -} - -button:hover { - border-color: #396cd8; -} - -button:active { - border-color: #396cd8; - background-color: #e8e8e8; -} - -input, -button { - outline: none; -} - -#greet-input { - margin-right: 5px; -} - -@media (prefers-color-scheme: dark) { - :root { - color: #f6f6f6; - background-color: #2f2f2f; - } - - a:hover { - color: #24c8db; - } - - input, - button { - color: #ffffff; - background-color: #0f0f0f98; - } - - button:active { - background-color: #0f0f0f69; - } -} diff --git a/src/styles/countdown.css b/src/styles/countdown.css index d93afba..5153b8f 100644 --- a/src/styles/countdown.css +++ b/src/styles/countdown.css @@ -1,43 +1,10 @@ -.countdown-panel { - margin: 2rem auto 0; - max-width: 780px; - width: min(90vw, 780px); - text-align: left; -} - .countdown-actions { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin: 0.75rem 0; -} - -.countdown-summary { - margin: 0.5rem 0; + display: flex; + gap: 0.5rem; } .countdown-error { - min-height: 1.25rem; - color: #b00020; - margin: 0.25rem 0; -} - -.countdown-snapshot { - margin: 0; - padding: 0.75rem; - border-radius: 8px; - border: 1px solid rgba(0, 0, 0, 0.15); - background: rgba(255, 255, 255, 0.65); - overflow: auto; -} - -@media (prefers-color-scheme: dark) { - .countdown-error { - color: #ff8a80; - } - - .countdown-snapshot { - border-color: rgba(255, 255, 255, 0.25); - background: rgba(15, 15, 15, 0.6); - } + min-height: 1.25rem; + color: #b00020; + margin: 0.25rem 0; }