-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implemented light & dark mode switching. Implemented MultiInstances s…
…upport.
- Loading branch information
1 parent
0d918e3
commit 3ca63ef
Showing
14 changed files
with
487 additions
and
402 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| // utility functions, other utils.ts file comes from shadcn | ||
|
|
||
| export function sleep(ms = 0) { | ||
| return new Promise(resolve => setTimeout(resolve, ms)); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,75 @@ | ||
| <script lang="ts"> | ||
| import {Separator} from '$lib/components/ui/separator/index.js'; | ||
| import {createEventDispatcher} from 'svelte'; | ||
| import logo from '@/assets/favicon.png'; | ||
| import {os} from '@neutralinojs/lib'; | ||
| import IntegrationsIcon from '@/assets/sidebar/integrations.png'; | ||
| import FastFlagsIcon from '@/assets/sidebar/fastflags.png'; | ||
| import CommingSoonIcon from '@/assets/sidebar/comingsoon.png'; | ||
| import RobloxIcon from '@/assets/sidebar/roblox.png'; | ||
| import MiscIcon from "@/assets/sidebar/misc.png" | ||
| import SidebarBtn from './SidebarBtn.svelte'; | ||
| import Button from '$lib/components/ui/button/button.svelte'; | ||
| interface SidebarItem { | ||
| label: string; | ||
| id: string; | ||
| icon: string; | ||
| } | ||
| const sidebarBtns: SidebarItem[] = [ | ||
| {label: 'Integrations', id: 'integrations', icon: IntegrationsIcon}, | ||
| {label: 'Fast Flags', id: 'fastflags', icon: FastFlagsIcon}, | ||
| {label: 'Misc', id: 'misc', icon: MiscIcon}, | ||
| {label: 'Coming Soon', id: 'none', icon: CommingSoonIcon}, | ||
| ]; | ||
| export let currentPage: string = 'integrations'; | ||
| export let id: string; | ||
| function sidebarItemClicked(e: CustomEvent) { | ||
| if (e.detail === 'none') return; | ||
| currentPage = e.detail; | ||
| } | ||
| const dispatch = createEventDispatcher<{launchRoblox: boolean}>(); | ||
| </script> | ||
|
|
||
| <div class="h-full bg-[#1B1B1B] w-36 fixed top-0 left-0 overflow-x-hidden select-none" {id}> | ||
| <a | ||
| href="https://github.com/OrigamingWasTaken/appleblox" | ||
| class="flex justify-center" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| on:click={() => { | ||
| os.open('https://github.com/OrigamingWasTaken/appleblox').catch(console.error); | ||
| }}> | ||
| <div class="mt-3 flex"> | ||
| <img src={logo} class="h-6 mr-1 opacity-85 logo" alt="Svelte Logo" /> | ||
| <p class="text-white font-bold font-mono logo">AppleBlox</p> | ||
| import {Separator} from '$lib/components/ui/separator/index.js'; | ||
| import {createEventDispatcher} from 'svelte'; | ||
| import logo from '@/assets/favicon.png'; | ||
| import {os} from '@neutralinojs/lib'; | ||
| import IntegrationsIcon from '@/assets/sidebar/integrations.png'; | ||
| import FastFlagsIcon from '@/assets/sidebar/fastflags.png'; | ||
| import CommingSoonIcon from '@/assets/sidebar/comingsoon.png'; | ||
| import RobloxIcon from '@/assets/sidebar/roblox.png'; | ||
| import MiscIcon from "@/assets/sidebar/misc.png" | ||
| import SidebarBtn from './SidebarBtn.svelte'; | ||
| import Button from '$lib/components/ui/button/button.svelte'; | ||
| interface SidebarItem { | ||
| label: string; | ||
| id: string; | ||
| icon: string; | ||
| } | ||
| const sidebarBtns: SidebarItem[] = [ | ||
| {label: 'Integrations', id: 'integrations', icon: IntegrationsIcon}, | ||
| {label: 'Fast Flags', id: 'fastflags', icon: FastFlagsIcon}, | ||
| {label: 'Misc', id: 'misc', icon: MiscIcon}, | ||
| {label: 'Coming Soon', id: 'none', icon: CommingSoonIcon}, | ||
| ]; | ||
| export let currentPage: string = 'integrations'; | ||
| export let id: string; | ||
| function sidebarItemClicked(e: CustomEvent) { | ||
| if (e.detail === 'none') return; | ||
| currentPage = e.detail; | ||
| } | ||
| const dispatch = createEventDispatcher<{launchRoblox: boolean}>(); | ||
| </script> | ||
|
|
||
| <div class="h-full bg-[#F3F4F6] dark:bg-[#1B1B1B] w-36 fixed top-0 left-0 overflow-x-hidden select-none" {id}> | ||
| <a | ||
| href="https://github.com/OrigamingWasTaken/appleblox" | ||
| class="flex justify-center" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| on:click={() => { | ||
| os.open('https://github.com/OrigamingWasTaken/appleblox').catch(console.error); | ||
| }}> | ||
| <div class="mt-3 flex"> | ||
| <img src={logo} class="h-6 mr-1 opacity-85 logo bg-[#dcdcdc] dark:bg-[#1B1B1B] rounded-lg" alt="Svelte Logo" /> | ||
| <p class="text-black dark:text-white font-bold font-mono logo">AppleBlox</p> | ||
| </div> | ||
| </a> | ||
| <div class="m-4"> | ||
| <Separator class="my-4 bg-gray-500" /> | ||
| </div> | ||
| </a> | ||
| <div class="m-4"> | ||
| <Separator class="my-4 bg-gray-500" /> | ||
| </div> | ||
| <div class="mt-3 grid grid-cols-1"> | ||
| {#each sidebarBtns as { label, id, icon }} | ||
| <SidebarBtn bind:currentPage {label} {id} {icon} on:sidebarClick={sidebarItemClicked} /> | ||
| {/each} | ||
| <div class="mt-3 grid grid-cols-1"> | ||
| {#each sidebarBtns as { label, id, icon }} | ||
| <SidebarBtn bind:currentPage {label} {id} {icon} on:sidebarClick={sidebarItemClicked} /> | ||
| {/each} | ||
| </div> | ||
| <Button | ||
| class="flex bg-green-600 hover:bg-green-800 fixed bottom-4 left-5 font-mono" | ||
| on:click={() => { | ||
| dispatch('launchRoblox', true); | ||
| }}> | ||
| <p class="font-mono">Launch</p> | ||
| <img src={RobloxIcon} alt="Roblox Icon" class="ml-1 mt-[1px] w-5 h-5 towhite" /> | ||
| </Button> | ||
| </div> | ||
| <Button | ||
| class="flex bg-green-600 hover:bg-green-800 fixed bottom-4 left-5 font-mono" | ||
| on:click={() => { | ||
| dispatch('launchRoblox', true); | ||
| }}> | ||
| Launch | ||
| <img src={RobloxIcon} alt="Roblox Icon" class="ml-1 mt-[1px] w-5 h-5 towhite" /> | ||
| </Button> | ||
| </div> | ||
|
|
||
| <style> | ||
| .logo { | ||
| filter: drop-shadow(0 0 2em #ff6464aa); | ||
| } | ||
| </style> | ||
|
|
||
| <style> | ||
| .logo { | ||
| filter: drop-shadow(0 0 2em #ff6464aa); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,19 @@ | ||
| <script lang="ts"> | ||
| export let label: string; | ||
| export let icon: string; | ||
| export let id: string; | ||
| import {createEventDispatcher} from 'svelte'; | ||
| export let currentPage: string; | ||
| const dispatch = createEventDispatcher<{sidebarClick: string}>(); | ||
| </script> | ||
|
|
||
| <button | ||
| class="flex items-center justify-center mb-2" | ||
| on:click={() => { | ||
| dispatch('sidebarClick', id); | ||
| }}> | ||
| <img src={icon} alt="Sidebar icon" class="w-[15px] towhite mr-1" /> | ||
| <p class={`${currentPage === id ? 'text-red-400 hover:text-red-300' : 'text-gray-300 hover:text-gray-50'} transition duration-100 font-mono text-[14px]`}>{label}</p> | ||
| </button> | ||
| export let label: string; | ||
| export let icon: string; | ||
| export let id: string; | ||
| import {createEventDispatcher} from 'svelte'; | ||
| export let currentPage: string; | ||
| const dispatch = createEventDispatcher<{sidebarClick: string}>(); | ||
| </script> | ||
| <button | ||
| class="flex items-center justify-center mb-2" | ||
| on:click={() => { | ||
| dispatch('sidebarClick', id); | ||
| }}> | ||
| <img src={icon} alt="Sidebar icon" class="w-[15px] towhite mr-1" /> | ||
| <p class={`${currentPage === id ? 'text-red-400 hover:text-red-300' : 'text-black hover:opacity-50 dark:text-gray-300 dark:hover:text-gray-50'} transition duration-100 font-mono text-[14px]`}>{label}</p> | ||
| </button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.