Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💫 Migrate to TailwindCSS 4 and DaisyUI 5

Browse Source
This commit is contained in:
Rune Harlyk
2025-03-07 21:14:59 +01:00
committed by Rune Harlyk
parent d90dbbcf21
commit 74cb4aaee4
17 changed files with 584 additions and 750 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/package.json
+3 -3
View File
@@ -32,13 +32,12 @@
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.45.1", "eslint-plugin-svelte": "^2.45.1",
"jsdom": "^24.0.0", "jsdom": "^24.0.0",
"postcss": "^8.4.38",
"prettier": "^3.1.1", "prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.2.6", "prettier-plugin-svelte": "^3.2.6",
"svelte": "^5.0.0", "svelte": "^5.0.0",
"svelte-check": "^4.0.0", "svelte-check": "^4.0.0",
"svelte-focus-trap": "^1.2.0", "svelte-focus-trap": "^1.2.0",
"tailwindcss": "^3.4.3", "tailwindcss": "^4.0.12",
"tslib": "^2.6.1", "tslib": "^2.6.1",
"typescript": "^5.5.0", "typescript": "^5.5.0",
"unplugin-icons": "^0.18.5", "unplugin-icons": "^0.18.5",
@@ -48,10 +47,11 @@
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@niku/vite-env-caster": "^1.0.2", "@niku/vite-env-caster": "^1.0.2",
"@tailwindcss/vite": "^4.0.12",
"chart.js": "^4.4.2", "chart.js": "^4.4.2",
"compare-versions": "^6.1.0", "compare-versions": "^6.1.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"daisyui": "^4.10.2", "daisyui": "^5.0.0",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
"nipplejs": "^0.10.1", "nipplejs": "^0.10.1",
"svelte-dnd-list": "^0.1.8", "svelte-dnd-list": "^0.1.8",
app/pnpm-lock.yaml
Generated
+317 -455
View File
File diff suppressed because it is too large Load Diff
app/postcss.config.js
-5
View File
@@ -1,5 +0,0 @@
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
export default {
plugins: [tailwindcss(), autoprefixer()]
};
app/src/app.css
+26 -4
View File
@@ -1,8 +1,30 @@
@tailwind base; @import 'tailwindcss';
@tailwind components; @plugin "daisyui";
@tailwind utilities;
#nipple_0_0, #nipple_1_1 { @plugin "daisyui" {
themes:
light --default,
dark --prefersdark;
}
@plugin "daisyui/theme" {
name: 'light';
default: true;
--color-primary: #00bfff;
--color-secondary: #3c00ff;
--base-content: white;
}
@plugin "daisyui/theme" {
name: 'dark';
prefersdark: true;
--color-primary: #00bfff;
--color-secondary: #3c00ff;
--base-content: oklch(0.3 0.012 256);
}
#nipple_0_0,
#nipple_1_1 {
z-index: 10 !important; z-index: 10 !important;
} }
app/src/lib/components/GithubUpdateDialog.svelte
+1 -1
View File
@@ -84,7 +84,7 @@
</div> </div>
<div class="divider my-2"></div> <div class="divider my-2"></div>
<div class="flex flex-wrap justify-end gap-2"> <div class="flex flex-wrap justify-end gap-2">
<div class="flex-grow"></div> <div class="grow"></div>
<button <button
class="btn btn-warning text-warning-content inline-flex flex-none items-center" class="btn btn-warning text-warning-content inline-flex flex-none items-center"
disabled={updating} disabled={updating}
app/src/lib/components/Toast.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
in:fly={{ y: 100, duration: 400 }} in:fly={{ y: 100, duration: 400 }}
out:fly={{ x: 100, duration: 400 }} out:fly={{ x: 100, duration: 400 }}
> >
<SvelteComponent class="h-6 w-6 flex-shrink-0" /> <SvelteComponent class="h-6 w-6 shrink-0" />
<span>{notification.message}</span> <span>{notification.message}</span>
</div> </div>
{/each} {/each}
app/src/lib/components/menu/Menu.svelte
+35 -44
View File
@@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state'; import { page } from '$app/state'
import { useFeatureFlags } from '$lib/stores/featureFlags'; import { useFeatureFlags } from '$lib/stores/featureFlags'
import GithubButton from '../menu/GithubButton.svelte'; import GithubButton from '../menu/GithubButton.svelte'
import LogoButton from '../menu/LogoButton.svelte'; import LogoButton from '../menu/LogoButton.svelte'
import MenuList from '../menu/MenuList.svelte'; import MenuList from '../menu/MenuList.svelte'
import { import {
Connection, Connection,
Settings, Settings,
@@ -18,30 +18,29 @@
WiFi, WiFi,
Router, Router,
AP, AP,
Remote,
Copyright, Copyright,
Metrics Metrics
} from '$lib/components/icons'; } from '$lib/components/icons'
import appEnv from 'app-env'; import appEnv from 'app-env'
const features = useFeatureFlags(); const features = useFeatureFlags()
const appName = page.data.app_name; const appName = page.data.app_name
const copyright = page.data.copyright; const copyright = page.data.copyright
const github = { href: 'https://github.com/' + page.data.github, active: true }; const github = { href: 'https://github.com/' + page.data.github, active: true }
type menuItem = { type menuItem = {
title: string; title: string
icon: ConstructorOfATypedSvelteComponent; icon: ConstructorOfATypedSvelteComponent
href?: string; href?: string
feature: boolean; feature: boolean
active?: boolean; active?: boolean
submenu?: menuItem[]; submenu?: menuItem[]
}; }
let menuItems = $state<menuItem[]>([]); let menuItems = $state<menuItem[]>([])
$effect(() => { $effect(() => {
menuItems = [ menuItems = [
@@ -134,47 +133,39 @@
title: 'Firmware Update', title: 'Firmware Update',
icon: Update, icon: Update,
href: '/system/update', href: '/system/update',
feature: feature: $features.ota || $features.upload_firmware || $features.download_firmware
$features.ota ||
$features.upload_firmware ||
$features.download_firmware
} }
] ]
} }
] as menuItem[]; ] as menuItem[]
}); })
const { menuClicked } = $props(); const { menuClicked } = $props()
function setActiveMenuItem(targetTitle: string) { function setActiveMenuItem(targetTitle: string) {
menuItems.forEach(item => { menuItems.forEach(item => {
item.active = item.title === targetTitle; item.active = item.title === targetTitle
item.submenu?.forEach(subItem => { item.submenu?.forEach(subItem => {
subItem.active = subItem.title === targetTitle; subItem.active = subItem.title === targetTitle
}); })
}); })
menuItems = menuItems; menuItems = menuItems
menuClicked(); menuClicked()
} }
$effect(() => { $effect(() => {
setActiveMenuItem(page.data.title); setActiveMenuItem(page.data.title)
}); })
const updateMenu = (event: any) => { const updateMenu = (event: any) => {
setActiveMenuItem(event.details); setActiveMenuItem(event.details)
}; }
</script> </script>
<div class="bg-base-200 text-base-content flex h-full w-80 flex-col p-4"> <div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">
<LogoButton {appName} /> <LogoButton {appName} />
<MenuList <MenuList {menuItems} select={updateMenu} class="grow flex-nowrap overflow-y-auto" level="0" />
{menuItems}
select={updateMenu}
class="flex-grow flex-nowrap overflow-y-auto"
level="0"
/>
<div class="divider my-0"></div> <div class="divider my-0"></div>
app/src/lib/components/menu/MenuList.svelte
+13 -19
View File
@@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import MenuList from './MenuList.svelte'; import MenuList from './MenuList.svelte'
type MenuItem = { type MenuItem = {
title: string; title: string
icon: ConstructorOfATypedSvelteComponent; icon: ConstructorOfATypedSvelteComponent
href?: string; href?: string
feature: boolean; feature: boolean
active?: boolean; active?: boolean
submenu?: MenuItem[]; submenu?: MenuItem[]
}; }
let { level, menuItems, select, class: klass } = $props(); let { level, menuItems, select, class: klass } = $props()
const selectMenuItem = (title: string) => { const selectMenuItem = (title: string) => {
select(title); select(title)
}; }
</script> </script>
<ul class={klass + ' menu'}> <ul class={klass + ' menu'}>
@@ -27,12 +27,7 @@
{menuItem.title} {menuItem.title}
</summary> </summary>
<div class="pl-4"> <div class="pl-4">
<MenuList <MenuList menuItems={menuItem.submenu} level={level + 1} {select} class={klass} />
menuItems={menuItem.submenu}
level={level + 1}
{select}
class={klass}
/>
</div> </div>
</details> </details>
{:else} {:else}
@@ -42,8 +37,7 @@
class:bg-base-100={menuItem.active} class:bg-base-100={menuItem.active}
class:text-lg={level === 0} class:text-lg={level === 0}
class:text-md={level === 1} class:text-md={level === 1}
onclick={() => selectMenuItem(menuItem.title)} onclick={() => selectMenuItem(menuItem.title)}>
>
<menuItem.icon class="h-6 w-6" /> <menuItem.icon class="h-6 w-6" />
{menuItem.title} {menuItem.title}
</a> </a>
app/src/lib/components/statusbar/statusbar.svelte
+11 -11
View File
@@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores'; import { page } from '$app/stores'
import { telemetry } from '$lib/stores/telemetry'; import { telemetry } from '$lib/stores/telemetry'
import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'; import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'
import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte'; import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte'
import SleepButton from './SleepButton.svelte'; import SleepButton from './SleepButton.svelte'
import ThemeButton from './ThemeButton.svelte'; import ThemeButton from './ThemeButton.svelte'
import FullscreenButton from './FullscreenButton.svelte'; import FullscreenButton from './FullscreenButton.svelte'
import StopButton from './StopButton.svelte'; import StopButton from './StopButton.svelte'
import ViewSelector from './ViewSelector.svelte'; import ViewSelector from './ViewSelector.svelte'
import { Hamburger } from '../icons'; import { Hamburger } from '../icons'
</script> </script>
<div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0"> <div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0">
<div class="flex-1 gap-2"> <div class="flex flex-1 gap-2">
<label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button"> <label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button">
<Hamburger class="h-6 w-auto" /> <Hamburger class="h-6 w-auto" />
</label> </label>
app/src/lib/components/toasts/Toast.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
in:fly={{ y: 100, duration: 400 }} in:fly={{ y: 100, duration: 400 }}
out:fly={{ x: 100, duration: 400 }} out:fly={{ x: 100, duration: 400 }}
> >
<SvelteComponent class="h-6 w-6 flex-shrink-0" /> <SvelteComponent class="h-6 w-6 shrink-0" />
<span>{notification.message}</span> <span>{notification.message}</span>
</div> </div>
{/each} {/each}
app/src/routes/+layout.svelte
+1 -1
View File
@@ -115,7 +115,7 @@
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
{#snippet backdrop()} {#snippet backdrop()}
<div <div
class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur" class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur-sm"
transition:fade transition:fade
onclick={modals.closeAll} onclick={modals.closeAll}
></div> ></div>
app/src/routes/system/update/GithubFirmwareManager.svelte
+1 -1
View File
@@ -156,7 +156,7 @@
</div> </div>
{:catch error} {:catch error}
<div class="alert alert-error shadow-lg"> <div class="alert alert-error shadow-lg">
<Error class="h-6 w-6 flex-shrink-0" /> <Error class="h-6 w-6 shrink-0" />
<span <span
>Please connect to a network with internet access to perform a firmware update.</span >Please connect to a network with internet access to perform a firmware update.</span
> >
app/src/routes/system/update/UploadFirmware.svelte
+1 -1
View File
@@ -39,7 +39,7 @@
<span>Upload Firmware</span> <span>Upload Firmware</span>
{/snippet} {/snippet}
<div class="alert alert-warning shadow-lg"> <div class="alert alert-warning shadow-lg">
<Warning class="h-6 w-6 flex-shrink-0" /> <Warning class="h-6 w-6 shrink-0" />
<span <span
>Uploading a new firmware (.bin) file will replace the existing firmware. You may upload >Uploading a new firmware (.bin) file will replace the existing firmware. You may upload
a (.md5) file first to verify the uploaded firmware. a (.md5) file first to verify the uploaded firmware.
app/src/routes/wifi/sta/Scan.svelte
+2 -2
View File
@@ -116,7 +116,7 @@
Channel: {network.channel} Channel: {network.channel}
</div> </div>
</div> </div>
<div class="flex-grow"></div> <div class="grow"></div>
<RssiIndicator showDBm={true} rssi={network.rssi} /> <RssiIndicator showDBm={true} rssi={network.rssi} />
</div> </div>
</li> </li>
@@ -134,7 +134,7 @@
<Reload class="mr-2 h-5 w-5" /><span>Scan again</span> <Reload class="mr-2 h-5 w-5" /><span>Scan again</span>
</button> </button>
<div class="flex-grow"></div> <div class="grow"></div>
<button <button
class="btn btn-warning text-warning-content inline-flex flex-none items-center" class="btn btn-warning text-warning-content inline-flex flex-none items-center"
onclick={() => modals.close()} onclick={() => modals.close()}
app/src/routes/wifi/sta/Wifi.svelte
+1 -1
View File
@@ -495,7 +495,7 @@
<div> <div>
<div class="font-bold">{dndNetworkList[index].ssid}</div> <div class="font-bold">{dndNetworkList[index].ssid}</div>
</div> </div>
<div class="flex-grow"></div> <div class="grow"></div>
<div class="space-x-0 px-0 mx-0"> <div class="space-x-0 px-0 mx-0">
<button <button
class="btn btn-ghost btn-sm" class="btn btn-ghost btn-sm"
app/tailwind.config.js
-32
View File
@@ -1,32 +0,0 @@
import daisyui from 'daisyui';
import { light, dark } from 'daisyui/src/theming/themes';
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,ts,svelte}'],
theme: {
extend: {}
},
plugins: [daisyui],
daisyui: {
themes: [
{
light: {
...light,
primary: '#00bfff',
accent: '#3c00ff',
'base-content': 'oklch(0.3 0.012 256)'
}
},
{
dark: {
...dark,
primary: '#00bfff',
accent: '#3c00ff',
'base-content': 'white'
}
}
],
darkTheme: 'dark'
}
};
app/vite.config.ts
+2
View File
@@ -3,9 +3,11 @@ import { defineConfig } from 'vite';
import Icons from 'unplugin-icons/vite'; import Icons from 'unplugin-icons/vite';
import viteLittleFS from './vite-plugin-littlefs'; import viteLittleFS from './vite-plugin-littlefs';
import EnvCaster from '@niku/vite-env-caster'; import EnvCaster from '@niku/vite-env-caster';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
tailwindcss(),
sveltekit(), sveltekit(),
Icons({ Icons({
compiler: 'svelte' compiler: 'svelte'