MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2021-05-21 11:00:08 +01:00
parent cc21ed354b
commit e1c37752db
9 changed files with 66 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/pages/builder/apps/_components/ChangePasswordModal.svelte → packages/builder/src/components/settings/ChangePasswordModal.svelte
View File

@ -9,7 +9,7 @@
const updatePassword = async () => { const updatePassword = async () => {
try { try {
await auth.updateSelf({ ...$auth.user, password }) await auth.updateSelf({ ...$auth.user, password })
notifications.success("Information updated successfully") notifications.success("Password changed successfully")
} catch (error) { } catch (error) {
notifications.error("Failed to update password") notifications.error("Failed to update password")
} }

12
packages/builder/src/components/settings/ThemeEditor.svelte
View File

@ -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}
/>

35
packages/builder/src/components/settings/ThemeEditorDropdown.svelte
View File

@ -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>

0
packages/builder/src/pages/builder/apps/_components/UpdateUserInfoModal.svelte → packages/builder/src/components/settings/UpdateUserInfoModal.svelte
View File

42
packages/builder/src/components/start/BuilderSettingsModal.svelte
View File

@ -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>

7
packages/builder/src/pages/builder/apps/index.svelte
View File

@ -17,8 +17,8 @@
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { AppStatus } from "constants" import { AppStatus } from "constants"
import { gradient } from "actions" import { gradient } from "actions"
import UpdateUserInfoModal from "./_components/UpdateUserInfoModal.svelte" import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
import ChangePasswordModal from "./_components/ChangePasswordModal.svelte" import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
let loaded = false let loaded = false
let userInfoModal let userInfoModal
@ -31,10 +31,11 @@
}) })
</script> </script>
{#if loaded} {#if $auth.user && loaded}
<div class="container"> <div class="container">
<Page> <Page>
<div class="content"> <div class="content">
asdas
<Layout noPadding> <Layout noPadding>
<img src={$organisation.logoUrl} /> <img src={$organisation.logoUrl} />
<div class="info-title"> <div class="info-title">

32
packages/builder/src/pages/builder/portal/_layout.svelte
View File

@ -13,11 +13,13 @@
} from "@budibase/bbui" } from "@budibase/bbui"
import ConfigChecklist from "components/common/ConfigChecklist.svelte" import ConfigChecklist from "components/common/ConfigChecklist.svelte"
import { organisation, auth } from "stores/portal" import { organisation, auth } from "stores/portal"
import BuilderSettingsModal from "components/start/BuilderSettingsModal.svelte"
import { onMount } from "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 loaded = false
let userInfoModal
let changePasswordModal
const menu = [ const menu = [
{ title: "Apps", href: "/builder/portal/apps" }, { title: "Apps", href: "/builder/portal/apps" },
@ -25,12 +27,11 @@
{ title: "Auth", href: "/builder/portal/manage/auth" }, { title: "Auth", href: "/builder/portal/manage/auth" },
{ title: "Email", href: "/builder/portal/manage/email" }, { title: "Email", href: "/builder/portal/manage/email" },
{ {
title: "General", title: "Organisation",
href: "/builder/portal/settings/general", href: "/builder/portal/settings/organisation",
heading: "Settings", heading: "Settings",
}, },
{ title: "Theming", href: "/builder/portal/theming" }, { title: "Theming", href: "/builder/portal/settings/theming" },
{ title: "Account", href: "/builder/portal/account" },
] ]
onMount(async () => { onMount(async () => {
@ -44,7 +45,7 @@
}) })
</script> </script>
{#if loaded} {#if $auth.user && loaded}
<div class="container"> <div class="container">
<div class="nav"> <div class="nav">
<Layout paddingX="L" paddingY="L"> <Layout paddingX="L" paddingY="L">
@ -77,8 +78,14 @@
<Avatar size="M" name="John Doe" /> <Avatar size="M" name="John Doe" />
<Icon size="XL" name="ChevronDown" /> <Icon size="XL" name="ChevronDown" />
</div> </div>
<MenuItem icon="Settings" on:click={oldSettingsModal.show}> <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
Old settings Update user information
</MenuItem>
<MenuItem
icon="LockClosed"
on:click={() => changePasswordModal.show()}
>
Update password
</MenuItem> </MenuItem>
<MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}> <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
Close developer mode Close developer mode
@ -91,8 +98,11 @@
</div> </div>
</div> </div>
</div> </div>
<Modal bind:this={oldSettingsModal} width="30%"> <Modal bind:this={userInfoModal}>
<BuilderSettingsModal /> <UpdateUserInfoModal />
</Modal>
<Modal bind:this={changePasswordModal}>
<ChangePasswordModal />
</Modal> </Modal>
{/if} {/if}

7
packages/builder/src/pages/builder/portal/settings/general.svelte → packages/builder/src/pages/builder/portal/settings/organisation.svelte
View File

@ -66,10 +66,11 @@
<Layout> <Layout>
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading size="M">General</Heading> <Heading size="M">Organisation</Heading>
<Body> <Body>
General is the place where you edit your organisation name, logo. You can Organisation settings is where you can edit your organisation name and
also configure your platform URL as well as turn on or off analytics. logo. You can also configure your platform URL and enable or disable
analytics.
</Body> </Body>
</Layout> </Layout>
<Divider size="S" /> <Divider size="S" />

36
packages/builder/src/pages/builder/portal/settings/theming.svelte Normal file
View File

@ -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>