Merge pull request #210 from Budibase/feature/simplified-component-panel/components
Component panel - changes for displaying componets
This commit is contained in:
Kevin Åberg Kultalahti
GitHub
commit
ee7ae8ef01
File diff suppressed because it is too large
Load Diff
|
|
@ -2,6 +2,7 @@
|
|||
"name": "root",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-json": "^4.0.2",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-plugin-prettier": "^3.1.2",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import builtins from "rollup-plugin-node-builtins"
|
|||
import nodeglobals from "rollup-plugin-node-globals"
|
||||
import copy from "rollup-plugin-copy"
|
||||
import replace from "rollup-plugin-replace"
|
||||
import json from '@rollup/plugin-json';
|
||||
|
||||
|
||||
import path from "path"
|
||||
|
||||
|
|
@ -133,10 +135,16 @@ export default {
|
|||
plugins: [
|
||||
alias({
|
||||
entries: [
|
||||
{ find: "components", replacement: path.resolve(projectRootDir, 'src/components') },
|
||||
{ find: "builderStore", replacement: path.resolve(projectRootDir, 'src/builderStore') }
|
||||
{
|
||||
find: "components",
|
||||
replacement: path.resolve(projectRootDir, "src/components"),
|
||||
},
|
||||
{
|
||||
find: "builderStore",
|
||||
replacement: path.resolve(projectRootDir, "src/builderStore"),
|
||||
},
|
||||
],
|
||||
customResolver
|
||||
customResolver,
|
||||
}),
|
||||
copy({
|
||||
targets: [
|
||||
|
|
@ -206,5 +214,6 @@ export default {
|
|||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser(),
|
||||
json(),
|
||||
],
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<script>
|
||||
export let icon = ""
|
||||
export let name = ""
|
||||
export let description = ""
|
||||
</script>
|
||||
|
||||
<div class="component-item">
|
||||
<div class="component-icon">
|
||||
<i class={icon} />
|
||||
</div>
|
||||
<div class="component-text">
|
||||
<div class="component-name">{name}</div>
|
||||
<div class="component-description">
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.component-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 0px 8px 10px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.component-item:hover {
|
||||
background: #f5f5f5;
|
||||
/* background: #fbfbfb; */
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.component-icon {
|
||||
flex: 0 0 40px;
|
||||
/* background: #efe9e9; */
|
||||
background: #f1f4fc;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.component-text {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
padding-top: 8px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.component-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.component-description {
|
||||
font-size: 12px;
|
||||
color: #808192;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 28px;
|
||||
/* color: #808192; */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,7 +21,8 @@
|
|||
getIndexSchema,
|
||||
pipe,
|
||||
} from "components/common/core"
|
||||
|
||||
import ComponentItem from "./ComponentItem.svelte"
|
||||
import panelStructure from "./temporaryPanelStructure.json"
|
||||
export let toggleTab
|
||||
|
||||
let componentLibraries = []
|
||||
|
|
@ -115,86 +116,21 @@
|
|||
}
|
||||
|
||||
$: componentLibrary = componentLibraries.find(l => l.libName === selectedLib)
|
||||
|
||||
$: componentItems =
|
||||
panelStructure.categories[
|
||||
panelStructure.categories.findIndex(i => i.name === "Basic")
|
||||
].components
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Select on:change={e => (selectedLib = e.target.value)}>
|
||||
{#each componentLibraries as lib}
|
||||
<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
|
||||
on:click|stopPropagation={() => onComponentChosen(component, preset)}>
|
||||
{preset}
|
||||
</li>
|
||||
{#each componentItems as item}
|
||||
<ComponentItem
|
||||
name={item.component}
|
||||
description={item.description}
|
||||
icon={item.icon} />
|
||||
{/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>
|
||||
{/if}
|
||||
</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>
|
||||
|
||||
|
|
|
|||
|
|
@ -90,6 +90,6 @@
|
|||
flex: 1 1 auto;
|
||||
height: 0px;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px 40px 20px;
|
||||
padding: 0 5px 40px 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,18 @@
|
|||
{
|
||||
"name": "Basic",
|
||||
"components": [
|
||||
{
|
||||
"component": "Container",
|
||||
"description": "This component contains things within itself",
|
||||
"icon": "ri-layout-row-fill",
|
||||
"commonProps": {},
|
||||
"type": []
|
||||
},
|
||||
{
|
||||
"component": "Text",
|
||||
"icon": "Text",
|
||||
"description": "This is a simple text component",
|
||||
"icon": "ri-t-box-fill",
|
||||
"commonProps": {
|
||||
//common for all components
|
||||
//Will include layout props
|
||||
},
|
||||
"type": [
|
||||
{
|
||||
|
|
@ -16,7 +22,6 @@
|
|||
"name": "Headline",
|
||||
"icon": "headline",
|
||||
"props": {
|
||||
//props for headline
|
||||
"type": {
|
||||
"type": "options",
|
||||
"options": [
|
||||
|
|
@ -32,10 +37,37 @@
|
|||
"name": "Paragraph",
|
||||
"icon": "paragraph",
|
||||
"props": {
|
||||
//props for paragraph
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"component": "Button",
|
||||
"description": "A basic html button that is ready for styling",
|
||||
"icon": "ri-radio-button-fill",
|
||||
"commonProps": {},
|
||||
"type": []
|
||||
},
|
||||
{
|
||||
"component": "Icon",
|
||||
"description": "A basic component for displaying icons",
|
||||
"icon": "ri-sun-fill",
|
||||
"commonProps": {},
|
||||
"type": []
|
||||
},
|
||||
{
|
||||
"component": "Avatar",
|
||||
"description": "A basic component for rendering an avatar",
|
||||
"icon": "ri-user-smile-fill",
|
||||
"commonProps": {},
|
||||
"type": []
|
||||
},
|
||||
{
|
||||
"component": "Link",
|
||||
"description": "A basic link component for internal and external links",
|
||||
"icon": "ri-link",
|
||||
"commonProps": {},
|
||||
"type": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
65
yarn.lock
65
yarn.lock
|
|
@ -918,6 +918,27 @@
|
|||
dependencies:
|
||||
"@types/node" ">= 8"
|
||||
|
||||
"@rollup/plugin-json@^4.0.2":
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.0.2.tgz#482185ee36ac7dd21c346e2dbcc22ffed0c6f2d6"
|
||||
integrity sha512-t4zJMc98BdH42mBuzjhQA7dKh0t4vMJlUka6Fz0c+iO5IVnWaEMiYBy1uBj9ruHZzXBW23IPDGL9oCzBkQ9Udg==
|
||||
dependencies:
|
||||
"@rollup/pluginutils" "^3.0.4"
|
||||
|
||||
"@rollup/pluginutils@^3.0.4":
|
||||
version "3.0.9"
|
||||
resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.9.tgz#aa6adca2c45e5a1b950103a999e3cddfe49fd775"
|
||||
integrity sha512-TLZavlfPAZYI7v33wQh4mTP6zojne14yok3DNSLcjoG/Hirxfkonn6icP5rrNWRn8nZsirJBFFpijVOJzkUHDg==
|
||||
dependencies:
|
||||
"@types/estree" "0.0.39"
|
||||
estree-walker "^1.0.1"
|
||||
micromatch "^4.0.2"
|
||||
|
||||
"@types/estree@0.0.39":
|
||||
version "0.0.39"
|
||||
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
|
||||
integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
|
||||
|
||||
"@types/node@>= 8":
|
||||
version "13.5.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-13.5.3.tgz#37f1f539b7535b9fb4ef77d59db1847a837b7f17"
|
||||
|
|
@ -1216,6 +1237,13 @@ braces@^2.3.1:
|
|||
split-string "^3.0.2"
|
||||
to-regex "^3.0.1"
|
||||
|
||||
braces@^3.0.1:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
|
||||
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
|
||||
dependencies:
|
||||
fill-range "^7.0.1"
|
||||
|
||||
btoa-lite@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337"
|
||||
|
|
@ -2065,6 +2093,11 @@ estree-walker@^0.6.1:
|
|||
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
|
||||
integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
|
||||
|
||||
estree-walker@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
|
||||
integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
|
||||
|
||||
esutils@^2.0.2:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
|
||||
|
|
@ -2222,6 +2255,13 @@ fill-range@^4.0.0:
|
|||
repeat-string "^1.6.1"
|
||||
to-regex-range "^2.1.0"
|
||||
|
||||
fill-range@^7.0.1:
|
||||
version "7.0.1"
|
||||
resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
|
||||
integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
|
||||
dependencies:
|
||||
to-regex-range "^5.0.1"
|
||||
|
||||
find-up@^1.0.0:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
|
||||
|
|
@ -2930,6 +2970,11 @@ is-number@^3.0.0:
|
|||
dependencies:
|
||||
kind-of "^3.0.2"
|
||||
|
||||
is-number@^7.0.0:
|
||||
version "7.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
|
||||
integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
|
||||
|
||||
is-obj@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
|
||||
|
|
@ -3464,6 +3509,14 @@ micromatch@^3.1.10:
|
|||
snapdragon "^0.8.1"
|
||||
to-regex "^3.0.2"
|
||||
|
||||
micromatch@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
|
||||
integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
|
||||
dependencies:
|
||||
braces "^3.0.1"
|
||||
picomatch "^2.0.5"
|
||||
|
||||
mime-db@1.43.0:
|
||||
version "1.43.0"
|
||||
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
|
||||
|
|
@ -4174,6 +4227,11 @@ performance-now@^2.1.0:
|
|||
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
|
||||
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
|
||||
|
||||
picomatch@^2.0.5:
|
||||
version "2.2.2"
|
||||
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
|
||||
integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
|
||||
|
||||
pify@^2.0.0, pify@^2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
|
||||
|
|
@ -5141,6 +5199,13 @@ to-regex-range@^2.1.0:
|
|||
is-number "^3.0.0"
|
||||
repeat-string "^1.6.1"
|
||||
|
||||
to-regex-range@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
|
||||
integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
|
||||
dependencies:
|
||||
is-number "^7.0.0"
|
||||
|
||||
to-regex@^3.0.1, to-regex@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
|
||||
|
|
|
|||
Loading…
Reference in New Issue