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

Update styles of user details page and user list page to match new designs

This commit is contained in:
Andrew Kingston 2022-08-02 19:22:14 +01:00
parent 9d5fd239f0
commit b71a27a0f4
2 changed files with 50 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
View File

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

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

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