eightball/PluralKit
1
0
Fork 0
mirror of https://github.com/PluralKit/PluralKit.git synced 2026-02-14 01:30:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add beginnings of settings page

Browse source
This commit is contained in:
Spectralitree 2021-12-11 15:56:47 +01:00
parent deead94c08
commit 1418d7e7d2
3 changed files with 60 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/pages/Settings.svelte Normal file
View file

@ -0,0 +1,52 @@
<script lang="ts">
import { Card, CardHeader, CardBody, Container, Row, Col, CardTitle, Tooltip } from 'sveltestrap';
import Toggle from 'svelte-toggle';
import FaCogs from 'svelte-icons/fa/FaCogs.svelte'
let savedSettings = JSON.parse(localStorage.getItem("pk-settings"));
let settings = {
appearance: {
banner_top: true,
banner_bottom: true,
gradient_background: false,
no_background: false
}
};
if (savedSettings) {
settings = {...settings, ...savedSettings}
};
</script>
<Container>
<Row>
<Col class="mx-auto" xs={12} lg={10}>
<Card>
<CardHeader>
<CardTitle style="margin-top: 8px; outline: none;">
<div class="icon d-inline-block">
<FaCogs />
</div>Personal settings
</CardTitle>
</CardHeader>
<CardBody>
<p>These settings are saved in your localstorage. This means that you have to reapply these every time you visit in a different browser, or clear your browser's cookies.</p>
<h4>Appearance</h4>
<hr/>
<Row>
<Col xs={12} lg={4}>
<span id="s-bannertop">Show banners in the background?</span> <Toggle hideLabel style="display: inline" label="Remove banner from background" toggled={settings.appearance.banner_top} on:toggle={() => {settings.appearance.banner_top = !settings.appearance.banner_top; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
<Tooltip target="s-bannertop" placement="bottom">Toggles banners from the top of the system, member and group pages.</Tooltip>
</Col>
<Col xs={12} lg={4}>
<span id="s-bannerbottom">Show banners at the bottom of cards?</span> <Toggle hideLabel style="display: inline" label="Remove banner from bottom" toggled={settings.appearance.banner_bottom} on:toggle={() => {settings.appearance.banner_bottom = !settings.appearance.banner_bottom; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
<Tooltip target="s-bannerbottom" placement="bottom">Toggles banners at the bottom of the system, member and group cards.</Tooltip>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
</Container>