-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
305 additions
and
180 deletions.
There are no files selected for viewing
194 changes: 156 additions & 38 deletions
194
platforms/interface/ui/components/connectionDropdown.svelte
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,56 +1,174 @@ | ||
| <DropdownMenu.Root> | ||
| <DropdownMenu.Trigger | ||
| class="hover:bg-cores-current inline-flex items-center justify-center gap-2 rounded-full bg-gray-700 px-3 py-2 text-xl font-semibold duration-200 ease-in-out" | ||
| > | ||
| <Plug size="30" /> | ||
| <p class="hidden md:block">Connection</p> | ||
| <div id="status" class="relative top-0.5 size-3 rounded-full bg-red-800" /> | ||
| </DropdownMenu.Trigger> | ||
| <DropdownMenu.Content | ||
| class="bg-background shadow-popover w-full max-w-[229px] rounded-xl bg-gray-700 p-1" | ||
| <Popover.Root> | ||
| {#if mode === "header"} | ||
| <Popover.Trigger | ||
| class="hover:bg-cores-current inline-flex items-center justify-center gap-2 rounded-full bg-gray-700 px-3 py-2 text-xl font-semibold duration-200 ease-in-out" | ||
| > | ||
| <Plug size="30" /> | ||
| <p class="hidden md:block">Connection</p> | ||
| <div id="status" class="relative top-0.5 size-3 rounded-full bg-red-800" /> | ||
| </Popover.Trigger> | ||
| {:else} | ||
| <Popover.Trigger class="button"> | ||
| <Plug size="30" /> | ||
| <p>Connections</p> | ||
| </Popover.Trigger> | ||
| {/if} | ||
| <Popover.Content | ||
| class="bg-background w-full max-w-[300px] overflow-hidden rounded-xl bg-gray-600 shadow-xl" | ||
| transition={flyAndScale} | ||
| sideOffset={8} | ||
| > | ||
| {#if $settings.connectionCodes.length === 0} | ||
| <DropdownMenu.Item | ||
| class="flex cursor-pointer select-none items-center gap-3 rounded-xl p-2 duration-200 ease-in-out data-[highlighted]:bg-gray-600" | ||
| > | ||
| <div class="flex items-center"> | ||
| <Plug /> | ||
| </div> | ||
| <div class="flex flex-col items-start"> | ||
| <h4>No connections</h4> | ||
| <h5>Go to settings</h5> | ||
| </div> | ||
| </DropdownMenu.Item> | ||
| {/if} | ||
| {#each $settings.connectionCodes as item, i} | ||
| {#if i > 0} | ||
| <DropdownMenu.Separator class="my-1 -ml-1 -mr-1 block h-px bg-gray-600" /> | ||
| <Separator.Root class="-ml-1 -mr-1 block h-px bg-gray-500" /> | ||
| {/if} | ||
| <DropdownMenu.Item | ||
| on:click={() => { | ||
| connect(item.code) | ||
| }} | ||
| class="flex cursor-pointer select-none items-center gap-3 rounded-xl p-2 duration-200 ease-in-out data-[highlighted]:bg-gray-600" | ||
| > | ||
| <div class="flex items-center"> | ||
| <Plug /> | ||
| </div> | ||
| <div class="flex select-none items-center justify-between gap-3 p-3 px-5 duration-200 ease-in-out"> | ||
| <div class="flex flex-col items-start"> | ||
| <h4>{item.name}</h4> | ||
| <h5>crs_********{item.code.slice(-2)}</h5> | ||
| </div> | ||
| </DropdownMenu.Item> | ||
| <div class="flex items-center gap-1"> | ||
| <ModularDialog title={"Edit Remote Connection"} description={"You can get your connection code from the Cores desktop app."}> | ||
| <slot slot="openButton"> | ||
| <Dialog.Trigger class="rounded-full bg-white px-3 py-2 text-black duration-200 ease-in-out hover:bg-gray-300"> | ||
| <Pencil class="h-5 w-5" /> | ||
| </Dialog.Trigger> | ||
| </slot> | ||
| <slot slot="confirmButton"> | ||
| <Dialog.Close | ||
| on:click={() => { | ||
| editConnectionCode(item.code) | ||
| }} | ||
| class="smallButton" | ||
| > | ||
| <Pencil /> | ||
| Edit | ||
| </Dialog.Close> | ||
| </slot> | ||
| <slot slot="deleteButton"> | ||
| <button | ||
| class="smallButton border-red-600 bg-red-600 text-white hover:text-red-600" | ||
| on:click={() => deleteConnectionCode(item.code)} | ||
| > | ||
| <Trash2 /> | ||
| Delete | ||
| </button> | ||
| </slot> | ||
| <div class="flex flex-col flex-wrap gap-3"> | ||
| <div> | ||
| <h5>Name <span class="text-red-500">*</span></h5> | ||
| <input value={item.name} placeholder="My Home PC" class="input mt-1" type="text" id="name" /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h5>Connection code <span class="text-red-500">*</span></h5> | ||
| <input value={item.code} placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h5>MAC address</h5> | ||
| <input value={item.mac ?? ""} placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" /> | ||
| </div> | ||
| </div> | ||
| </ModularDialog> | ||
| <button | ||
| on:click={() => { | ||
| connect(item.code) | ||
| }} | ||
| class="rounded-full bg-white px-3 py-2 text-black duration-200 ease-in-out hover:bg-gray-300" | ||
| > | ||
| <Plug class="h-5 w-5" /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| {/each} | ||
| </DropdownMenu.Content> | ||
| </DropdownMenu.Root> | ||
| <div class="w-full p-3 px-5"> | ||
| <ModularDialog title={"Add Remote Connection"} description={"You can get your connection code from the Cores desktop app."}> | ||
| <slot slot="openButton"> | ||
| <Dialog.Trigger class="smallButton w-full">Add connection</Dialog.Trigger> | ||
| </slot> | ||
| <slot slot="confirmButton"> | ||
| <Dialog.Close on:click={() => addConnectionCode()} class="smallButton"> | ||
| <Plus class="h-5 w-5" /> | ||
| Add | ||
| </Dialog.Close> | ||
| </slot> | ||
| <div class="flex flex-col flex-wrap gap-3"> | ||
| <div> | ||
| <h5>Name <span class="text-red-500">*</span></h5> | ||
| <input placeholder="My Home PC" class="input mt-1" type="text" id="name" /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h5>Connection code <span class="text-red-500">*</span></h5> | ||
| <input placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h5>MAC address</h5> | ||
| <input placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" /> | ||
| </div> | ||
| </div> | ||
| </ModularDialog> | ||
| </div> | ||
| </Popover.Content> | ||
| </Popover.Root> | ||
|
|
||
| <script lang="ts"> | ||
| import { DropdownMenu } from "bits-ui" | ||
| import { Dialog, Popover, Separator } from "bits-ui" | ||
| import { flyAndScale } from "../utils/transitions.ts" | ||
| import { Plug } from "lucide-svelte" | ||
| import { Pencil, Plug, Plus, Trash2 } from "lucide-svelte" | ||
| import { settings } from "ui/stores/settings.ts" | ||
| import ModularDialog from "./modularDialog.svelte" | ||
| const addConnectionCode = () => { | ||
| const nameInput = document.getElementById("name") as HTMLInputElement | ||
| const codeInput = document.getElementById("code") as HTMLInputElement | ||
| const macInput = document.getElementById("mac") as HTMLInputElement | ||
| if (nameInput.value === "") { | ||
| return alert("Please enter a name for your connection") | ||
| } | ||
| if (!codeInput.value.startsWith("crs_")) { | ||
| return alert("Invalid connection code! The connection code must start with: crs_") | ||
| } | ||
| $settings.connectionCodes = [ | ||
| ...$settings.connectionCodes, | ||
| { | ||
| name: nameInput.value, | ||
| code: codeInput.value, | ||
| mac: macInput.value, | ||
| }, | ||
| ] | ||
| } | ||
| const editConnectionCode = (code: string) => { | ||
| const nameInput = document.getElementById("name") as HTMLInputElement | ||
| const codeInput = document.getElementById("code") as HTMLInputElement | ||
| const macInput = document.getElementById("mac") as HTMLInputElement | ||
| if (nameInput.value === "") { | ||
| return alert("Please enter a name for your connection") | ||
| } | ||
| if (!codeInput.value.startsWith("crs_")) { | ||
| return alert("Invalid connection code! The connection code must start with: crs_") | ||
| } | ||
| let id = $settings.connectionCodes.findIndex((item) => item.code === code) | ||
| $settings.connectionCodes[id] = { | ||
| name: nameInput.value, | ||
| code: codeInput.value, | ||
| mac: macInput.value, | ||
| } | ||
| } | ||
| const deleteConnectionCode = (code: string) => { | ||
| $settings.connectionCodes = $settings.connectionCodes.filter((item) => item.code !== code) | ||
| } | ||
| export let connect = (item: string) => {} | ||
| export let mode = "header" as "menu" | "header" | ||
| </script> |
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,44 @@ | ||
| <Dialog.Root bind:open> | ||
| <slot name="openButton" /> | ||
|
|
||
| <Dialog.Portal> | ||
| <Dialog.Overlay transition={fade} transitionConfig={{ duration: 150 }} class="fixed inset-0 z-50 bg-black/70" /> | ||
| <Dialog.Content | ||
| transition={flyAndScale} | ||
| class="fixed left-[50%] top-[50%] z-50 w-full max-w-xl translate-x-[-50%] translate-y-[-50%] rounded-2xl border border-gray-600 bg-gray-800 p-5 shadow-md outline-none sm:max-w-[490px] md:w-full" | ||
| > | ||
| <Dialog.Title class="-mt-1.5 flex w-full items-center justify-center text-lg font-semibold tracking-tight">{title}</Dialog.Title> | ||
| <Separator.Root class="-mx-5 mb-6 mt-5 block h-px bg-gray-600" /> | ||
| <Dialog.Description class="text-sm text-gray-200"> | ||
| {description} | ||
| </Dialog.Description> | ||
| <div class="flex flex-col items-start gap-1 pb-11 pt-7"> | ||
| <slot /> | ||
| </div> | ||
| <div class="flex w-full justify-between"> | ||
| <slot name="deleteButton" /> | ||
| <slot name="confirmButton" /> | ||
| </div> | ||
|
|
||
| <Dialog.Close | ||
| class="focus-visible:ring-foreground focus-visible:ring-offset-background active:scale-98 absolute right-5 top-5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2" | ||
| > | ||
| <div> | ||
| <X class="text-foreground size-5" /> | ||
| <span class="sr-only">Close</span> | ||
| </div> | ||
| </Dialog.Close> | ||
| </Dialog.Content> | ||
| </Dialog.Portal> | ||
| </Dialog.Root> | ||
|
|
||
| <script lang="ts"> | ||
| import { Dialog, Separator } from "bits-ui" | ||
| import { flyAndScale } from "../utils/transitions.ts" | ||
| import { X } from "lucide-svelte" | ||
| import { fade } from "svelte/transition" | ||
| export let title = "" | ||
| export let description = "" | ||
| export let open = false | ||
| </script> |
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
Oops, something went wrong.