From 8e8a1e8f4b946c48c4e0511991f4b586fc8dd76c Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Tue, 2 Jun 2020 19:59:58 +0100 Subject: [PATCH 1/5] Backend modal UI update Models include: Create new view Create new model Create new field Create new user --- packages/builder/src/budibase.css | 27 ++--- .../src/components/common/ActionButton.svelte | 22 ++-- .../src/components/common/CodeArea.svelte | 3 +- .../src/components/common/Modal.svelte | 4 +- .../ModelDataTable/ModelDataTable.svelte | 14 +-- .../CreateEditModel/CreateEditModel.svelte | 57 ++++++---- .../modals/CreateEditView.svelte | 100 +++++++++++------- .../ModelDataTable/modals/CreateUser.svelte | 2 +- 8 files changed, 141 insertions(+), 88 deletions(-) diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index 283a761c3b..7aa47605f9 100644 --- a/packages/builder/src/budibase.css +++ b/packages/builder/src/budibase.css @@ -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(--blue-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; } \ No newline at end of file diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte index f8eb00f6e3..153d00b6a6 100644 --- a/packages/builder/src/components/common/ActionButton.svelte +++ b/packages/builder/src/components/common/ActionButton.svelte @@ -1,6 +1,7 @@ -
+
{#if !showFieldView}

Create / Edit Model

@@ -43,22 +43,20 @@

Create / Edit Field

{/if} -
+ {#if !showFieldView}
-

Settings

- {#if $store.errors && $store.errors.length > 0} {/if} - - - +
+ +
- Fields -

(showFieldView = true)}> + Fields +
(showFieldView = true)}> Add new field -

+
@@ -67,7 +65,6 @@ - @@ -90,9 +87,9 @@ {/each}
Edit Name TypeValues
-
+
Save -
+ {:else} .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(--blue-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 { + margin: 40px 40px 0px 40px; + background-color: var(--grey-light); + padding: 20px 0px; + display: flex; + justify-content: flex-end; } diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte index 606310d44f..7ca59e87f2 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte @@ -39,51 +39,49 @@ } - +

Create / Edit View

- -
-

Settings

- {#if $store.errors && $store.errors.length > 0} - - {/if} -
-
- +
+ + {#if $store.errors && $store.errors.length > 0} + + {/if} +
+
+
+ +
+
+
+ {#each Object.values(SNIPPET_EDITORS) as snippetType} + (currentSnippetEditor = snippetType)}> + {snippetType} + + {/each} + {#if currentSnippetEditor === SNIPPET_EDITORS.MAP} + + {:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER} + + {:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE} + + {/if}
- -

Snippets

- {#each Object.values(SNIPPET_EDITORS) as snippetType} - (currentSnippetEditor = snippetType)}> - {snippetType} - - {/each} - {#if currentSnippetEditor === SNIPPET_EDITORS.MAP} - - {:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER} - - {:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE} - - {/if} - - Save - Delete +
+
+ Delete +
+ Save +
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte index e81659f716..35b9563a03 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte @@ -52,7 +52,7 @@ } footer { padding: 20px; - background: #fafafa; + background: var(--grey-light); border-radius: 0.5rem; } From 780f791048e396293532adb742d35e8e4ed97286 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Tue, 2 Jun 2020 20:55:15 +0100 Subject: [PATCH 2/5] Defeat I stand defeated to UIKit and its CSS shackles --- packages/builder/src/budibase.css | 2 +- .../src/components/common/ActionButton.svelte | 4 ++-- .../builder/src/components/common/Select.svelte | 10 ++++------ .../CreateEditModel/CreateEditModel.svelte | 10 ++++++---- .../modals/CreateEditModel/FieldView.svelte | 17 +++++++++++++---- .../ModelDataTable/modals/CreateEditView.svelte | 3 ++- 6 files changed, 28 insertions(+), 18 deletions(-) diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index 7aa47605f9..910a795cd2 100644 --- a/packages/builder/src/budibase.css +++ b/packages/builder/src/budibase.css @@ -117,7 +117,7 @@ } .budibase__table tr { - border-bottom: 1px solid var(--blue-light); + border-bottom: 1px solid var(--grey-light); } .button--toggled { diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte index 153d00b6a6..96e7c6b6ae 100644 --- a/packages/builder/src/components/common/ActionButton.svelte +++ b/packages/builder/src/components/common/ActionButton.svelte @@ -42,13 +42,13 @@ .secondary { color: var(--ink); border: solid 1px var(--grey-dark); - background: none; + background: white; } .button { font-size: 14px; font-weight: 500; - border-radius: 5px; + border-radius: 3px; padding: 10px 20px; height: 40px; } diff --git a/packages/builder/src/components/common/Select.svelte b/packages/builder/src/components/common/Select.svelte index 39dbe6d059..e89b8006a5 100644 --- a/packages/builder/src/components/common/Select.svelte +++ b/packages/builder/src/components/common/Select.svelte @@ -20,11 +20,9 @@ diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte index df1b27e426..ecb35c23ba 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte @@ -88,7 +88,7 @@
- Save + Save
{:else} @@ -128,7 +128,7 @@ } tbody > tr:hover { - background-color: var(--blue-light); + background-color: var(--grey-light); } .table-controls { @@ -154,10 +154,12 @@ } footer { - margin: 40px 40px 0px 40px; background-color: var(--grey-light); - padding: 20px 0px; + margin-top: 40px; + padding: 20px 40px 20px 40px; display: flex; justify-content: flex-end; } + + diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte index 2c3443ae56..c17a0ac9c8 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte @@ -79,19 +79,28 @@
+
+ Cancel +
Save - Cancel
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte index 7ca59e87f2..873e34950a 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte @@ -96,6 +96,7 @@ .snippet-selector__heading { margin-right: 20px; font-size: 14px; + color: var(--ink-lighter); } .header { @@ -109,7 +110,7 @@ } .code-snippets { - margin: 20px 0px 20px 0px; + margin: 20px 0px 20px 0px; } .buttons { From dad4b93459414f9f45a43b58886e5af1cca81876 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Tue, 2 Jun 2020 20:56:16 +0100 Subject: [PATCH 3/5] formatting --- .../src/components/common/ActionButton.svelte | 4 ++-- .../src/components/common/Input.svelte | 22 +++++++++++++------ .../common/Inputs/InputGroup.svelte | 7 +++--- .../CreateEditModel/CreateEditModel.svelte | 4 +--- .../modals/CreateEditView.svelte | 12 +++++----- .../userInterface/FlatButton.svelte | 19 ++++++++++------ .../userInterface/FlatButtonGroup.svelte | 2 -- .../userInterface/OptionSelect.svelte | 6 ++--- 8 files changed, 43 insertions(+), 33 deletions(-) diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte index 96e7c6b6ae..147737b5c6 100644 --- a/packages/builder/src/components/common/ActionButton.svelte +++ b/packages/builder/src/components/common/ActionButton.svelte @@ -30,8 +30,8 @@ .alert { color: white; - background: #E26D69; - border: solid 1px #E26D69; + background: #e26d69; + border: solid 1px #e26d69; } .cancel { diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte index 3ac872dc5a..82305be60a 100644 --- a/packages/builder/src/components/common/Input.svelte +++ b/packages/builder/src/components/common/Input.svelte @@ -1,5 +1,5 @@ - handleChange(e.target.value)} /> + handleChange(e.target.value)} /> diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte index ecb35c23ba..6264b74e09 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte @@ -88,7 +88,7 @@
- Save + Save
{:else} @@ -160,6 +160,4 @@ display: flex; justify-content: flex-end; } - - diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte index 873e34950a..4db445e54f 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte @@ -43,11 +43,11 @@

Create / Edit View

-
- {#if $store.errors && $store.errors.length > 0} - - {/if} -
+ + {#if $store.errors && $store.errors.length > 0} + + {/if} +
@@ -108,7 +108,7 @@ .main { margin: 20px 40px 0px 40px; } - + .code-snippets { margin: 20px 0px 20px 0px; } diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte index e9798fc89c..2eff1a6be4 100644 --- a/packages/builder/src/components/userInterface/FlatButton.svelte +++ b/packages/builder/src/components/userInterface/FlatButton.svelte @@ -1,5 +1,5 @@ -
onClick(value || text)}> +
onClick(value || text)}> {#if useIcon} {:else} - {@html text} + + {@html text} + {/if}
- diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte index ad1107b1f1..c9523f4d5a 100644 --- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte +++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte @@ -28,10 +28,8 @@ onChange(val) } - const checkSelected = val => isMultiSelect ? value.includes(val) : value === val -
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte index d226e6129c..8a1e3685f6 100644 --- a/packages/builder/src/components/userInterface/OptionSelect.svelte +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -1,6 +1,6 @@ -
+
+
+ +
Create User
+
@@ -41,18 +45,41 @@
- Cancel - Save +
+ Cancel +
+ Save
From 4da8eef1de2b40184e6ed9aba5264a012057ba9f Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Tue, 2 Jun 2020 21:13:19 +0100 Subject: [PATCH 5/5] formatting update --- .../ModelDataTable/modals/CreateUser.svelte | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte index b29e5e83d2..d5c924405f 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte @@ -22,11 +22,11 @@
-
-
- -
Create User
-
+
+
+ +
Create User
+
@@ -45,15 +45,14 @@
-
- Cancel -
- Save +
+ Cancel +
+ Save