CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-07 23:35:49 +12:00
Code Issues Projects Releases Wiki Activity

formatting

Browse source
This commit is contained in:
Joe 2020-05-28 19:42:33 +01:00
parent 8f73128621
commit 13cdc81196
6 changed files with 67 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/builder/src/components/common/Icons/Close.svelte
View file

@ -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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 266 B

After

Width:  |  Height:  |  Size: 292 B

7
packages/builder/src/components/common/Icons/Info.svelte
View file

@ -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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 253 B

After

Width:  |  Height:  |  Size: 271 B

22
packages/builder/src/components/start/AppCard.svelte
View file

@ -1,24 +1,20 @@
<script>
import Button from "components/common/Button.svelte"
export let name, description =`A minimalist CRM which removes the noise and allows you to focus
on your business.`, _id;
export let name,
description = `A minimalist CRM which removes the noise and allows you to focus
on your business.`,
_id
</script>
<div class="apps-card">
<h3 class="app-title">{name}</h3>
<p class="app-desc">
{description}
</p>
<p class="app-desc">{description}</p>
<div class="card-footer">
<div class="modified-date">Last Edited - 25th May 2020</div>
<a href={`/_builder/${_id}`} class="app-button">
Open Web App
</a>
<a href={`/_builder/${_id}`} class="app-button">Open Web App</a>
</div>
</div>
<style>
.apps-card {
background-color: var(--white);
@ -33,7 +29,7 @@
background-color: var(--grey-light);
text-decoration: none;
}
.app-title {
font-size: 18px;
font-weight: 700;
@ -69,4 +65,4 @@
transition: all 0.2s;
box-sizing: border-box;
}
</style>
</style>

10
packages/builder/src/components/start/AppList.svelte
View file

@ -13,11 +13,11 @@
<div>
<div>
<div class="app-section-title">Your Web Apps</div>
<div class="apps">
{#each apps as app}
<AppCard {...app} />
{/each}
</div>
<div class="apps">
{#each apps as app}
<AppCard {...app} />
{/each}
</div>
</div>
</div>
</div>

4
packages/builder/src/components/userInterface/ItemTab/Item.svelte
View file

@ -1,9 +1,9 @@
<script>
import { fly } from 'svelte/transition';
import { fly } from "svelte/transition"
export let item
</script>
<div class="item-item" transition:fly="{{ y: 100, duration: 1000 }}" on:click>
<div class="item-item" transition:fly={{ y: 100, duration: 1000 }} on:click>
<div class="item-icon">
<i class={item.icon} />
</div>

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

@ -77,11 +77,7 @@ const spacingMeta = [
]
export const spacing = [
{ label: "Margin",
key: "margin",
control: InputGroup,
meta: spacingMeta
},
{ label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
{
label: "Padding",
key: "padding",
@ -106,11 +102,11 @@ export const position = [
control: OptionSelect,
initialValue: "Wrap",
options: [
{ label: "Static", value: "static"},
{ label: "Relative", value: "relative"},
{ label: "Fixed", value: "fixed"},
{ label: "Absolute", value: "absolute"},
{ label: "Sticky", value: "sticky"},
{ label: "Static", value: "static" },
{ label: "Relative", value: "relative" },
{ label: "Fixed", value: "fixed" },
{ label: "Absolute", value: "absolute" },
{ label: "Sticky", value: "sticky" },
],
},
{
@ -211,32 +207,43 @@ export const border = [
key: "border-color",
control: Input,
},
{
label: "Style",
key: "border-style",
{
label: "Style",
key: "border-style",
control: OptionSelect,
options: ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"],
},
options: [
"none",
"hidden",
"dotted",
"dashed",
"solid",
"double",
"groove",
"ridge",
"inset",
"outset",
],
},
]
export const effects = [
{ label: "Opacity", key: "opacity", control: Input },
{ label: "Rotate",
key: "transform",
{
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)"},
{ 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
}, //needs special control
{ label: "Shadow", key: "box-shadow", control: Input },
]