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

Merge branch 'master' into new-list-spike

This commit is contained in:
Michael Shanks 2020-06-03 09:22:43 +01:00
parent f6b98d987f 81f11d16fa
commit dbbd031411
15 changed files with 199 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/builder/src/budibase.css
View File

@ -1,8 +1,7 @@
/* Budibase Component Styles */
.header {
font-size: 0.75rem;
color: #000333;
opacity: 0.4;
color: var(--ink);
text-transform: uppercase;
margin-top: 1rem;
font-weight: 500;
@ -81,10 +80,9 @@
max-width: 250px;
height: 35px;
border-radius: 3px;
border: 1px solid #DBDBDB;
border: 1px solid var(--grey-dark);
text-align: left;
letter-spacing: 0.7px;
color: #000333;
color: var(--ink);
font-size: 16px;
padding-left: 5px;
}
@ -103,27 +101,32 @@
}
.budibase__table {
border: 1px solid #ccc;
border: 1px solid var(--grey-dark);
background: #fff;
border-radius: 2px;
}
.budibase__table thead {
background: #fafafa;
background: var(--blue-light);
}
.budibase__table thead > tr > th {
color: var(--button-text);
color: var(--ink);
text-transform: capitalize;
font-weight: 500;
}
.budibase__table tr {
border-bottom: 1px solid #ccc;
border-bottom: 1px solid var(--grey-light);
}
.button--toggled {
background: #fafafa;
color: var(--button-text);
padding: 10px;
background: var(--blue-light);
color: var(--ink-light);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}

24
packages/builder/src/components/common/ActionButton.svelte
View File

@ -1,6 +1,7 @@
<script>
export let disabled = false
export let hidden = false
export let secondary = false
export let primary = true
export let cancel = false
export let alert = false
@ -11,6 +12,7 @@
on:click
class="button"
class:hidden
class:secondary
class:primary
class:alert
class:cancel
@ -22,12 +24,14 @@
<style>
.primary {
color: #ffffff;
background: #0055ff;
background: var(--blue);
border: solid 1px var(--blue);
}
.alert {
color: rgba(255, 0, 31, 1);
background: rgba(255, 0, 31, 0.1);
color: white;
background: #e26d69;
border: solid 1px #e26d69;
}
.cancel {
@ -35,18 +39,22 @@
background: none;
}
.secondary {
color: var(--ink);
border: solid 1px var(--grey-dark);
background: white;
}
.button {
font-size: 14px;
font-weight: 600;
border-radius: 5px;
border: none;
font-weight: 500;
border-radius: 3px;
padding: 10px 20px;
height: 45px;
height: 40px;
}
.button:hover {
cursor: pointer;
font-weight: 600;
filter: saturate(90%);
}

3
packages/builder/src/components/common/CodeArea.svelte
View File

@ -14,8 +14,7 @@
background: var(--secondary80);
color: var(--white);
font-family: "Courier New", Courier, monospace;
width: 95%;
height: 100px;
height: 200px;
border-radius: 5px;
}
</style>

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

@ -29,7 +29,7 @@
<div class="inputs-group">
{#each meta as m, i}
<Input
width="32px"
width="37px"
textAlign="center"
placeholder={m.placeholder || ''}
value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]}

4
packages/builder/src/components/common/Modal.svelte
View File

@ -50,10 +50,10 @@
<style>
.uk-modal-dialog {
border-radius: 0.3rem;
width: 60%;
width: 520px;
height: 80vh;
display: flex;
flex-direction: column;
padding: 0;
padding: 40px;
}
</style>

10
packages/builder/src/components/common/Select.svelte
View File

@ -20,11 +20,9 @@
<style>
.select-container {
font-size: 14px;
color: var(--secondary60);
font-weight: bold;
position: relative;
max-width: 400px;
min-width: 275px;
border: var(--grey-dark) 1px solid;
max-width: 256px;
}
.adjusted {
@ -43,7 +41,7 @@
font-family: sans-serif;
font-weight: 400;
font-size: 14px;
color: #000333;
color: var(--ink);
padding: 0 40px 0px 20px;
width: 100%;
max-width: 100%;
@ -63,6 +61,6 @@
width: 30px;
height: 30px;
pointer-events: none;
color: var(--secondary100);
color: var(--ink);
}
</style>

14
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View File

@ -145,19 +145,19 @@
}
table {
border: 1px solid #ccc;
border: 1px solid var(--grey-dark);
background: #fff;
border-radius: 3px;
border-collapse: collapse;
}
thead {
background: #f9f9f9;
border: 1px solid #ccc;
background: var(--blue-light);
border: 1px solid var(--grey-dark);
}
thead th {
color: var(--button-text);
color: var(--ink);
text-transform: capitalize;
font-weight: 500;
font-size: 14px;
@ -166,14 +166,14 @@
}
tbody tr {
border-bottom: 1px solid #ccc;
border-bottom: 1px solid var(--grey-dark);
transition: 0.3s background-color;
color: var(--secondary100);
color: var(--ink);
font-size: 14px;
}
tbody tr:hover {
background: #fafafa;
background: var(--grey-light);
}
.table-controls {

57
packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
View File

@ -35,7 +35,7 @@
}
</script>
<header>
<div class="heading">
{#if !showFieldView}
<i class="ri-list-settings-line button--toggled" />
<h3 class="budibase__title--3">Create / Edit Model</h3>
@ -43,22 +43,20 @@
<i class="ri-file-list-line button--toggled" />
<h3 class="budibase__title--3">Create / Edit Field</h3>
{/if}
</header>
</div>
{#if !showFieldView}
<div class="padding">
<h4 class="budibase__label--big">Settings</h4>
{#if $store.errors && $store.errors.length > 0}
<ErrorsBox errors={$store.errors} />
{/if}
<Textbox label="Name" bind:text={model.name} />
<div class="textbox">
<Textbox label="Name" bind:text={model.name} />
</div>
<div class="table-controls">
<span class="budibase__label--big">Fields</span>
<h4 class="hoverable new-field" on:click={() => (showFieldView = true)}>
<span class="label">Fields</span>
<div class="hoverable new-field" on:click={() => (showFieldView = true)}>
Add new field
</h4>
</div>
</div>
<table class="uk-table fields-table budibase__table">
@ -67,7 +65,6 @@
<th>Edit</th>
<th>Name</th>
<th>Type</th>
<th>Values</th>
<th />
</tr>
</thead>
@ -90,9 +87,9 @@
{/each}
</tbody>
</table>
<div class="uk-margin">
<footer>
<ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
</div>
</footer>
</div>
{:else}
<FieldView
@ -104,41 +101,63 @@
<style>
.padding {
padding: 20px;
padding-top: 40px;
}
.label {
font-size: 14px;
font-weight: 500;
}
.textbox {
margin: 0px 40px 0px 40px;
font-size: 14px;
font-weight: 500;
}
.new-field {
font-size: 16px;
font-weight: bold;
color: var(--button-text);
color: var(--blue);
}
.fields-table {
margin: 1rem 1rem 0rem 0rem;
margin: 8px 40px 0px 40px;
border-collapse: collapse;
width: 88%;
}
tbody > tr:hover {
background-color: var(--primary10);
background-color: var(--grey-light);
}
.table-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0px 40px;
}
.ri-more-line:hover {
cursor: pointer;
}
heading {
padding: 20px 20px 0 20px;
.heading {
padding: 40px 40px 0 40px;
display: flex;
align-items: center;
}
h3 {
margin: 0 0 0 10px;
color: var(--ink);
}
footer {
background-color: var(--grey-light);
margin-top: 40px;
padding: 20px 40px 20px 40px;
display: flex;
justify-content: flex-end;
}
</style>

17
packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
View File

@ -79,19 +79,28 @@
</form>
</div>
<footer>
<div class="button">
<ActionButton secondary on:click={goBack}>Cancel</ActionButton>
</div>
<ActionButton primary on:click={save}>Save</ActionButton>
<ActionButton alert on:click={goBack}>Cancel</ActionButton>
</footer>
<style>
.root {
margin: 20px;
margin: 40px;
}
footer {
padding: 20px;
padding: 20px 40px;
border-radius: 0 0 5px 5px;
bottom: 0;
left: 0;
background: #fafafa;
background: var(--grey-light);
display: flex;
align-items: center;
justify-content: flex-end;
}
.button {
margin-right: 20px;
}
</style>

93
packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
View File

@ -39,51 +39,49 @@
}
</script>
<heading>
<div class="header">
<i class="ri-eye-line button--toggled" />
<h3 class="budibase__title--3">Create / Edit View</h3>
</heading>
</div>
<form on:submit|preventDefault class="uk-form-stacked root">
<h4 class="budibase__label--big">Settings</h4>
{#if $store.errors && $store.errors.length > 0}
<ErrorsBox errors={$store.errors} />
{/if}
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-2@s">
<Textbox bind:text={view.name} label="Name" />
<div class="main">
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-2@s">
<Textbox bind:text={view.name} label="Name" />
</div>
</div>
<div class="code-snippets">
{#each Object.values(SNIPPET_EDITORS) as snippetType}
<span
class="snippet-selector__heading hoverable"
class:highlighted={currentSnippetEditor === snippetType}
on:click={() => (currentSnippetEditor = snippetType)}>
{snippetType}
</span>
{/each}
{#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
<CodeArea bind:text={view.map} label="Map" />
{:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
<CodeArea bind:text={view.filter} label="Filter" />
{:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
<CodeArea bind:text={view.reduce} label="Reduce" />
{/if}
</div>
</div>
<h4 class="budibase__label--big">Snippets</h4>
{#each Object.values(SNIPPET_EDITORS) as snippetType}
<span
class="snippet-selector__heading hoverable"
class:highlighted={currentSnippetEditor === snippetType}
on:click={() => (currentSnippetEditor = snippetType)}>
{snippetType}
</span>
{/each}
{#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
<CodeArea bind:text={view.map} label="Map" />
{:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
<CodeArea bind:text={view.filter} label="Filter" />
{:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
<CodeArea bind:text={view.reduce} label="Reduce" />
{/if}
<ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
<ActionButton alert on:click={deleteView}>Delete</ActionButton>
<div class="buttons">
<div class="button">
<ActionButton secondary on:click={deleteView}>Delete</ActionButton>
</div>
<ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
</div>
</form>
<style>
.root {
height: 100%;
padding: 15px;
}
.snippet-selector__heading {
margin-right: 20px;
opacity: 0.7;
}
.highlighted {
@ -92,11 +90,38 @@
h3 {
margin: 0 0 0 10px;
color: var(--ink);
}
heading {
padding: 20px 20px 0 20px;
.snippet-selector__heading {
margin-right: 20px;
font-size: 14px;
color: var(--ink-lighter);
}
.header {
padding: 20px 40px 0 40px;
display: flex;
align-items: center;
}
.main {
margin: 20px 40px 0px 40px;
}
.code-snippets {
margin: 20px 0px 20px 0px;
}
.buttons {
display: flex;
justify-content: flex-end;
background-color: var(--grey-light);
margin: 0 40px;
padding: 20px 0;
}
.button {
margin-right: 20px;
}
</style>

38
packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
View File

@ -22,7 +22,11 @@
</script>
<form on:submit|preventDefault class="uk-form-stacked">
<div>
<div class="main">
<div class="heading">
<i class="ri-list-settings-line button--toggled" />
<div class="title">Create User</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Username</label>
<input class="uk-input" type="text" bind:value={username} />
@ -41,18 +45,40 @@
</div>
</div>
<footer>
<ActionButton alert on:click={onClosed}>Cancel</ActionButton>
<div class="button">
<ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
</div>
<ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
</footer>
</form>
<style>
div {
padding: 30px;
.main {
padding: 40px 40px 20px 40px;
}
.title {
font-size: 24px;
font-weight: 700;
color: var(--ink);
margin-left: 12px;
}
.heading {
display: flex;
align-items: baseline;
}
footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 20px;
background: #fafafa;
border-radius: 0.5rem;
background: var(--grey-light);
border-radius: 0 0 5px 5px;
}
.button {
margin-right: 20px;
}
</style>

1
packages/builder/src/components/userInterface/ModelSelect.svelte
View File

@ -7,6 +7,7 @@
<div class="uk-margin block-field">
<div class="uk-form-controls">
<select class="budibase__input" on:change {value}>
<option value=""></option>
{#each $backendUiStore.models as model}
<option value={model._id}>{model.name}</option>
{/each}

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

@ -240,7 +240,7 @@ export const typography = [
label: "Weight",
key: "font-weight",
control: OptionSelect,
options: ["normal", "bold", "bolder", "lighter"],
options: ["200", "300", "400", "500", "600", "700", "800", "900"],
},
{
label: "size",
@ -297,7 +297,7 @@ export const typography = [
export const background = [
{
label: "Background",
label: "Color",
key: "background",
control: Input,
},

6
packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
View File

@ -9,8 +9,10 @@
"_id": 0,
"type": "div",
"_styles": {
"layout": {},
"position": {}
"active": {},
"hover": {},
"normal": {},
"selected": {}
},
"_code": ""
},

6
packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
View File

@ -9,8 +9,10 @@
"_id": 1,
"type": "div",
"_styles": {
"layout": {},
"position": {}
"active": {},
"hover": {},
"normal": {},
"selected": {}
},
"_code": ""
},