Basic implementation of sidebar design.
This commit is contained in:
pngwn
parent
459520dc78
commit
8ef407f44e
|
|
@ -7,7 +7,7 @@
|
|||
--primary5: #454ca00c;
|
||||
--primarydark: #3F448A;
|
||||
|
||||
--secondary100: #162B4DFF;
|
||||
--secondary100:#828fa5;
|
||||
--secondary75: #162B4DBF;
|
||||
--secondary50: #162B4D80;
|
||||
--secondary25: #162B4D40;
|
||||
|
|
@ -52,6 +52,9 @@
|
|||
--heavybodytext: var(--fontbold) "regular" var(--secondary100) 16pt;
|
||||
--quotation: var(--fontnormal) "italics" var(--darkslate) 16pt;
|
||||
--smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt;
|
||||
|
||||
--background-button: #e6eeff;
|
||||
--button-text: #0055ff;
|
||||
}
|
||||
|
||||
html, body {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
|
||||
import {
|
||||
last,
|
||||
sortBy,
|
||||
filter,
|
||||
import {
|
||||
last,
|
||||
sortBy,
|
||||
filter,
|
||||
map,
|
||||
uniqWith,
|
||||
isEqual,
|
||||
|
|
@ -36,22 +36,22 @@ const normalizedName = name => pipe(name, [
|
|||
]);
|
||||
|
||||
|
||||
const isOnThisLevel = (c) =>
|
||||
const isOnThisLevel = (c) =>
|
||||
normalizedName(c.name).split("/").length === pathPartsThisLevel
|
||||
&&
|
||||
(!thisLevel || normalizedName(c.name).startsWith(normalizedName(thisLevel)));
|
||||
|
||||
const notOnThisLevel = (c) => !isOnThisLevel(c);
|
||||
|
||||
const isInSubfolder = (subfolder, c) =>
|
||||
const isInSubfolder = (subfolder, c) =>
|
||||
normalizedName(c.name).startsWith(
|
||||
trimCharsStart("/")(
|
||||
joinPath([thisLevel, subfolder])));
|
||||
|
||||
const isOnNextLevel = (c) =>
|
||||
const isOnNextLevel = (c) =>
|
||||
normalizedName(c.name).split("/").length === pathPartsThisLevel + 1
|
||||
|
||||
const lastPartOfName = (c) =>
|
||||
const lastPartOfName = (c) =>
|
||||
last(c.name.split("/"))
|
||||
|
||||
const subFolder = (c) => {
|
||||
|
|
@ -84,32 +84,32 @@ const expandFolder = folder => {
|
|||
1,
|
||||
expandedFolder);
|
||||
subfolders = newFolders;
|
||||
|
||||
|
||||
}
|
||||
|
||||
const isComponentSelected = (type, current,c) =>
|
||||
type==="screen"
|
||||
&& current
|
||||
&& current
|
||||
&& current.name === c.name
|
||||
|
||||
const isFolderSelected = (current, folder) =>
|
||||
const isFolderSelected = (current, folder) =>
|
||||
isInSubfolder(current, folder)
|
||||
|
||||
|
||||
|
||||
$: {
|
||||
pathPartsThisLevel = !thisLevel
|
||||
pathPartsThisLevel = !thisLevel
|
||||
? 1
|
||||
: normalizedName(thisLevel).split("/").length + 1;
|
||||
|
||||
componentsThisLevel =
|
||||
componentsThisLevel =
|
||||
pipe(components, [
|
||||
filter(isOnThisLevel),
|
||||
map(c => ({component:c, title:lastPartOfName(c)})),
|
||||
sortBy("title")
|
||||
]);
|
||||
|
||||
subfolders =
|
||||
subfolders =
|
||||
pipe(components, [
|
||||
filter(notOnThisLevel),
|
||||
sortBy("name"),
|
||||
|
|
@ -120,15 +120,15 @@ $: {
|
|||
|
||||
</script>
|
||||
|
||||
<div class="root" style={`padding-left: calc(10px * ${pathPartsThisLevel})`}>
|
||||
|
||||
<div class="root">
|
||||
|
||||
{#each subfolders as folder}
|
||||
<div class="hierarchy-item folder"
|
||||
on:click|stopPropagation={() => expandFolder(folder)}>
|
||||
<span>{@html getIcon(folder.isExpanded ? "chevron-down" : "chevron-right", "16")}</span>
|
||||
<span class="title" class:currentfolder={$store.currentFrontEndItem && isInSubfolder(folder.name, $store.currentFrontEndItem)}>{folder.name}</span>
|
||||
{#if folder.isExpanded}
|
||||
<svelte:self components={subComponents(folder.name)}
|
||||
<svelte:self components={subComponents(folder.name)}
|
||||
thisLevel={folder.path} />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -137,7 +137,7 @@ $: {
|
|||
{#each componentsThisLevel as component}
|
||||
<div class="hierarchy-item component" class:selected={isComponentSelected($store.currentFrontEndType, $store.currentFrontEndItem, component.component)}
|
||||
on:click|stopPropagation={() => store.setCurrentScreen(component.component.name)}>
|
||||
<span>{@html getIcon("circle", "7")}</span>
|
||||
<!-- <span>{@html getIcon("circle", "7")}</span> -->
|
||||
<span class="title">{component.title}</span>
|
||||
</div>
|
||||
{/each}
|
||||
|
|
@ -147,31 +147,33 @@ $: {
|
|||
<style>
|
||||
|
||||
.root {
|
||||
color: var(--secondary50);
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
color: #828fa5;
|
||||
}
|
||||
|
||||
.hierarchy-item {
|
||||
cursor: pointer;
|
||||
padding: 5px 0px;
|
||||
padding: 11px 7px;
|
||||
|
||||
margin: 5px 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.hierarchy-item:hover {
|
||||
color: var(--secondary);
|
||||
/* color: var(--secondary); */
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.component {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
.currentfolder {
|
||||
color: var(--secondary100);
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--primary100);
|
||||
font-weight: bold;
|
||||
color: var(--button-text);
|
||||
background: var(--background-button)!important;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -179,4 +181,4 @@ $: {
|
|||
}
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,14 +41,15 @@ const settings = () => {
|
|||
|
||||
<div class="components-list-container">
|
||||
<div class="nav-group-header">
|
||||
<div>{@html getIcon("sidebar","18")}</div>
|
||||
|
||||
<span class="components-nav-header">Screens</span>
|
||||
<div>
|
||||
<IconButton icon="settings"
|
||||
<!-- <IconButton icon="settings"
|
||||
size="14px"
|
||||
on:click={settings}/>
|
||||
<IconButton icon="plus"
|
||||
on:click={newComponent}/>
|
||||
on:click={settings}/> -->
|
||||
<!-- <IconButton icon="plus"
|
||||
on:click={newComponent}/> -->
|
||||
<button on:click={newComponent}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-items-container">
|
||||
|
|
@ -80,6 +81,25 @@ const settings = () => {
|
|||
|
||||
|
||||
<style>
|
||||
button {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: var(--background-button);
|
||||
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
padding-bottom: 10px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--button-text);
|
||||
}
|
||||
|
||||
.root {
|
||||
display: grid;
|
||||
|
|
@ -112,7 +132,9 @@ const settings = () => {
|
|||
}
|
||||
|
||||
.components-nav-header {
|
||||
font-size: .9rem;
|
||||
font-size: 0.75rem;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-group-header {
|
||||
|
|
@ -125,11 +147,12 @@ const settings = () => {
|
|||
}
|
||||
|
||||
.nav-group-header {
|
||||
display:grid;
|
||||
grid-template-columns: [icon] auto [title] 1fr [button] auto;
|
||||
display: flex;
|
||||
padding: 2rem 0 0 0;
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-group-header>div:nth-child(1) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue