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

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

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