Sets up tabbed modal for settings
This commit is contained in:
kevmodrome
parent
1f719cba9d
commit
237165dcd9
|
|
@ -39,7 +39,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@beyonk/svelte-notifications": "^2.0.3",
|
||||
"@budibase/bbui": "^1.1.1",
|
||||
"@budibase/bbui": "^1.5.0",
|
||||
"@budibase/client": "^0.0.32",
|
||||
"@nx-js/compiler-util": "^2.0.0",
|
||||
"codemirror": "^5.51.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<script>
|
||||
import Modal from "./Modal.svelte"
|
||||
import { SettingsIcon } from "components/common/Icons/"
|
||||
import { getContext } from "svelte"
|
||||
import { isActive, goto, layout } from "@sveltech/routify"
|
||||
|
||||
// Handle create app modal
|
||||
const { open } = getContext("simple-modal")
|
||||
|
||||
const showSettingsModal = () => {
|
||||
open(
|
||||
Modal,
|
||||
{
|
||||
name: "Placeholder App Name",
|
||||
description: "This is a hardcoded description that needs to change",
|
||||
},
|
||||
{
|
||||
closeButton: false,
|
||||
closeOnEsc: true,
|
||||
styleContent: { padding: 0 },
|
||||
closeOnOuterClick: true,
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<span class="topnavitemright" on:click={showSettingsModal}>
|
||||
<SettingsIcon />
|
||||
</span>
|
||||
|
||||
<style>
|
||||
span:first-letter {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.topnavitemright {
|
||||
cursor: pointer;
|
||||
color: var(--ink-light);
|
||||
margin: 0px 20px 0px 0px;
|
||||
padding-top: 4px;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<script>
|
||||
import { General, Permissions, Users, Integrations, DangerZone } from "./tabs"
|
||||
|
||||
import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
|
||||
import { SettingsIcon, CloseIcon } from "components/common/Icons/"
|
||||
import { getContext } from "svelte"
|
||||
import { post } from "builderStore/api"
|
||||
|
||||
const { open, close } = getContext("simple-modal")
|
||||
export let name = ""
|
||||
export let description = ""
|
||||
const tabs = [
|
||||
{
|
||||
title: "General",
|
||||
key: "GENERAL",
|
||||
component: General,
|
||||
},
|
||||
{
|
||||
title: "Permissions",
|
||||
key: "PERMISSIONS",
|
||||
component: Permissions,
|
||||
},
|
||||
{
|
||||
title: "Users",
|
||||
key: "USERS",
|
||||
component: Users,
|
||||
},
|
||||
{
|
||||
title: "Integrations",
|
||||
key: "INTEGRATIONS",
|
||||
component: Integrations,
|
||||
},
|
||||
{
|
||||
title: "Danger Zone",
|
||||
key: "DANGERZONE",
|
||||
component: DangerZone,
|
||||
},
|
||||
]
|
||||
let value = "GENERAL"
|
||||
$: selectedTab = tabs.find(tab => tab.key === value).component
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<div class="heading">
|
||||
<span class="icon">
|
||||
<SettingsIcon />
|
||||
</span>
|
||||
<h3>Settings</h3>
|
||||
</div>
|
||||
<Switcher headings={tabs} bind:value>
|
||||
<svelte:component this={selectedTab} />
|
||||
</Switcher>
|
||||
</div>
|
||||
<div class="close-button" on:click={close}>
|
||||
<CloseIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
.close-button :global(svg) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.heading {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.icon {
|
||||
display: grid;
|
||||
border-radius: 3px;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 10px;
|
||||
background-color: var(--blue-light);
|
||||
}
|
||||
.body {
|
||||
padding: 40px 40px 80px 40px;
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Danger
|
||||
|
|
@ -0,0 +1 @@
|
|||
General
|
||||
|
|
@ -0,0 +1 @@
|
|||
Integrations
|
||||
|
|
@ -0,0 +1 @@
|
|||
Permissions
|
||||
|
|
@ -0,0 +1 @@
|
|||
Users
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export { default as General } from './General.svelte';
|
||||
export { default as Integrations } from './Integrations.svelte';
|
||||
export { default as Permissions } from './Permissions.svelte';
|
||||
export { default as Users } from './Users.svelte';
|
||||
export { default as DangerZone } from './DangerZone.svelte';
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import Modal from "svelte-simple-modal"
|
||||
import { store } from "builderStore"
|
||||
import { getContext } from "svelte"
|
||||
import { get } from "builderStore/api"
|
||||
|
||||
import { fade } from "svelte/transition"
|
||||
|
|
@ -8,6 +9,7 @@
|
|||
|
||||
import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
|
||||
import IconButton from "components/common/IconButton.svelte"
|
||||
import SettingsLink from "components/settings/Link.svelte"
|
||||
|
||||
// Get Package and set store
|
||||
export let application
|
||||
|
|
@ -29,7 +31,6 @@
|
|||
|
||||
<Modal>
|
||||
<div class="root">
|
||||
|
||||
<div class="top-nav">
|
||||
<div class="topleftnav">
|
||||
<button class="home-logo">
|
||||
|
|
@ -53,12 +54,7 @@
|
|||
hoverColor="var(--secondary75)"/> -->
|
||||
</div>
|
||||
<div class="toprightnav">
|
||||
<span
|
||||
class:active={$isActive(`/settings`)}
|
||||
class="topnavitemright"
|
||||
on:click={() => $goto(`/settings`)}>
|
||||
<SettingsIcon />
|
||||
</span>
|
||||
<SettingsLink />
|
||||
<span
|
||||
class:active={false}
|
||||
class="topnavitemright"
|
||||
|
|
|
|||
Loading…
Reference in New Issue