Merge remote-tracking branch 'origin/cheeks-lab-day-portal-redesign' into feature/user-onboarding-overlays
This commit is contained in:
commit
1d2583b896
|
@ -6,7 +6,7 @@ services:
|
||||||
minio-service:
|
minio-service:
|
||||||
container_name: budi-minio-dev
|
container_name: budi-minio-dev
|
||||||
restart: on-failure
|
restart: on-failure
|
||||||
image: minio/minio
|
image: minio/minio:RELEASE.2022-10-24T18-35-07Z
|
||||||
volumes:
|
volumes:
|
||||||
- minio_data:/data
|
- minio_data:/data
|
||||||
ports:
|
ports:
|
||||||
|
|
|
@ -33,6 +33,7 @@
|
||||||
export let allowSelectRows
|
export let allowSelectRows
|
||||||
export let allowEditRows = true
|
export let allowEditRows = true
|
||||||
export let allowEditColumns = true
|
export let allowEditColumns = true
|
||||||
|
export let allowClickRows = true
|
||||||
export let selectedRows = []
|
export let selectedRows = []
|
||||||
export let customRenderers = []
|
export let customRenderers = []
|
||||||
export let disableSorting = false
|
export let disableSorting = false
|
||||||
|
@ -373,7 +374,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
{#if sortedRows?.length}
|
{#if sortedRows?.length}
|
||||||
{#each sortedRows as row, idx}
|
{#each sortedRows as row, idx}
|
||||||
<div class="spectrum-Table-row">
|
<div class="spectrum-Table-row" class:clickable={allowClickRows}>
|
||||||
{#if showEditColumn}
|
{#if showEditColumn}
|
||||||
<div
|
<div
|
||||||
class:noBorderCheckbox={!showHeaderBorder}
|
class:noBorderCheckbox={!showHeaderBorder}
|
||||||
|
@ -566,8 +567,12 @@
|
||||||
/* Table rows */
|
/* Table rows */
|
||||||
.spectrum-Table-row {
|
.spectrum-Table-row {
|
||||||
display: contents;
|
display: contents;
|
||||||
|
cursor: auto;
|
||||||
}
|
}
|
||||||
.spectrum-Table-row:hover .spectrum-Table-cell {
|
.spectrum-Table-row.clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.spectrum-Table-row.clickable:hover .spectrum-Table-cell {
|
||||||
background-color: var(--spectrum-global-color-gray-100);
|
background-color: var(--spectrum-global-color-gray-100);
|
||||||
}
|
}
|
||||||
.wrapper--quiet .spectrum-Table-row {
|
.wrapper--quiet .spectrum-Table-row {
|
||||||
|
|
|
@ -39,15 +39,21 @@
|
||||||
{#if showWarning}
|
{#if showWarning}
|
||||||
<Icon name="Alert" />
|
<Icon name="Alert" />
|
||||||
{/if}
|
{/if}
|
||||||
<div class="heading header-item">
|
<Heading size="XS" weight="light">
|
||||||
<Heading size="XS" weight="light">{usage.name}</Heading>
|
<span class="nowrap">
|
||||||
</div>
|
{usage.name}
|
||||||
|
</span>
|
||||||
|
</Heading>
|
||||||
</div>
|
</div>
|
||||||
{#if unlimited}
|
<Body size="S">
|
||||||
<Body size="S">{usage.used} / Unlimited</Body>
|
<span class="nowrap">
|
||||||
{:else}
|
{#if unlimited}
|
||||||
<Body size="S">{usage.used} / {usage.total}</Body>
|
{usage.used} / Unlimited
|
||||||
{/if}
|
{:else}
|
||||||
|
{usage.used} / {usage.total}
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
</Body>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{#if unlimited}
|
{#if unlimited}
|
||||||
|
@ -89,13 +95,14 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
gap: var(--spacing-m);
|
||||||
}
|
}
|
||||||
.header-container {
|
.header-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.heading {
|
.nowrap {
|
||||||
margin-top: 3px;
|
white-space: nowrap;
|
||||||
margin-left: 5px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,9 +1,14 @@
|
||||||
<script>
|
<script>
|
||||||
import Logo from "assets/bb-emblem.svg"
|
import Logo from "assets/bb-emblem.svg"
|
||||||
import { goto } from "@roxi/routify"
|
import { goto } from "@roxi/routify"
|
||||||
|
import { organisation } from "stores/portal"
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<img src={Logo} alt="Budibase Logo" on:click={() => $goto("./apps")} />
|
<img
|
||||||
|
src={$organisation.logoUrl || Logo}
|
||||||
|
alt="Budibase Logo"
|
||||||
|
on:click={() => $goto("./apps")}
|
||||||
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
img {
|
img {
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
{:else if !$admin.cloud && $auth.isAdmin}
|
{:else if !$admin.cloud && $auth.isAdmin}
|
||||||
<Button
|
<Button
|
||||||
cta
|
cta
|
||||||
|
size="S"
|
||||||
on:click={() => $goto("/builder/portal/account/upgrade")}
|
on:click={() => $goto("/builder/portal/account/upgrade")}
|
||||||
on:click
|
on:click
|
||||||
>
|
>
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
|
|
||||||
<ActionMenu align="right" dataCy="user-menu">
|
<ActionMenu align="right" dataCy="user-menu">
|
||||||
<div slot="control" class="user-dropdown">
|
<div slot="control" class="user-dropdown">
|
||||||
<Avatar size="L" initials={$auth.initials} url={$auth.user.pictureUrl} />
|
<Avatar size="M" initials={$auth.initials} url={$auth.user.pictureUrl} />
|
||||||
<Icon size="XL" name="ChevronDown" />
|
<Icon size="XL" name="ChevronDown" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Moon" on:click={() => themeModal.show()} dataCy="theme">
|
<MenuItem icon="Moon" on:click={() => themeModal.show()} dataCy="theme">
|
||||||
|
|
|
@ -32,6 +32,8 @@
|
||||||
$: license = $auth.user?.license
|
$: license = $auth.user?.license
|
||||||
$: accountPortalAccess = $auth?.user?.accountPortalAccess
|
$: accountPortalAccess = $auth?.user?.accountPortalAccess
|
||||||
$: quotaReset = quotaUsage?.quotaReset
|
$: quotaReset = quotaUsage?.quotaReset
|
||||||
|
$: canManagePlan =
|
||||||
|
($admin.cloud && accountPortalAccess) || (!$admin.cloud && $auth.isAdmin)
|
||||||
|
|
||||||
const setMonthlyUsage = () => {
|
const setMonthlyUsage = () => {
|
||||||
monthlyUsage = []
|
monthlyUsage = []
|
||||||
|
@ -184,7 +186,7 @@
|
||||||
</Body>
|
</Body>
|
||||||
</Layout>
|
</Layout>
|
||||||
<Divider />
|
<Divider />
|
||||||
{#if $auth?.user?.accountPortalAccess}
|
{#if canManagePlan}
|
||||||
<Body>
|
<Body>
|
||||||
To upgrade your plan and usage limits visit your
|
To upgrade your plan and usage limits visit your
|
||||||
<Link size="L" on:click={goToAccountPortal}>account</Link>.
|
<Link size="L" on:click={goToAccountPortal}>account</Link>.
|
||||||
|
@ -247,6 +249,7 @@
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.column {
|
.column {
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
|
|
|
@ -260,10 +260,16 @@
|
||||||
.desktop {
|
.desktop {
|
||||||
display: contents;
|
display: contents;
|
||||||
}
|
}
|
||||||
|
.mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.desktop {
|
.desktop {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.mobile {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -144,7 +144,7 @@
|
||||||
|
|
||||||
<ModalContent
|
<ModalContent
|
||||||
size="M"
|
size="M"
|
||||||
title="Assign users to your app"
|
title="Assign access to your app"
|
||||||
confirmText="Done"
|
confirmText="Done"
|
||||||
cancelText="Cancel"
|
cancelText="Cancel"
|
||||||
onConfirm={() => addData(data)}
|
onConfirm={() => addData(data)}
|
||||||
|
|
|
@ -192,7 +192,7 @@
|
||||||
<Layout noPadding gap="S">
|
<Layout noPadding gap="S">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading size="S">Users</Heading>
|
<Heading size="S">Users</Heading>
|
||||||
<Button secondary on:click={showUsersModal}>Assign user</Button>
|
<Button cta on:click={showUsersModal}>Assign user</Button>
|
||||||
</div>
|
</div>
|
||||||
<Table
|
<Table
|
||||||
customPlaceholder
|
customPlaceholder
|
||||||
|
@ -217,11 +217,11 @@
|
||||||
</Layout>
|
</Layout>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if $usersFetch.loaded && $licensing.groupsEnabled && appGroups.length}
|
{#if $usersFetch.loaded && $licensing.groupsEnabled}
|
||||||
<Layout noPadding gap="S">
|
<Layout noPadding gap="S">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading size="S">Groups</Heading>
|
<Heading size="S">Groups</Heading>
|
||||||
<Button secondary on:click={showGroupsModal}>Assign group</Button>
|
<Button cta on:click={showGroupsModal}>Assign group</Button>
|
||||||
</div>
|
</div>
|
||||||
<Table
|
<Table
|
||||||
customPlaceholder
|
customPlaceholder
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
ActionButton,
|
|
||||||
Button,
|
Button,
|
||||||
DatePicker,
|
DatePicker,
|
||||||
Divider,
|
Divider,
|
||||||
|
@ -246,9 +245,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<ActionButton on:click={modal.show} icon="SaveAsFloppy">
|
<Button cta on:click={modal.show}>Create new backup</Button>
|
||||||
Create new backup
|
|
||||||
</ActionButton>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="table">
|
<div class="table">
|
||||||
|
|
|
@ -103,6 +103,7 @@
|
||||||
allowEditColumns={false}
|
allowEditColumns={false}
|
||||||
allowEditRows={false}
|
allowEditRows={false}
|
||||||
allowSelectRows={false}
|
allowSelectRows={false}
|
||||||
|
allowClickRows={false}
|
||||||
{customRenderers}
|
{customRenderers}
|
||||||
/>
|
/>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -250,7 +250,7 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--spacing-m);
|
gap: var(--spacing-l);
|
||||||
}
|
}
|
||||||
.header :global(.spectrum-Heading) {
|
.header :global(.spectrum-Heading) {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
|
|
@ -389,6 +389,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
gap: var(--spacing-l);
|
||||||
}
|
}
|
||||||
.tableTitle {
|
.tableTitle {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -396,7 +397,6 @@
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
.subtitle {
|
.subtitle {
|
||||||
padding: 0 0 0 var(--spacing-m);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
Loading…
Reference in New Issue