Merge pull request #299 from Budibase/backend-modal-ui-update
Backend modal UI update
This commit is contained in:
Michael Shanks
GitHub
commit
4ee546d2c7
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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%);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue