Update styles of user details page and user list page to match new designs
This commit is contained in:
parent
d79b95b710
commit
3817d117f2
2 changed files with 50 additions and 42 deletions
|
@ -18,6 +18,7 @@
|
||||||
Select,
|
Select,
|
||||||
Modal,
|
Modal,
|
||||||
notifications,
|
notifications,
|
||||||
|
Divider,
|
||||||
StatusLight,
|
StatusLight,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
|
@ -222,7 +223,8 @@
|
||||||
Back
|
Back
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
</div>
|
</div>
|
||||||
<Layout noPadding gap="S">
|
|
||||||
|
<Layout noPadding gap="M">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div>
|
<div>
|
||||||
<div style="display: flex;">
|
<div style="display: flex;">
|
||||||
|
@ -251,48 +253,56 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="fields">
|
<Divider size="S" />
|
||||||
<div class="field">
|
<Layout noPadding gap="S">
|
||||||
<Label size="L">First name</Label>
|
<Heading size="S">Details</Heading>
|
||||||
<Input
|
<div class="fields">
|
||||||
thin
|
|
||||||
value={$userFetch?.data?.firstName}
|
|
||||||
on:blur={updateUserFirstName}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<Label size="L">Last name</Label>
|
|
||||||
<Input
|
|
||||||
thin
|
|
||||||
value={$userFetch?.data?.lastName}
|
|
||||||
on:blur={updateUserLastName}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- don't let a user remove the privileges that let them be here -->
|
|
||||||
{#if userId !== $auth.user._id}
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<Label size="L">Role</Label>
|
<Label size="L">Email</Label>
|
||||||
<Select
|
<Input disabled value={$userFetch?.data?.email} />
|
||||||
value={globalRole}
|
</div>
|
||||||
options={Constants.BbRoles}
|
<div class="field">
|
||||||
on:change={updateUserRole}
|
<Label size="L">First name</Label>
|
||||||
|
<Input
|
||||||
|
value={$userFetch?.data?.firstName}
|
||||||
|
on:blur={updateUserFirstName}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
<div class="field">
|
||||||
</div>
|
<Label size="L">Last name</Label>
|
||||||
|
<Input
|
||||||
|
value={$userFetch?.data?.lastName}
|
||||||
|
on:blur={updateUserLastName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- don't let a user remove the privileges that let them be here -->
|
||||||
|
{#if userId !== $auth.user._id}
|
||||||
|
<div class="field">
|
||||||
|
<Label size="L">Role</Label>
|
||||||
|
<Select
|
||||||
|
value={globalRole}
|
||||||
|
options={Constants.BbRoles}
|
||||||
|
on:change={updateUserRole}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
{#if hasGroupsLicense}
|
{#if hasGroupsLicense}
|
||||||
<!-- User groups -->
|
<!-- User groups -->
|
||||||
<Layout gap="S" noPadding>
|
<Layout gap="S" noPadding>
|
||||||
<div class="tableTitle">
|
<div class="tableTitle">
|
||||||
<div>
|
<Heading size="S">Groups</Heading>
|
||||||
<Heading size="S">User groups</Heading>
|
|
||||||
<Body size="S">Add or remove this user from user groups</Body>
|
|
||||||
</div>
|
|
||||||
<div bind:this={popoverAnchor}>
|
<div bind:this={popoverAnchor}>
|
||||||
<Button on:click={popover.show()} icon="UserGroup" cta>
|
<Button
|
||||||
Add user group
|
on:click={popover.show()}
|
||||||
|
icon="UserGroup"
|
||||||
|
secondary
|
||||||
|
newStyles
|
||||||
|
>
|
||||||
|
Add to group
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
||||||
|
@ -307,7 +317,6 @@
|
||||||
/>
|
/>
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<List>
|
<List>
|
||||||
{#if userGroups.length}
|
{#if userGroups.length}
|
||||||
{#each userGroups as group}
|
{#each userGroups as group}
|
||||||
|
@ -315,6 +324,8 @@
|
||||||
title={group.name}
|
title={group.name}
|
||||||
icon={group.icon}
|
icon={group.icon}
|
||||||
iconBackground={group.color}
|
iconBackground={group.color}
|
||||||
|
hoverable
|
||||||
|
on:click={() => $goto(`../groups/${group._id}`)}
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
on:click={removeGroup(group._id)}
|
on:click={removeGroup(group._id)}
|
||||||
|
@ -330,12 +341,9 @@
|
||||||
</List>
|
</List>
|
||||||
</Layout>
|
</Layout>
|
||||||
{/if}
|
{/if}
|
||||||
<!-- User Apps -->
|
|
||||||
<Layout gap="S" noPadding>
|
<Layout gap="S" noPadding>
|
||||||
<div>
|
<Heading size="S">Apps</Heading>
|
||||||
<Heading size="S">Apps</Heading>
|
|
||||||
<Body size="S">Manage apps that this user has been assigned to</Body>
|
|
||||||
</div>
|
|
||||||
<List>
|
<List>
|
||||||
{#if allAppList.length}
|
{#if allAppList.length}
|
||||||
{#each allAppList as app}
|
{#each allAppList as app}
|
||||||
|
@ -344,7 +352,7 @@
|
||||||
iconBackground={app?.icon?.color || ""}
|
iconBackground={app?.icon?.color || ""}
|
||||||
icon={app?.icon?.name || "Apps"}
|
icon={app?.icon?.name || "Apps"}
|
||||||
hoverable
|
hoverable
|
||||||
on:click={$goto(`../../overview/${app.devId}`)}
|
on:click={() => $goto(`../../overview/${app.devId}`)}
|
||||||
>
|
>
|
||||||
<div class="title ">
|
<div class="title ">
|
||||||
<StatusLight
|
<StatusLight
|
||||||
|
@ -381,7 +389,7 @@
|
||||||
}
|
}
|
||||||
.field {
|
.field {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 100px 1fr;
|
grid-template-columns: 120px 1fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -394,6 +402,7 @@
|
||||||
.tableTitle {
|
.tableTitle {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
|
|
|
@ -219,7 +219,6 @@
|
||||||
<Body>Add users and control who gets access to your published apps</Body>
|
<Body>Add users and control who gets access to your published apps</Body>
|
||||||
</Layout>
|
</Layout>
|
||||||
<Divider size="S" />
|
<Divider size="S" />
|
||||||
|
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<ButtonGroup>
|
<ButtonGroup>
|
||||||
<Button
|
<Button
|
||||||
|
|
Loading…
Reference in a new issue