1
0
Fork 0
mirror of synced 2024-09-10 14:35:47 +12:00

fix height and add null state

This commit is contained in:
Peter Clement 2024-01-11 11:57:23 +00:00
parent ec88e14b75
commit 30cbcff1b1

View file

@ -1,6 +1,6 @@
<script> <script>
import CreateAutomationModal from "./CreateAutomationModal.svelte" import CreateAutomationModal from "./CreateAutomationModal.svelte"
import { Modal, notifications } from "@budibase/bbui" import { Modal, notifications, Layout } from "@budibase/bbui"
import NavHeader from "components/common/NavHeader.svelte" import NavHeader from "components/common/NavHeader.svelte"
import { onMount } from "svelte" import { onMount } from "svelte"
import { import {
@ -53,16 +53,24 @@
/> />
</div> </div>
<div class="side-bar-nav"> <div class="side-bar-nav">
{#each filteredAutomations as automation} {#if filteredAutomations.length}
<NavItem {#each filteredAutomations as automation}
text={automation.name} <NavItem
selected={automation._id === selectedAutomationId} text={automation.name}
on:click={() => selectAutomation(automation._id)} selected={automation._id === selectedAutomationId}
selectedBy={$userSelectedResourceMap[automation._id]} on:click={() => selectAutomation(automation._id)}
> selectedBy={$userSelectedResourceMap[automation._id]}
<EditAutomationPopover {automation} /> >
</NavItem> <EditAutomationPopover {automation} />
{/each} </NavItem>
{/each}
{:else}
<Layout paddingY="none" paddingX="L">
<div class="no-results">
There aren't any automations matching that name
</div>
</Layout>
{/if}
</div> </div>
</div> </div>
@ -88,7 +96,6 @@
} }
.side-bar-controls { .side-bar-controls {
flex: 0 0 60px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
@ -96,13 +103,13 @@
gap: var(--spacing-l); gap: var(--spacing-l);
padding: 0 var(--spacing-l); padding: 0 var(--spacing-l);
} }
.side-bar-controls :global(.spectrum-Icon) {
color: var(--spectrum-global-color-gray-700);
}
.side-bar-nav { .side-bar-nav {
flex: 1 1 auto; flex: 1 1 auto;
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.no-results {
color: var(--spectrum-global-color-gray-600);
}
</style> </style>