user onboarding new flow
This commit is contained in:
Peter Clement
parent
8d264fe983
commit
389558fd95
|
|
@ -37,7 +37,7 @@
|
|||
export let autoSortColumns = true
|
||||
export let compact = false
|
||||
export let customPlaceholder = false
|
||||
|
||||
export let showHeaderBorder = true
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
// Config
|
||||
|
|
@ -300,6 +300,7 @@
|
|||
{#each fields as field}
|
||||
<div
|
||||
class="spectrum-Table-headCell"
|
||||
class:noBorder={!showHeaderBorder}
|
||||
class:spectrum-Table-headCell--alignCenter={schema[field]
|
||||
.align === "Center"}
|
||||
class:spectrum-Table-headCell--alignRight={schema[field].align ===
|
||||
|
|
@ -478,6 +479,13 @@
|
|||
.spectrum-Table-headCell:last-of-type {
|
||||
border-right: var(--table-border);
|
||||
}
|
||||
|
||||
.noBorder {
|
||||
border-top: none !important;
|
||||
border-right: none !important;
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
.spectrum-Table-headCell--alignCenter {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -567,6 +575,7 @@
|
|||
.spectrum-Table-cell--divider + .spectrum-Table-cell {
|
||||
padding-left: var(--cell-padding);
|
||||
}
|
||||
|
||||
.spectrum-Table-cell--edit {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
|
||||
$: wide =
|
||||
$page.path.includes("email/:template") ||
|
||||
$page.path.includes("users") ||
|
||||
($page.path.includes("groups") && !$page.path.includes(":groupId"))
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,24 +5,20 @@
|
|||
</script>
|
||||
|
||||
<div class="title">
|
||||
<div class="name" style="display: flex; margin-left: var(--spacing-xl)">
|
||||
<div class="app-icon" style="color: {app.icon?.color || ''}">
|
||||
<div class="name app-icon" style="color: {app.icon?.color || ''}">
|
||||
<Icon size="XL" name={app.icon?.name || "Apps"} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desktop">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div class="name-content">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desktop" />
|
||||
<div
|
||||
style="display: flex; align-items: baseline; margin-right: var(--spacing-xl);"
|
||||
>
|
||||
<div class="apps">
|
||||
<StatusLight purple />
|
||||
<Body size="XS">{app.access}</Body>
|
||||
</div>
|
||||
|
|
@ -33,7 +29,26 @@
|
|||
grid-template-columns: 75px 75px;
|
||||
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 {
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
Label,
|
||||
Layout,
|
||||
Modal,
|
||||
Icon,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import TagsRenderer from "./_components/TagsTableRenderer.svelte"
|
||||
|
|
@ -29,6 +30,21 @@
|
|||
// 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 email
|
||||
$: filteredUsers = $users
|
||||
|
|
@ -60,25 +76,31 @@
|
|||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading>Users</Heading>
|
||||
<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.
|
||||
</Body>
|
||||
</Layout>
|
||||
<Divider size="S" />
|
||||
<Layout gap="S" noPadding>
|
||||
<div class="users-heading">
|
||||
<Heading size="S">Users</Heading>
|
||||
<ButtonGroup>
|
||||
<Button disabled secondary>Import users</Button>
|
||||
<Button primary dataCy="add-user" on:click={createUserModal.show}
|
||||
>Add user</Button
|
||||
>
|
||||
</ButtonGroup>
|
||||
<Body>Add users and control who gets access to your published apps</Body>
|
||||
|
||||
<div>
|
||||
{#each accessTypes as type}
|
||||
<div class="access-description">
|
||||
<Icon name={type.icon} />
|
||||
<div class="access-text">
|
||||
<Body size="S">{type.description}</Body>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</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">
|
||||
<Label size="L">Search / filter</Label>
|
||||
<Search bind:value={search} placeholder="" />
|
||||
</div>
|
||||
<Table
|
||||
on:click={({ detail }) => $goto(`./${detail._id}`)}
|
||||
|
|
@ -87,6 +109,7 @@
|
|||
allowEditColumns={false}
|
||||
allowEditRows={false}
|
||||
allowSelectRows={false}
|
||||
showHeaderBorder={false}
|
||||
customRenderers={[{ column: "group", component: TagsRenderer }]}
|
||||
/>
|
||||
</Layout>
|
||||
|
|
@ -98,6 +121,16 @@
|
|||
<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>
|
||||
|
||||
<style>
|
||||
.access-description {
|
||||
display: flex;
|
||||
margin-top: var(--spacing-xl);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.access-text {
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue