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 88ab1418bc 4da8eef1de
commit a33ef4c5c0
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 {

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

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

@ -39,22 +39,21 @@
} }
</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="main">
<div class="uk-grid-small" uk-grid> <div class="uk-grid-small" uk-grid>
<div class="uk-width-1-2@s"> <div class="uk-width-1-2@s">
<Textbox bind:text={view.name} label="Name" /> <Textbox bind:text={view.name} label="Name" />
</div> </div>
</div> </div>
<div class="code-snippets">
<h4 class="budibase__label--big">Snippets</h4>
{#each Object.values(SNIPPET_EDITORS) as snippetType} {#each Object.values(SNIPPET_EDITORS) as snippetType}
<span <span
class="snippet-selector__heading hoverable" class="snippet-selector__heading hoverable"
@ -70,20 +69,19 @@
{:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE} {:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
<CodeArea bind:text={view.reduce} label="Reduce" /> <CodeArea bind:text={view.reduce} label="Reduce" />
{/if} {/if}
</div>
</div>
<div class="buttons">
<div class="button">
<ActionButton secondary on:click={deleteView}>Delete</ActionButton>
</div>
<ActionButton color="secondary" on:click={saveView}>Save</ActionButton> <ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
<ActionButton alert on:click={deleteView}>Delete</ActionButton> </div>
</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>