Merge branch 'master' of github.com:Budibase/budibase
This commit is contained in:
commit
45a0d6daf5
9 changed files with 120 additions and 52 deletions
|
@ -1 +1,10 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
height="24">
|
||||||
|
<path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414
|
||||||
|
1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
|
||||||
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 266 B After Width: | Height: | Size: 292 B |
|
@ -1 +1,6 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
|
<path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
|
||||||
|
10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z" />
|
||||||
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 253 B After Width: | Height: | Size: 271 B |
|
@ -1,21 +1,17 @@
|
||||||
<script>
|
<script>
|
||||||
import Button from "components/common/Button.svelte"
|
import Button from "components/common/Button.svelte"
|
||||||
export let name, description =`A minimalist CRM which removes the noise and allows you to focus
|
export let name,
|
||||||
on your business.`, _id;
|
description = `A minimalist CRM which removes the noise and allows you to focus
|
||||||
|
on your business.`,
|
||||||
|
_id
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="apps-card">
|
<div class="apps-card">
|
||||||
<h3 class="app-title">{name}</h3>
|
<h3 class="app-title">{name}</h3>
|
||||||
<p class="app-desc">
|
<p class="app-desc">{description}</p>
|
||||||
{description}
|
|
||||||
</p>
|
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<div class="modified-date">Last Edited - 25th May 2020</div>
|
<div class="modified-date">Last Edited - 25th May 2020</div>
|
||||||
<a href={`/_builder/${_id}`} class="app-button">
|
<a href={`/_builder/${_id}`} class="app-button">Open Web App</a>
|
||||||
Open Web App
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -19,20 +19,20 @@
|
||||||
<style>
|
<style>
|
||||||
.flatbutton {
|
.flatbutton {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 8px 4px;
|
padding: 8px 2px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
color: var(--ink-light);
|
color: var(--ink-light);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
transition: background 0.5s, color 0.5s ease;
|
transition: all 0.3s;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
background: #808192;
|
background: var(--ink-light);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
|
|
||||||
import FlatButton from "./FlatButton.svelte"
|
import FlatButton from "./FlatButton.svelte"
|
||||||
export let buttonProps = []
|
export let buttonProps = []
|
||||||
export let isMultiSelect = false
|
export let isMultiSelect = false
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { fly } from "svelte/transition"
|
||||||
export let item
|
export let item
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="item-item" on:click>
|
<div class="item-item" transition:fly={{ y: 100, duration: 1000 }} on:click>
|
||||||
<div class="item-icon">
|
<div class="item-icon">
|
||||||
<i class={item.icon} />
|
<i class={item.icon} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -11,9 +11,8 @@ export const layout = [
|
||||||
label: "Display",
|
label: "Display",
|
||||||
key: "display",
|
key: "display",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
initialValue: "Select Option",
|
initialValue: "Flex",
|
||||||
options: [
|
options: [
|
||||||
{ label: "Select Option", value: "Na" },
|
|
||||||
{ label: "Flex", value: "flex" },
|
{ label: "Flex", value: "flex" },
|
||||||
{ label: "Inline Flex", value: "inline-flex" },
|
{ label: "Inline Flex", value: "inline-flex" },
|
||||||
],
|
],
|
||||||
|
@ -22,9 +21,8 @@ export const layout = [
|
||||||
label: "Direction",
|
label: "Direction",
|
||||||
key: "flex-direction",
|
key: "flex-direction",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
initialValue: "Select Option",
|
initialValue: "Row",
|
||||||
options: [
|
options: [
|
||||||
{ label: "Select Option", value: "Na" },
|
|
||||||
{ 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" },
|
||||||
|
@ -35,9 +33,8 @@ export const layout = [
|
||||||
label: "Justify",
|
label: "Justify",
|
||||||
key: "justify-content",
|
key: "justify-content",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
initialValue: "Select Option",
|
initialValue: "Flex Start",
|
||||||
options: [
|
options: [
|
||||||
{ label: "Select Option", value: "Na" },
|
|
||||||
{ 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" },
|
||||||
|
@ -50,9 +47,8 @@ export const layout = [
|
||||||
label: "Align",
|
label: "Align",
|
||||||
key: "align-items",
|
key: "align-items",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
initialValue: "Select Option",
|
initialValue: "Flex Start",
|
||||||
options: [
|
options: [
|
||||||
{ label: "Select Option", value: "Na" },
|
|
||||||
{ 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" },
|
||||||
|
@ -66,7 +62,6 @@ export const layout = [
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
initialValue: "Wrap",
|
initialValue: "Wrap",
|
||||||
options: [
|
options: [
|
||||||
{ label: "Select Option", value: "Na" },
|
|
||||||
{ label: "Wrap", value: "wrap" },
|
{ label: "Wrap", value: "wrap" },
|
||||||
{ label: "No Wrap", value: "nowrap" },
|
{ label: "No Wrap", value: "nowrap" },
|
||||||
{ label: "Wrap Reverse", value: "wrap-reverse" },
|
{ label: "Wrap Reverse", value: "wrap-reverse" },
|
||||||
|
@ -80,6 +75,7 @@ const spacingMeta = [
|
||||||
{ placeholder: "R" },
|
{ placeholder: "R" },
|
||||||
{ placeholder: "T" },
|
{ placeholder: "T" },
|
||||||
]
|
]
|
||||||
|
|
||||||
export const spacing = [
|
export const spacing = [
|
||||||
{ label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
|
{ label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
|
||||||
{
|
{
|
||||||
|
@ -104,14 +100,40 @@ export const position = [
|
||||||
label: "Position",
|
label: "Position",
|
||||||
key: "position",
|
key: "position",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
|
initialValue: "Wrap",
|
||||||
options: [
|
options: [
|
||||||
{ label: "static" },
|
{ label: "Static", value: "static" },
|
||||||
{ label: "relative" },
|
{ label: "Relative", value: "relative" },
|
||||||
{ label: "fixed" },
|
{ label: "Fixed", value: "fixed" },
|
||||||
{ label: "absolute" },
|
{ label: "Absolute", value: "absolute" },
|
||||||
{ label: "sticky" },
|
{ label: "Sticky", value: "sticky" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: "Top",
|
||||||
|
key: "top",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Right",
|
||||||
|
key: "right",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Bottom",
|
||||||
|
key: "bottom",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Left",
|
||||||
|
key: "left",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Z-index",
|
||||||
|
key: "z-index",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
export const typography = [
|
export const typography = [
|
||||||
|
@ -122,13 +144,21 @@ export const typography = [
|
||||||
defaultValue: "initial",
|
defaultValue: "initial",
|
||||||
options: [
|
options: [
|
||||||
"initial",
|
"initial",
|
||||||
"Times New Roman",
|
|
||||||
"Georgia",
|
|
||||||
"Arial",
|
"Arial",
|
||||||
"Arial Black",
|
"Arial Black",
|
||||||
|
"Cursive",
|
||||||
|
"Courier",
|
||||||
"Comic Sans MS",
|
"Comic Sans MS",
|
||||||
|
"Helvetica",
|
||||||
"Impact",
|
"Impact",
|
||||||
|
"Inter",
|
||||||
"Lucida Sans Unicode",
|
"Lucida Sans Unicode",
|
||||||
|
"Open Sans",
|
||||||
|
"Playfair",
|
||||||
|
"Roboto",
|
||||||
|
"Roboto Mono",
|
||||||
|
"Times New Roman",
|
||||||
|
"Verdana",
|
||||||
],
|
],
|
||||||
styleBindingProperty: "font-family",
|
styleBindingProperty: "font-family",
|
||||||
},
|
},
|
||||||
|
@ -148,8 +178,7 @@ export const typography = [
|
||||||
{
|
{
|
||||||
label: "Color",
|
label: "Color",
|
||||||
key: "color",
|
key: "color",
|
||||||
control: OptionSelect,
|
control: Input,
|
||||||
options: ["black", "white", "red", "blue", "green"],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "align",
|
label: "align",
|
||||||
|
@ -165,8 +194,7 @@ export const background = [
|
||||||
{
|
{
|
||||||
label: "Background",
|
label: "Background",
|
||||||
key: "background",
|
key: "background",
|
||||||
control: OptionSelect,
|
control: Input,
|
||||||
options: ["black", "white", "red", "blue", "green"],
|
|
||||||
},
|
},
|
||||||
{ label: "Image", key: "image", control: Input }, //custom
|
{ label: "Image", key: "image", control: Input }, //custom
|
||||||
]
|
]
|
||||||
|
@ -177,15 +205,45 @@ export const border = [
|
||||||
{
|
{
|
||||||
label: "Color",
|
label: "Color",
|
||||||
key: "border-color",
|
key: "border-color",
|
||||||
control: OptionSelect,
|
control: Input,
|
||||||
options: ["black", "white", "red", "blue", "green"],
|
},
|
||||||
|
{
|
||||||
|
label: "Style",
|
||||||
|
key: "border-style",
|
||||||
|
control: OptionSelect,
|
||||||
|
options: [
|
||||||
|
"none",
|
||||||
|
"hidden",
|
||||||
|
"dotted",
|
||||||
|
"dashed",
|
||||||
|
"solid",
|
||||||
|
"double",
|
||||||
|
"groove",
|
||||||
|
"ridge",
|
||||||
|
"inset",
|
||||||
|
"outset",
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{ label: "Style", key: "border-style", control: Input },
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export const effects = [
|
export const effects = [
|
||||||
{ label: "Opacity", key: "opacity", control: Input },
|
{ label: "Opacity", key: "opacity", control: Input },
|
||||||
{ label: "Rotate", key: "transform", control: Input }, //needs special control
|
{
|
||||||
|
label: "Rotate",
|
||||||
|
key: "transform",
|
||||||
|
control: OptionSelect,
|
||||||
|
options: [
|
||||||
|
{ label: "None", value: "rotate(0deg)" },
|
||||||
|
{ label: "45 degrees", value: "rotate(45deg)" },
|
||||||
|
{ label: "90 degrees", value: "rotate(90deg)" },
|
||||||
|
{ label: "135 degrees", value: "rotate(135deg)" },
|
||||||
|
{ label: "180 degrees", value: "rotate(180deg)" },
|
||||||
|
{ label: "225 degrees", value: "rotate(225deg)" },
|
||||||
|
{ label: "270 degrees", value: "rotate(270deg)" },
|
||||||
|
{ label: "315 degrees", value: "rotate(315deg)" },
|
||||||
|
{ label: "360 degrees", value: "rotate(360deg)" },
|
||||||
|
],
|
||||||
|
}, //needs special control
|
||||||
{ label: "Shadow", key: "box-shadow", control: Input },
|
{ label: "Shadow", key: "box-shadow", control: Input },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
@ -295,7 +295,7 @@ export default {
|
||||||
description:
|
description:
|
||||||
"This component is a placeholder for the rendering of a screen within a page.",
|
"This component is a placeholder for the rendering of a screen within a page.",
|
||||||
icon: "ri-crop-2-fill",
|
icon: "ri-crop-2-fill",
|
||||||
commonProps: {},
|
commonProps: { design: { ...all } },
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in a new issue