70050332e6
Settings modal update includies, improved spacing, element sizing. Working with this part of the platform felt a little brittle. It might be the fact it's a modal. The frontend component section had a different layout that the block section in the backend and workflow section - updated to follow suit. Dataform button updated and improved. Settings button color updated Additonal data blocks added which are pretty popular (not essential but took me mew a seconds to add and will save me a decent bit in the future)
74 lines
1.3 KiB
Svelte
74 lines
1.3 KiB
Svelte
<script>
|
|
import { cssVars, createClasses } from "./cssVars"
|
|
|
|
export let className = ""
|
|
export let onLoad
|
|
export let backgroundColor
|
|
export let color
|
|
export let borderWidth
|
|
export let borderColor
|
|
export let borderStyle
|
|
export let logoUrl
|
|
export let title
|
|
export let _bb
|
|
|
|
let itemContainer
|
|
let hasLoaded
|
|
let currentChildren
|
|
|
|
$: cssVariables = {
|
|
backgroundColor,
|
|
color,
|
|
borderWidth,
|
|
borderColor,
|
|
borderStyle,
|
|
}
|
|
|
|
$: {
|
|
if (itemContainer) {
|
|
_bb.attachChildren(itemContainer)
|
|
if (!hasLoaded) {
|
|
_bb.call(onLoad)
|
|
hasLoaded = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<nav use:cssVars={cssVariables}>
|
|
<a href="/">
|
|
<img class="logo" alt="logo" src={logoUrl} height="48" />
|
|
<span>{title}</span>
|
|
</a>
|
|
<div class="menu-items" bind:this={itemContainer} />
|
|
</nav>
|
|
|
|
<style>
|
|
nav {
|
|
color: var(--color);
|
|
background-color: var(--backgroundColor);
|
|
align-items: center;
|
|
display: flex;
|
|
font-weight: bold;
|
|
justify-content: space-between;
|
|
padding: 20px 0px;
|
|
}
|
|
|
|
nav > a {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.5em;
|
|
color: var(--color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav a img {
|
|
margin-right: 16px;
|
|
}
|
|
.menu-items {
|
|
display: flex;
|
|
}
|
|
.menu-items > :global(*) {
|
|
margin: 0 10px;
|
|
}
|
|
</style>
|