From b838a66954200678a149d5fdf40a811a35c6143c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 2 Aug 2022 16:41:15 +0100 Subject: [PATCH] Update styles in user details page and user list page --- .../portal/manage/users/[userId].svelte | 22 ++-- .../_components/RoleTableRenderer.svelte | 18 +-- .../builder/portal/manage/users/index.svelte | 117 +++++++----------- 3 files changed, 62 insertions(+), 95 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte index df228f8fbc..74a1629357 100644 --- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte +++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte @@ -216,15 +216,13 @@ {#if loaded} - - -
- $goto("./")} icon="ArrowLeft"> - Back - -
- - + +
+ $goto("./")} icon="ArrowLeft"> + Back + +
+
@@ -253,8 +251,6 @@
{/if}
- -
@@ -291,7 +287,7 @@
- User groups + User groups Add or remove this user from user groups
@@ -337,7 +333,7 @@
- Apps + Apps Manage apps that this user has been assigned to
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte index 4f481d374c..0a2daf7580 100644 --- a/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte +++ b/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte @@ -3,14 +3,18 @@ import { Constants } from "@budibase/frontend-core" export let row - $: value = - Constants.BbRoles.find(x => x.value === users.getUserRole(row))?.label || - "Not Available" + + const TooltipMap = { + 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] || "" -
+
{value}
- - diff --git a/packages/builder/src/pages/builder/portal/manage/users/index.svelte b/packages/builder/src/pages/builder/portal/manage/users/index.svelte index b6cac9ece3..b5b4881d14 100644 --- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte +++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte @@ -8,11 +8,9 @@ Layout, Modal, ModalContent, - Icon, + Search, notifications, Pagination, - Search, - Label, } from "@budibase/bbui" import AddUserModal from "./_components/AddUserModal.svelte" import { users, groups, auth } from "stores/portal" @@ -30,21 +28,6 @@ import { Constants } from "@budibase/frontend-core" 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 enrichedUsers = [] let createUserModal, @@ -236,19 +219,8 @@ Users Add users and control who gets access to your published apps - -
- {#each accessTypes as type} -
- -
- {type.description} -
-
- {/each} -
- +
- - -
- - -
+ Import users + + +
+ {#if selectedRows.length > 0} {/if} - - $goto(`./${detail._id}`)} - {schema} - bind:selectedRows - data={enrichedUsers} - allowEditColumns={false} - allowEditRows={false} - allowSelectRows={true} - showHeaderBorder={false} - {customRenderers} - /> - - + + +
$goto(`./${detail._id}`)} + {schema} + bind:selectedRows + data={enrichedUsers} + allowEditColumns={false} + allowEditRows={false} + allowSelectRows={true} + showHeaderBorder={false} + {customRenderers} + /> + @@ -325,28 +301,19 @@ display: flex; flex-direction: row; justify-content: flex-end; - margin-top: var(--spacing-xl); } - .field { + .controls { display: flex; - align-items: center; flex-direction: row; - grid-gap: var(--spacing-m); - margin-left: auto; + justify-content: space-between; + align-items: center; } - - .field > :global(*) + :global(*) { - margin-left: var(--spacing-m); - } - - .access-description { + .controls-right { display: flex; - margin-top: var(--spacing-xl); - opacity: 0.8; - } - - .access-text { - margin-left: var(--spacing-m); + flex-direction: row; + justify-content: flex-end; + align-items: center; + gap: var(--spacing-xl); }