Rename general settings to organisation and add builder theme to Theming page, add password changing and user info changing to avatar dropdown
This commit is contained in:
Andrew Kingston
parent
cc21ed354b
commit
e1c37752db
9 changed files with 66 additions and 107 deletions
|
|
@ -9,7 +9,7 @@
|
|||
const updatePassword = async () => {
|
||||
try {
|
||||
await auth.updateSelf({ ...$auth.user, password })
|
||||
notifications.success("Information updated successfully")
|
||||
notifications.success("Password changed successfully")
|
||||
} catch (error) {
|
||||
notifications.error("Failed to update password")
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<script>
|
||||
import { themeStore } from "builderStore"
|
||||
import { Select } from "@budibase/bbui"
|
||||
import { capitalise } from "../../helpers"
|
||||
</script>
|
||||
|
||||
<Select
|
||||
options={$themeStore.options}
|
||||
bind:value={$themeStore.theme}
|
||||
placeholder={null}
|
||||
getOptionLabel={capitalise}
|
||||
/>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<script>
|
||||
import { Icon, Label, Modal, ModalContent } from "@budibase/bbui"
|
||||
import ThemeEditor from "./ThemeEditor.svelte"
|
||||
|
||||
let modal
|
||||
</script>
|
||||
|
||||
<div class="topnavitemright" on:click={modal.show}>
|
||||
<Icon hoverable name="ColorFill" />
|
||||
</div>
|
||||
<Modal bind:this={modal}>
|
||||
<ModalContent
|
||||
title="Builder Theme"
|
||||
confirmText="Done"
|
||||
showCancelButton={false}
|
||||
>
|
||||
<ThemeEditor />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.topnavitemright {
|
||||
cursor: pointer;
|
||||
color: var(--grey-7);
|
||||
margin: 0 12px 0 0;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
Heading,
|
||||
Divider,
|
||||
notifications,
|
||||
ModalContent,
|
||||
Toggle,
|
||||
Body,
|
||||
} from "@budibase/bbui"
|
||||
import ThemeEditor from "components/settings/ThemeEditor.svelte"
|
||||
import analytics from "analytics"
|
||||
|
||||
$: analyticsDisabled = analytics.disabled()
|
||||
|
||||
async function save() {
|
||||
notifications.success(`Settings saved.`)
|
||||
}
|
||||
|
||||
function toggleAnalytics() {
|
||||
if (analyticsDisabled) {
|
||||
analytics.optIn()
|
||||
} else {
|
||||
analytics.optOut()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ModalContent title="Builder settings" confirmText="Save" onConfirm={save}>
|
||||
<Heading size="XS">Theme</Heading>
|
||||
<ThemeEditor />
|
||||
<Divider noMargin noGrid />
|
||||
<Heading size="XS">Analytics</Heading>
|
||||
<Body size="S">
|
||||
If you would like to send analytics that help us make budibase better,
|
||||
please let us know below.
|
||||
</Body>
|
||||
<Toggle
|
||||
text="Send Analytics To Budibase"
|
||||
value={!analyticsDisabled}
|
||||
on:change={toggleAnalytics}
|
||||
/>
|
||||
</ModalContent>
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
import { goto } from "@roxi/routify"
|
||||
import { AppStatus } from "constants"
|
||||
import { gradient } from "actions"
|
||||
import UpdateUserInfoModal from "./_components/UpdateUserInfoModal.svelte"
|
||||
import ChangePasswordModal from "./_components/ChangePasswordModal.svelte"
|
||||
import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
|
||||
import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
|
||||
|
||||
let loaded = false
|
||||
let userInfoModal
|
||||
|
|
@ -31,10 +31,11 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
{#if loaded}
|
||||
{#if $auth.user && loaded}
|
||||
<div class="container">
|
||||
<Page>
|
||||
<div class="content">
|
||||
asdas
|
||||
<Layout noPadding>
|
||||
<img src={$organisation.logoUrl} />
|
||||
<div class="info-title">
|
||||
|
|
|
|||
|
|
@ -13,11 +13,13 @@
|
|||
} from "@budibase/bbui"
|
||||
import ConfigChecklist from "components/common/ConfigChecklist.svelte"
|
||||
import { organisation, auth } from "stores/portal"
|
||||
import BuilderSettingsModal from "components/start/BuilderSettingsModal.svelte"
|
||||
import { onMount } from "svelte"
|
||||
import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
|
||||
import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
|
||||
|
||||
let oldSettingsModal
|
||||
let loaded = false
|
||||
let userInfoModal
|
||||
let changePasswordModal
|
||||
|
||||
const menu = [
|
||||
{ title: "Apps", href: "/builder/portal/apps" },
|
||||
|
|
@ -25,12 +27,11 @@
|
|||
{ title: "Auth", href: "/builder/portal/manage/auth" },
|
||||
{ title: "Email", href: "/builder/portal/manage/email" },
|
||||
{
|
||||
title: "General",
|
||||
href: "/builder/portal/settings/general",
|
||||
title: "Organisation",
|
||||
href: "/builder/portal/settings/organisation",
|
||||
heading: "Settings",
|
||||
},
|
||||
{ title: "Theming", href: "/builder/portal/theming" },
|
||||
{ title: "Account", href: "/builder/portal/account" },
|
||||
{ title: "Theming", href: "/builder/portal/settings/theming" },
|
||||
]
|
||||
|
||||
onMount(async () => {
|
||||
|
|
@ -44,7 +45,7 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
{#if loaded}
|
||||
{#if $auth.user && loaded}
|
||||
<div class="container">
|
||||
<div class="nav">
|
||||
<Layout paddingX="L" paddingY="L">
|
||||
|
|
@ -77,8 +78,14 @@
|
|||
<Avatar size="M" name="John Doe" />
|
||||
<Icon size="XL" name="ChevronDown" />
|
||||
</div>
|
||||
<MenuItem icon="Settings" on:click={oldSettingsModal.show}>
|
||||
Old settings
|
||||
<MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
|
||||
Update user information
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon="LockClosed"
|
||||
on:click={() => changePasswordModal.show()}
|
||||
>
|
||||
Update password
|
||||
</MenuItem>
|
||||
<MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
|
||||
Close developer mode
|
||||
|
|
@ -91,8 +98,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal bind:this={oldSettingsModal} width="30%">
|
||||
<BuilderSettingsModal />
|
||||
<Modal bind:this={userInfoModal}>
|
||||
<UpdateUserInfoModal />
|
||||
</Modal>
|
||||
<Modal bind:this={changePasswordModal}>
|
||||
<ChangePasswordModal />
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -66,10 +66,11 @@
|
|||
|
||||
<Layout>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading size="M">General</Heading>
|
||||
<Heading size="M">Organisation</Heading>
|
||||
<Body>
|
||||
General is the place where you edit your organisation name, logo. You can
|
||||
also configure your platform URL as well as turn on or off analytics.
|
||||
Organisation settings is where you can edit your organisation name and
|
||||
logo. You can also configure your platform URL and enable or disable
|
||||
analytics.
|
||||
</Body>
|
||||
</Layout>
|
||||
<Divider size="S" />
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<script>
|
||||
import { Layout, Heading, Body, Divider, Label, Select } from "@budibase/bbui"
|
||||
import { themeStore } from "builderStore"
|
||||
import { capitalise } from "helpers"
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading size="M">Theming</Heading>
|
||||
<Body>Customize how Budibase looks and feels.</Body>
|
||||
</Layout>
|
||||
<Divider size="S" />
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<Label size="L">Builder theme</Label>
|
||||
<Select
|
||||
options={$themeStore.options}
|
||||
bind:value={$themeStore.theme}
|
||||
placeholder={null}
|
||||
getOptionLabel={capitalise}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.fields {
|
||||
display: grid;
|
||||
grid-gap: var(--spacing-m);
|
||||
}
|
||||
.field {
|
||||
display: grid;
|
||||
grid-template-columns: 33% 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue