Settings, Tidyup and Refactor

2024-07-06 15:00:49 +12:00 · 2020-05-20 11:55:25 +01:00 · 2020-05-20 11:55:25 +01:00 · 017ac7aced
parent 3cd48773d1
commit 017ac7aced
10 changed files with 109 additions and 113 deletions
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@ -32,11 +32,13 @@
  $: components = $store.components
  $: componentInstance = $store.currentComponentInfo
  $: componentDefinition = $store.components[componentInstance._component]
-  $: componentPropDefinition = flattenedPanel.find(
-    //use for getting controls for each component property
-    c => c._component === componentInstance._component
-  )
-  $: panelDefinition = componentPropDefinition
+  $: componentPropDefinition =
+    flattenedPanel.find(
+      //use for getting controls for each component property
+      c => c._component === componentInstance._component
+    ) || {}
+
+  $: panelDefinition = componentPropDefinition.properties
    ? componentPropDefinition.properties[selectedCategory.value]
    : {}

--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@ -45,7 +45,6 @@
  }

  const changeScreen = screen => {
-    debugger
    store.setCurrentScreen(screen.title)
    $goto(`./:page/${screen.title}`)
  }
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@ -37,7 +37,6 @@

  const selectComponent = component => {
    // Set current component
-    debugger
    store.selectComponent(component)

    // Get ID path
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@ -33,14 +33,20 @@
  </div>

  <div class="design-view-property-groups">
-    {#each propertyGroupNames as groupName}
-      <PropertyGroup
-        name={groupName}
-        properties={getProperties(groupName)}
-        {onStyleChanged}
-        {componentDefinition}
-        {componentInstance} />
-    {/each}
+    {#if propertyGroupNames.length > 0}
+      {#each propertyGroupNames as groupName}
+        <PropertyGroup
+          name={groupName}
+          properties={getProperties(groupName)}
+          {onStyleChanged}
+          {componentDefinition}
+          {componentInstance} />
+      {/each}
+    {:else}
+      <div class="no-design">
+        <span>This component does not have any design properties</span>
+      </div>
+    {/if}
  </div>
 </div>

@ -58,4 +64,8 @@
  .design-view-property-groups {
    flex: 1;
  }
+
+  .no-design {
+    text-align: center;
+  }
 </style>
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@ -5,18 +5,20 @@
  export let control = null
  export let key = ""
  export let value = ""
-  export let valueType = ""
  export let props = {}
  export let onChange = () => {}

  function handleChange(key, v) {
-    !!v.target
-      ? onChange(name, key, valueType ? v.target[valueType] : v.target.value)
-      : onChange(name, key, v)
+    if (v.target) {
+      let val = props.valueType ? v.target[props.valueType] : v.target.value
+      onChange(key, val)
+    } else {
+      onChange(key, v)
+    }
  }

  const handleValueType = value =>
-    valueType ? { [valueType]: value } : { value }
+    props.valueType ? { [props.valueType]: value } : { value }
 </script>

 <div class="property-control">
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@ -11,12 +11,6 @@

  const capitalize = name => name[0].toUpperCase() + name.slice(1)

-  function onChange(key, v) {
-    !!v.target
-      ? onStyleChanged(name, key, v.target.value)
-      : onStyleChanged(name, key, v)
-  }
-
  $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>

@ -33,10 +27,10 @@
      <PropertyControl
        label={props.label}
        control={props.control}
-        key={props.cssKey}
-        value={componentInstance['_styles'][props.cssKey]}
-        onChange={onStyleChanged}
-        props={{ ...excludeProps(props, ['control']) }} />
+        key={props.key}
+        value={componentInstance['_styles'][props.key]}
+        onChange={(key, value) => onStyleChanged(name, key, value)}
+        props={{ ...excludeProps(props, ['control', 'label']) }} />
    {/each}
  </div>
 </div>
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@ -15,14 +15,26 @@
  }
 </script>

-{#each panelDefinition as definition}
-  {#if propExistsOnComponentDef(definition.key)}
-    <PropertyControl
-      control={definition.control}
-      label={definition.label}
-      key={definition.key}
-      value={componentInstance[definition.key]}
-      {onChange}
-      props={{ ...excludeProps(definition, ['control']) }} />
-  {/if}
-{/each}
+{#if panelDefinition.length > 0}
+  {#each panelDefinition as definition}
+    {#if propExistsOnComponentDef(definition.key)}
+      <PropertyControl
+        control={definition.control}
+        label={definition.label}
+        key={definition.key}
+        value={componentInstance[definition.key]}
+        {onChange}
+        props={{ ...excludeProps(definition, ['control', 'label']) }} />
+    {/if}
+  {/each}
+{:else}
+  <div>
+    <span>This component does not have any settings.</span>
+  </div>
+{/if}
+
+<style>
+  div {
+    text-align: center;
+  }
+</style>
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@ -8,7 +8,7 @@ import InputGroup from "../common/Inputs/InputGroup.svelte"
 export const layout = [
  {
    label: "Direction",
-    cssKey: "flex-direction",
+    key: "flex-direction",
    control: OptionSelect,
    initialValue: "columnReverse",
    options: [
@ -18,11 +18,11 @@ export const layout = [
      { label: "column-reverse", value: "columnReverse" },
    ],
  },
-  { label: "Justify", cssKey: "justify-content", control: Input },
-  { label: "Align", cssKey: "align-items", control: Input },
+  { label: "Justify", key: "justify-content", control: Input },
+  { label: "Align", key: "align-items", control: Input },
  {
    label: "Wrap",
-    cssKey: "flex-wrap",
+    key: "flex-wrap",
    control: OptionSelect,
    options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }],
  },
@ -37,26 +37,26 @@ const spacingMeta = [
 export const spacing = [
  {
    label: "Padding",
-    cssKey: "padding",
+    key: "padding",
    control: InputGroup,
    meta: spacingMeta,
  },
-  { label: "Margin", cssKey: "margin", control: InputGroup, meta: spacingMeta },
+  { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
 ]

 export const size = [
-  { label: "Width", cssKey: "width", control: Input },
-  { label: "Height", cssKey: "height", control: Input },
-  { label: "Min W", cssKey: "min-width", control: Input },
-  { label: "Min H", cssKey: "min-height", control: Input },
-  { label: "Max W", cssKey: "max-width", control: Input },
-  { label: "Max H", cssKey: "max-height", control: Input },
+  { label: "Width", key: "width", control: Input },
+  { label: "Height", key: "height", control: Input },
+  { label: "Min W", key: "min-width", control: Input },
+  { label: "Min H", key: "min-height", control: Input },
+  { label: "Max W", key: "max-width", control: Input },
+  { label: "Max H", key: "max-height", control: Input },
 ]

 export const position = [
  {
    label: "Position",
-    cssKey: "position",
+    key: "position",
    control: OptionSelect,
    options: [
      { label: "static" },
@ -71,7 +71,7 @@ export const position = [
 export const typography = [
  {
    label: "Font",
-    cssKey: "font-family",
+    key: "font-family",
    control: OptionSelect,
    options: [
      { label: "initial" },
@ -87,7 +87,7 @@ export const typography = [
  },
  {
    label: "Weight",
-    cssKey: "font-weight",
+    key: "font-weight",
    control: OptionSelect,
    options: [
      { label: "normal" },
@ -96,28 +96,28 @@ export const typography = [
      { label: "lighter" },
    ],
  },
-  { label: "size", cssKey: "font-size", control: Input },
-  { label: "Line H", cssKey: "line-height", control: Input },
+  { label: "size", key: "font-size", control: Input },
+  { label: "Line H", key: "line-height", control: Input },
  {
    label: "Color",
-    cssKey: "color",
+    key: "color",
    control: OptionSelect,
    options: ["black", "red", "white", "blue", "green"],
  },
  {
    label: "align",
-    cssKey: "text-align",
+    key: "text-align",
    control: OptionSelect,
    options: ["initial", "left", "right", "center", "justify"],
  }, //custom
-  { label: "transform", cssKey: "text-transform", control: Input }, //custom
-  { label: "style", cssKey: "font-style", control: Input }, //custom
+  { label: "transform", key: "text-transform", control: Input }, //custom
+  { label: "style", key: "font-style", control: Input }, //custom
 ]

 export const background = [
  {
    label: "Background",
-    cssKey: "background",
+    key: "background",
    control: OptionSelect,
    options: [
      { label: "white" },
@ -127,26 +127,26 @@ export const background = [
      { label: "black" },
    ],
  },
-  { label: "Image", cssKey: "image", control: Input }, //custom
+  { label: "Image", key: "image", control: Input }, //custom
 ]

 export const border = [
-  { label: "Radius", cssKey: "border-radius", control: Input },
-  { label: "Width", cssKey: "border-width", control: Input }, //custom
-  { label: "Color", cssKey: "border-color", control: Input },
-  { label: "Style", cssKey: "border-style", control: Input },
+  { label: "Radius", key: "border-radius", control: Input },
+  { label: "Width", key: "border-width", control: Input }, //custom
+  { label: "Color", key: "border-color", control: Input },
+  { label: "Style", key: "border-style", control: Input },
 ]

 export const effects = [
-  { label: "Opacity", cssKey: "opacity", control: Input },
-  { label: "Rotate", cssKey: "transform", control: Input }, //needs special control
-  { label: "Shadow", cssKey: "box-shadow", control: Input },
+  { label: "Opacity", key: "opacity", control: Input },
+  { label: "Rotate", key: "transform", control: Input }, //needs special control
+  { label: "Shadow", key: "box-shadow", control: Input },
 ]

 export const transitions = [
-  { label: "Property", cssKey: "transition-property", control: Input },
-  { label: "Duration", cssKey: "transition-timing-function", control: Input },
-  { label: "Ease", cssKey: "transition-ease", control: Input },
+  { label: "Property", key: "transition-property", control: Input },
+  { label: "Duration", key: "transition-timing-function", control: Input },
+  { label: "Ease", key: "transition-ease", control: Input },
 ]

 export const all = {
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@ -201,7 +201,9 @@ export default {
          description: "A basic component for displaying icons",
          icon: "ri-sun-fill",
          children: [],
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+          },
        },
        {
          _component: "@budibase/standard-components/link",
@ -209,7 +211,19 @@ export default {
          description: "A basic link component for internal and external links",
          icon: "ri-link",
          children: [],
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [
+              { label: "Text", key: "text", control: Input },
+              { label: "Url", key: "url", control: Input },
+              {
+                label: "Open New Tab",
+                key: "openInNewTab",
+                valueType: "checked",
+                control: Checkbox,
+              },
+            ],
+          },
        },
      ],
    },
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@ -4,11 +4,6 @@
  export let url = ""
  export let text = ""
  export let openInNewTab = false
-  export let color
-  export let hoverColor
-  export let underline = false
-  export let fontFamily
-  export let fontSize

  export let _bb

@ -16,43 +11,12 @@

  $: anchorElement && !text && _bb.attachChildren(anchorElement)
  $: target = openInNewTab ? "_blank" : "_self"
-  $: cssVariables = {
-    hoverColor,
-    color,
-    textDecoration: underline ? "underline" : "none",
-    fontSize,
-    fontFamily,
-  }
-  $: classes = createClasses(cssVariables)
 </script>

-<a
-  href={url}
-  bind:this={anchorElement}
-  class={classes}
-  {target}
-  use:cssVars={cssVariables}>
-  {text}
-</a>
+<a href={url} bind:this={anchorElement} {target}>{text}</a>

 <style>
-  .color {
-    color: var(--color);
-  }
-
-  .hoverColor:hover {
-    color: var(--color);
-  }
-
  .textDecoration {
    text-decoration: var(--textDecoration);
  }
-
-  .fontSize {
-    font-size: var(--fontSize);
-  }
-
-  .fontFamily {
-    font-family: var(--fontFamily);
-  }
 </style>