MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2020-09-07 22:12:59 +01:00 committed by GitHub
parent cfacb8fca0 229b05f47a
commit b067eee80a
19 changed files with 62 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/package.json
View File

@ -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": {

15
packages/builder/src/budibase.css
View File

@ -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
packages/builder/src/components/common/ConfirmDialog.svelte
View File

@ -1,5 +1,4 @@
<script>
import UIkit from "uikit"
import { Modal, Button, Heading, Spacer } from "@budibase/bbui"
export let title = ""

2
packages/builder/src/components/common/ErrorsBox.svelte
View File

@ -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}

59
packages/builder/src/components/common/IconButton.svelte
View File

@ -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>

4
packages/builder/src/components/common/Spinner.svelte
View File

@ -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" />

90
packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
View File

@ -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;

1
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View File

@ -2,7 +2,6 @@
import { setContext, onMount } from "svelte"
import { store } from "builderStore"
import IconButton from "components/common/IconButton.svelte"
import {
LayoutIcon,
PaintIcon,

1
packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
View File

@ -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/"

1
packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
View File

@ -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
packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
View File

@ -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
packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
View File

@ -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"

1
packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
View File

@ -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"

1
packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
View File

@ -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"

1
packages/builder/src/index.html
View File

@ -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>

4
packages/builder/src/pages/[application]/_reset.svelte
View File

@ -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 />

1
packages/builder/src/pages/[application]/frontend/_layout.svelte
View File

@ -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"

1
packages/builder/src/pages/index.svelte
View File

@ -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"

18
packages/builder/yarn.lock
View File

@ -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"