CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-29 11:31:06 +12:00
Code Issues Projects Releases Wiki Activity

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

Browse source 
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 8b9e66539b ff50de83bf
commit f0cbe13268
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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"