Formatting and linting

2020-06-24 16:20:15 +01:00 · 2020-06-24 16:20:15 +01:00 · 9b8cc2a18f
parent 6259cdc7e6
commit 9b8cc2a18f
11 changed files with 300 additions and 294 deletions
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@ -55,9 +55,7 @@

  $: {
    if ($backendUiStore.selectedView) {
-      api
-        .fetchDataForView($backendUiStore.selectedView)
-        .then(records => {
+      api.fetchDataForView($backendUiStore.selectedView).then(records => {
        data = records || []
        headers = Object.keys($backendUiStore.selectedModel.schema).filter(
          key => !INTERNAL_HEADERS.includes(key)
--- a/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
@ -5,7 +5,6 @@

  export let record
  export let onClosed
-
 </script>

 <section>
--- a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
@ -1,6 +1,6 @@
 <script>
-    import {buildStyle} from "./helpers.js"
-    import {fade} from "svelte/transition"
+  import { buildStyle } from "./helpers.js"
+  import { fade } from "svelte/transition"

  export let backgroundSize = "10px"
  export let borderRadius = ""
@ -8,7 +8,7 @@
  export let width = ""
  export let margin = ""

-    $: style = buildStyle({backgroundSize, borderRadius, height, width, margin})
+  $: style = buildStyle({ backgroundSize, borderRadius, height, width, margin })

  $: style = buildStyle({ backgroundSize, borderRadius, height, width })
 </script>
@ -16,6 +16,9 @@
 <div {style}>
  <slot />
 </div>
+<div in:fade {style}>
+  <slot />
+</div>

 <style>
  div {
@ -24,7 +27,3 @@
    width: fit-content;
  }
 </style>
-
-<div in:fade {style}>
-    <slot />
-</div>
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@ -1,7 +1,7 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
-  import { fade } from 'svelte/transition';
-  import Swatch from "./Swatch.svelte";
+  import { onMount, createEventDispatcher } from "svelte"
+  import { fade } from "svelte/transition"
+  import Swatch from "./Swatch.svelte"
  import CheckedBackground from "./CheckedBackground.svelte"
  import { buildStyle } from "./helpers.js"
  import {
@ -14,16 +14,16 @@
  import ButtonGroup from "./ButtonGroup.svelte"
  import Input from "./Input.svelte"

-  export let value = "#3ec1d3ff";
+  export let value = "#3ec1d3ff"
  export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
  export let disableSwatches = false
-  export let format = "hexa";
-  export let open = false;
+  export let format = "hexa"
+  export let open = false

-  export let pickerHeight = 0;
-  export let pickerWidth = 0;
+  export let pickerHeight = 0
+  export let pickerWidth = 0

-  let adder = null;
+  let adder = null

  let h = null
  let s = null
@ -33,7 +33,7 @@
  const dispatch = createEventDispatcher()

  onMount(() => {
-    if(!swatches.length > 0) {
+    if (!swatches.length > 0) {
      //Don't use locally stored recent colors if swatches have been passed as props
      getRecentColors()
    }
@ -74,24 +74,24 @@

  //fired by choosing a color from the palette
  function setSaturationAndValue({ detail }) {
-    s = detail.s;
-    v = detail.v;
-    value = convertHsvaToFormat([h, s, v, a], format);
+    s = detail.s
+    v = detail.v
+    value = convertHsvaToFormat([h, s, v, a], format)
    dispatchValue()
  }

-  function setHue({color, isDrag}) {
-    h = color;
-    value = convertHsvaToFormat([h, s, v, a], format);   
-    if(!isDrag) {
+  function setHue({ color, isDrag }) {
+    h = color
+    value = convertHsvaToFormat([h, s, v, a], format)
+    if (!isDrag) {
      dispatchValue()
    }
  }

-  function setAlpha({color, isDrag}) {
-    a = color === "1.00" ? "1" : color;
-    value = convertHsvaToFormat([h, s, v, a], format);    
-    if(!isDrag) {
+  function setAlpha({ color, isDrag }) {
+    a = color === "1.00" ? "1" : color
+    value = convertHsvaToFormat([h, s, v, a], format)
+    if (!isDrag) {
      dispatchValue()
    }
  }
@ -107,37 +107,36 @@

  function handleColorInput(text) {
    let format = getColorFormat(text)
-    if(format) {
+    if (format) {
      value = text
      convertAndSetHSVA()
    }
  }

  function dispatchInputChange() {
-    if(format) {
+    if (format) {
      dispatchValue()
    }
  }

  function addSwatch() {
-    if(format) {
+    if (format) {
      dispatch("addswatch", value)
      setRecentColor(value)
    }
  }

  function removeSwatch(idx) {
-    let removedSwatch = swatches.splice(idx, 1);
+    let removedSwatch = swatches.splice(idx, 1)
    swatches = swatches
    dispatch("removeswatch", removedSwatch)
    localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
  }

-
  function applySwatch(color) {
-    if(value !== color) {
+    if (value !== color) {
      format = getColorFormat(color)
-      if(format) {
+      if (format) {
        value = color
        convertAndSetHSVA()
        dispatchValue()
@ -145,8 +144,8 @@
    }
  }

-    $: border = (v > 90 && s < 5) ? "1px dashed #dedada" : ""
-    $: style = buildStyle({background: value, border})
+  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
+  $: style = buildStyle({ background: value, border })
  $: shrink = swatches.length > 0
 </script>

@ -182,6 +181,73 @@
    </div>
  </div>

+</div>
+<div
+  class="colorpicker-container"
+  bind:clientHeight={pickerHeight}
+  bind:clientWidth={pickerWidth}>
+
+  <div class="palette-panel">
+    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+  </div>
+
+  <div class="control-panel">
+    <div class="alpha-hue-panel">
+      <div>
+        <CheckedBackground borderRadius="50%" backgroundSize="8px">
+          <div class="selected-color" {style} />
+        </CheckedBackground>
+      </div>
+      <div>
+        <Slider
+          type="hue"
+          value={h}
+          on:change={hue => setHue(hue.detail)}
+          on:dragend={dispatchValue} />
+
+        <CheckedBackground borderRadius="10px" backgroundSize="7px">
+          <Slider
+            type="alpha"
+            value={a}
+            on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
+            on:dragend={dispatchValue} />
+        </CheckedBackground>
+
+      </div>
+    </div>
+
+    {#if !disableSwatches}
+      <div transition:fade class="swatch-panel">
+        {#if swatches.length > 0}
+          {#each swatches as color, idx}
+            <Swatch
+              {color}
+              on:click={() => applySwatch(color)}
+              on:removeswatch={() => removeSwatch(idx)} />
+          {/each}
+        {/if}
+        {#if swatches.length !== 12}
+          <div
+            bind:this={adder}
+            transition:fade
+            class="adder"
+            on:click={addSwatch}
+            class:shrink>
+            <span>&plus;</span>
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="format-input-panel">
+      <ButtonGroup {format} onclick={changeFormatAndConvert} />
+      <Input
+        {value}
+        on:input={event => handleColorInput(event.target.value)}
+        on:change={dispatchInputChange} />
+    </div>
+  </div>
+
 </div>

 <style>
@ -263,54 +329,3 @@
    padding-top: 3px;
  }
 </style>
-
-<div class="colorpicker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth}>
-
-  <div class="palette-panel">
-    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-  </div>
-
-  <div class="control-panel">
-    <div class="alpha-hue-panel">
-      <div>
-        <CheckedBackground borderRadius="50%" backgroundSize="8px">
-          <div class="selected-color" {style} />
-        </CheckedBackground>
-      </div>
-      <div>
-        <Slider type="hue" value={h} on:change={(hue) => setHue(hue.detail)} on:dragend={dispatchValue} />
-
-        <CheckedBackground borderRadius="10px" backgroundSize="7px">
-          <Slider
-            type="alpha"
-            value={a}
-            on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)} 
-            on:dragend={dispatchValue}
-            />
-        </CheckedBackground>
-        
-      </div>
-    </div>
-
-      {#if !disableSwatches}
-        <div transition:fade class="swatch-panel">
-          {#if swatches.length > 0}
-            {#each swatches as color, idx}
-              <Swatch {color} on:click={() => applySwatch(color)} on:removeswatch={() => removeSwatch(idx)} />
-            {/each}
-          {/if}
-          {#if swatches.length !== 12}
-            <div bind:this={adder} transition:fade class="adder" on:click={addSwatch} class:shrink>
-              <span>&plus;</span>
-            </div>
-          {/if}
-        </div>
-      {/if}
-
-    <div class="format-input-panel">
-      <ButtonGroup {format} onclick={changeFormatAndConvert} />
-      <Input {value} on:input={event => handleColorInput(event.target.value)} on:change={dispatchInputChange} />
-    </div>
-  </div>
-
-</div>
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@ -1,21 +1,21 @@
 <script>
  import Colorpicker from "./Colorpicker.svelte"
  import CheckedBackground from "./CheckedBackground.svelte"
-    import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
+  import { createEventDispatcher, afterUpdate, beforeUpdate } from "svelte"

-    import {buildStyle} from "./helpers.js"
-    import { fade } from 'svelte/transition';
-    import {getColorFormat} from "./utils.js"
+  import { buildStyle } from "./helpers.js"
+  import { fade } from "svelte/transition"
+  import { getColorFormat } from "./utils.js"

  export let value = "#3ec1d3ff"
  export let swatches = []
  export let disableSwatches = false
-    export let open = false;
+  export let open = false
  export let width = "25px"
  export let height = "25px"

-    let format = "hexa";
-    let dimensions = {top: 0, left: 0}
+  let format = "hexa"
+  let dimensions = { top: 0, left: 0 }
  let colorPreview = null

  let previewHeight = null
@ -24,36 +24,41 @@
  let pickerHeight = 0

  let anchorEl = null
-    let parentNodes = [];
+  let parentNodes = []
  let errorMsg = null

-    $: previewStyle = buildStyle({width, height, background: value})
-    $: errorPreviewStyle = buildStyle({width, height})
-    $: pickerStyle = buildStyle({top: `${dimensions.top}px`, left: `${dimensions.left}px`})    
+  $: previewStyle = buildStyle({ width, height, background: value })
+  $: errorPreviewStyle = buildStyle({ width, height })
+  $: pickerStyle = buildStyle({
+    top: `${dimensions.top}px`,
+    left: `${dimensions.left}px`,
+  })

  const dispatch = createEventDispatcher()

  beforeUpdate(() => {
    format = getColorFormat(value)
-       if(!format) {
+    if (!format) {
      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
      console.error(errorMsg)
-       }else{
+    } else {
      errorMsg = null
    }
  })

  afterUpdate(() => {
-        if(colorPreview && colorPreview.offsetParent && !anchorEl) {
+    if (colorPreview && colorPreview.offsetParent && !anchorEl) {
      //Anchor relative to closest positioned ancestor element. If none, then anchor to body
      anchorEl = colorPreview.offsetParent
      let curEl = colorPreview
      let els = []
      //Travel up dom tree from preview element to find parent elements that scroll
-                while(!anchorEl.isSameNode(curEl)) {
+      while (!anchorEl.isSameNode(curEl)) {
        curEl = curEl.parentNode
-                    let elOverflow = window.getComputedStyle(curEl).getPropertyValue("overflow")                    
-                    if(/scroll|auto/.test(elOverflow)) {
+        let elOverflow = window
+          .getComputedStyle(curEl)
+          .getPropertyValue("overflow")
+        if (/scroll|auto/.test(elOverflow)) {
          els.push(curEl)
        }
      }
@ -61,34 +66,13 @@
    }
  })

-
-    function openColorpicker(event) {
-        if(colorPreview) {
-            open = true;        
-        }
-    }
-
-    $: if(open && colorPreview) {
-        const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()   
-        const {innerHeight, innerWidth} = window
-
-        const {offsetLeft, offsetTop} = colorPreview
-        //get the scrollTop value for all scrollable parent elements 
-        let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
-
-        const spaceBelow = (innerHeight - spaceAbove) - previewHeight
-        const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop      
-        
-        //TOO: Testing and Scroll Awareness for x Scroll
-        const spaceRight = (innerWidth - spaceLeft) + previewWidth
-        const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
-
-        dimensions = {top, left}
-    }
-  })
-
  function openColorpicker(event) {
    if (colorPreview) {
+      open = true
+    }
+  }
+
+  $: if (open && colorPreview) {
    const {
      top: spaceAbove,
      width,
@ -119,28 +103,41 @@
        : offsetLeft - pickerWidth

    dimensions = { top, left }
-
-      open = true
  }

+  function onColorChange(color) {
+    value = color.detail
+    dispatch("change", color.detail)
+  }
 </script>

 <div class="color-preview-container">
  {#if !errorMsg}
    <CheckedBackground borderRadius="3px" backgroundSize="8px">
-            <div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker} />        
+      <div
+        bind:this={colorPreview}
+        bind:clientHeight={previewHeight}
+        bind:clientWidth={previewWidth}
+        class="color-preview"
+        style={previewStyle}
+        on:click={openColorpicker} />
    </CheckedBackground>

    {#if open}
      <div transition:fade class="picker-container" style={pickerStyle}>
-            <Colorpicker on:change={onColorChange} on:addswatch on:removeswatch bind:format bind:value bind:pickerHeight bind:pickerWidth {swatches} {disableSwatches} {open} />
-        </div>
-        <div on:click|self={() => open = false} class="overlay"></div>
-        {/if}
-    {:else}
-        <div class="color-preview preview-error" style={errorPreviewStyle}>
-            <span>&times;</span>
+        <Colorpicker
+          on:change={onColorChange}
+          on:addswatch
+          on:removeswatch
+          bind:format
+          bind:value
+          bind:pickerHeight
+          bind:pickerWidth
+          {swatches}
+          {disableSwatches}
+          {open} />
      </div>
+      <div on:click|self={() => (open = false)} class="overlay" />
    {/if}
  {:else}
    <div class="color-preview preview-error" style={errorPreviewStyle}>
--- a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
@ -5,6 +5,9 @@
 <div>
  <input on:input type="text" {value} maxlength="25" />
 </div>
+<div>
+  <input on:input on:change type="text" {value} maxlength="25" />
+</div>

 <style>
  div {
@ -26,7 +29,3 @@
    font-weight: 550;
  }
 </style>
-
-<div>
-  <input on:input on:change type="text" {value} maxlength="25" />
-</div>
--- a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
@ -21,7 +21,8 @@
    if (
      clickX > 0 &&
      clickY > 0 &&
-      clickX < paletteWidth && clickY < paletteHeight
+      clickX < paletteWidth &&
+      clickY < paletteHeight
    ) {
      let s = (clickX / paletteWidth) * 100
      let v = 100 - (clickY / paletteHeight) * 100
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@ -11,18 +11,15 @@
  let sliderWidth = 0

  function onSliderChange(mouseX, isDrag = false) {
-    const { left, width } = slider.getBoundingClientRect();
-    let clickPosition = mouseX - left;
+    const { left, width } = slider.getBoundingClientRect()
+    let clickPosition = mouseX - left

    let percentageClick = (clickPosition / sliderWidth).toFixed(2)

    if (percentageClick >= 0 && percentageClick <= 1) {
-      let value =
-        type === "hue"
-          ? 360 * percentageClick
-          : percentageClick;
+      let value = type === "hue" ? 360 * percentageClick : percentageClick

-      dispatch("change", {color: value, isDrag});
+      dispatch("change", { color: value, isDrag })
    }
  }

@ -45,6 +42,20 @@
    class="slider-thumb"
    {style} />
 </div>
+<div
+  bind:this={slider}
+  bind:clientWidth={sliderWidth}
+  on:click={event => onSliderChange(event.clientX)}
+  class="color-format-slider"
+  class:hue={type === 'hue'}
+  class:alpha={type === 'alpha'}>
+  <div
+    use:dragable
+    on:drag={e => onSliderChange(e.detail, true)}
+    on:dragend
+    class="slider-thumb"
+    {style} />
+</div>

 <style>
  .color-format-slider {
@ -86,18 +97,3 @@
    cursor: grab;
  }
 </style>
-
-<div
-  bind:this={slider}
-  bind:clientWidth={sliderWidth}
-  on:click={event => onSliderChange(event.clientX)}
-  class="color-format-slider"
-  class:hue={type === 'hue'}
-  class:alpha={type === 'alpha'}>
-  <div
-    use:dragable
-    on:drag={e => onSliderChange(e.detail, true)}
-    on:dragend
-    class="slider-thumb"
-    {style} />
-</div>
--- a/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
@ -1,15 +1,35 @@
 <script>
-    import {createEventDispatcher} from "svelte"
-    import { fade } from 'svelte/transition';
+  import { createEventDispatcher } from "svelte"
+  import { fade } from "svelte/transition"
  import CheckedBackground from "./CheckedBackground.svelte"

  export let hovered = false
  export let color = "#fff"

  const dispatch = createEventDispatcher()
-
 </script>

+<div class="space">
+  <CheckedBackground borderRadius="6px">
+    <div
+      in:fade
+      class="swatch"
+      style={`background: ${color};`}
+      on:click|self
+      on:mouseover={() => (hovered = true)}
+      on:mouseleave={() => (hovered = false)}>
+      {#if hovered}
+        <div
+          in:fade
+          class="remove-icon"
+          on:click|self={() => dispatch('removeswatch')}>
+          <span on:click|self={() => dispatch('removeswatch')}>&times;</span>
+        </div>
+      {/if}
+    </div>
+  </CheckedBackground>
+</div>
+
 <style>
  .swatch {
    position: relative;
@ -29,7 +49,7 @@
    right: 0;
    top: -5px;
    right: -4px;
-    width:10px;
+    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #800000;
@ -39,15 +59,3 @@
    align-items: center;
  }
 </style>
-
-<div class="space">
-  <CheckedBackground borderRadius="6px"> 
-    <div in:fade class="swatch" style={`background: ${color};`} on:click|self on:mouseover={() => hovered = true} on:mouseleave={() => hovered = false}>
-        {#if hovered}
-        <div in:fade class="remove-icon" on:click|self={()=> dispatch("removeswatch")}>
-            <span on:click|self={()=> dispatch("removeswatch")}>&times;</span>
-        </div>
-        {/if}
-    </div>            
-</CheckedBackground>
-</div>
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
@ -15,7 +15,6 @@
  }
 </script>

-
 <div
  class="workflow-block hoverable"
  on:click={addBlockToWorkflow}
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@ -23,7 +23,10 @@

  const login = async () => {
    loading = true
-    const response = await _bb.api.post("/api/authenticate", { username, password })
+    const response = await _bb.api.post("/api/authenticate", {
+      username,
+      password,
+    })
    if (response.status === 200) {
      const json = await response.json()
      localStorage.setItem("budibase:token", json.token)
@ -38,20 +41,12 @@

 <div class="container">
  <div class="root">
-    <div class="content">
-      {#if _logo}
-        <div class="logo-container">
-          <img src={_logo} alt="logo" />
-        </div>
-      {/if}
-
-
-<div class="root">
    <div class="content">
      {#if logo}
        <div class="logo-container">
          <img src={logo} alt="logo" />
        </div>
+      {/if}

      <div class="login-button-container">
        <button disabled={loading} on:click={login} class={_buttonClass}>