Merge pull request #584 from Budibase/removing-uikit-06

Removing UI kit uk-input, uk-toggle, uk-spinner
6 years ago · b067eee80a
19 changed files with 57 additions and 138 deletions
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -78,9 +78,9 @@
    "mustache": "^4.0.1",
    "posthog-js": "1.3.1",
    "shortid": "^2.2.15",
+    "svelte-loading-spinners": "^0.1.1",
    "svelte-portal": "^0.1.0",
    "svelte-simple-modal": "^0.4.2",
-    "uikit": "^3.1.7",
    "yup": "^0.29.2"
  },
  "devDependencies": {
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@ -85,11 +85,6 @@
     box-sizing: border-box; 
 }

-.uk-text-right {
-    display: flex;
-    justify-content: flex-start;
-}
-
 .preview-pane {
    grid-column: 2;
    margin: 80px 60px;
@ -154,3 +149,13 @@

 .bb-table td > :last-child { margin-bottom: 0; }

+.bb__alert {
+    position: relative;
+    margin-bottom: var(--spacing-m);
+    padding: var(--spacing-l);
+}
+
+.bb__alert--danger {
+    background: #fef4f6;
+    color: #f0506e;
+}
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@ -1,5 +1,4 @@
 <script>
-  import UIkit from "uikit"
  import { Modal, Button, Heading, Spacer } from "@budibase/bbui"

  export let title = ""
--- a/packages/builder/src/components/common/ErrorsBox.svelte
+++ b/packages/builder/src/components/common/ErrorsBox.svelte
@ -5,7 +5,7 @@
 </script>

 {#if hasErrors}
-  <div uk-alert class="uk-alert-danger">
+  <div class="bb__alert bb__alert--danger">
    {#each errors as error}
      <div>{error.dataPath} {error.message}</div>
    {/each}
--- a/packages/builder/src/components/common/IconButton.svelte
+++ b/packages/builder/src/components/common/IconButton.svelte
@ -1,59 +0,0 @@
-<script>
-  import getIcon from "./icon"
-
-  export let size = 18
-  export let icon = ""
-  export let style = ""
-  export let color = "var(--ink)"
-  export let hoverColor = "var(--secondary75)"
-  export let attributes = {}
-
-  let currentAttributes = []
-  const addAttributes = (node, attributes) => {
-    const add = _attributes => {
-      const attrs = []
-      for (let attr in _attributes) {
-        node.setAttribute(attr, _attributes[attr])
-        attrs.push("uk-toggle")
-      }
-      currentAttributes = attrs
-    }
-
-    add(attributes)
-
-    return {
-      // should implement update method
-      update(attributes) {
-        for (let attr of currentAttributes) {
-          node.removeAttribute(attr)
-        }
-        add(attributes)
-      },
-      destroy() {},
-    }
-  }
-</script>
-
-<button
-  style="{style}{style ? ';' : ''} color:{color}; --hovercolor:{hoverColor}"
-  on:click
-  use:addAttributes={attributes}>
-  {@html getIcon(icon, size)}
-</button>
-
-<style>
-  button {
-    border-style: none;
-    background-color: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    outline: none;
-  }
-
-  button:hover {
-    color: var(--hovercolor);
-  }
-
-  button:active {
-    outline: none;
-  }
-</style>
--- a/packages/builder/src/components/common/Spinner.svelte
+++ b/packages/builder/src/components/common/Spinner.svelte
@ -1,5 +1,5 @@
 <script>
-  export let ratio = "4.5"
+  import { Circle } from "svelte-loading-spinners"
 </script>

-<span uk-spinner={`ratio: ${ratio}`} />
+<Circle size="60" color="#000000" unit="px" />
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@ -4,7 +4,6 @@
  import { getComponentDefinition } from "builderStore/storeUtils"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { last, cloneDeep } from "lodash/fp"
-  import UIkit from "uikit"
  import {
    selectComponent,
    getParent,
@ -13,20 +12,14 @@
    regenerateCssForCurrentScreen,
  } from "builderStore/storeUtils"
  import { uuid } from "builderStore/uuid"
+  import { DropdownMenu } from "@budibase/bbui"

  export let component

  let confirmDeleteDialog
-  let dropdownEl
-
-  $: dropdown = UIkit.dropdown(dropdownEl, {
-    mode: "click",
-    offset: 0,
-    pos: "bottom-right",
-    "delay-hide": 0,
-    animation: false,
-  })
-  $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
+  let dropdown
+  let anchor
+
  $: noChildrenAllowed =
    !component || !getComponentDefinition($store, component._component).children
  $: noPaste = !$store.componentToPaste
@ -115,11 +108,19 @@
  }
 </script>

-<div class="root boundary" on:click|stopPropagation={() => {}}>
-  <button>
+<div bind:this={anchor} on:click|stopPropagation={() => {}}>
+  <button on:click={dropdown.show}>
    <MoreIcon />
  </button>
-  <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
+</div>
+<DropdownMenu
+  class="menu"
+  bind:this={dropdown}
+  on:click={hideDropdown}
+  width="170px"
+  {anchor}
+  align="left">
+  <ul>
    <li class="item" on:click={() => confirmDeleteDialog.show()}>
      <i class="icon ri-delete-bin-2-line" />
      Delete
@ -167,7 +168,7 @@
      Paste inside
    </li>
  </ul>
-</div>
+</DropdownMenu>

 <ConfirmDialog
  bind:this={confirmDeleteDialog}
@ -177,36 +178,29 @@
  onOk={deleteComponent} />

 <style>
-  .root {
-    overflow: hidden;
-    z-index: 9;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
  }

-  .root button {
-    border-style: none;
-    border-radius: 2px;
-    padding: 5px;
-    background: transparent;
-    cursor: pointer;
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
    color: var(--ink);
-    outline: none;
+    padding: var(--spacing-s) var(--spacing-m);
+    margin: auto 0px;
+    align-items: center;
+    cursor: pointer;
  }

-  .menu {
-    z-index: 100000;
-    overflow: visible;
-    padding: 12px 0px;
-    border-radius: 5px;
+  li:hover {
+    background-color: var(--grey-2);
  }

-  .menu li {
-    border-style: none;
-    background-color: transparent;
-    list-style-type: none;
-    padding: 4px 16px;
-    margin: 0;
-    width: 100%;
-    box-sizing: border-box;
+  li:active {
+    color: var(--blue);
  }

  .item {
@ -219,16 +213,6 @@
    margin-right: 8px;
  }

-  .menu li:not(.disabled) {
-    cursor: pointer;
-    color: var(--grey-7);
-  }
-
-  .menu li:not(.disabled):hover {
-    color: var(--ink);
-    background-color: var(--grey-1);
-  }
-
  .disabled {
    color: var(--grey-4);
    cursor: default;
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@ -2,7 +2,6 @@
  import { setContext, onMount } from "svelte"

  import { store } from "builderStore"
-  import IconButton from "components/common/IconButton.svelte"
  import {
    LayoutIcon,
    PaintIcon,
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@ -2,7 +2,6 @@
  import { store } from "builderStore"
  import { Button, Select } from "@budibase/bbui"
  import HandlerSelector from "./HandlerSelector.svelte"
-  import IconButton from "../../common/IconButton.svelte"
  import ActionButton from "../../common/ActionButton.svelte"
  import getIcon from "../../common/icon"
  import { CloseIcon } from "components/common/Icons/"
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@ -13,7 +13,6 @@
  } from "lodash/fp"
  import { pipe } from "components/common/core"
  import Checkbox from "components/common/Checkbox.svelte"
-  import IconButton from "components/common/IconButton.svelte"
  import EventEditorModal from "./EventEditorModal.svelte"

  import { PencilIcon } from "components/common/Icons"
--- a/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
@ -1,6 +1,5 @@
 <script>
  import { Button, Select } from "@budibase/bbui"
-  import IconButton from "components/common/IconButton.svelte"
  import StateBindingCascader from "./StateBindingCascader.svelte"
  import { find, map, keys, reduce, keyBy } from "lodash/fp"
  import { pipe } from "components/common/core"
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@ -1,6 +1,5 @@
 <script>
  import { Input, Select } from "@budibase/bbui"
-  import IconButton from "components/common/IconButton.svelte"
  import { find, map, keys, reduce, keyBy } from "lodash/fp"
  import { pipe } from "components/common/core"
  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@ -2,7 +2,6 @@
  import { MoreIcon } from "components/common/Icons"
  import { store } from "builderStore"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import UIkit from "uikit"
  import api from "builderStore/api"
  import Portal from "svelte-portal"
  import { DropdownMenu } from "@budibase/bbui"
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@ -4,7 +4,6 @@
  import PageLayout from "./PageLayout.svelte"
  import PagesList from "./PagesList.svelte"
  import { store } from "builderStore"
-  import IconButton from "components/common/IconButton.svelte"
  import NewScreen from "./NewScreen.svelte"
  import CurrentItemPreview from "./CurrentItemPreview.svelte"
  import SettingsView from "./SettingsView.svelte"
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@ -15,7 +15,6 @@
 	<link rel='stylesheet' href='/_builder/bundle.css'>
 	<link rel='stylesheet' href='/_builder/bbui.css'>
 	<link rel='stylesheet' href='/_builder/fonts.css'>
-	<link rel='stylesheet' href="/_builder/uikit.min.css">

 </head>

--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@ -8,7 +8,6 @@
  import { isActive, goto, layout, url } from "@sveltech/routify"

  import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
-  import IconButton from "components/common/IconButton.svelte"

  // Get Package and set store
  export let application
@ -69,9 +68,6 @@
            {title}
          </span>
        {/each}
-        <!-- <IconButton icon="home"
-                      color="var(--grey-2)"
-                      hoverColor="var(--secondary75)"/> -->
      </div>
      <div class="toprightnav">
        <SettingsLink />
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@ -3,7 +3,6 @@
  import { goto } from "@sveltech/routify"
  import { onMount } from "svelte"
  import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
-  import IconButton from "components/common/IconButton.svelte"
  import CurrentItemPreview from "components/userInterface/AppPreview"
  import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
  import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -5,7 +5,6 @@
  import AppList from "components/start/AppList.svelte"
  import { onMount } from "svelte"
  import ActionButton from "components/common/ActionButton.svelte"
-  import IconButton from "components/common/IconButton.svelte"
  import { get } from "builderStore/api"
  import Spinner from "components/common/Spinner.svelte"
  import CreateAppModal from "components/start/CreateAppModal.svelte"
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@ -688,9 +688,10 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

-"@budibase/bbui@^1.29.1":
-  version "1.29.1"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.1.tgz#edaa6c7ce43a71d94460f7a3669ade1d4523333e"
+"@budibase/bbui@^1.29.3":
+  version "1.29.3"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.3.tgz#02d84d5e0f9ca936d62b1e0e9bc943711d124f7a"
+  integrity sha512-X5QBZX2CNccRiW6fbj6/fnUYhlilc6I6ae0QT8oIuv9DozDnUUbdd6j4RMxW1DQBZuvWH54OGq4nwkq9f37hKg==
  dependencies:
    sirv-cli "^0.4.6"

@ -2857,6 +2858,7 @@ for-in@^1.0.2:
 foreach@~2.0.1:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=

 forever-agent@~0.6.1:
  version "0.6.1"
@ -5439,6 +5441,7 @@ shellwords@^0.1.1:
 shortid@^2.2.15:
  version "2.2.15"
  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
  dependencies:
    nanoid "^2.1.0"

@ -5784,6 +5787,11 @@ svelte-jester@^1.0.6:
  dependencies:
    cosmiconfig "^6.0.0"

+svelte-loading-spinners@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/svelte-loading-spinners/-/svelte-loading-spinners-0.1.1.tgz#a35a811b7db0389ec2a5de6904c718c58c36e1f9"
+  integrity sha512-or4zs10VOdczOJo3u25IINXQOkZbLNAxMrXK0PRbzVoJtPQq/QZPNxI32383bpe+soYcEKmESbmW+JlW3MbUKQ==
+
 svelte-portal@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742"
@ -5942,10 +5950,6 @@ typedarray@^0.0.6:
  version "0.0.6"
  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"

-uikit@^3.1.7:
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/uikit/-/uikit-3.4.6.tgz#39d59620aeb42d53ba905a67e99e2015d4aaaf9c"
-
 unicode-canonical-property-names-ecmascript@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"