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

Merge branch 'master' of github.com:Budibase/budibase

This commit is contained in:
Michael Shanks 2020-06-01 22:12:13 +01:00
parent 4c6b2a4dad 69cfa532c4
commit cb10cbdd38
7 changed files with 72 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/src/builderStore/generate_css.js
View File

@ -1,3 +1,5 @@
import { toNumber } from "lodash/fp"
export const generate_screen_css = component_arr => {
let styles = ""
for (const { _styles, _id, _children, _component } of component_arr) {
@ -37,7 +39,7 @@ export const generate_css = style => {
export const generate_array_styles = item => {
let safeItem = item === "" ? 0 : item
let hasPx = new RegExp("px$")
if (!hasPx.test(safeItem)) {
if (!hasPx.test(safeItem) && !isNaN(toNumber(safeItem))) {
return `${safeItem}px`
} else {
return safeItem

1
packages/builder/src/components/common/Input.svelte
View File

@ -16,7 +16,6 @@
line-height: 1.3;
padding: 12px;
width: 164px;
float: right;
max-width: 100%;
box-sizing: border-box;
margin: 0;

12
packages/builder/src/components/common/Inputs/InputGroup.svelte
View File

@ -4,7 +4,7 @@
export let meta = []
export let label = ""
export let value = [0, 0, 0, 0]
export let type = "number"
export let type = "text"
export let onChange = () => {}
function handleChange(val, idx) {
@ -28,9 +28,6 @@
</div>
<style>
.input-container {
}
.label {
flex: 0;
}
@ -53,18 +50,17 @@
border: 1px solid var(--grey);
border-radius: 2px;
outline: none;
float: right;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
input[type="text"]::-webkit-inner-spin-button,
input[type="text"]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
input[type="number"] {
input[type="text"] {
-moz-appearance: textfield;
}

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

@ -1,4 +1,4 @@
<script>
<script>
import { MoreIcon } from "components/common/Icons"
import { store } from "builderStore"
import { getComponentDefinition } from "builderStore/store"
@ -155,24 +155,16 @@
<MoreIcon />
</button>
<ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
<li on:click={() => confirmDeleteDialog.show()}>Delete</li>
<li on:click={moveUpComponent}>Move up</li>
<li on:click={moveDownComponent}>Move down</li>
<li on:click={copyComponent}>Duplicate</li>
<li on:click={() => storeComponentForCopy(true)}>Cut</li>
<li on:click={() => storeComponentForCopy(false)}>Copy</li>
<hr />
<li class:disabled={noPaste} on:click={() => pasteComponent('above')}>
Paste above
</li>
<li class:disabled={noPaste} on:click={() => pasteComponent('below')}>
Paste below
</li>
<li
class:disabled={noPaste || noChildrenAllowed}
on:click={() => pasteComponent('inside')}>
Paste inside
</li>
<li class="item" on:click={() => confirmDeleteDialog.show()}><i class="icon ri-delete-bin-2-line"></i>Delete</li>
<li class="item" on:click={moveUpComponent}><i class="icon ri-arrow-up-line"></i>Move up</li>
<li class="item" on:click={moveDownComponent}><i class="icon ri-arrow-down-line"></i>Move down</li>
<li class="item" on:click={copyComponent}><i class="icon ri-repeat-one-line"></i>Duplicate</li>
<li class="item" on:click={() => storeComponentForCopy(true)}><i class="icon ri-scissors-cut-line"></i>Cut</li>
<li class="item" on:click={() => storeComponentForCopy(false)}><i class="icon ri-file-copy-line"></i>Copy</li>
<hr class="hr-style">
<li class="item" class:disabled={noPaste} on:click={() => pasteComponent('above')}><i class="icon ri-insert-row-top"></i>Paste above</li>
<li class="item" class:disabled={noPaste} on:click={() => pasteComponent('below')}><i class="icon ri-insert-row-bottom"></i>Paste below</li>
<li class="item" class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent('inside')}><i class="icon ri-insert-column-right"></i>Paste inside</li>
</ul>
</div>
@ -195,33 +187,44 @@
padding: 5px;
background: transparent;
cursor: pointer;
color: var(--button-text);
color: var(--ink);
outline: none;
}
.menu {
z-index: 100000;
overflow: visible;
padding: 10px 0;
padding: 12px 0px;
border-radius: 5px;
}
.menu li {
border-style: none;
background-color: transparent;
list-style-type: none;
padding: 4px 5px 4px 15px;
padding: 4px 16px;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.item {
display: flex;
align-items: center;
font-size: 14px;
}
.icon {
margin-right: 8px;
}
.menu li:not(.disabled) {
cursor: pointer;
color: var(--ink);
color: var(--ink-light);
}
.menu li:not(.disabled):hover {
color: var(--button-text);
color: var(--ink);
background-color: var(--grey-light);
}
@ -229,4 +232,9 @@
color: var(--grey-dark);
cursor: default;
}
.hr-style {
margin: 8px 0;
color: var(--grey-dark)
}
</style>

27
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View File

@ -40,7 +40,10 @@
class="budibase__nav-item item"
class:selected={currentComponent === component}
style="padding-left: {level * 20 + 53}px">
<div>{get_capitalised_name(component._component)}</div>
<div class="nav-item">
<i class="icon ri-arrow-right-circle-fill" />
{get_capitalised_name(component._component)}
</div>
<div class="actions">
<ComponentDropdownMenu {component} />
</div>
@ -72,15 +75,13 @@
border-radius: 3px;
height: 35px;
align-items: center;
font-weight: 400;
font-size: 13px;
}
.actions {
display: none;
height: 20px;
width: 28px;
color: var(--slate);
height: 24px;
width: 24px;
color: var(--ink);
padding: 0px 5px;
border-style: none;
background: rgba(0, 0, 0, 0);
@ -89,10 +90,22 @@
}
.item:hover {
background: #fafafa;
background: var(--grey-light);
cursor: pointer;
}
.item:hover .actions {
display: block;
}
.nav-item {
display: flex;
align-items: center;
font-size: 14px;
color: var(--ink);
}
.icon {
color: var(--ink-light);
margin-right: 8px;
}
</style>

20
packages/builder/src/components/userInterface/propertyCategories.js
View File

@ -22,11 +22,12 @@ export const layout = [
label: "Direction",
key: "flex-direction",
control: OptionSelect,
initialValue: "Row",
initialValue: "Select Option",
options: [
{ label: "Select Option", value: "" },
{ label: "Row", value: "row" },
{ label: "Row Reverse", value: "rowReverse" },
{ label: "column", value: "column" },
{ label: "Column", value: "column" },
{ label: "Column Reverse", value: "columnReverse" },
],
},
@ -34,8 +35,9 @@ export const layout = [
label: "Justify",
key: "justify-content",
control: OptionSelect,
initialValue: "Flex Start",
initialValue: "Select Option",
options: [
{ label: "Select Option", value: "" },
{ label: "Flex Start", value: "flex-start" },
{ label: "Flex End", value: "flex-end" },
{ label: "Center", value: "center" },
@ -48,8 +50,9 @@ export const layout = [
label: "Align",
key: "align-items",
control: OptionSelect,
initialValue: "Flex Start",
initialValue: "Select Option",
options: [
{ label: "Select Option", value: "" },
{ label: "Flex Start", value: "flex-start" },
{ label: "Flex End", value: "flex-end" },
{ label: "Center", value: "center" },
@ -61,8 +64,9 @@ export const layout = [
label: "Wrap",
key: "flex-wrap",
control: OptionSelect,
initialValue: "NoWrap",
initialValue: "Select Option",
options: [
{ label: "Select Option", value: "" },
{ label: "No Wrap", value: "nowrap" },
{ label: "Wrap", value: "wrap" },
{ label: "Wrap Reverse", value: "wrap-reverse" },
@ -71,10 +75,10 @@ export const layout = [
]
const spacingMeta = [
{ placeholder: "L" },
{ placeholder: "B" },
{ placeholder: "R" },
{ placeholder: "T" },
{ placeholder: "R" },
{ placeholder: "B" },
{ placeholder: "L" },
]
export const spacing = [

2
packages/builder/src/pages/_layout.svelte
View File

@ -197,7 +197,7 @@
.nav-item-title {
font-size: 14px;
color: var(--ink);
font-weight: 500;
font-weight: 400;
margin-left: 12px;
}