Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-01-23 02:34:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added theme switcher

Browse source
This commit is contained in:
Christopher Bisset 2022-07-10 17:46:52 +10:00
parent a2b6bf7a5e
commit dfe974455f
7 changed files with 35 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package-lock.json generated
View file

@ -2927,7 +2927,7 @@
"@tailwindcss/typography": {
"version": "git+ssh://git@github.com/tailwindcss/typography.git#f06117a58506a7f7f3fceb66bbc659af3776807b",
"dev": true,
"from": "@tailwindcss/typography@tailwindcss/typography",
"from": "@tailwindcss/typography@github:tailwindcss/typography",
"requires": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",

22
src/lib/common/functions.svelte
View file

@ -1,22 +0,0 @@
<script context="module" lang="ts">
export async function TestAPI(): Promise<boolean> {
let headscaleURL = localStorage.getItem('headscaleURL') || '';
let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
let apiStatus = false;
// using /api/v1/machine until headscale provides an endpoint to test a key against
await fetch(headscaleURL + '/api/v1/machine', {
method: 'GET',
headers: {
Accept: 'application/json',
Authorization: `Bearer ${headscaleAPIKey}`
}
})
.then((response) => {
apiStatus = response.ok;
})
.catch((error) => {
apiStatus = false;
});
return apiStatus;
}
</script>

5
src/lib/common/stores.js
View file

@ -1,3 +1,6 @@
import { writable } from 'svelte/store';
export const alert = writable('');
// used to store the value of an alert across all components
export const alert = writable('');
// stores the theme
export const headscaleThemeStore = writable('');

11
src/lib/settings/ThemeSettings.svelte Normal file
View file

@ -0,0 +1,11 @@
<script lang="ts">
import { headscaleThemeStore } from '$lib/common/stores.js'
let themes = ['hsui', 'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate', 'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden', 'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black', 'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade', 'night', 'coffee', 'winter'];
</script>
<h1 class="text-2xl bold text-primary mb-4">Theme Settings</h1>
<select bind:value={$headscaleThemeStore} class="select select-bordered w-full select-sm max-w-xs">
{#each themes as localTheme}
<option value={localTheme}>{localTheme}</option>
{/each}
</select>

18
src/routes/__layout.svelte
View file

@ -1,16 +1,26 @@
<script>
<script lang="ts">
import '../app.css';
import Nav from '$lib/common/nav.svelte';
import Alert from '$lib/common/Alert.svelte'
import Alert from '$lib/common/Alert.svelte';
import { headscaleThemeStore } from '$lib/common/stores.js'
import { onMount } from 'svelte';
onMount(async () => {
headscaleThemeStore.set(localStorage.getItem('headscaleTheme') || 'hsui');
// subscribe to the navbar state and update the local storage where needed
headscaleThemeStore.subscribe((val) => localStorage.setItem('headscaleTheme', val));
});
// NOTE: the element that is using one of the theme attributes must be in the DOM on mount
</script>
<main class="flex flex-col" data-theme="hsui">
<main data-theme={$headscaleThemeStore} class="flex flex-col">
<div class="flex h-screen">
<!-- sidebar -->
<Nav />
<!-- main window -->
<div class="flex flex-1 min-w-0 flex-col bg-base-100">
<Alert></Alert>
<Alert />
<!-- header -->
<!-- <div class="flex bg-gray-100 h-12 p-4">Header</div> -->
<!-- content -->

7
src/routes/settings.html.svelte
View file

@ -3,12 +3,13 @@
// Imports
//
import ServerSettings from '$lib/settings/ServerSettings.svelte';
import ThemeSettings from '$lib/settings/ThemeSettings.svelte';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
// Set to true once component is initialized
let componentLoaded = false;
onMount(async () => {
// Display component frontend
componentLoaded = true;
@ -19,9 +20,9 @@
<body>
{#if componentLoaded}
<div in:fade class="px-4 py-4 w-4/5">
<!-- Server Settings -->
<ServerSettings />
<!-- Server Settings End -->
<div class="p-4"></div>
<ThemeSettings />
</div>
{/if}
</body>

1
tailwind.config.cjs
View file

@ -20,6 +20,7 @@ const config = {
"error": "#F87272",
},
},
"light", "dark", "cupcake", "bumblebee", "emerald", "corporate", "synthwave", "retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black", "luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade", "night", "coffee", "winter"
],
},