refactor(dashboard): re-organize dashboard files
This commit is contained in:
Jake Fulmine
64
dashboard/src/components/common/CardsHeader.svelte
Normal file
64
dashboard/src/components/common/CardsHeader.svelte
Normal file
@@ -0,0 +1,64 @@
|
||||
<script lang="ts">
|
||||
import { tick } from 'svelte';
|
||||
import { Modal, CardTitle} from 'sveltestrap';
|
||||
import default_avatar from '../../assets/default_avatar.png';
|
||||
import resizeMedia from '../../api/resize-media';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
import twemoji from 'twemoji';
|
||||
|
||||
export let item: any;
|
||||
export let searchBy: string = null;
|
||||
export let sortBy: string = null;
|
||||
|
||||
let htmlName: string;
|
||||
let nameElement: any;
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
||||
$: if (item.name) {
|
||||
if ((searchBy === "display name" || sortBy === "display name") && item.display_name) htmlName = toHTML(item.display_name);
|
||||
else htmlName = toHTML(item.name);
|
||||
} else htmlName = "";
|
||||
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (nameElement) twemoji.parse(nameElement);
|
||||
}
|
||||
|
||||
$: icon_url = item.avatar_url ? item.avatar_url : item.icon ? item.icon : default_avatar;
|
||||
$: icon_url_resized = resizeMedia(icon_url)
|
||||
|
||||
let avatarOpen = false;
|
||||
const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
|
||||
|
||||
// this is the easiest way we can check what type of item the header has
|
||||
// unsure if there's a better way
|
||||
let altText = "icon";
|
||||
if (item.icon) altText = item.name ? `group ${item.name} icon (full size)` : "group icon (full size)";
|
||||
else if (item.proxy_tags) altText = item.name ? `member ${item.name} avatar (full size)` : "member avatar (full size)";
|
||||
else if (item.tag) altText = item.name ? `system ${item.name} avatar (full size)` : "system avatar (full size)";
|
||||
|
||||
async function focus(el) {
|
||||
await tick();
|
||||
el.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
<CardTitle style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex justify-content-between align-middle w-100">
|
||||
<div>
|
||||
<div class="icon d-inline-block">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<span bind:this={nameElement} style="vertical-align: middle;">{@html htmlName} ({item.id})</span>
|
||||
</div>
|
||||
<div style="margin-left: auto;">
|
||||
{#if item && (item.avatar_url || item.icon)}
|
||||
<img tabindex={0} on:keydown|stopPropagation={(event) => {if (event.key === "Enter") {avatarOpen = true}}} on:click|stopPropagation={toggleAvatarModal} class="rounded-circle avatar" src={icon_url_resized} alt={altText} />
|
||||
{:else}
|
||||
<img class="rounded-circle avatar" src={default_avatar} alt="icon (default)" tabindex={0} />
|
||||
{/if}
|
||||
</div>
|
||||
<Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
|
||||
<div slot="external" on:click={toggleAvatarModal} style="height: 100%; max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; display: flex;">
|
||||
<img class="d-block m-auto img-thumbnail" src={icon_url} alt={altText} tabindex={0} use:focus/>
|
||||
</div>
|
||||
</Modal>
|
||||
</CardTitle>
|
||||
73
dashboard/src/components/common/ListPagination.svelte
Normal file
73
dashboard/src/components/common/ListPagination.svelte
Normal file
@@ -0,0 +1,73 @@
|
||||
<script lang="ts">
|
||||
import { Pagination, PaginationItem, PaginationLink } from "sveltestrap";
|
||||
|
||||
export let currentPage: number;
|
||||
export let pageAmount: number;
|
||||
export let smallPages: boolean = false;
|
||||
|
||||
</script>
|
||||
{#if pageAmount > 1}
|
||||
<Pagination size={smallPages ? "sm" : ""} class="mx-auto" arialabel="member list page navigation">
|
||||
{#if currentPage !== 1}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" previous on:click={(e) => {e.preventDefault(); currentPage -= 1}}></PaginationLink>
|
||||
</PaginationItem>
|
||||
{:else}
|
||||
<PaginationItem disabled>
|
||||
<PaginationLink previous></PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage > 2}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage = 1}}>1</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage === 4}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage = 2}}>2</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage > 4}
|
||||
<PaginationItem disabled>
|
||||
<PaginationLink>...</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage > 1}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage -= 1}}>{currentPage - 1}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">{currentPage}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{#if currentPage < pageAmount}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage += 1}}>{currentPage + 1}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage < pageAmount - 3}
|
||||
<PaginationItem disabled>
|
||||
<PaginationLink>...</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage === pageAmount - 3}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage = pageAmount - 1}}>{pageAmount - 1}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage < pageAmount - 1}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => { e.preventDefault(); currentPage = pageAmount}}>{pageAmount}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage !== pageAmount}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" next on:click={(e) => {e.preventDefault(); currentPage += 1}}></PaginationLink>
|
||||
</PaginationItem>
|
||||
{:else}
|
||||
<PaginationItem disabled>
|
||||
<PaginationLink next></PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
</Pagination>
|
||||
{/if}
|
||||
66
dashboard/src/components/common/Navigation.svelte
Normal file
66
dashboard/src/components/common/Navigation.svelte
Normal file
@@ -0,0 +1,66 @@
|
||||
<script lang="ts">
|
||||
import {Navbar, NavbarBrand, Nav, NavItem, NavLink, Collapse, NavbarToggler, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Button} from 'sveltestrap';
|
||||
import { loggedIn } from '../../stores';
|
||||
import { Link, navigate } from 'svelte-navigator';
|
||||
|
||||
export let style: string;
|
||||
|
||||
let isOpen = false;
|
||||
const toggle = () => (isOpen = !isOpen);
|
||||
|
||||
let loggedIn_value: boolean;
|
||||
|
||||
loggedIn.subscribe(value => {
|
||||
loggedIn_value = value;
|
||||
});
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem("pk-token");
|
||||
localStorage.removeItem("pk-user");
|
||||
loggedIn.update(() => false);
|
||||
navigate("/");
|
||||
}
|
||||
|
||||
</script>
|
||||
<Navbar color="light" light expand="lg" class="mb-4">
|
||||
<Link to="/" class="navbar-brand"><NavbarBrand tabindex={-1} class="m-0">PluralKit</NavbarBrand></Link>
|
||||
<NavbarToggler on:click={toggle}></NavbarToggler>
|
||||
<Collapse {isOpen} navbar expand="lg">
|
||||
<Nav class="ms-auto" navbar>
|
||||
<Dropdown nav inNavbar>
|
||||
<DropdownToggle color="transparent" class="nav-link"><span class="select-text">Styles</span></DropdownToggle>
|
||||
<DropdownMenu end>
|
||||
<DropdownItem on:click={() => style = "light"}>Light</DropdownItem>
|
||||
<DropdownItem on:click={() => style = "dark"}>Dark</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
{#if loggedIn_value || localStorage.getItem("pk-token")}
|
||||
<Dropdown nav inNavbar>
|
||||
<DropdownToggle color="transparent" class="nav-link"><span class="select-text">Dash</span></DropdownToggle>
|
||||
<DropdownMenu end>
|
||||
<Link style="text-decoration: none;" to="/dash?tab=system"><DropdownItem tabindex={-1}>System</DropdownItem></Link>
|
||||
<Link style="text-decoration: none;" to="/dash?tab=members"><DropdownItem tabindex={-1}>Members</DropdownItem></Link>
|
||||
<Link style="text-decoration: none;" to="/dash?tab=groups"><DropdownItem tabindex={-1}>Groups</DropdownItem></Link>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem on:click={logout}>Log out</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
{/if}
|
||||
<NavItem>
|
||||
<Link to="/settings" class="nav-link">Settings</Link>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<Link to="/profile" class="nav-link">Public</Link>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<Link to="/status" class="nav-link">Bot status</Link>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
|
||||
<style>
|
||||
.select-text {
|
||||
user-select: text;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user