Update all component icons
This commit is contained in:
Andrew Kingston
parent
132755fb30
commit
bdd9eb2ff3
|
|
@ -28,7 +28,7 @@
|
|||
setContext("actionMenu", { show, hide })
|
||||
</script>
|
||||
|
||||
<div class="contents" use:getAnchor on:click={openMenu}>
|
||||
<div use:getAnchor on:click={openMenu}>
|
||||
<slot name="control" />
|
||||
</div>
|
||||
<Popover bind:this={dropdown} {anchor} align="left">
|
||||
|
|
@ -36,9 +36,3 @@
|
|||
<slot />
|
||||
</Menu>
|
||||
</Popover>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: contents;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
ActionGroup,
|
||||
ActionButton,
|
||||
MenuItem,
|
||||
Icon,
|
||||
} from "@budibase/bbui"
|
||||
import { store, currentAssetName } from "builderStore"
|
||||
import structure from "./componentStructure.json"
|
||||
|
|
@ -12,7 +13,7 @@
|
|||
|
||||
const enrichStructure = (structure, definitions) => {
|
||||
let enrichedStructure = []
|
||||
structure.forEach((item) => {
|
||||
structure.forEach(item => {
|
||||
if (typeof item === "string") {
|
||||
const def = definitions[`@budibase/standard-components/${item}`]
|
||||
if (def) {
|
||||
|
|
@ -32,37 +33,65 @@
|
|||
return enrichedStructure
|
||||
}
|
||||
|
||||
const onItemChosen = async (item) => {
|
||||
const onItemChosen = async item => {
|
||||
if (!item.isCategory) {
|
||||
// Add this component
|
||||
await store.actions.components.create(item.component)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ActionGroup>
|
||||
<div class="components">
|
||||
{#each enrichedStructure as item}
|
||||
<ActionMenu disabled={!item.isCategory}>
|
||||
<ActionButton
|
||||
icon={item.icon}
|
||||
primary
|
||||
quiet
|
||||
size="S"
|
||||
slot="control"
|
||||
on:click={() => onItemChosen(item)}
|
||||
>
|
||||
{item.name}
|
||||
on:click={() => onItemChosen(item)}>
|
||||
<div class="buttonContent">
|
||||
{item.name}
|
||||
{#if item.isCategory}
|
||||
<Icon size="S" name="ChevronDown" />
|
||||
{/if}
|
||||
</div>
|
||||
</ActionButton>
|
||||
{#each item.children || [] as item}
|
||||
{#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
|
||||
<MenuItem
|
||||
dataCy={`component-${item.name}`}
|
||||
icon={item.icon}
|
||||
on:click={() => onItemChosen(item)}
|
||||
>
|
||||
on:click={() => onItemChosen(item)}>
|
||||
{item.name}
|
||||
</MenuItem>
|
||||
{/if}
|
||||
{/each}
|
||||
</ActionMenu>
|
||||
{/each}
|
||||
</ActionGroup>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.components {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.components :global(> *) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.buttonContent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.buttonContent :global(svg) {
|
||||
margin-left: 2px !important;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
"search",
|
||||
{
|
||||
"name": "Form",
|
||||
"icon": "ri-file-edit-line",
|
||||
"icon": "Form",
|
||||
"children": [
|
||||
"form",
|
||||
"fieldgroup",
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
},
|
||||
{
|
||||
"name": "Card",
|
||||
"icon": "ri-archive-drawer-line",
|
||||
"icon": "Card",
|
||||
"children": [
|
||||
"stackedlist",
|
||||
"card",
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
},
|
||||
{
|
||||
"name": "Chart",
|
||||
"icon": "ri-bar-chart-2-line",
|
||||
"icon": "GraphBarVertical",
|
||||
"children": [
|
||||
"bar",
|
||||
"line",
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
},
|
||||
{
|
||||
"name": "Elements",
|
||||
"icon": "ri-paragraph",
|
||||
"icon": "TextParagraph",
|
||||
"children": [
|
||||
"heading",
|
||||
"text",
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
},
|
||||
{
|
||||
"name": "Other",
|
||||
"icon": "ri-more-2-line",
|
||||
"icon": "More",
|
||||
"children": [
|
||||
"screenslot",
|
||||
"navigation",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"container": {
|
||||
"name": "Container",
|
||||
"description": "This component contains things within itself",
|
||||
"icon": "ri-layout-column-line",
|
||||
"icon": "Sandbox",
|
||||
"hasChildren": true,
|
||||
"styleable": true,
|
||||
"transitionable": true,
|
||||
|
|
@ -10,14 +10,14 @@
|
|||
},
|
||||
"screenslot": {
|
||||
"name": "Screenslot",
|
||||
"icon": "ri-artboard-2-line",
|
||||
"icon": "WebPage",
|
||||
"description": "Contains your app screens",
|
||||
"styleable": true
|
||||
},
|
||||
"button": {
|
||||
"name": "Button",
|
||||
"description": "A basic html button that is ready for styling",
|
||||
"icon": "ri-share-box-line",
|
||||
"icon": "Button",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
"repeater": {
|
||||
"name": "Repeater",
|
||||
"description": "A configurable data list that attaches to your backend tables.",
|
||||
"icon": "ri-list-check-2",
|
||||
"icon": "ViewList",
|
||||
"styleable": true,
|
||||
"hasChildren": true,
|
||||
"settings": [
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
"search": {
|
||||
"name": "Search",
|
||||
"description": "A searchable list of items.",
|
||||
"icon": "ri-search-line",
|
||||
"icon": "Search",
|
||||
"styleable": true,
|
||||
"hasChildren": true,
|
||||
"settings": [
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
}
|
||||
},
|
||||
"stackedlist": {
|
||||
"name": "Stacked List",
|
||||
"name": "TaskList",
|
||||
"icon": "ri-archive-drawer-line",
|
||||
"description": "A basic card component that can contain content and actions.",
|
||||
"styleable": true,
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
"card": {
|
||||
"name": "Vertical Card",
|
||||
"description": "A basic card component that can contain content and actions.",
|
||||
"icon": "ri-layout-column-line",
|
||||
"icon": "ViewColumn",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
"text": {
|
||||
"name": "Paragraph",
|
||||
"description": "A component for displaying paragraph text.",
|
||||
"icon": "ri-paragraph",
|
||||
"icon": "TextParagraph",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
},
|
||||
"heading": {
|
||||
"name": "Headline",
|
||||
"icon": "ri-heading",
|
||||
"icon": "TextBold",
|
||||
"description": "A component for displaying heading text",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
|
|
@ -225,7 +225,7 @@
|
|||
"image": {
|
||||
"name": "Image",
|
||||
"description": "A basic component for displaying images",
|
||||
"icon": "ri-image-line",
|
||||
"icon": "Image",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
"backgroundimage": {
|
||||
"name": "Background Image",
|
||||
"description": "A background image",
|
||||
"icon": "ri-image-line",
|
||||
"icon": "Images",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -295,7 +295,7 @@
|
|||
"icon": {
|
||||
"name": "Icon",
|
||||
"description": "A basic component for displaying icons",
|
||||
"icon": "ri-sun-fill",
|
||||
"icon": "Bell",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -342,7 +342,7 @@
|
|||
"login": {
|
||||
"name": "Login Form",
|
||||
"description": "A component that automatically generates a login screen for your app.",
|
||||
"icon": "ri-login-box-line",
|
||||
"icon": "Login",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -365,7 +365,7 @@
|
|||
"navigation": {
|
||||
"name": "Nav Bar",
|
||||
"description": "A component for handling the navigation within your app.",
|
||||
"icon": "ri-navigation-line",
|
||||
"icon": "BreadcrumbNavigation",
|
||||
"styleable": true,
|
||||
"hasChildren": true,
|
||||
"settings": [
|
||||
|
|
@ -379,7 +379,7 @@
|
|||
"link": {
|
||||
"name": "Link",
|
||||
"description": "A basic link component for internal and external links",
|
||||
"icon": "ri-link",
|
||||
"icon": "Link",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -408,7 +408,7 @@
|
|||
"cardhorizontal": {
|
||||
"name": "Horizontal Card",
|
||||
"description": "A basic card component that can contain content and actions.",
|
||||
"icon": "ri-layout-row-line",
|
||||
"icon": "ViewRow",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -480,7 +480,7 @@
|
|||
"cardstat": {
|
||||
"name": "Stat Card",
|
||||
"description": "A card component for displaying numbers.",
|
||||
"icon": "ri-dual-sim-2-line",
|
||||
"icon": "Card",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -505,7 +505,7 @@
|
|||
},
|
||||
"embed": {
|
||||
"name": "Embed",
|
||||
"icon": "ri-code-line",
|
||||
"icon": "Code",
|
||||
"description": "Embed content from 3rd party sources",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
|
|
@ -519,7 +519,7 @@
|
|||
"bar": {
|
||||
"name": "Bar Chart",
|
||||
"description": "Bar chart",
|
||||
"icon": "ri-bar-chart-line",
|
||||
"icon": "GraphBarVertical",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -619,7 +619,7 @@
|
|||
"line": {
|
||||
"name": "Line Chart",
|
||||
"description": "Line chart",
|
||||
"icon": "ri-line-chart-line",
|
||||
"icon": "GraphTrend",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -720,7 +720,7 @@
|
|||
"area": {
|
||||
"name": "Area Chart",
|
||||
"description": "Line chart",
|
||||
"icon": "ri-line-chart-fill",
|
||||
"icon": "GraphAreaStacked",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -833,7 +833,7 @@
|
|||
"pie": {
|
||||
"name": "Pie Chart",
|
||||
"description": "Pie chart",
|
||||
"icon": "ri-pie-chart-line",
|
||||
"icon": "GraphPie",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -910,7 +910,7 @@
|
|||
"donut": {
|
||||
"name": "Donut Chart",
|
||||
"description": "Donut chart",
|
||||
"icon": "ri-donut-chart-line",
|
||||
"icon": "GraphDonut",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -987,7 +987,7 @@
|
|||
"candlestick": {
|
||||
"name": "Candlestick Chart",
|
||||
"description": "Candlestick chart",
|
||||
"icon": "ri-stock-line",
|
||||
"icon": "GraphBarVerticalStacked",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -1068,7 +1068,7 @@
|
|||
},
|
||||
"form": {
|
||||
"name": "Form",
|
||||
"icon": "ri-file-text-line",
|
||||
"icon": "Form",
|
||||
"styleable": true,
|
||||
"hasChildren": true,
|
||||
"actions": [
|
||||
|
|
@ -1133,7 +1133,7 @@
|
|||
},
|
||||
"fieldgroup": {
|
||||
"name": "Field Group",
|
||||
"icon": "ri-layout-row-line",
|
||||
"icon": "Group",
|
||||
"styleable": true,
|
||||
"hasChildren": true,
|
||||
"settings": [
|
||||
|
|
@ -1161,7 +1161,7 @@
|
|||
},
|
||||
"stringfield": {
|
||||
"name": "Text Field",
|
||||
"icon": "ri-t-box-line",
|
||||
"icon": "Text",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -1189,7 +1189,7 @@
|
|||
},
|
||||
"numberfield": {
|
||||
"name": "Number Field",
|
||||
"icon": "ri-edit-box-line",
|
||||
"icon": "123",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -1217,7 +1217,7 @@
|
|||
},
|
||||
"passwordfield": {
|
||||
"name": "Password Field",
|
||||
"icon": "ri-lock-password-line",
|
||||
"icon": "LockClosed",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -1245,7 +1245,7 @@
|
|||
},
|
||||
"optionsfield": {
|
||||
"name": "Options Picker",
|
||||
"icon": "ri-file-list-line",
|
||||
"icon": "ViewList",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -1274,7 +1274,7 @@
|
|||
},
|
||||
"booleanfield": {
|
||||
"name": "Checkbox",
|
||||
"icon": "ri-checkbox-line",
|
||||
"icon": "Checkmark",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -1302,7 +1302,7 @@
|
|||
},
|
||||
"longformfield": {
|
||||
"name": "Rich Text",
|
||||
"icon": "ri-file-edit-line",
|
||||
"icon": "TextParagraph",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -1331,7 +1331,7 @@
|
|||
},
|
||||
"datetimefield": {
|
||||
"name": "Date Picker",
|
||||
"icon": "ri-calendar-line",
|
||||
"icon": "DateInput",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -1365,7 +1365,7 @@
|
|||
},
|
||||
"attachmentfield": {
|
||||
"name": "Attachment",
|
||||
"icon": "ri-image-edit-line",
|
||||
"icon": "Attach",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -1388,7 +1388,7 @@
|
|||
},
|
||||
"relationshipfield": {
|
||||
"name": "Relationship Picker",
|
||||
"icon": "ri-links-line",
|
||||
"icon": "TaskList",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -1416,7 +1416,7 @@
|
|||
},
|
||||
"dataprovider": {
|
||||
"name": "Data Provider",
|
||||
"icon": "ri-database-2-line",
|
||||
"icon": "Data",
|
||||
"styleable": false,
|
||||
"hasChildren": true,
|
||||
"settings": [
|
||||
|
|
@ -1476,7 +1476,7 @@
|
|||
},
|
||||
"table": {
|
||||
"name": "Table",
|
||||
"icon": "ri-table-line",
|
||||
"icon": "Table",
|
||||
"styleable": true,
|
||||
"hasChildren": true,
|
||||
"settings": [
|
||||
|
|
|
|||
Loading…
Reference in a new issue