john-okeefe/Anitrack
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

made entire app only work in dark mode

Browse Source
This commit is contained in:
John O'Keefe
2024-10-01 16:57:42 -04:00
parent 753ecd968e
commit e229311190
5 changed files with 587 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/src/helperComponents/AvatarMenu.svelte
View File

@@ -1,76 +1,99 @@
<script lang="ts">
import {Avatar} from "flowbite-svelte";
import type {AniListUser} from "../anilist/types/AniListTypes";
import {aniListLoggedIn, aniListUser, malLoggedIn, simklLoggedIn, logoutOfAniList, logoutOfMAL, logoutOfSimkl} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
import { Avatar } from "flowbite-svelte";
import type { AniListUser } from "../anilist/types/AniListTypes";
import {
aniListLoggedIn,
aniListUser,
malLoggedIn,
simklLoggedIn,
logoutOfAniList,
logoutOfMAL,
logoutOfSimkl,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import * as runtime from "../../wailsjs/runtime";
let currentAniListUser: AniListUser
let isAniListLoggedIn: boolean
let isSimklLoggedIn: boolean
let isMALLoggedIn: boolean
let currentAniListUser: AniListUser;
let isAniListLoggedIn: boolean;
let isSimklLoggedIn: boolean;
let isMALLoggedIn: boolean;
aniListUser.subscribe((value) => currentAniListUser = value)
aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
malLoggedIn.subscribe((value) => isMALLoggedIn = value)
aniListUser.subscribe((value) => (currentAniListUser = value));
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
function dropdownUser(): void {
let dropdown = document.querySelector("#userDropdown")
dropdown.classList.toggle("hidden")
let dropdown = document.querySelector("#userDropdown");
dropdown.classList.toggle("hidden");
}
</script>
<div class="relative">
<button id="userDropdownButton" on:click={dropdownUser}>
{#if isAniListLoggedIn}
<Avatar src="{currentAniListUser.data.Viewer.avatar.medium}" class="cursor-pointer"
dot={{ color: 'green' }}/>
<Avatar
src={currentAniListUser.data.Viewer.avatar.medium}
class="cursor-pointer"
dot={{ color: "green" }}
/>
{:else}
<Avatar class="cursor-pointer" dot={{ color: 'red' }}/>
<Avatar class="cursor-pointer" dot={{ color: "red" }} />
{/if}
</button>
<div id="userDropdown"
class="absolute hidden right-0 2xl:left-1/2 2xl:-translate-x-1/2 z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
<div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
<div
id="userDropdown"
class="absolute hidden right-0 2xl:left-1/2 2xl:-translate-x-1/2 z-10 divide-y rounded-lg shadow w-44 bg-gray-700 divide-gray-600"
>
<div class="px-4 py-3 text-sm text-white">
{#if isAniListLoggedIn}
<div>{currentAniListUser.data.Viewer.name}</div>
{:else}
<div>You are not logged into AniList</div>
{/if}
</div>
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="dropdownUserAvatarButton">
<ul
class="py-2 text-sm text-gray-200"
aria-labelledby="dropdownUserAvatarButton"
>
{#if isAniListLoggedIn}
<li>
<button on:click={logoutOfAniList}
class="block px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
<button
on:click={logoutOfAniList}
class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white"
>
Logout Anilist
</button>
</li>
{/if}
{#if isMALLoggedIn}
<li>
<button on:click={logoutOfMAL}
class="block px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
<button
on:click={logoutOfMAL}
class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white"
>
Logout MAL
</button>
</li>
{/if}
{#if isSimklLoggedIn}
<li>
<button on:click={logoutOfSimkl}
class="block px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
<button
on:click={logoutOfSimkl}
class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white"
>
Logout Simkl
</button>
</li>
{/if}
</ul>
<div class="py-2">
<button on:click={() => runtime.Quit()}
class="block px-4 py-2 w-full text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
<button
on:click={() => runtime.Quit()}
class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
>
Exit Application
</button>
</div>
</div>
</div>
</div>