refactor: standardize code formatting in AvatarMenu component
- Convert from 4-space to 2-space indentation for consistency - Improve import statement formatting and alignment - Fix semicolon usage throughout the component - Add conditional avatar dot indicator: green when all services (AniList, MAL, Simkl) are logged in, yellow otherwise - Add missing newline at end of file - General code style improvements for better readability and consistency with project standards
This commit is contained in:
@@ -1,163 +1,177 @@
|
||||
<script lang="ts">
|
||||
import { Avatar } from "flowbite-svelte";
|
||||
import type { AniListUser } from "../anilist/types/AniListTypes";
|
||||
import {
|
||||
aniListLoggedIn,
|
||||
aniListUser,
|
||||
malUser,
|
||||
simklUser,
|
||||
malLoggedIn,
|
||||
simklLoggedIn,
|
||||
loginToAniList,
|
||||
loginToMAL,
|
||||
loginToSimkl,
|
||||
logoutOfAniList,
|
||||
logoutOfMAL,
|
||||
logoutOfSimkl
|
||||
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
||||
import * as runtime from "../../wailsjs/runtime";
|
||||
import type {MyAnimeListUser} from "../mal/types/MALTypes";
|
||||
import type {SimklUser} from "../simkl/types/simklTypes";
|
||||
import { ShowVersion } from "../../wailsjs/go/main/App";
|
||||
import { Avatar } from "flowbite-svelte";
|
||||
import type { AniListUser } from "../anilist/types/AniListTypes";
|
||||
import {
|
||||
aniListLoggedIn,
|
||||
aniListUser,
|
||||
malUser,
|
||||
simklUser,
|
||||
malLoggedIn,
|
||||
simklLoggedIn,
|
||||
loginToAniList,
|
||||
loginToMAL,
|
||||
loginToSimkl,
|
||||
logoutOfAniList,
|
||||
logoutOfMAL,
|
||||
logoutOfSimkl,
|
||||
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
||||
import * as runtime from "../../wailsjs/runtime";
|
||||
import type { MyAnimeListUser } from "../mal/types/MALTypes";
|
||||
import type { SimklUser } from "../simkl/types/simklTypes";
|
||||
import { ShowVersion } from "../../wailsjs/go/main/App";
|
||||
|
||||
let currentAniListUser: AniListUser;
|
||||
let currentMALUser: MyAnimeListUser;
|
||||
let currentSimklUser: SimklUser;
|
||||
let isAniListLoggedIn: boolean;
|
||||
let isSimklLoggedIn: boolean;
|
||||
let isMALLoggedIn: boolean;
|
||||
let currentAniListUser: AniListUser;
|
||||
let currentMALUser: MyAnimeListUser;
|
||||
let currentSimklUser: SimklUser;
|
||||
let isAniListLoggedIn: boolean;
|
||||
let isSimklLoggedIn: boolean;
|
||||
let isMALLoggedIn: boolean;
|
||||
|
||||
aniListUser.subscribe((value) => (currentAniListUser = value));
|
||||
malUser.subscribe((value) => (currentMALUser = value))
|
||||
simklUser.subscribe(value => currentSimklUser = value)
|
||||
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
|
||||
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
|
||||
malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
|
||||
aniListUser.subscribe((value) => (currentAniListUser = value));
|
||||
malUser.subscribe((value) => (currentMALUser = value));
|
||||
simklUser.subscribe((value) => (currentSimklUser = 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");
|
||||
function dropdownUser(): void {
|
||||
let dropdown = document.querySelector("#userDropdown");
|
||||
dropdown.classList.toggle("hidden");
|
||||
|
||||
if (!dropdown.classList.contains("hidden")) {
|
||||
document.addEventListener("click", clickOutside)
|
||||
}
|
||||
if (!dropdown.classList.contains("hidden")) {
|
||||
document.addEventListener("click", clickOutside);
|
||||
}
|
||||
}
|
||||
|
||||
function clickOutside(event: Event): void {
|
||||
let dropdown = document.querySelector("#userDropdown")
|
||||
let toggleBtn = document.querySelector("#userDropdownButton")
|
||||
function clickOutside(event: Event): void {
|
||||
let dropdown = document.querySelector("#userDropdown");
|
||||
let toggleBtn = document.querySelector("#userDropdownButton");
|
||||
|
||||
if (!dropdown.contains(event.target as Node) && !toggleBtn.contains(event.target as Node)) {
|
||||
dropdown.classList.add("hidden")
|
||||
document.removeEventListener("click", clickOutside)
|
||||
}
|
||||
if (
|
||||
!dropdown.contains(event.target as Node) &&
|
||||
!toggleBtn.contains(event.target as Node)
|
||||
) {
|
||||
dropdown.classList.add("hidden");
|
||||
document.removeEventListener("click", clickOutside);
|
||||
}
|
||||
}
|
||||
</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" }}
|
||||
/>
|
||||
{:else}
|
||||
<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 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-200"
|
||||
aria-labelledby="dropdownUserAvatarButton"
|
||||
>
|
||||
{#if isAniListLoggedIn}
|
||||
<li>
|
||||
<button
|
||||
on:click={logoutOfAniList}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-green-800 hover:text-white"
|
||||
>
|
||||
<span class="maple-font text-lg text-green-200 mr-4">A</span>Logout {currentAniListUser.data.Viewer.name}
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button on:click={() => {
|
||||
dropdownUser()
|
||||
loginToAniList()
|
||||
}}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
|
||||
<span class="maple-font text-lg mr-4">A</span>Login to AniList
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{#if isMALLoggedIn}
|
||||
<li>
|
||||
<button
|
||||
on:click={logoutOfMAL}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-blue-800 hover:text-white"
|
||||
>
|
||||
<span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {currentMALUser.name}
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button on:click={() => {
|
||||
dropdownUser()
|
||||
loginToMAL()
|
||||
}}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
|
||||
<span class="maple-font text-lg mr-4">M</span>Login to MyAnimeList
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{#if isSimklLoggedIn}
|
||||
<li>
|
||||
<button
|
||||
on:click={logoutOfSimkl}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-indigo-800 hover:text-white"
|
||||
>
|
||||
<span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {currentSimklUser.user.name}
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button on:click={() => {
|
||||
dropdownUser()
|
||||
loginToSimkl()
|
||||
}}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
|
||||
<span class="maple-font text-lg mr-4">S</span>Login to Simkl
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
<div class="py-2">
|
||||
<button
|
||||
on:click={() => {
|
||||
dropdownUser()
|
||||
ShowVersion()
|
||||
}}
|
||||
class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
|
||||
>
|
||||
Version
|
||||
</button>
|
||||
<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>
|
||||
<button id="userDropdownButton" on:click={dropdownUser}>
|
||||
{#if isAniListLoggedIn}
|
||||
<Avatar
|
||||
src={currentAniListUser.data.Viewer.avatar.medium}
|
||||
class="cursor-pointer"
|
||||
dot={isAniListLoggedIn && isMALLoggedIn && isSimklLoggedIn
|
||||
? { color: "green" }
|
||||
: { color: "yellow" }}
|
||||
/>
|
||||
{:else}
|
||||
<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 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-200"
|
||||
aria-labelledby="dropdownUserAvatarButton"
|
||||
>
|
||||
{#if isAniListLoggedIn}
|
||||
<li>
|
||||
<button
|
||||
on:click={logoutOfAniList}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-green-800 hover:text-white"
|
||||
>
|
||||
<span class="maple-font text-lg text-green-200 mr-4">A</span>Logout {currentAniListUser
|
||||
.data.Viewer.name}
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button
|
||||
on:click={() => {
|
||||
dropdownUser();
|
||||
loginToAniList();
|
||||
}}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
|
||||
>
|
||||
<span class="maple-font text-lg mr-4">A</span>Login to AniList
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{#if isMALLoggedIn}
|
||||
<li>
|
||||
<button
|
||||
on:click={logoutOfMAL}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-blue-800 hover:text-white"
|
||||
>
|
||||
<span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {currentMALUser.name}
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button
|
||||
on:click={() => {
|
||||
dropdownUser();
|
||||
loginToMAL();
|
||||
}}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
|
||||
>
|
||||
<span class="maple-font text-lg mr-4">M</span>Login to MyAnimeList
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{#if isSimklLoggedIn}
|
||||
<li>
|
||||
<button
|
||||
on:click={logoutOfSimkl}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-indigo-800 hover:text-white"
|
||||
>
|
||||
<span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {currentSimklUser
|
||||
.user.name}
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button
|
||||
on:click={() => {
|
||||
dropdownUser();
|
||||
loginToSimkl();
|
||||
}}
|
||||
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
|
||||
>
|
||||
<span class="maple-font text-lg mr-4">S</span>Login to Simkl
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
<div class="py-2">
|
||||
<button
|
||||
on:click={() => {
|
||||
dropdownUser();
|
||||
ShowVersion();
|
||||
}}
|
||||
class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
|
||||
>
|
||||
Version
|
||||
</button>
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user