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

Merge pull request #299 from Budibase/backend-modal-ui-update 

Backend modal UI update
This commit is contained in:
Michael Shanks 2020-06-03 06:35:39 +01:00 committed by GitHub
parent 5323ad3c1e 3faaf94554
commit 4ee546d2c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 187 additions and 100 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 */ /* Budibase Component Styles */
.header { .header {
font-size: 0.75rem; font-size: 0.75rem;
color: #000333; color: var(--ink);
opacity: 0.4;
text-transform: uppercase; text-transform: uppercase;
margin-top: 1rem; margin-top: 1rem;
font-weight: 500; font-weight: 500;
@ -81,10 +80,9 @@
max-width: 250px; max-width: 250px;
height: 35px; height: 35px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #DBDBDB; border: 1px solid var(--grey-dark);
text-align: left; text-align: left;
letter-spacing: 0.7px; color: var(--ink);
color: #000333;
font-size: 16px; font-size: 16px;
padding-left: 5px; padding-left: 5px;
} }
@ -103,27 +101,32 @@
} }
.budibase__table { .budibase__table {
border: 1px solid #ccc; border: 1px solid var(--grey-dark);
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
} }
.budibase__table thead { .budibase__table thead {
background: #fafafa; background: var(--blue-light);
} }
.budibase__table thead > tr > th { .budibase__table thead > tr > th {
color: var(--button-text); color: var(--ink);
text-transform: capitalize; text-transform: capitalize;
font-weight: 500; font-weight: 500;
} }
.budibase__table tr { .budibase__table tr {
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--grey-light);
} }
.button--toggled { .button--toggled {
background: #fafafa; background: var(--blue-light);
color: var(--button-text); color: var(--ink-light);
padding: 10px; 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> <script>
export let disabled = false export let disabled = false
export let hidden = false export let hidden = false
export let secondary = false
export let primary = true export let primary = true
export let cancel = false export let cancel = false
export let alert = false export let alert = false
@ -11,6 +12,7 @@
on:click on:click
class="button" class="button"
class:hidden class:hidden
class:secondary
class:primary class:primary
class:alert class:alert
class:cancel class:cancel
@ -22,12 +24,14 @@
<style> <style>
.primary { .primary {
color: #ffffff; color: #ffffff;
background: #0055ff; background: var(--blue);
border: solid 1px var(--blue);
} }
.alert { .alert {
color: rgba(255, 0, 31, 1); color: white;
background: rgba(255, 0, 31, 0.1); background: #e26d69;
border: solid 1px #e26d69;
} }
.cancel { .cancel {
@ -35,18 +39,22 @@
background: none; background: none;
} }
.secondary {
color: var(--ink);
border: solid 1px var(--grey-dark);
background: white;
}
.button { .button {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 500;
border-radius: 5px; border-radius: 3px;
border: none;
padding: 10px 20px; padding: 10px 20px;
height: 45px; height: 40px;
} }
.button:hover { .button:hover {
cursor: pointer; cursor: pointer;
font-weight: 600;
filter: saturate(90%); filter: saturate(90%);
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -22,7 +22,11 @@
</script> </script>
<form on:submit|preventDefault class="uk-form-stacked"> <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"> <div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Username</label> <label class="uk-form-label" for="form-stacked-text">Username</label>
<input class="uk-input" type="text" bind:value={username} /> <input class="uk-input" type="text" bind:value={username} />
@ -41,18 +45,40 @@
</div> </div>
</div> </div>
<footer> <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> <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
</footer> </footer>
</form> </form>
<style> <style>
div { .main {
padding: 30px; 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 { footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 20px; padding: 20px;
background: #fafafa; background: var(--grey-light);
border-radius: 0.5rem; border-radius: 0 0 5px 5px;
}
.button {
margin-right: 20px;
} }
</style> </style>