adds basic tab view to the components pane
This commit is contained in:
kevmodrome
parent
02b09abd79
commit
12067af0db
|
|
@ -1,4 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
|
// This should be fetched from somewhere in the future, rather than be hardcoded.
|
||||||
|
import components from "./temporaryPanelStructure.js"
|
||||||
|
import Tab from "./ComponentTab/Tab.svelte"
|
||||||
|
|
||||||
import { splitName } from "./pagesParsing/splitRootComponentName.js"
|
import { splitName } from "./pagesParsing/splitRootComponentName.js"
|
||||||
import { store } from "builderStore"
|
import { store } from "builderStore"
|
||||||
import {
|
import {
|
||||||
|
|
@ -24,6 +28,9 @@
|
||||||
|
|
||||||
export let toggleTab
|
export let toggleTab
|
||||||
|
|
||||||
|
const categories = components.categories
|
||||||
|
let selectedCategory = categories[0]
|
||||||
|
|
||||||
let componentLibraries = []
|
let componentLibraries = []
|
||||||
let current_view = "text"
|
let current_view = "text"
|
||||||
let selectedComponent = null
|
let selectedComponent = null
|
||||||
|
|
@ -35,16 +42,13 @@
|
||||||
$: templatesByComponent = groupBy(t => t.component)($store.templates)
|
$: templatesByComponent = groupBy(t => t.component)($store.templates)
|
||||||
$: hierarchy = $store.hierarchy
|
$: hierarchy = $store.hierarchy
|
||||||
$: libraryModules = $store.libraries
|
$: libraryModules = $store.libraries
|
||||||
$: standaloneTemplates = pipe(
|
$: standaloneTemplates = pipe(templatesByComponent, [
|
||||||
templatesByComponent,
|
|
||||||
[
|
|
||||||
values,
|
values,
|
||||||
flatten,
|
flatten,
|
||||||
filter(t => !$store.components.some(c => c.name === t.component)),
|
filter(t => !$store.components.some(c => c.name === t.component)),
|
||||||
map(t => ({ name: splitName(t.component).componentName, template: t })),
|
map(t => ({ name: splitName(t.component).componentName, template: t })),
|
||||||
uniqBy(t => t.name),
|
uniqBy(t => t.name),
|
||||||
]
|
])
|
||||||
)
|
|
||||||
|
|
||||||
const addRootComponent = (component, allComponents) => {
|
const addRootComponent = (component, allComponents) => {
|
||||||
const { libName } = splitName(component.name)
|
const { libName } = splitName(component.name)
|
||||||
|
|
@ -118,84 +122,18 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
<Select on:change={e => (selectedLib = e.target.value)}>
|
<ul class="tabs">
|
||||||
{#each componentLibraries as lib}
|
{#each categories as category}
|
||||||
<option value={lib.libName}>{lib.libName}</option>
|
|
||||||
{/each}
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<div class="library-container">
|
|
||||||
<!-- <ul>
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
class:selected={current_view === 'text'}
|
|
||||||
on:click={() => (current_view = 'text')}>
|
|
||||||
<InputIcon />
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
class:selected={current_view === 'layout'}
|
|
||||||
on:click={() => (current_view = 'layout')}>
|
|
||||||
<LayoutIcon />
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
class:selected={current_view === 'media'}
|
|
||||||
on:click={() => (current_view = 'media')}>
|
|
||||||
<ImageIcon />
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul> -->
|
|
||||||
|
|
||||||
{#if componentLibrary}
|
|
||||||
{#each generate_components_list(componentLibrary.components) as component}
|
|
||||||
<div class="component-container">
|
|
||||||
<div class="component" on:click={() => onComponentChosen(component)}>
|
|
||||||
<div class="name">{splitName(component.name).componentName}</div>
|
|
||||||
{#if (component.presets || templatesByComponent[component.name]) && component.name === selectedComponent}
|
|
||||||
<ul class="preset-menu">
|
|
||||||
{#if component.presets}
|
|
||||||
<span>{splitName(component.name).componentName} Presets</span>
|
|
||||||
{#each Object.keys(component.presets) as preset}
|
|
||||||
<li
|
<li
|
||||||
on:click|stopPropagation={() => onComponentChosen(component, preset)}>
|
on:click={() => (selectedCategory = category)}
|
||||||
{preset}
|
class:active={selectedCategory === category}>
|
||||||
|
{category.name}
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
|
||||||
{#if templatesByComponent[component.name]}
|
|
||||||
<span>
|
|
||||||
{splitName(component.name).componentName} Templates
|
|
||||||
</span>
|
|
||||||
{#each templatesByComponent[component.name] as template}
|
|
||||||
<li
|
|
||||||
on:click|stopPropagation={() => onTemplateChosen(template)}>
|
|
||||||
{template.description}
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
</ul>
|
</ul>
|
||||||
{/if}
|
<div class="panel">
|
||||||
|
<Tab components={selectedCategory.components} />
|
||||||
</div>
|
</div>
|
||||||
{#if component.presets || templatesByComponent[component.name]}
|
|
||||||
<Button
|
|
||||||
on:click={() => {
|
|
||||||
selectedComponent = selectedComponent ? null : component.name
|
|
||||||
}}>
|
|
||||||
<span
|
|
||||||
class="open-presets"
|
|
||||||
class:open={selectedComponent === component.name}>
|
|
||||||
...
|
|
||||||
</span>
|
|
||||||
</Button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
|
|
@ -218,108 +156,33 @@
|
||||||
</ConfirmDialog>
|
</ConfirmDialog>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.root {
|
.tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
}
|
|
||||||
|
|
||||||
.library-container {
|
|
||||||
padding: 0 0 10px 0;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
min-height: 0px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.component-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.component {
|
|
||||||
position: relative;
|
|
||||||
padding: 0 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid #d8d8d8;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin: 5px 0;
|
|
||||||
height: 40px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: #000333;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex: 1;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.component:hover {
|
|
||||||
background-color: var(--lightslate);
|
|
||||||
}
|
|
||||||
|
|
||||||
.component > .name {
|
|
||||||
color: #000333;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 13px;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
margin: 0 auto;
|
||||||
padding: 0;
|
padding: 0 30px;
|
||||||
}
|
border-bottom: 1px solid #d8d8d8;
|
||||||
|
|
||||||
.preset-menu {
|
|
||||||
flex-direction: column;
|
|
||||||
position: absolute;
|
|
||||||
top: 25px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1;
|
|
||||||
background: #fafafa;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 2px;
|
|
||||||
color: var(--secondary80);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preset-menu > span {
|
|
||||||
font-size: 13px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preset-menu li {
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-top: 13px;
|
font-weight: 500;
|
||||||
}
|
letter-spacing: 0.14px;
|
||||||
|
|
||||||
.preset-menu li:hover {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin-right: 20px;
|
color: #808192;
|
||||||
background: none;
|
margin: 0 5px;
|
||||||
border-radius: 5px;
|
padding: 0 8px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* li button {
|
.panel {
|
||||||
width: 100%;
|
padding: 20px;
|
||||||
height: 100%;
|
}
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 13px;
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
} */
|
|
||||||
|
|
||||||
/* .selected {
|
.active {
|
||||||
color: var(--button-text);
|
border-bottom: solid 3px #0055ff;
|
||||||
background: var(--background-button) !important;
|
color: #393c44;
|
||||||
} */
|
|
||||||
|
|
||||||
.open {
|
|
||||||
color: rgba(0, 85, 255, 1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.template-instance-label {
|
.template-instance-label {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<script>
|
||||||
|
export let components
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each components as component}{component.component}{/each}
|
||||||
|
|
@ -60,9 +60,7 @@
|
||||||
.switcher {
|
.switcher {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 20px;
|
margin: 20px;
|
||||||
padding: 0 20px 20px;
|
|
||||||
border-bottom: 1px solid #d8d8d8;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher > button {
|
.switcher > button {
|
||||||
|
|
@ -85,11 +83,4 @@
|
||||||
color: var(--secondary100);
|
color: var(--secondary100);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
height: 0px;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 0 20px 40px 20px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,154 @@
|
||||||
|
export default {
|
||||||
|
categories: [
|
||||||
|
{
|
||||||
|
name: 'Basic',
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
component: 'Text',
|
||||||
|
icon: 'Text',
|
||||||
|
type: [
|
||||||
|
{
|
||||||
|
_component: '@budibase/standard-components/header',
|
||||||
|
name: 'Headline',
|
||||||
|
icon: 'headline',
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: 'options',
|
||||||
|
options: [
|
||||||
|
'h1',
|
||||||
|
'h2'
|
||||||
|
],
|
||||||
|
'default': 'h1'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_component: '@budibase/standard-components/text',
|
||||||
|
name: 'Paragraph',
|
||||||
|
icon: 'paragraph'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Button',
|
||||||
|
icon: 'Text',
|
||||||
|
type: [
|
||||||
|
{
|
||||||
|
_component: '@budibase/standard-components/header',
|
||||||
|
name: 'Headline',
|
||||||
|
icon: 'headline',
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: 'options',
|
||||||
|
options: [
|
||||||
|
'h1',
|
||||||
|
'h2'
|
||||||
|
],
|
||||||
|
'default': 'h1'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_component: '@budibase/standard-components/text',
|
||||||
|
name: 'Paragraph',
|
||||||
|
icon: 'paragraph'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Form',
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
component: 'Text',
|
||||||
|
icon: 'Text',
|
||||||
|
type: [
|
||||||
|
{
|
||||||
|
_component: '@budibase/standard-components/header',
|
||||||
|
name: 'Headline',
|
||||||
|
icon: 'headline',
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: 'options',
|
||||||
|
options: [
|
||||||
|
'h1',
|
||||||
|
'h2'
|
||||||
|
],
|
||||||
|
'default': 'h1'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_component: '@budibase/standard-components/text',
|
||||||
|
name: 'Paragraph',
|
||||||
|
icon: 'paragraph'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Blocks',
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
component: 'Text',
|
||||||
|
icon: 'Text',
|
||||||
|
type: [
|
||||||
|
{
|
||||||
|
_component: '@budibase/standard-components/header',
|
||||||
|
name: 'Headline',
|
||||||
|
icon: 'headline',
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: 'options',
|
||||||
|
options: [
|
||||||
|
'h1',
|
||||||
|
'h2'
|
||||||
|
],
|
||||||
|
'default': 'h1'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_component: '@budibase/standard-components/text',
|
||||||
|
name: 'Paragraph',
|
||||||
|
icon: 'paragraph'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Data',
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
component: 'Text',
|
||||||
|
icon: 'Text',
|
||||||
|
type: [
|
||||||
|
{
|
||||||
|
_component: '@budibase/standard-components/header',
|
||||||
|
name: 'Headline',
|
||||||
|
icon: 'headline',
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: 'options',
|
||||||
|
options: [
|
||||||
|
'h1',
|
||||||
|
'h2'
|
||||||
|
],
|
||||||
|
'default': 'h1'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_component: '@budibase/standard-components/text',
|
||||||
|
name: 'Paragraph',
|
||||||
|
icon: 'paragraph'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
{
|
|
||||||
"categories": [
|
|
||||||
{
|
|
||||||
"name": "Basic",
|
|
||||||
"components": [
|
|
||||||
{
|
|
||||||
"component": "Text",
|
|
||||||
"icon": "Text",
|
|
||||||
"commonProps": {
|
|
||||||
//common for all components
|
|
||||||
//Will include layout props
|
|
||||||
},
|
|
||||||
"type": [
|
|
||||||
{
|
|
||||||
"_component": "@budibase/standard-components/header",
|
|
||||||
"name": "Headline",
|
|
||||||
"icon": "headline",
|
|
||||||
"props": {
|
|
||||||
//props for headline
|
|
||||||
"type": {
|
|
||||||
"type": "options",
|
|
||||||
"options": [
|
|
||||||
"h1",
|
|
||||||
"h2"
|
|
||||||
],
|
|
||||||
"default": "h1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"_component": "@budibase/standard-components/text",
|
|
||||||
"name": "Paragraph",
|
|
||||||
"icon": "paragraph",
|
|
||||||
"props": {
|
|
||||||
//props for paragraph
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue