ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Rename general settings to organisation and add builder theme to Theming page, add password changing and user info changing to avatar dropdown

gh-pages
Andrew Kingston 5 years ago
parent
133dee8eba
commit
e1ac3cd5d2
9 changed files with 66 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/builder/src/components/settings/ChangePasswordModal.svelte
  2. 12
      packages/builder/src/components/settings/ThemeEditor.svelte
  3. 35
      packages/builder/src/components/settings/ThemeEditorDropdown.svelte
  4. 0
      packages/builder/src/components/settings/UpdateUserInfoModal.svelte
  5. 42
      packages/builder/src/components/start/BuilderSettingsModal.svelte
  6. 7
      packages/builder/src/pages/builder/apps/index.svelte
  7. 32
      packages/builder/src/pages/builder/portal/_layout.svelte
  8. 7
      packages/builder/src/pages/builder/portal/settings/organisation.svelte
  9. 36
      packages/builder/src/pages/builder/portal/settings/theming.svelte

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
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>
Write Preview
Loading…
Cancel
Save