Merge pull request #584 from Budibase/removing-uikit-06
Removing UI kit uk-input, uk-toggle, uk-spinner
This commit is contained in:
Tori Sloan
GitHub
commit
f0cbe13268
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script>
|
||||
import UIkit from "uikit"
|
||||
import { Modal, Button, Heading, Spacer } from "@budibase/bbui"
|
||||
|
||||
export let title = ""
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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
|
||||
let dropdown
|
||||
let anchor
|
||||
|
||||
$: dropdown = UIkit.dropdown(dropdownEl, {
|
||||
mode: "click",
|
||||
offset: 0,
|
||||
pos: "bottom-right",
|
||||
"delay-hide": 0,
|
||||
animation: false,
|
||||
})
|
||||
$: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
|
||||
$: 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;
|
||||
}
|
||||
|
||||
.root button {
|
||||
border-style: none;
|
||||
border-radius: 2px;
|
||||
padding: 5px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
z-index: 100000;
|
||||
overflow: visible;
|
||||
padding: 12px 0px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
list-style-type: none;
|
||||
padding: 4px 16px;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--ink);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
margin: auto 0px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--grey-2);
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { setContext, onMount } from "svelte"
|
||||
|
||||
import { store } from "builderStore"
|
||||
import IconButton from "components/common/IconButton.svelte"
|
||||
import {
|
||||
LayoutIcon,
|
||||
PaintIcon,
|
||||
|
|
|
|||
|
|
@ -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/"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue