MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update all component icons

This commit is contained in:
Andrew Kingston 2021-04-28 13:42:17 +01:00
parent 132755fb30
commit bdd9eb2ff3
4 changed files with 83 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/bbui/src/ActionMenu/ActionMenu.svelte
View File

@ -28,7 +28,7 @@
setContext("actionMenu", { show, hide }) setContext("actionMenu", { show, hide })
</script> </script>
<div class="contents" use:getAnchor on:click={openMenu}> <div use:getAnchor on:click={openMenu}>
<slot name="control" /> <slot name="control" />
</div> </div>
<Popover bind:this={dropdown} {anchor} align="left"> <Popover bind:this={dropdown} {anchor} align="left">
@ -36,9 +36,3 @@
<slot /> <slot />
</Menu> </Menu>
</Popover> </Popover>
<style>
div {
display: contents;
}
</style>

51
packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
View File

@ -4,6 +4,7 @@
ActionGroup, ActionGroup,
ActionButton, ActionButton,
MenuItem, MenuItem,
Icon,
} from "@budibase/bbui" } from "@budibase/bbui"
import { store, currentAssetName } from "builderStore" import { store, currentAssetName } from "builderStore"
import structure from "./componentStructure.json" import structure from "./componentStructure.json"
@ -12,7 +13,7 @@
const enrichStructure = (structure, definitions) => { const enrichStructure = (structure, definitions) => {
let enrichedStructure = [] let enrichedStructure = []
structure.forEach((item) => { structure.forEach(item => {
if (typeof item === "string") { if (typeof item === "string") {
const def = definitions[`@budibase/standard-components/${item}`] const def = definitions[`@budibase/standard-components/${item}`]
if (def) { if (def) {
@ -32,37 +33,65 @@
return enrichedStructure return enrichedStructure
} }
const onItemChosen = async (item) => { const onItemChosen = async item => {
if (!item.isCategory) { if (!item.isCategory) {
// Add this component
await store.actions.components.create(item.component) await store.actions.components.create(item.component)
} }
} }
</script> </script>
<ActionGroup> <div class="components">
{#each enrichedStructure as item} {#each enrichedStructure as item}
<ActionMenu disabled={!item.isCategory}> <ActionMenu disabled={!item.isCategory}>
<ActionButton <ActionButton
icon={item.icon} icon={item.icon}
primary
quiet quiet
size="S"
slot="control" slot="control"
on:click={() => onItemChosen(item)} on:click={() => onItemChosen(item)}>
> <div class="buttonContent">
{item.name} {item.name}
{#if item.isCategory}
<Icon size="S" name="ChevronDown" />
{/if}
</div>
</ActionButton> </ActionButton>
{#each item.children || [] as item} {#each item.children || [] as item}
{#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)} {#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
<MenuItem <MenuItem
dataCy={`component-${item.name}`} dataCy={`component-${item.name}`}
icon={item.icon} icon={item.icon}
on:click={() => onItemChosen(item)} on:click={() => onItemChosen(item)}>
>
{item.name} {item.name}
</MenuItem> </MenuItem>
{/if} {/if}
{/each} {/each}
</ActionMenu> </ActionMenu>
{/each} {/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>

10
packages/builder/src/components/design/AppPreview/componentStructure.json
View File

@ -7,7 +7,7 @@
"search", "search",
{ {
"name": "Form", "name": "Form",
"icon": "ri-file-edit-line", "icon": "Form",
"children": [ "children": [
"form", "form",
"fieldgroup", "fieldgroup",
@ -24,7 +24,7 @@
}, },
{ {
"name": "Card", "name": "Card",
"icon": "ri-archive-drawer-line", "icon": "Card",
"children": [ "children": [
"stackedlist", "stackedlist",
"card", "card",
@ -34,7 +34,7 @@
}, },
{ {
"name": "Chart", "name": "Chart",
"icon": "ri-bar-chart-2-line", "icon": "GraphBarVertical",
"children": [ "children": [
"bar", "bar",
"line", "line",
@ -46,7 +46,7 @@
}, },
{ {
"name": "Elements", "name": "Elements",
"icon": "ri-paragraph", "icon": "TextParagraph",
"children": [ "children": [
"heading", "heading",
"text", "text",
@ -59,7 +59,7 @@
}, },
{ {
"name": "Other", "name": "Other",
"icon": "ri-more-2-line", "icon": "More",
"children": [ "children": [
"screenslot", "screenslot",
"navigation", "navigation",

74
packages/standard-components/manifest.json
View File

@ -2,7 +2,7 @@
"container": { "container": {
"name": "Container", "name": "Container",
"description": "This component contains things within itself", "description": "This component contains things within itself",
"icon": "ri-layout-column-line", "icon": "Sandbox",
"hasChildren": true, "hasChildren": true,
"styleable": true, "styleable": true,
"transitionable": true, "transitionable": true,
@ -10,14 +10,14 @@
}, },
"screenslot": { "screenslot": {
"name": "Screenslot", "name": "Screenslot",
"icon": "ri-artboard-2-line", "icon": "WebPage",
"description": "Contains your app screens", "description": "Contains your app screens",
"styleable": true "styleable": true
}, },
"button": { "button": {
"name": "Button", "name": "Button",
"description": "A basic html button that is ready for styling", "description": "A basic html button that is ready for styling",
"icon": "ri-share-box-line", "icon": "Button",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -40,7 +40,7 @@
"repeater": { "repeater": {
"name": "Repeater", "name": "Repeater",
"description": "A configurable data list that attaches to your backend tables.", "description": "A configurable data list that attaches to your backend tables.",
"icon": "ri-list-check-2", "icon": "ViewList",
"styleable": true, "styleable": true,
"hasChildren": true, "hasChildren": true,
"settings": [ "settings": [
@ -68,7 +68,7 @@
"search": { "search": {
"name": "Search", "name": "Search",
"description": "A searchable list of items.", "description": "A searchable list of items.",
"icon": "ri-search-line", "icon": "Search",
"styleable": true, "styleable": true,
"hasChildren": true, "hasChildren": true,
"settings": [ "settings": [
@ -101,7 +101,7 @@
} }
}, },
"stackedlist": { "stackedlist": {
"name": "Stacked List", "name": "TaskList",
"icon": "ri-archive-drawer-line", "icon": "ri-archive-drawer-line",
"description": "A basic card component that can contain content and actions.", "description": "A basic card component that can contain content and actions.",
"styleable": true, "styleable": true,
@ -132,7 +132,7 @@
"card": { "card": {
"name": "Vertical Card", "name": "Vertical Card",
"description": "A basic card component that can contain content and actions.", "description": "A basic card component that can contain content and actions.",
"icon": "ri-layout-column-line", "icon": "ViewColumn",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -192,7 +192,7 @@
"text": { "text": {
"name": "Paragraph", "name": "Paragraph",
"description": "A component for displaying paragraph text.", "description": "A component for displaying paragraph text.",
"icon": "ri-paragraph", "icon": "TextParagraph",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -204,7 +204,7 @@
}, },
"heading": { "heading": {
"name": "Headline", "name": "Headline",
"icon": "ri-heading", "icon": "TextBold",
"description": "A component for displaying heading text", "description": "A component for displaying heading text",
"styleable": true, "styleable": true,
"settings": [ "settings": [
@ -225,7 +225,7 @@
"image": { "image": {
"name": "Image", "name": "Image",
"description": "A basic component for displaying images", "description": "A basic component for displaying images",
"icon": "ri-image-line", "icon": "Image",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -238,7 +238,7 @@
"backgroundimage": { "backgroundimage": {
"name": "Background Image", "name": "Background Image",
"description": "A background image", "description": "A background image",
"icon": "ri-image-line", "icon": "Images",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -295,7 +295,7 @@
"icon": { "icon": {
"name": "Icon", "name": "Icon",
"description": "A basic component for displaying icons", "description": "A basic component for displaying icons",
"icon": "ri-sun-fill", "icon": "Bell",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -342,7 +342,7 @@
"login": { "login": {
"name": "Login Form", "name": "Login Form",
"description": "A component that automatically generates a login screen for your app.", "description": "A component that automatically generates a login screen for your app.",
"icon": "ri-login-box-line", "icon": "Login",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -365,7 +365,7 @@
"navigation": { "navigation": {
"name": "Nav Bar", "name": "Nav Bar",
"description": "A component for handling the navigation within your app.", "description": "A component for handling the navigation within your app.",
"icon": "ri-navigation-line", "icon": "BreadcrumbNavigation",
"styleable": true, "styleable": true,
"hasChildren": true, "hasChildren": true,
"settings": [ "settings": [
@ -379,7 +379,7 @@
"link": { "link": {
"name": "Link", "name": "Link",
"description": "A basic link component for internal and external links", "description": "A basic link component for internal and external links",
"icon": "ri-link", "icon": "Link",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -408,7 +408,7 @@
"cardhorizontal": { "cardhorizontal": {
"name": "Horizontal Card", "name": "Horizontal Card",
"description": "A basic card component that can contain content and actions.", "description": "A basic card component that can contain content and actions.",
"icon": "ri-layout-row-line", "icon": "ViewRow",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -480,7 +480,7 @@
"cardstat": { "cardstat": {
"name": "Stat Card", "name": "Stat Card",
"description": "A card component for displaying numbers.", "description": "A card component for displaying numbers.",
"icon": "ri-dual-sim-2-line", "icon": "Card",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -505,7 +505,7 @@
}, },
"embed": { "embed": {
"name": "Embed", "name": "Embed",
"icon": "ri-code-line", "icon": "Code",
"description": "Embed content from 3rd party sources", "description": "Embed content from 3rd party sources",
"styleable": true, "styleable": true,
"settings": [ "settings": [
@ -519,7 +519,7 @@
"bar": { "bar": {
"name": "Bar Chart", "name": "Bar Chart",
"description": "Bar chart", "description": "Bar chart",
"icon": "ri-bar-chart-line", "icon": "GraphBarVertical",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -619,7 +619,7 @@
"line": { "line": {
"name": "Line Chart", "name": "Line Chart",
"description": "Line chart", "description": "Line chart",
"icon": "ri-line-chart-line", "icon": "GraphTrend",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -720,7 +720,7 @@
"area": { "area": {
"name": "Area Chart", "name": "Area Chart",
"description": "Line chart", "description": "Line chart",
"icon": "ri-line-chart-fill", "icon": "GraphAreaStacked",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -833,7 +833,7 @@
"pie": { "pie": {
"name": "Pie Chart", "name": "Pie Chart",
"description": "Pie chart", "description": "Pie chart",
"icon": "ri-pie-chart-line", "icon": "GraphPie",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -910,7 +910,7 @@
"donut": { "donut": {
"name": "Donut Chart", "name": "Donut Chart",
"description": "Donut chart", "description": "Donut chart",
"icon": "ri-donut-chart-line", "icon": "GraphDonut",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -987,7 +987,7 @@
"candlestick": { "candlestick": {
"name": "Candlestick Chart", "name": "Candlestick Chart",
"description": "Candlestick chart", "description": "Candlestick chart",
"icon": "ri-stock-line", "icon": "GraphBarVerticalStacked",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -1068,7 +1068,7 @@
}, },
"form": { "form": {
"name": "Form", "name": "Form",
"icon": "ri-file-text-line", "icon": "Form",
"styleable": true, "styleable": true,
"hasChildren": true, "hasChildren": true,
"actions": [ "actions": [
@ -1133,7 +1133,7 @@
}, },
"fieldgroup": { "fieldgroup": {
"name": "Field Group", "name": "Field Group",
"icon": "ri-layout-row-line", "icon": "Group",
"styleable": true, "styleable": true,
"hasChildren": true, "hasChildren": true,
"settings": [ "settings": [
@ -1161,7 +1161,7 @@
}, },
"stringfield": { "stringfield": {
"name": "Text Field", "name": "Text Field",
"icon": "ri-t-box-line", "icon": "Text",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -1189,7 +1189,7 @@
}, },
"numberfield": { "numberfield": {
"name": "Number Field", "name": "Number Field",
"icon": "ri-edit-box-line", "icon": "123",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -1217,7 +1217,7 @@
}, },
"passwordfield": { "passwordfield": {
"name": "Password Field", "name": "Password Field",
"icon": "ri-lock-password-line", "icon": "LockClosed",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -1245,7 +1245,7 @@
}, },
"optionsfield": { "optionsfield": {
"name": "Options Picker", "name": "Options Picker",
"icon": "ri-file-list-line", "icon": "ViewList",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -1274,7 +1274,7 @@
}, },
"booleanfield": { "booleanfield": {
"name": "Checkbox", "name": "Checkbox",
"icon": "ri-checkbox-line", "icon": "Checkmark",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -1302,7 +1302,7 @@
}, },
"longformfield": { "longformfield": {
"name": "Rich Text", "name": "Rich Text",
"icon": "ri-file-edit-line", "icon": "TextParagraph",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -1331,7 +1331,7 @@
}, },
"datetimefield": { "datetimefield": {
"name": "Date Picker", "name": "Date Picker",
"icon": "ri-calendar-line", "icon": "DateInput",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -1365,7 +1365,7 @@
}, },
"attachmentfield": { "attachmentfield": {
"name": "Attachment", "name": "Attachment",
"icon": "ri-image-edit-line", "icon": "Attach",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -1388,7 +1388,7 @@
}, },
"relationshipfield": { "relationshipfield": {
"name": "Relationship Picker", "name": "Relationship Picker",
"icon": "ri-links-line", "icon": "TaskList",
"styleable": true, "styleable": true,
"settings": [ "settings": [
{ {
@ -1416,7 +1416,7 @@
}, },
"dataprovider": { "dataprovider": {
"name": "Data Provider", "name": "Data Provider",
"icon": "ri-database-2-line", "icon": "Data",
"styleable": false, "styleable": false,
"hasChildren": true, "hasChildren": true,
"settings": [ "settings": [
@ -1476,7 +1476,7 @@
}, },
"table": { "table": {
"name": "Table", "name": "Table",
"icon": "ri-table-line", "icon": "Table",
"styleable": true, "styleable": true,
"hasChildren": true, "hasChildren": true,
"settings": [ "settings": [