liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: a whole lot of stuff

Browse Source
This commit is contained in:
Spectralitree
2021-12-11 12:01:36 +01:00
parent a2f22843ee
commit eba1a4543f
10 changed files with 428 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/lib/CardsHeader.svelte Normal file
View File

@@ -0,0 +1,32 @@
<script lang="ts">
import { Modal, CardHeader, CardTitle, Image } from 'sveltestrap';
import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte'
import default_avatar from '../assets/default_avatar.png';
import type Sys from '../api/system';
export let item: Sys;
let avatarOpen = false;
const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
</script>
<CardHeader>
<CardTitle style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex justify-content-between align-middle">
<div>
<div class="icon d-inline-block">
<FaUserCircle />
</div>
<span style="vertical-align: middle;">{item.name} ({item.id})</span>
</div>
{#if item && item.avatar_url}
<img on:click={toggleAvatarModal} class="rounded-circle avatar" src={item.avatar_url} alt="Your system avatar" />
{:else}
<img class="rounded-circle avatar" src={default_avatar} alt="your system avatar (default)" />
{/if}
<Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
<div slot="external" on:click={toggleAvatarModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
<Image style="display: block; margin: auto;" src={item.avatar_url} thumbnail alt="Your system avatar" />
</div>
</Modal>
</CardTitle>
</CardHeader>

79
src/lib/Navigation.svelte
View File

@@ -1,42 +1,51 @@
<script lang="ts">
import {Navbar, NavbarBrand, Nav, NavItem, NavLink, Collapse, NavbarToggler, Dropdown, DropdownItem, DropdownMenu, DropdownToggle} from 'sveltestrap';
import { createEventDispatcher } from 'svelte';
import { loggedIn } from '../stores';
import { Link } from 'svelte-navigator';
const dispatch = createEventDispatcher();
function changeStyle(style: string) {
dispatch('styleChange', style.toLowerCase());
}
export let style: string;
let isOpen = false;
const toggle = () => (isOpen = !isOpen);
</script>
<Navbar color="transparent" light expand="lg">
<NavbarBrand>pk-webs</NavbarBrand>
<NavbarToggler on:click={toggle}></NavbarToggler>
<Collapse {isOpen} navbar expand="lg">
<Nav class="ms-auto" navbar>
<Dropdown nav inNavbar>
<DropdownToggle>Styles</DropdownToggle>
<DropdownMenu end>
<DropdownItem on:click={() => changeStyle("light")}>Light</DropdownItem>
<DropdownItem on:click={() => changeStyle("dark")}>Dark</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="/dash">Dash</NavLink>
</NavItem>
<NavItem>
<NavLink href="/settings">Settings</NavLink>
</NavItem>
<NavItem>
<NavLink href="/templates">templates</NavLink>
</NavItem>
<NavItem>
<NavLink href="/public">Public</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
let loggedIn_value: boolean;
loggedIn.subscribe(value => {
loggedIn_value = value;
});
</script>
<div style="background-color: #292929">
<Navbar color="light" light expand="lg" class="mb-4">
<NavbarBrand>pk-webs</NavbarBrand>
<NavbarToggler on:click={toggle}></NavbarToggler>
<Collapse {isOpen} navbar expand="lg">
<Nav class="ms-auto" navbar>
<Dropdown nav inNavbar>
<DropdownToggle color="transparent">Styles</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">Dash</DropdownToggle>
<DropdownMenu end>
<Link to="/dash" state={{tab: "system"}}><DropdownItem>System</DropdownItem></Link>
<Link to="/dash" state={{tab: "members"}}><DropdownItem>Members</DropdownItem></Link>
</DropdownMenu>
</Dropdown>
{/if}
<NavItem>
<NavLink href="/settings">Settings</NavLink>
</NavItem>
<NavItem>
<NavLink href="/templates">Templates</NavLink>
</NavItem>
<NavItem>
<NavLink href="/public">Public</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>

53
src/lib/cards/PrivateSystem.svelte Normal file
View File

@@ -0,0 +1,53 @@
<script lang="ts">
import { currentUser } from '../../stores';
import { Modal, Card, CardHeader, CardBody, CardTitle, Image, ModalHeader, Col, Row, Button } from 'sveltestrap';
import CardsHeader from '../CardsHeader.svelte';
import { parseMarkdown } from '../../functions';
export let user;
$: htmlDescription = parseMarkdown(user.description);
let bannerOpen = false;
const toggleBannerModal = () => (bannerOpen = !bannerOpen);
</script>
<Card>
<CardsHeader bind:item={user}/>
<CardBody style="border-left: 4px solid #{user.color}">
<Row>
<Col xs={12} lg={4} class="mb-2">
<b>ID:</b> {user.id}
</Col>
<Col xs={12} lg={4} class="mb-2">
<b>Name:</b> {user.name}
</Col>
{#if user.tag}
<Col xs={12} lg={4} class="mb-2">
<b>Tag:</b> {user.tag}
</Col>
{/if}
<Col xs={12} lg={4} class="mb-2">
<b>Timezone:</b> {user.timezone}
</Col>
{#if user.color}
<Col xs={12} lg={4} class="mb-2">
<b>Color:</b> {user.color}
</Col>
{/if}
{#if user.banner}
<Col xs={12} lg={3} class="mb-2">
<b>Banner:</b> <Button size="sm" color="light" on:click={toggleBannerModal}>View</Button>
<Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
<div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
<Image style="display: block; margin: auto;" src={user.banner} thumbnail alt="Your system banner" />
</div>
</Modal>
</Col>
{/if}
<div class="mt-2">
<b>Description:</b><br />
{@html htmlDescription}
</div>
</Row>
</CardBody>
</Card>