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>
<Heading size="M">User groups</Heading> <div class="title">
{#if !$licensing.groupsEnabled} <Heading size="M">User groups</Heading>
<Tags> {#if !$licensing.groupsEnabled}
<div class="tags"> <Tags>
<div class="tag"> <Tag icon="LockClosed">Pro plan</Tag>
<Tag icon="LockClosed">Pro plan</Tag> </Tags>
</div> {/if}
</div> </div>
</Tags>
{/if}
<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,18 +139,22 @@
</Button> </Button>
{/if} {/if}
</ButtonGroup> </ButtonGroup>
<div class="controls-right"> {#if $licensing.groupsEnabled}
<Search bind:value={searchString} placeholder="Search" /> <div class="controls-right">
</div> <Search bind:value={searchString} placeholder="Search" />
</div>
{/if}
</div> </div>
<Table {#if $licensing.groupsEnabled}
on:click={({ detail }) => $goto(`./${detail._id}`)} <Table
{schema} on:click={({ detail }) => $goto(`./${detail._id}`)}
data={filteredGroups} {schema}
allowEditColumns={false} data={filteredGroups}
allowEditRows={false} allowEditColumns={false}
{customRenderers} allowEditRows={false}
/> {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>