CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-15 11:15:59 +12:00
Code Issues Projects Releases Wiki Activity

Fix app list in user details page styles

Browse source
This commit is contained in:
Andrew Kingston 2022-08-02 16:06:20 +01:00
parent 7c4bf7aedd
commit a6a1d2226c
2 changed files with 22 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/bbui/src/List/ListItem.svelte
View file

@ -9,11 +9,12 @@
export let avatar = false
export let title = null
export let subtitle = null
export let hoverable = false
$: initials = avatar ? title?.[0] : null
</script>
<div class="list-item">
<div class="list-item" class:hoverable on:click>
<div class="left">
{#if icon}
<div class="icon" style="background: {iconBackground || `transparent`};">
@ -39,11 +40,12 @@
.list-item {
padding: 0 16px;
height: 56px;
background: var(--spectrum-alias-background-color-tertiary);
background: var(--spectrum-global-color-gray-50);
display: flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid var(--spectrum-global-color-gray-300);
transition: background 130ms ease-out;
}
.list-item:not(:first-child) {
border-top: none;
@ -56,6 +58,10 @@
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.hoverable:hover {
cursor: pointer;
background: var(--spectrum-global-color-gray-75);
}
.left,
.right {
display: flex;

34
packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
View file

@ -345,25 +345,22 @@
<List>
{#if allAppList.length}
{#each allAppList as app}
<div
class="pointer"
<ListItem
title={app.name}
iconBackground={app?.icon?.color || ""}
icon={app?.icon?.name || "Apps"}
hoverable
on:click={$goto(`../../overview/${app.devId}`)}
>
<ListItem
title={app.name}
iconBackground={app?.icon?.color || ""}
icon={app?.icon?.name || "Apps"}
>
<div class="title ">
<StatusLight
square
color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
>
{getRoleLabel(getHighestRole(app.roles))}
</StatusLight>
</div>
</ListItem>
</div>
<div class="title ">
<StatusLight
square
color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
>
{getRoleLabel(getHighestRole(app.roles))}
</StatusLight>
</div>
</ListItem>
{/each}
{:else}
<ListItem icon="Apps" title="No apps" />
@ -384,9 +381,6 @@
</Modal>
<style>
.pointer {
cursor: pointer;
}
.fields {
display: grid;
grid-gap: var(--spacing-m);