Update groups page styles when user does not have access

This commit is contained in:
Andrew Kingston 2022-09-27 09:30:54 +01:00
parent b40e18e2f9
commit 8732fe9327
1 changed files with 30 additions and 24 deletions

View File

@ -90,16 +90,14 @@
<Layout noPadding gap="M"> <Layout noPadding gap="M">
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<div class="title">
<Heading size="M">User groups</Heading> <Heading size="M">User groups</Heading>
{#if !$licensing.groupsEnabled} {#if !$licensing.groupsEnabled}
<Tags> <Tags>
<div class="tags">
<div class="tag">
<Tag icon="LockClosed">Pro plan</Tag> <Tag icon="LockClosed">Pro plan</Tag>
</div>
</div>
</Tags> </Tags>
{/if} {/if}
</div>
<Body> <Body>
Easily assign and manage your users' access with user groups. Easily assign and manage your users' access with user groups.
{#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud} {#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
@ -123,6 +121,7 @@
{:else} {:else}
<Button <Button
newStyles newStyles
primary
disabled={!$auth.accountPortalAccess && $admin.cloud} disabled={!$auth.accountPortalAccess && $admin.cloud}
on:click={$licensing.goToUpgradePage()} on:click={$licensing.goToUpgradePage()}
> >
@ -140,10 +139,13 @@
</Button> </Button>
{/if} {/if}
</ButtonGroup> </ButtonGroup>
{#if $licensing.groupsEnabled}
<div class="controls-right"> <div class="controls-right">
<Search bind:value={searchString} placeholder="Search" /> <Search bind:value={searchString} placeholder="Search" />
</div> </div>
{/if}
</div> </div>
{#if $licensing.groupsEnabled}
<Table <Table
on:click={({ detail }) => $goto(`./${detail._id}`)} on:click={({ detail }) => $goto(`./${detail._id}`)}
{schema} {schema}
@ -152,6 +154,7 @@
allowEditRows={false} allowEditRows={false}
{customRenderers} {customRenderers}
/> />
{/if}
</Layout> </Layout>
<Modal bind:this={modal}> <Modal bind:this={modal}>
@ -175,8 +178,11 @@
.controls-right :global(.spectrum-Search) { .controls-right :global(.spectrum-Search) {
width: 200px; width: 200px;
} }
.tag { .title {
margin-top: var(--spacing-xs); display: flex;
margin-left: var(--spacing-m); flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: var(--spacing-m);
} }
</style> </style>