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

user onboarding new flow

This commit is contained in:
Peter Clement 2022-06-22 15:34:49 +01:00
parent d952b9a3bb
commit 44d7246b69
4 changed files with 84 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/bbui/src/Table/Table.svelte
View File

@ -37,7 +37,7 @@
export let autoSortColumns = true export let autoSortColumns = true
export let compact = false export let compact = false
export let customPlaceholder = false export let customPlaceholder = false
export let showHeaderBorder = true
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
// Config // Config
@ -300,6 +300,7 @@
{#each fields as field} {#each fields as field}
<div <div
class="spectrum-Table-headCell" class="spectrum-Table-headCell"
class:noBorder={!showHeaderBorder}
class:spectrum-Table-headCell--alignCenter={schema[field] class:spectrum-Table-headCell--alignCenter={schema[field]
.align === "Center"} .align === "Center"}
class:spectrum-Table-headCell--alignRight={schema[field].align === class:spectrum-Table-headCell--alignRight={schema[field].align ===
@ -478,6 +479,13 @@
.spectrum-Table-headCell:last-of-type { .spectrum-Table-headCell:last-of-type {
border-right: var(--table-border); border-right: var(--table-border);
} }
.noBorder {
border-top: none !important;
border-right: none !important;
border-left: none !important;
}
.spectrum-Table-headCell--alignCenter { .spectrum-Table-headCell--alignCenter {
justify-content: center; justify-content: center;
} }
@ -567,6 +575,7 @@
.spectrum-Table-cell--divider + .spectrum-Table-cell { .spectrum-Table-cell--divider + .spectrum-Table-cell {
padding-left: var(--cell-padding); padding-left: var(--cell-padding);
} }
.spectrum-Table-cell--edit { .spectrum-Table-cell--edit {
position: sticky; position: sticky;
left: 0; left: 0;

1
packages/builder/src/pages/builder/portal/manage/_layout.svelte
View File

@ -12,6 +12,7 @@
$: wide = $: wide =
$page.path.includes("email/:template") || $page.path.includes("email/:template") ||
$page.path.includes("users") ||
($page.path.includes("groups") && !$page.path.includes(":groupId")) ($page.path.includes("groups") && !$page.path.includes(":groupId"))
</script> </script>

33
packages/builder/src/pages/builder/portal/manage/groups/_components/GroupAppsRow.svelte
View File

@ -5,24 +5,20 @@
</script> </script>
<div class="title"> <div class="title">
<div class="name" style="display: flex; margin-left: var(--spacing-xl)"> <div class="name app-icon" style="color: {app.icon?.color || ''}">
<div class="app-icon" style="color: {app.icon?.color || ''}"> <Icon size="XL" name={app.icon?.name || "Apps"} />
<Icon size="XL" name={app.icon?.name || "Apps"} />
</div>
</div> </div>
</div> </div>
<div class="desktop"> <div class="desktop">
<div style="display: flex; align-items: center;"> <div class="name-content">
<Body size="M">{app.name}</Body> <Body size="M">{app.name}</Body>
<div style="opacity: 0.5; margin: var(--spacing-xs) 0 0 var(--spacing-m)"> <div class="access">
<Body size="XS">{app.access}</Body> <Body size="XS">{app.access}</Body>
</div> </div>
</div> </div>
</div> </div>
<div class="desktop" /> <div class="desktop" />
<div <div class="apps">
style="display: flex; align-items: baseline; margin-right: var(--spacing-xl);"
>
<StatusLight purple /> <StatusLight purple />
<Body size="XS">{app.access}</Body> <Body size="XS">{app.access}</Body>
</div> </div>
@ -33,7 +29,26 @@
grid-template-columns: 75px 75px; grid-template-columns: 75px 75px;
align-items: center; align-items: center;
} }
.app-icon {
display: flex;
margin-left: var(--spacing-xl);
}
.apps {
display: flex;
align-items: baseline;
margin-right: var(--spacing-xl);
}
.access {
opacity: 0.5;
margin: var(--spacing-xs) 0 0 var(--spacing-m);
}
.name-content {
display: flex;
align-items: center;
}
.name { .name {
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;

65
packages/builder/src/pages/builder/portal/manage/users/index.svelte
View File

@ -11,6 +11,7 @@
Label, Label,
Layout, Layout,
Modal, Modal,
Icon,
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import TagsRenderer from "./_components/TagsTableRenderer.svelte" import TagsRenderer from "./_components/TagsTableRenderer.svelte"
@ -29,6 +30,21 @@
// group: {} // group: {}
} }
const accessTypes = [
{
icon: "User",
description: "App user - Only has access to published apps",
},
{
icon: "Hammer",
description: "Developer - Access to the app builder",
},
{
icon: "Draw",
description: "Admin - Full access",
},
]
let search let search
let email let email
$: filteredUsers = $users $: filteredUsers = $users
@ -60,25 +76,31 @@
<Layout noPadding> <Layout noPadding>
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading>Users</Heading> <Heading>Users</Heading>
<Body> <Body>Add users and control who gets access to your published apps</Body>
Each user is assigned to a group that contains apps and permissions. In
this section, you can add users, or edit and delete an existing user. <div>
</Body> {#each accessTypes as type}
</Layout> <div class="access-description">
<Divider size="S" /> <Icon name={type.icon} />
<Layout gap="S" noPadding> <div class="access-text">
<div class="users-heading"> <Body size="S">{type.description}</Body>
<Heading size="S">Users</Heading> </div>
<ButtonGroup> </div>
<Button disabled secondary>Import users</Button> {/each}
<Button primary dataCy="add-user" on:click={createUserModal.show}
>Add user</Button
>
</ButtonGroup>
</div> </div>
</Layout>
<Layout gap="S" noPadding>
<ButtonGroup>
<Button
dataCy="add-user"
on:click={createUserModal.show}
icon="UserAdd"
cta>Add Users</Button
>
<Button icon="Import" primary>Import Users</Button>
</ButtonGroup>
<div class="field"> <div class="field">
<Label size="L">Search / filter</Label> <Label size="L">Search / filter</Label>
<Search bind:value={search} placeholder="" />
</div> </div>
<Table <Table
on:click={({ detail }) => $goto(`./${detail._id}`)} on:click={({ detail }) => $goto(`./${detail._id}`)}
@ -87,6 +109,7 @@
allowEditColumns={false} allowEditColumns={false}
allowEditRows={false} allowEditRows={false}
allowSelectRows={false} allowSelectRows={false}
showHeaderBorder={false}
customRenderers={[{ column: "group", component: TagsRenderer }]} customRenderers={[{ column: "group", component: TagsRenderer }]}
/> />
</Layout> </Layout>
@ -98,6 +121,16 @@
<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal> <Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>
<style> <style>
.access-description {
display: flex;
margin-top: var(--spacing-xl);
opacity: 0.8;
}
.access-text {
margin-left: var(--spacing-m);
}
.field { .field {
display: flex; display: flex;
align-items: center; align-items: center;