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

Update styles in user details page and user list page

This commit is contained in:
Andrew Kingston 2022-08-02 16:41:15 +01:00
parent 074f0b4a51
commit b838a66954
3 changed files with 62 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -216,15 +216,13 @@
</script> </script>
{#if loaded} {#if loaded}
<Layout gap="L" noPadding> <Layout gap="XL" noPadding>
<Layout gap="XS" noPadding> <div>
<div> <ActionButton on:click={() => $goto("./")} icon="ArrowLeft">
<ActionButton on:click={() => $goto("./")} icon="ArrowLeft"> Back
Back </ActionButton>
</ActionButton> </div>
</div> <Layout noPadding gap="S">
</Layout>
<Layout gap="XS" noPadding>
<div class="title"> <div class="title">
<div> <div>
<div style="display: flex;"> <div style="display: flex;">
@ -253,8 +251,6 @@
</div> </div>
{/if} {/if}
</div> </div>
</Layout>
<Layout gap="S" noPadding>
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<Label size="L">First name</Label> <Label size="L">First name</Label>
@ -291,7 +287,7 @@
<Layout gap="S" noPadding> <Layout gap="S" noPadding>
<div class="tableTitle"> <div class="tableTitle">
<div> <div>
<Heading size="XS">User groups</Heading> <Heading size="S">User groups</Heading>
<Body size="S">Add or remove this user from user groups</Body> <Body size="S">Add or remove this user from user groups</Body>
</div> </div>
<div bind:this={popoverAnchor}> <div bind:this={popoverAnchor}>
@ -337,7 +333,7 @@
<!-- User Apps --> <!-- User Apps -->
<Layout gap="S" noPadding> <Layout gap="S" noPadding>
<div> <div>
<Heading size="XS">Apps</Heading> <Heading size="S">Apps</Heading>
<Body size="S">Manage apps that this user has been assigned to</Body> <Body size="S">Manage apps that this user has been assigned to</Body>
</div> </div>
<List> <List>

18
packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
View File

@ -3,14 +3,18 @@
import { Constants } from "@budibase/frontend-core" import { Constants } from "@budibase/frontend-core"
export let row export let row
$: value =
Constants.BbRoles.find(x => x.value === users.getUserRole(row))?.label || const TooltipMap = {
"Not Available" appUser: "Only has access to published apps",
developer: "Access to the app builder",
admin: "Full access",
}
$: role = Constants.BbRoles.find(x => x.value === users.getUserRole(row))
$: value = role?.label || "Not available"
$: tooltip = TooltipMap[role?.value] || ""
</script> </script>
<div on:click|stopPropagation> <div on:click|stopPropagation title={tooltip}>
{value} {value}
</div> </div>
<style>
</style>

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

@ -8,11 +8,9 @@
Layout, Layout,
Modal, Modal,
ModalContent, ModalContent,
Icon, Search,
notifications, notifications,
Pagination, Pagination,
Search,
Label,
} from "@budibase/bbui" } from "@budibase/bbui"
import AddUserModal from "./_components/AddUserModal.svelte" import AddUserModal from "./_components/AddUserModal.svelte"
import { users, groups, auth } from "stores/portal" import { users, groups, auth } from "stores/portal"
@ -30,21 +28,6 @@
import { Constants } from "@budibase/frontend-core" import { Constants } from "@budibase/frontend-core"
import { get } from "svelte/store" import { get } from "svelte/store"
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 email //let email
let enrichedUsers = [] let enrichedUsers = []
let createUserModal, let createUserModal,
@ -236,19 +219,8 @@
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading>Users</Heading> <Heading>Users</Heading>
<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>
<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>
<Layout gap="S" noPadding> <div class="controls">
<ButtonGroup> <ButtonGroup>
<Button <Button
dataCy="add-user" dataCy="add-user"
@ -256,39 +228,43 @@
icon="UserAdd" icon="UserAdd"
cta>Add users</Button cta>Add users</Button
> >
<Button on:click={importUsersModal.show} icon="Import" primary <Button
>Import users</Button on:click={importUsersModal.show}
icon="Import"
secondary
newStyles
> >
Import users
<div class="field"> </Button>
<Label size="L">Search email</Label> </ButtonGroup>
<Search bind:value={searchEmail} placeholder="" /> <div class="controls-right">
</div> <Search bind:value={searchEmail} placeholder="Search email" />
{#if selectedRows.length > 0} {#if selectedRows.length > 0}
<DeleteRowsButton on:updaterows {selectedRows} {deleteRows} /> <DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
{/if} {/if}
</ButtonGroup>
<Table
on:click={({ detail }) => $goto(`./${detail._id}`)}
{schema}
bind:selectedRows
data={enrichedUsers}
allowEditColumns={false}
allowEditRows={false}
allowSelectRows={true}
showHeaderBorder={false}
{customRenderers}
/>
<div class="pagination">
<Pagination
page={$pageInfo.pageNumber}
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
goToPrevPage={pageInfo.prevPage}
goToNextPage={pageInfo.nextPage}
/>
</div> </div>
</Layout> </div>
<Table
on:click={({ detail }) => $goto(`./${detail._id}`)}
{schema}
bind:selectedRows
data={enrichedUsers}
allowEditColumns={false}
allowEditRows={false}
allowSelectRows={true}
showHeaderBorder={false}
{customRenderers}
/>
<div class="pagination">
<Pagination
page={$pageInfo.pageNumber}
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
goToPrevPage={pageInfo.prevPage}
goToNextPage={pageInfo.nextPage}
/>
</div>
</Layout> </Layout>
<Modal bind:this={createUserModal}> <Modal bind:this={createUserModal}>
@ -325,28 +301,19 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
margin-top: var(--spacing-xl);
} }
.field { .controls {
display: flex; display: flex;
align-items: center;
flex-direction: row; flex-direction: row;
grid-gap: var(--spacing-m); justify-content: space-between;
margin-left: auto; align-items: center;
} }
.controls-right {
.field > :global(*) + :global(*) {
margin-left: var(--spacing-m);
}
.access-description {
display: flex; display: flex;
margin-top: var(--spacing-xl); flex-direction: row;
opacity: 0.8; justify-content: flex-end;
} align-items: center;
gap: var(--spacing-xl);
.access-text {
margin-left: var(--spacing-m);
} }
</style> </style>