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

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

master
Andrew Kingston 4 years ago
parent
9d5fd239f0
commit
b71a27a0f4
2 changed files with 50 additions and 42 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. 91
      packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
  2. 1
      packages/builder/src/pages/builder/portal/manage/users/index.svelte

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 <div class="field">
value={$userFetch?.data?.firstName} <Label size="L">Email</Label>
on:blur={updateUserFirstName} <Input disabled value={$userFetch?.data?.email} />
/> </div>
</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">First name</Label>
<Select <Input
value={globalRole} value={$userFetch?.data?.firstName}
options={Constants.BbRoles} on:blur={updateUserFirstName}
on:change={updateUserRole}
/> />
</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

Write Preview
Loading…
Cancel
Save