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

added login, icons and theming to user dropdown

Browse Source
This commit is contained in:
John O'Keefe 2024-10-26 18:02:05 -04:00
parent 9a6c844691
commit 10430caddf
1 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,20 +4,31 @@
import { import {
aniListLoggedIn, aniListLoggedIn,
aniListUser, aniListUser,
malUser,
simklUser,
malLoggedIn, malLoggedIn,
simklLoggedIn, simklLoggedIn,
loginToAniList,
loginToMAL,
loginToSimkl,
logoutOfAniList, logoutOfAniList,
logoutOfMAL, logoutOfMAL,
logoutOfSimkl, logoutOfSimkl,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import * as runtime from "../../wailsjs/runtime"; import * as runtime from "../../wailsjs/runtime";
import type {MyAnimeListUser} from "../mal/types/MALTypes";
import type {SimklUser} from "../simkl/types/simklTypes";
let currentAniListUser: AniListUser; let currentAniListUser: AniListUser;
let currentMALUser: MyAnimeListUser;
let currentSimklUser: SimklUser;
let isAniListLoggedIn: boolean; let isAniListLoggedIn: boolean;
let isSimklLoggedIn: boolean; let isSimklLoggedIn: boolean;
let isMALLoggedIn: boolean; let isMALLoggedIn: boolean;
aniListUser.subscribe((value) => (currentAniListUser = value)); aniListUser.subscribe((value) => (currentAniListUser = value));
malUser.subscribe((value) => (currentMALUser = value))
simklUser.subscribe(value => currentSimklUser = value)
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value)); aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value)); simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
malLoggedIn.subscribe((value) => (isMALLoggedIn = value)); malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
@ -59,9 +70,16 @@
<li> <li>
<button <button
on:click={logoutOfAniList} on:click={logoutOfAniList}
class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white" class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-green-800 hover:text-white"
> >
Logout Anilist <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={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> </button>
</li> </li>
{/if} {/if}
@ -69,9 +87,16 @@
<li> <li>
<button <button
on:click={logoutOfMAL} on:click={logoutOfMAL}
class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white" class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-blue-800 hover:text-white"
> >
Logout MAL <span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {currentMALUser.name}
</button>
</li>
{:else}
<li>
<button on:click={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> </button>
</li> </li>
{/if} {/if}
@ -79,9 +104,16 @@
<li> <li>
<button <button
on:click={logoutOfSimkl} on:click={logoutOfSimkl}
class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white" class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-indigo-800 hover:text-white"
> >
Logout Simkl <span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {currentSimklUser.user.name}
</button>
</li>
{:else}
<li>
<button on:click={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> </button>
</li> </li>
{/if} {/if}
@ -96,4 +128,3 @@
</div> </div>
</div> </div>
</div> </div>