Fix app list in user details page styles
This commit is contained in:
parent
7c4bf7aedd
commit
a6a1d2226c
2 changed files with 22 additions and 22 deletions
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue