Update all component icons

5 years ago · bdd9eb2ff3
4 changed files with 83 additions and 60 deletions
--- a/packages/bbui/src/ActionMenu/ActionMenu.svelte
+++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte
@ -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>
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@ -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>
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@ -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",
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@ -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": [