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

Changes to FlatButtonGroup and more Styling

Browse source
This commit is contained in:
Conor_Mack 2020-05-30 18:48:20 +01:00
parent 976c188f1e
commit 91b88ecad7
8 changed files with 179 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
packages/builder/src/components/common/Input.svelte
View file

@ -1,30 +1,33 @@
<script>
import {buildStyle} from "../../helpers.js"
export let value = ""
export let width = ""
export let textAlign = "left"
export let width = "160px"
export let placeholder = ""
let style = { width }
let style = buildStyle({ width, textAlign })
</script>
<input type="text" style={`width: ${width};`} on:change bind:value />
<input type="text" {placeholder} {style} on:change bind:value />
<style>
input {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--ink);
line-height: 1.3;
padding: 12px;
width: 164px;
float: right;
max-width: 100%;
box-sizing: border-box;
margin: 0;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: #fff;
border: 1px solid var(--grey-dark);
input {
width: 32px;
height: 32px;
font-size: 12px;
font-weight: 700;
margin: 0px 0px 0px 1px;
color: var(--ink);
opacity: 0.7;
padding: 0px 4px;
box-sizing: border-box;
border: 1px solid var(--grey);
border-radius: 2px;
outline: none;
float: right;
}
input::placeholder {
text-align: center;
}
</style>

52
packages/builder/src/components/common/Inputs/InputGroup.svelte
View file

@ -1,35 +1,36 @@
<script>
import { onMount } from "svelte"
import Input from "../Input.svelte"
export let meta = []
export let label = ""
export let value = [0, 0, 0, 0]
export let value = ["0", "0", "0", "0"]
export let type = "number"
export let onChange = () => {}
function handleChange(val, idx) {
value.splice(idx, 1, val)
value = value
onChange(value)
console.log("IDX",idx)
let _value = value.map(v => !/px$/.test(v) ? `${v}px` : v)
onChange(_value)
}
$: displayValues = value.map(v => v.toString().replace(/px$/, ""))
</script>
<div class="input-container">
<div class="label">{label}</div>
<div class="inputs">
{#each meta as { placeholder }, i}
<input
{type}
placeholder={placeholder || ''}
value={!value || value[i] === 0 ? '' : value[i]}
on:change={e => handleChange(e.target.value || 0, i)} />
<Input width="32px" textAlign="center" placeholder={placeholder || ""} value={!displayValues || displayValues[i] === 0 ? '' : displayValues[i]} on:change={e => handleChange(e.target.value || 0, i)} />
{/each}
</div>
</div>
<style>
.input-container {
}
.label {
flex: 0;
@ -39,36 +40,5 @@
flex: 1;
}
input {
width: 40px;
height: 32px;
font-size: 12px;
font-weight: 700;
margin: 0px 0px 0px 1px;
text-align: center;
color: var(--ink);
opacity: 0.7;
padding: 0px 4px;
box-sizing: border-box;
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 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
input::placeholder {
text-align: center;
}
</style>

14
packages/builder/src/components/userInterface/FlatButton.svelte
View file

@ -1,21 +1,26 @@
<script>
import {buildStyle} from "../../helpers.js"
export let value = ""
export let text = ""
export let icon = ""
export let padding = "8px 2px;"
export let onClick = value => {}
export let selected = false
export let fontWeight = ""
$: style = buildStyle({padding, fontWeight})
$: useIcon = !!icon
</script>
<div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
<div class="flatbutton" {style} class:selected on:click={() => onClick(value || text)}>
{#if useIcon}
<i class={icon} />
{:else}
<span>{text}</span>
<span>{@html text}</span>
{/if}
</div>
<style>
.flatbutton {
cursor: pointer;
@ -28,6 +33,7 @@
font-size: 14px;
font-weight: 400;
transition: all 0.3s;
margin-left: 5px;
text-rendering: optimizeLegibility;
}
@ -35,4 +41,8 @@
background: var(--ink-light);
color: #ffffff;
}
i{
font-size: 20px;
}
</style>

6
packages/builder/src/components/userInterface/FlatButtonGroup.svelte
View file

@ -27,13 +27,17 @@
}
onChange(val)
}
const checkSelected = val => isMultiSelect ? value.includes(val) : value === val
$: console.log("VALUE",value)
</script>
<div class="flatbutton-group">
{#each buttonProps as props}
<div class="button-container">
<FlatButton
selected={value.includes(props.value)}
selected={checkSelected(props.value)}
onClick={onButtonClicked}
{...props} />
</div>

10
packages/builder/src/components/userInterface/OptionSelect.svelte
View file

@ -141,7 +141,7 @@
.bb-select-container {
position: relative;
outline: none;
width: 189px;
width: 160px;
height: 32px;
cursor: pointer;
}
@ -158,15 +158,15 @@
.bb-select-anchor > span {
color: #565a66;
font-weight: 500;
width: 145px;
width: 140px;
overflow-x: hidden;
}
.bb-select-anchor > i {
transition: transform 0.13s ease;
transform-origin: center;
width: 25px;
height: 25px;
width: 20px;
height: 20px;
text-align: center;
}
@ -181,7 +181,7 @@
box-sizing: border-box;
flex-direction: column;
opacity: 0;
width: 189px;
width: 160px;
z-index: 2;
color: #808192;
font-weight: 500;

1
packages/builder/src/components/userInterface/PropertyControl.svelte
View file

@ -63,6 +63,7 @@
.control {
flex: 1;
display: flex;
padding-left: 2px;
max-width: 164px;
}

144
packages/builder/src/components/userInterface/propertyCategories.js
View file

@ -1,6 +1,7 @@
import Input from "../common/Input.svelte"
import OptionSelect from "./OptionSelect.svelte"
import InputGroup from "../common/Inputs/InputGroup.svelte"
import FlatButtonGroup from "./FlatButtonGroup.svelte"
// import Colorpicker from "../common/Colorpicker.svelte"
/*
TODO: Allow for default values for all properties
@ -20,13 +21,16 @@ export const layout = [
{
label: "Direction",
key: "flex-direction",
control: OptionSelect,
initialValue: "Row",
options: [
{ label: "Row", value: "row" },
{ label: "Row Reverse", value: "rowReverse" },
{ label: "column", value: "column" },
{ label: "Column Reverse", value: "columnReverse" },
control: FlatButtonGroup,
buttonProps: [
{ icon: "ri-arrow-right-line", padding: "4px 8px", value: "row" },
{ icon: "ri-arrow-left-line", padding: "4px 8px", value: "rowReverse" },
{ icon: "ri-arrow-down-line", padding: "4px 8px", value: "column" },
{
icon: "ri-arrow-up-line",
padding: "4px 8px",
value: "columnReverse",
},
],
},
{
@ -68,10 +72,10 @@ export const layout = [
]
const spacingMeta = [
{ placeholder: "L" },
{ placeholder: "B" },
{ placeholder: "R" },
{ placeholder: "T" },
{ placeholder: "&#8593;" },
{ placeholder: "&#8594;" },
{ placeholder: "&#8595;" },
{ placeholder: "&#8592;" },
]
export const spacing = [
@ -85,12 +89,54 @@ export const spacing = [
]
export const size = [
{ label: "Width", key: "width", control: Input },
{ label: "Height", key: "height", control: Input },
{ label: "Min W", key: "min-width", control: Input },
{ label: "Min H", key: "min-height", control: Input },
{ label: "Max W", key: "max-width", control: Input },
{ label: "Max H", key: "max-height", control: Input },
{
label: "Width",
key: "width",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Height",
key: "height",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Min W",
key: "min-width",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Min H",
key: "min-height",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Max W",
key: "max-width",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Max H",
key: "max-height",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
]
export const position = [
@ -111,26 +157,41 @@ export const position = [
label: "Top",
key: "top",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Right",
key: "right",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Bottom",
key: "bottom",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Left",
key: "left",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Z-index",
key: "z-index",
control: Input,
placeholder: "Num",
width: "48px",
textAlign: "center",
},
]
@ -166,8 +227,23 @@ export const typography = [
control: OptionSelect,
options: ["normal", "bold", "bolder", "lighter"],
},
{ label: "size", key: "font-size", defaultValue: "", control: Input },
{ label: "Line H", key: "line-height", control: Input },
{
label: "size",
key: "font-size",
defaultValue: "",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Line H",
key: "line-height",
control: Input,
placeholder: "lh",
width: "48px",
textAlign: "center",
},
{
label: "Color",
key: "color",
@ -176,11 +252,31 @@ export const typography = [
{
label: "align",
key: "text-align",
control: OptionSelect,
options: ["initial", "left", "right", "center", "justify"],
}, //custom
{ label: "transform", key: "text-transform", control: Input }, //custom
{ label: "style", key: "font-style", control: Input }, //custom
control: FlatButtonGroup,
buttonProps: [
{ icon: "ri-align-left", padding: "4px 8px", value: "left" },
{ icon: "ri-align-center", padding: "4px 8px", value: "center" },
{ icon: "ri-align-right", padding: "4px 8px", value: "right" },
{ icon: "ri-align-justify", padding: "4px 8px", value: "justify" },
],
},
{
label: "transform",
key: "text-transform",
control: FlatButtonGroup,
buttonProps: [
{ text: "BB", padding: "4px 8px", fontWeight: 500, value: "uppercase" },
{ text: "Bb", padding: "4px 8px", fontWeight: 500, value: "capitalize" },
{ text: "bb", padding: "4px 8px", fontWeight: 500, value: "lowercase" },
{
text: "&times;",
padding: "4px 8px",
fontWeight: 500,
value: "none",
},
],
},
{ label: "style", key: "font-style", control: Input },
]
export const background = [

3
packages/builder/src/helpers.js
View file

@ -2,7 +2,8 @@ export const buildStyle = styles => {
let str = ""
for (let s in styles) {
if (styles[s]) {
str += `${s}: ${styles[s]}; `
let key = convertCamel(s)
str += `${key}: ${styles[s]}; `
}
}
return str