Merge branch 'master' of github.com:Budibase/budibase
This commit is contained in:
commit
f631426782
7 changed files with 72 additions and 50 deletions
|
@ -1,3 +1,5 @@
|
||||||
|
import { toNumber } from "lodash/fp"
|
||||||
|
|
||||||
export const generate_screen_css = component_arr => {
|
export const generate_screen_css = component_arr => {
|
||||||
let styles = ""
|
let styles = ""
|
||||||
for (const { _styles, _id, _children, _component } of component_arr) {
|
for (const { _styles, _id, _children, _component } of component_arr) {
|
||||||
|
@ -37,7 +39,7 @@ export const generate_css = style => {
|
||||||
export const generate_array_styles = item => {
|
export const generate_array_styles = item => {
|
||||||
let safeItem = item === "" ? 0 : item
|
let safeItem = item === "" ? 0 : item
|
||||||
let hasPx = new RegExp("px$")
|
let hasPx = new RegExp("px$")
|
||||||
if (!hasPx.test(safeItem)) {
|
if (!hasPx.test(safeItem) && !isNaN(toNumber(safeItem))) {
|
||||||
return `${safeItem}px`
|
return `${safeItem}px`
|
||||||
} else {
|
} else {
|
||||||
return safeItem
|
return safeItem
|
||||||
|
|
|
@ -16,7 +16,6 @@
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
width: 164px;
|
width: 164px;
|
||||||
float: right;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
export let meta = []
|
export let meta = []
|
||||||
export let label = ""
|
export let label = ""
|
||||||
export let value = [0, 0, 0, 0]
|
export let value = [0, 0, 0, 0]
|
||||||
export let type = "number"
|
export let type = "text"
|
||||||
export let onChange = () => {}
|
export let onChange = () => {}
|
||||||
|
|
||||||
function handleChange(val, idx) {
|
function handleChange(val, idx) {
|
||||||
|
@ -28,9 +28,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.input-container {
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
flex: 0;
|
flex: 0;
|
||||||
}
|
}
|
||||||
|
@ -53,18 +50,17 @@
|
||||||
border: 1px solid var(--grey);
|
border: 1px solid var(--grey);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
outline: none;
|
outline: none;
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"]::-webkit-inner-spin-button,
|
input[type="text"]::-webkit-inner-spin-button,
|
||||||
input[type="number"]::-webkit-outer-spin-button {
|
input[type="text"]::-webkit-outer-spin-button {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"] {
|
input[type="text"] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<script>
|
<script>
|
||||||
import { MoreIcon } from "components/common/Icons"
|
import { MoreIcon } from "components/common/Icons"
|
||||||
import { store } from "builderStore"
|
import { store } from "builderStore"
|
||||||
import { getComponentDefinition } from "builderStore/store"
|
import { getComponentDefinition } from "builderStore/store"
|
||||||
|
@ -155,24 +155,16 @@
|
||||||
<MoreIcon />
|
<MoreIcon />
|
||||||
</button>
|
</button>
|
||||||
<ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
|
<ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
|
||||||
<li on:click={() => confirmDeleteDialog.show()}>Delete</li>
|
<li class="item" on:click={() => confirmDeleteDialog.show()}><i class="icon ri-delete-bin-2-line"></i>Delete</li>
|
||||||
<li on:click={moveUpComponent}>Move up</li>
|
<li class="item" on:click={moveUpComponent}><i class="icon ri-arrow-up-line"></i>Move up</li>
|
||||||
<li on:click={moveDownComponent}>Move down</li>
|
<li class="item" on:click={moveDownComponent}><i class="icon ri-arrow-down-line"></i>Move down</li>
|
||||||
<li on:click={copyComponent}>Duplicate</li>
|
<li class="item" on:click={copyComponent}><i class="icon ri-repeat-one-line"></i>Duplicate</li>
|
||||||
<li on:click={() => storeComponentForCopy(true)}>Cut</li>
|
<li class="item" on:click={() => storeComponentForCopy(true)}><i class="icon ri-scissors-cut-line"></i>Cut</li>
|
||||||
<li on:click={() => storeComponentForCopy(false)}>Copy</li>
|
<li class="item" on:click={() => storeComponentForCopy(false)}><i class="icon ri-file-copy-line"></i>Copy</li>
|
||||||
<hr />
|
<hr class="hr-style">
|
||||||
<li class:disabled={noPaste} on:click={() => pasteComponent('above')}>
|
<li class="item" class:disabled={noPaste} on:click={() => pasteComponent('above')}><i class="icon ri-insert-row-top"></i>Paste above</li>
|
||||||
Paste above
|
<li class="item" class:disabled={noPaste} on:click={() => pasteComponent('below')}><i class="icon ri-insert-row-bottom"></i>Paste below</li>
|
||||||
</li>
|
<li class="item" class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent('inside')}><i class="icon ri-insert-column-right"></i>Paste inside</li>
|
||||||
<li class:disabled={noPaste} on:click={() => pasteComponent('below')}>
|
|
||||||
Paste below
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class:disabled={noPaste || noChildrenAllowed}
|
|
||||||
on:click={() => pasteComponent('inside')}>
|
|
||||||
Paste inside
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -195,33 +187,44 @@
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--button-text);
|
color: var(--ink);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
z-index: 100000;
|
z-index: 100000;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
padding: 10px 0;
|
padding: 12px 0px;
|
||||||
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu li {
|
.menu li {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 4px 5px 4px 15px;
|
padding: 4px 16px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.menu li:not(.disabled) {
|
.menu li:not(.disabled) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--ink);
|
color: var(--ink-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu li:not(.disabled):hover {
|
.menu li:not(.disabled):hover {
|
||||||
color: var(--button-text);
|
color: var(--ink);
|
||||||
background-color: var(--grey-light);
|
background-color: var(--grey-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -229,4 +232,9 @@
|
||||||
color: var(--grey-dark);
|
color: var(--grey-dark);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hr-style {
|
||||||
|
margin: 8px 0;
|
||||||
|
color: var(--grey-dark)
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -40,7 +40,10 @@
|
||||||
class="budibase__nav-item item"
|
class="budibase__nav-item item"
|
||||||
class:selected={currentComponent === component}
|
class:selected={currentComponent === component}
|
||||||
style="padding-left: {level * 20 + 53}px">
|
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">
|
<div class="actions">
|
||||||
<ComponentDropdownMenu {component} />
|
<ComponentDropdownMenu {component} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -72,15 +75,13 @@
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-weight: 400;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
display: none;
|
display: none;
|
||||||
height: 20px;
|
height: 24px;
|
||||||
width: 28px;
|
width: 24px;
|
||||||
color: var(--slate);
|
color: var(--ink);
|
||||||
padding: 0px 5px;
|
padding: 0px 5px;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
background: rgba(0, 0, 0, 0);
|
background: rgba(0, 0, 0, 0);
|
||||||
|
@ -89,10 +90,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:hover {
|
.item:hover {
|
||||||
background: #fafafa;
|
background: var(--grey-light);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.item:hover .actions {
|
.item:hover .actions {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
color: var(--ink-light);
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -22,11 +22,12 @@ export const layout = [
|
||||||
label: "Direction",
|
label: "Direction",
|
||||||
key: "flex-direction",
|
key: "flex-direction",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
initialValue: "Row",
|
initialValue: "Select Option",
|
||||||
options: [
|
options: [
|
||||||
|
{ label: "Select Option", value: "" },
|
||||||
{ label: "Row", value: "row" },
|
{ label: "Row", value: "row" },
|
||||||
{ label: "Row Reverse", value: "rowReverse" },
|
{ label: "Row Reverse", value: "rowReverse" },
|
||||||
{ label: "column", value: "column" },
|
{ label: "Column", value: "column" },
|
||||||
{ label: "Column Reverse", value: "columnReverse" },
|
{ label: "Column Reverse", value: "columnReverse" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
@ -34,8 +35,9 @@ export const layout = [
|
||||||
label: "Justify",
|
label: "Justify",
|
||||||
key: "justify-content",
|
key: "justify-content",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
initialValue: "Flex Start",
|
initialValue: "Select Option",
|
||||||
options: [
|
options: [
|
||||||
|
{ label: "Select Option", value: "" },
|
||||||
{ label: "Flex Start", value: "flex-start" },
|
{ label: "Flex Start", value: "flex-start" },
|
||||||
{ label: "Flex End", value: "flex-end" },
|
{ label: "Flex End", value: "flex-end" },
|
||||||
{ label: "Center", value: "center" },
|
{ label: "Center", value: "center" },
|
||||||
|
@ -48,8 +50,9 @@ export const layout = [
|
||||||
label: "Align",
|
label: "Align",
|
||||||
key: "align-items",
|
key: "align-items",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
initialValue: "Flex Start",
|
initialValue: "Select Option",
|
||||||
options: [
|
options: [
|
||||||
|
{ label: "Select Option", value: "" },
|
||||||
{ label: "Flex Start", value: "flex-start" },
|
{ label: "Flex Start", value: "flex-start" },
|
||||||
{ label: "Flex End", value: "flex-end" },
|
{ label: "Flex End", value: "flex-end" },
|
||||||
{ label: "Center", value: "center" },
|
{ label: "Center", value: "center" },
|
||||||
|
@ -61,8 +64,9 @@ export const layout = [
|
||||||
label: "Wrap",
|
label: "Wrap",
|
||||||
key: "flex-wrap",
|
key: "flex-wrap",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
initialValue: "NoWrap",
|
initialValue: "Select Option",
|
||||||
options: [
|
options: [
|
||||||
|
{ label: "Select Option", value: "" },
|
||||||
{ label: "No Wrap", value: "nowrap" },
|
{ label: "No Wrap", value: "nowrap" },
|
||||||
{ label: "Wrap", value: "wrap" },
|
{ label: "Wrap", value: "wrap" },
|
||||||
{ label: "Wrap Reverse", value: "wrap-reverse" },
|
{ label: "Wrap Reverse", value: "wrap-reverse" },
|
||||||
|
@ -71,10 +75,10 @@ export const layout = [
|
||||||
]
|
]
|
||||||
|
|
||||||
const spacingMeta = [
|
const spacingMeta = [
|
||||||
{ placeholder: "L" },
|
|
||||||
{ placeholder: "B" },
|
|
||||||
{ placeholder: "R" },
|
|
||||||
{ placeholder: "T" },
|
{ placeholder: "T" },
|
||||||
|
{ placeholder: "R" },
|
||||||
|
{ placeholder: "B" },
|
||||||
|
{ placeholder: "L" },
|
||||||
]
|
]
|
||||||
|
|
||||||
export const spacing = [
|
export const spacing = [
|
||||||
|
|
|
@ -197,7 +197,7 @@
|
||||||
.nav-item-title {
|
.nav-item-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue