mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2025-12-31 13:39:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: begin fixing dark mode in the webcomponents

Browse Source
This commit is contained in:
Eli Bosley
2024-12-05 15:58:10 -05:00
parent 4a29fc9dda
commit 24435613f8
7 changed files with 175 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/components/HeaderOsVersion.ce.vue
View File

@@ -16,6 +16,7 @@ import { useUpdateOsStore } from '~/store/updateOs';
import { useUpdateOsActionsStore } from '~/store/updateOsActions';
import type { UserProfileLink } from '~/types/userProfile';
import type { UiBadgeProps, UiBadgePropsColor } from '~/types/ui/badge';
import { useThemeStore } from '~/store/theme';
const { t } = useI18n();
@@ -66,6 +67,16 @@ const updateOsStatus = computed(() => {
return null;
});
const themeStore = useThemeStore();
const { darkMode, theme } = toRefs(themeStore);
const toggleDarkMode = () => {
const themeNameToSet = darkMode.value ? 'light' : 'black';
if (theme.value) {
themeStore.setTheme({ ...theme.value, name: themeNameToSet });
}
};
</script>
<template>
@@ -85,6 +96,9 @@ const updateOsStatus = computed(() => {
{{ osVersion }}
</UiBadge>
</button>
<button @click="toggleDarkMode">
Toggle Dark / Light Theme - Current is: {{ darkMode ? 'Dark' : 'Light' }}
</button>
<component
:is="updateOsStatus.href ? 'a' : 'button'"

2
web/components/Notifications/Sidebar.vue
View File

@@ -50,7 +50,7 @@ const overview = computed(() => {
<!-- We remove the horizontal padding from the container to keep the NotificationList's scrollbar in the right place -->
<SheetContent
:to="teleportTarget"
class="w-full max-w-[100vw] sm:max-w-[540px] h-screen px-0 bg-[#f2f2f2]"
class="w-full max-w-[100vw] sm:max-w-[540px] h-screen px-0"
>
<div class="flex flex-col h-full gap-5">
<SheetHeader class="ml-1 px-6 flex items-baseline gap-1">

2
web/components/shadcn/sheet/index.ts
View File

@@ -10,7 +10,7 @@ export { default as SheetDescription } from './SheetDescription.vue'
export { default as SheetFooter } from './SheetFooter.vue'
export const sheetVariants = cva(
'fixed z-50 gap-4 bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
'fixed z-50 gap-4 bg-beta shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
{
variants: {
side: {

0
web/components/shadcn/utils.ts → web/components/shadcn/utils/index.ts
View File

211
web/nuxt.config.ts
View File

@@ -41,104 +41,113 @@ const charsToReserve =
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
ssr: false,
devServer: {
port: 4321,
},
devtools: {
enabled: true,
},
modules: [
"@vueuse/nuxt",
"@pinia/nuxt",
"@nuxtjs/tailwindcss",
"nuxt-custom-elements",
"@nuxt/eslint",
"shadcn-nuxt",
],
components: [
{ path: "~/components/Brand", prefix: "Brand" },
{ path: "~/components/ConnectSettings", prefix: "ConnectSettings" },
{ path: "~/components/Ui", prefix: "Ui" },
{ path: "~/components/UserProfile", prefix: "Upc" },
{ path: "~/components/UpdateOs", prefix: "UpdateOs" },
"~/components",
],
// typescript: {
// typeCheck: true
// },
shadcn: {
prefix: "",
componentDir: "./components/shadcn",
},
vite: {
plugins: [
!process.env.VITE_ALLOW_CONSOLE_LOGS &&
removeConsole({
includes: ["log", "warn", "error", "info", "debug"],
}),
],
build: {
minify: "terser",
terserOptions: {
mangle: {
reserved: terserReservations(charsToReserve),
toplevel: true,
},
},
},
},
customElements: {
entries: [
{
name: "UnraidComponents",
tags: [
{
name: "UnraidI18nHost",
path: "@/components/I18nHost.ce",
},
{
name: "UnraidAuth",
path: "@/components/Auth.ce",
},
{
name: "UnraidConnectSettings",
path: "@/components/ConnectSettings/ConnectSettings.ce",
},
{
name: "UnraidDownloadApiLogs",
path: "@/components/DownloadApiLogs.ce",
},
{
name: "UnraidHeaderOsVersion",
path: "@/components/HeaderOsVersion.ce",
},
{
name: "UnraidModals",
path: "@/components/Modals.ce",
},
{
name: "UnraidUserProfile",
path: "@/components/UserProfile.ce",
},
{
name: "UnraidUpdateOs",
path: "@/components/UpdateOs.ce",
},
{
name: "UnraidDowngradeOs",
path: "@/components/DowngradeOs.ce",
},
{
name: "UnraidRegistration",
path: "@/components/Registration.ce",
},
{
name: "UnraidWanIpCheck",
path: "@/components/WanIpCheck.ce",
},
],
},
],
},
});
ssr: false,
devServer: {
port: 4321,
},
devtools: {
enabled: true,
},
modules: [
"@vueuse/nuxt",
"@pinia/nuxt",
"@nuxtjs/tailwindcss",
"nuxt-custom-elements",
"@nuxt/eslint",
"shadcn-nuxt",
],
components: [
{ path: "~/components/Brand", prefix: "Brand" },
{ path: "~/components/ConnectSettings", prefix: "ConnectSettings" },
{ path: "~/components/Ui", prefix: "Ui" },
{ path: "~/components/UserProfile", prefix: "Upc" },
{ path: "~/components/UpdateOs", prefix: "UpdateOs" },
"~/components",
],
// typescript: {
// typeCheck: true
// },
shadcn: {
prefix: "",
componentDir: "./components/shadcn",
},
vite: {
plugins: [
!process.env.VITE_ALLOW_CONSOLE_LOGS &&
removeConsole({
includes: ["log", "warn", "error", "info", "debug"],
}),
],
build: {
minify: "terser",
terserOptions: {
mangle: {
reserved: terserReservations(charsToReserve),
toplevel: true,
},
},
},
},
customElements: {
entries: [
{
name: "UnraidComponents",
tags: [
{
name: "UnraidI18nHost",
path: "@/components/I18nHost.ce",
},
{
name: "UnraidAuth",
path: "@/components/Auth.ce",
},
{
name: "UnraidConnectSettings",
path: "@/components/ConnectSettings/ConnectSettings.ce",
},
{
name: "UnraidDownloadApiLogs",
path: "@/components/DownloadApiLogs.ce",
},
{
name: "UnraidHeaderOsVersion",
path: "@/components/HeaderOsVersion.ce",
},
{
name: "UnraidModals",
path: "@/components/Modals.ce",
},
{
name: "UnraidUserProfile",
path: "@/components/UserProfile.ce",
},
{
name: "UnraidUpdateOs",
path: "@/components/UpdateOs.ce",
},
{
name: "UnraidDowngradeOs",
path: "@/components/DowngradeOs.ce",
},
{
name: "UnraidRegistration",
path: "@/components/Registration.ce",
},
{
name: "UnraidWanIpCheck",
path: "@/components/WanIpCheck.ce",
},
],
},
],
},
compatibilityDate: "2024-12-05"
});

86
web/pages/index.vue
View File

@@ -1,8 +1,8 @@
<script lang="ts" setup>
import AES from 'crypto-js/aes';
import type { SendPayloads } from '~/store/callback';
import { serverState } from '~/_data/serverState';
import type { SendPayloads } from '~/store/callback';
import { useThemeStore, type Theme } from '~/store/theme';
import AES from 'crypto-js/aes';
const { registerEntry } = useCustomElements();
onBeforeMount(() => {
@@ -12,7 +12,8 @@ onBeforeMount(() => {
const valueToMakeCallback = ref<SendPayloads | undefined>();
const callbackDestination = ref<string>('');
const createCallbackUrl = (payload: SendPayloads, sendType: string) => { // params differs from callbackActions.send
const createCallbackUrl = (payload: SendPayloads, sendType: string) => {
// params differs from callbackActions.send
console.debug('[callback.send]');
valueToMakeCallback.value = payload; // differs from callbackActions.send
@@ -22,10 +23,7 @@ const createCallbackUrl = (payload: SendPayloads, sendType: string) => { // para
sender: window.location.href,
type: sendType,
});
const encryptedMessage = AES.encrypt(
stringifiedData,
import.meta.env.VITE_CALLBACK_KEY,
).toString();
const encryptedMessage = AES.encrypt(stringifiedData, import.meta.env.VITE_CALLBACK_KEY).toString();
// build and go to url
const destinationUrl = new URL(window.location.href); // differs from callbackActions.send
destinationUrl.searchParams.set('data', encodeURI(encryptedMessage));
@@ -38,7 +36,8 @@ onMounted(() => {
[
{
// keyUrl: 'https://keys.lime-technology.com/unraid/d26a033e3097c65ab0b4f742a7c02ce808c6e963/Starter.key', // assigned to guid 1111-1111-5GDB-123412341234, use to test EGUID after key install
keyUrl: 'https://keys.lime-technology.com/unraid/7f7c2ddff1c38f21ed174f5c5d9f97b7b4577344/Starter.key',
keyUrl:
'https://keys.lime-technology.com/unraid/7f7c2ddff1c38f21ed174f5c5d9f97b7b4577344/Starter.key',
type: 'renew',
},
{
@@ -46,9 +45,20 @@ onMounted(() => {
type: 'updateOs',
},
],
'forUpc',
'forUpc'
);
});
const isDarkMode = ref(false);
const themeStore = useThemeStore();
const { darkMode, theme } = toRefs(themeStore);
const toggleDarkMode = () => {
const themeNameToSet = darkMode.value ? 'light' : 'black';
if (theme.value) {
themeStore.setTheme({ ...theme.value, name: themeNameToSet });
}
};
</script>
<template>
@@ -56,13 +66,12 @@ onMounted(() => {
<div class="pb-12 mx-auto">
<client-only>
<div class="flex flex-col gap-6 p-6">
<h2 class="text-xl font-semibold font-mono">
Vue Components
</h2>
<h3 class="text-lg font-semibold font-mono">
UserProfileCe
</h3>
<header class="bg-beta py-4 flex flex-row justify-between items-center">
<button @click="toggleDarkMode">
Toggle Dark / Light Theme - Current is: {{ darkMode ? 'Dark' : 'Light' }}
</button>
<h2 class="text-xl font-semibold font-mono">Vue Components</h2>
<h3 class="text-lg font-semibold font-mono">UserProfileCe</h3>
<header class="bg-gray py-4 flex flex-row justify-between items-center">
<div class="inline-flex flex-col gap-4 items-start px-4">
<a href="https://unraid.net" target="_blank">
<BrandLogo class="w-[100px] sm:w-[150px]" />
@@ -73,11 +82,9 @@ onMounted(() => {
</header>
<!-- <hr class="border-black dark:border-white"> -->
<h3 class="text-lg font-semibold font-mono">
ConnectSettingsCe
</h3>
<h3 class="text-lg font-semibold font-mono">ConnectSettingsCe</h3>
<ConnectSettingsCe />
<hr class="border-black dark:border-white">
<hr class="border-black dark:border-white" />
<!-- <h3 class="text-lg font-semibold font-mono">
DownloadApiLogsCe
@@ -94,31 +101,24 @@ onMounted(() => {
</h3>
<WanIpCheckCe php-wan-ip="47.184.85.45" />
<hr class="border-black dark:border-white"> -->
<h3 class="text-lg font-semibold font-mono">
UpdateOsCe
</h3>
<h3 class="text-lg font-semibold font-mono">UpdateOsCe</h3>
<UpdateOsCe />
<hr class="border-black dark:border-white">
<h3 class="text-lg font-semibold font-mono">
DowngraadeOsCe
</h3>
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">DowngraadeOsCe</h3>
<DowngradeOsCe :restore-release-date="'2022-10-10'" :restore-version="'6.11.2'" />
<hr class="border-black dark:border-white">
<h3 class="text-lg font-semibold font-mono">
RegistrationCe
</h3>
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">RegistrationCe</h3>
<RegistrationCe />
<hr class="border-black dark:border-white">
<h3 class="text-lg font-semibold font-mono">
ModalsCe
</h3>
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">ModalsCe</h3>
<ModalsCe />
<hr class="border-black dark:border-white">
<h3 class="text-lg font-semibold font-mono">
Test Callback Builder
</h3>
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">Test Callback Builder</h3>
<div class="flex flex-col justify-end gap-8px">
<p>Modify the <code>createCallbackUrl</code> param in <code>onMounted</code> to test a callback.</p>
<p>
Modify the <code>createCallbackUrl</code> param in <code>onMounted</code> to test a
callback.
</p>
<code>
<pre>{{ valueToMakeCallback }}</pre>
</code>
@@ -138,10 +138,10 @@ onMounted(() => {
<style lang="postcss">
code {
@apply text-black bg-gray-200 p-1 rounded-lg shadow;
@apply rounded-lg bg-gray-200 p-1 text-black shadow;
}
pre {
@apply py-3 overflow-x-scroll;
@apply overflow-x-scroll py-3;
}
</style>

7
web/tailwind.config.ts
View File

@@ -4,7 +4,7 @@ import type { PluginAPI } from 'tailwindcss/types/config';
// @ts-expect-error - just trying to get this to build @fixme
export default <Partial<Config>>{
darkMode: ['class'],
darkMode: ['selector'],
safelist: [
'dark',
'DropdownWrapper_blip',
@@ -44,6 +44,11 @@ export default <Partial<Config>>{
'grey-lightest': '#f2f2f2',
white: '#ffffff',
// New Color Palette
'sidebar': '#f2f2f2',
'sidebar-dark': '#1c1b1b',
// unraid colors
'yellow-accent': '#E9BF41',
'orange-dark': '#f15a2c',