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 daisyui, converted absolute colours to theme colours

Browse source
This commit is contained in:
Christopher Bisset 2022-07-10 10:47:37 +10:00
parent 8a4a43d591
commit b742c87830
12 changed files with 354 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

560
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
package.json
View file

@ -18,6 +18,7 @@
"@sveltejs/adapter-static": "^1.0.0-next.34",
"@sveltejs/kit": "next",
"autoprefixer": "^10.4.4",
"daisyui": "^2.19.0",
"postcss": "^8.4.12",
"postcss-load-config": "^3.1.4",
"prettier": "^2.6.2",
@ -28,5 +29,8 @@
"tailwindcss": "^3.0.23",
"typescript": "^4.7.2"
},
"type": "module"
"type": "module",
"dependencies": {
"@tailwindcss/typography": "github:tailwindcss/typography"
}
}

20
src/app.css
View file

@ -7,30 +7,18 @@
@apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600 font-bold;
}
.tooltip {
@apply invisible absolute text-sm opacity-0;
}
.has-tooltip:hover .tooltip {
@apply visible z-50 transition-opacity duration-300 opacity-100;
}
.form-input {
@apply shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 text-sm mb-3 leading-tight focus:outline-none;
}
.btn-primary {
@apply mb-2 text-white text-sm font-bold py-1 px-3 rounded focus:outline-2 disabled:opacity-50;
@apply shadow appearance-none border rounded w-full py-2 px-3 text-base-content text-sm mb-3 leading-tight focus:outline-none;
}
.card-primary {
@apply grid grid-cols-1 divide-y p-2 max-w-screen-lg border-2 mx-4 border-gray-100 rounded-md text-sm text-gray-600 shadow
@apply grid grid-cols-1 divide-y p-2 max-w-screen-lg border-2 mx-4 border-base-300 rounded-md text-sm text-base-content shadow
}
.card-pending {
@apply flex justify-between p-1 mb-4 max-w-screen-lg border-2 border-dashed mx-4 border-gray-400 rounded-md text-sm text-gray-600 shadow
@apply flex justify-between p-1 mb-4 max-w-screen-lg border-2 border-dashed mx-4 border-base-300 rounded-md text-sm text-base-content shadow
}
.card-input {
@apply shadow appearance-none border rounded w-64 py-1 px-3 text-gray-700 text-sm leading-tight focus:outline-none;
@apply shadow appearance-none border rounded w-64 py-1 px-3 text-base-content text-sm leading-tight focus:outline-none;
}

2
src/lib/common/Alert.svelte
View file

@ -20,7 +20,7 @@
</script>
{#if visible}
<div transition:slide class="absolute top-0 left-1/2 transform bg-gray-100 -translate-x-1/2 p-4 text-lg text-center shadow-xl rounded-b-lg max-w-lg" on:click={() => {$alert = ''}}>
<div transition:slide class="absolute alert text-lg left-1/2 transform -translate-x-1/2 justify-center shadow-lg max-w-lg" on:click={() => {$alert = ''}}>
<p>{$alert}</p>
</div>
{/if}

6
src/lib/common/nav.svelte
View file

@ -29,13 +29,13 @@
<!-- let the page initialize before showing the nav bar -->
{#if componentLoaded}
<aside class="bg-gray-100 shadow-xl w-14" class:navCollapsed={$navExpanded == 'collapsed'} class:navExpanded={$navExpanded == 'expanded'} transition:fade>
<aside class="bg-base-200 shadow-xl w-14" class:navCollapsed={$navExpanded == 'collapsed'} class:navExpanded={$navExpanded == 'expanded'} transition:fade>
<!-- sidebar menu items -->
<p class="nav-item" on:click={() => ($navExpanded == 'collapsed' ? ($navExpanded = 'expanded') : ($navExpanded = 'collapsed'))}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
</svg>
<span class="indent-4 text-emerald-900 font-extrabold">Headscale</span>
<span class="indent-4 text-primary font-extrabold">Headscale</span>
</p>
<div />
@ -77,6 +77,6 @@
}
.nav-item {
@apply flex items-center text-sm py-4 px-4 h-12 overflow-hidden text-gray-700 text-ellipsis cursor-default whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-400 transition duration-300 ease-in-out;
@apply flex items-center text-sm py-4 px-4 h-12 overflow-hidden text-base-content stroke-base-content text-ellipsis cursor-default whitespace-nowrap rounded hover:bg-base-300 transition duration-300 ease-in-out;
}
</style>

2
src/lib/devices/CreateDevice.svelte
View file

@ -7,4 +7,4 @@
</script>
<!-- html -->
<div in:fade class="p-4"><button on:click={() => (newDeviceCardVisible = true)} class="btn-primary bg-teal-700 hover:bg-teal-900 " type="button">+ New Device</button></div>
<div in:fade class="p-4"><button on:click={() => (newDeviceCardVisible = true)} class="btn btn-primary btn-sm capitalize" type="button">+ New Device</button></div>

2
src/lib/index/CreateUser.svelte
View file

@ -50,7 +50,7 @@
</script>
<!-- html -->
<div in:fade class="p-4"><button on:click={() => (newUserCardVisible = true)} class="btn-primary bg-teal-700 hover:bg-teal-900 " type="button">+ New User</button></div>
<div in:fade class="p-4"><button on:click={() => (newUserCardVisible = true)} class="btn btn-primary btn-sm capitalize" type="button">+ New User</button></div>
{#if newUserCardVisible}
<div in:fade out:fade={{ duration: newUserCardVisible ? 0 : 500 }} class="card-pending">
<form on:submit|preventDefault={newUser} class="relative" bind:this={newUserForm}>

2
src/lib/index/UserCard.svelte
View file

@ -79,7 +79,7 @@
}
</script>
<div in:fade class="grid grid-cols-1 divide-y p-2 max-w-screen-lg border-2 mx-4 border-gray-100 rounded-md text-sm text-gray-600 shadow">
<div in:fade class="card-primary">
<div on:click={() => (cardExpanded = !cardExpanded)} class="flex justify-between">
{#if !cardEditing}
<span class="font-bold">{user.id}: {user.name}</span>

4
src/routes/__layout.svelte
View file

@ -4,12 +4,12 @@
import Alert from '$lib/common/Alert.svelte'
</script>
<main class="flex flex-col">
<main class="flex flex-col" data-theme="light">
<div class="flex min-h-screen overflow-hidden">
<!-- sidebar -->
<Nav />
<!-- main window -->
<div class="flex flex-1 flex-col">
<div class="flex flex-1 flex-col bg-base-100">
<Alert></Alert>
<!-- header -->
<!-- <div class="flex bg-gray-100 h-12 p-4">Header</div> -->

4
src/routes/index.svelte
View file

@ -60,7 +60,7 @@
<!-- html -->
{#if componentLoaded}
<div in:fade class="px-4 pt-4">
<h1 class="text-2xl bold green-400">User View</h1>
<h1 class="text-2xl bold text-primary">User View</h1>
</div>
{#if headscaleAPITest === 'succeeded'}
<!-- instantiate user based components -->
@ -70,7 +70,7 @@
{/each}
{/if}
{#if headscaleAPITest === 'failed'}
<div in:fade class="max-w-lg mx-auto p-4 border-4 text-sm text-gray-600 shadow-lg text-center">
<div in:fade class="max-w-lg mx-auto p-4 border-4 text-sm text-base-content shadow-lg text-center">
<p>API test did not succeed.<br />Headscale might be down or API settings may need to be set<br />change server settings in the <a href="/settings.html" class="hyperlink">settings</a> page</p>
</div>
{/if}

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

@ -78,20 +78,19 @@
<div in:fade class="px-4 py-4 w-4/5">
<!-- Server Settings -->
<form bind:this={serverSettingsForm}>
<h1 class="text-2xl bold green-400 mb-4">Server Settings</h1>
<label class="block text-gray-700 text-sm font-bold mb-2" for="url"> Headscale URL </label>
<h1 class="text-2xl bold text-primary mb-4">Server Settings</h1>
<label class="block text-secondary text-sm font-bold mb-2" for="url"> Headscale URL </label>
<input bind:value={headscaleURL} class="form-input" type="url" required pattern={String.raw`https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)`} placeholder="https://hs.yourdomain.com.au" />
<p class="text-xs text-gray-400 text-italics mb-8">URL for your headscale server instance</p>
<label class="block text-gray-700 text-sm font-bold mb-2" for="password"> Headscale API Key </label>
<p class="text-xs text-base-content text-italics mb-8">URL for your headscale server instance</p>
<label class="block text-secondary text-sm font-bold mb-2" for="password"> Headscale API Key </label>
<input bind:value={headscaleAPIKey} minlength="54" maxlength="54" class="form-input" type="password" required placeholder="******************" />
<p class="text-xs text-gray-400 text-italics mb-8">Generate an API key for your headscale instance and place it here.</p>
<span class="has-tooltip">
<span class="tooltip rounded shadow-lg p-1 bg-gray-200 -mt-16">Note: API Key and URL currently save to localStorage (IE: Your Browser)<br />Make sure you are using a trusted computer</span>
<!-- disable the SaveServerSettings button if nothing has changed from stored values, or the dependent inputs do not validate -->
<button disabled={headscaleAPIKey === $headscaleAPIKeyStore && headscaleURL === $headscaleURLStore} on:click={() => SaveServerSettings()} class="btn-primary bg-green-700 hover:bg-green-900" type="button">Save Server Settings</button>
</span>
<button on:click={() => ClearServerSettings()} class="btn-primary bg-teal-700 hover:bg-teal-900 " type="button">Clear Server Settings</button>
<button on:click={() => TestServerSettings()} class="btn-primary bg-sky-700 hover:bg-sky-900 " type="button">Test Server Settings</button>
<p class="text-xs text-base-content text-italics mb-8">Generate an API key for your headscale instance and place it here.</p>
<!-- disable the SaveServerSettings button if nothing has changed from stored values, or the dependent inputs do not validate -->
<div class="tooltip" data-tip="Note: API Key and URL currently save to localStorage (IE: Your Browser) Make sure you are using a trusted computer">
<button disabled={headscaleAPIKey === $headscaleAPIKeyStore && headscaleURL === $headscaleURLStore} on:click={() => SaveServerSettings()} class="btn btn-sm btn-accent capitalize" type="button">Save Server Settings</button>
</div>
<button on:click={() => ClearServerSettings()} class="btn btn-sm btn-primary capitalize" type="button">Clear Server Settings</button>
<button on:click={() => TestServerSettings()} class="btn btn-sm btn-secondary capitalize" type="button">Test Server Settings</button>
{#if headscaleAPITest === 'succeeded'}
<svg in:fly={{ x: 10, duration: 600 }} xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="green" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />

2
tailwind.config.cjs
View file

@ -5,7 +5,7 @@ const config = {
extend: {}
},
plugins: []
plugins: [require("@tailwindcss/typography"), require("daisyui")]
};
module.exports = config;