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 })
</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>

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

@ -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>

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

@ -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",

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

@ -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": [