From 1955e2f757b78e0f7f8d51eac6fd4bc53a31c8d9 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 25 Sep 2020 11:35:32 +0100 Subject: [PATCH] Unify all popovers and modals to the same styles and reuse common components. Fix filter options --- .../database/DataTable/ModelDataTable.svelte | 2 +- .../database/DataTable/Table.svelte | 2 +- .../database/DataTable/ViewDataTable.svelte | 2 +- .../DataTable/modals/CreateEditColumn.svelte | 117 +++++++----------- .../DataTable/modals/CreateEditRecord.svelte | 40 +++--- .../DataTable/modals/DeleteRecord.svelte | 61 --------- .../modals/RecordFieldControl.svelte | 28 +++-- .../database/DataTable/modals/index.js | 3 +- .../DataTable/popovers/Calculate.svelte | 55 ++++---- .../DataTable/popovers/ColumnHeader.svelte | 14 ++- .../DataTable/popovers/EditRow.svelte | 35 +++--- .../database/DataTable/popovers/Filter.svelte | 108 +++++++++------- .../DataTable/popovers/GroupBy.svelte | 43 ++++--- .../database/DataTable/popovers/View.svelte | 28 ++--- .../nav/ModelNavigator/CreateTable.svelte | 27 +--- .../nav/ModelNavigator/EditTable.svelte | 32 +---- .../nav/ModelNavigator/EditView.svelte | 32 +---- 17 files changed, 260 insertions(+), 369 deletions(-) delete mode 100644 packages/builder/src/components/database/DataTable/modals/DeleteRecord.svelte diff --git a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte index 37885c051..cf1ea57d2 100644 --- a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte +++ b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte @@ -8,7 +8,7 @@ import LinkedRecord from "./LinkedRecord.svelte" import AttachmentList from "./AttachmentList.svelte" import TablePagination from "./TablePagination.svelte" - import { DeleteRecordModal, CreateEditRecordModal } from "./modals" + import { CreateEditRecordModal } from "./modals" import RowPopover from "./popovers/Row.svelte" import ColumnPopover from "./popovers/Column.svelte" import ViewPopover from "./popovers/View.svelte" diff --git a/packages/builder/src/components/database/DataTable/Table.svelte b/packages/builder/src/components/database/DataTable/Table.svelte index 5cc778dc2..db69120a7 100644 --- a/packages/builder/src/components/database/DataTable/Table.svelte +++ b/packages/builder/src/components/database/DataTable/Table.svelte @@ -8,7 +8,7 @@ import ActionButton from "components/common/ActionButton.svelte" import AttachmentList from "./AttachmentList.svelte" import TablePagination from "./TablePagination.svelte" - import { DeleteRecordModal, CreateEditRecordModal } from "./modals" + import { CreateEditRecordModal } from "./modals" import RowPopover from "./popovers/Row.svelte" import ColumnPopover from "./popovers/Column.svelte" import ViewPopover from "./popovers/View.svelte" diff --git a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte index 7ffa2a196..9b73b7198 100644 --- a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte +++ b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte @@ -9,7 +9,7 @@ import ActionButton from "components/common/ActionButton.svelte" import LinkedRecord from "./LinkedRecord.svelte" import TablePagination from "./TablePagination.svelte" - import { DeleteRecordModal, CreateEditRecordModal } from "./modals" + import { CreateEditRecordModal } from "./modals" import RowPopover from "./popovers/Row.svelte" import ColumnPopover from "./popovers/Column.svelte" import ViewPopover from "./popovers/View.svelte" diff --git a/packages/builder/src/components/database/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/database/DataTable/modals/CreateEditColumn.svelte index 270e4b6e2..cb553623b 100644 --- a/packages/builder/src/components/database/DataTable/modals/CreateEditColumn.svelte +++ b/packages/builder/src/components/database/DataTable/modals/CreateEditColumn.svelte @@ -52,7 +52,7 @@ } -
+
(field.constraints.presence.allowEmpty = required)} /> -
- - {#if field.type === 'string' && field.constraints} - - - {:else if field.type === 'datetime' && field.constraints} - - - {:else if field.type === 'number' && field.constraints} - - - {:else if field.type === 'link'} -
- - -
- {/if} +
+ + (field.constraints.presence.allowEmpty = required)} />
-
- + + diff --git a/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte index 8edecd913..71439d840 100644 --- a/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte +++ b/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte @@ -40,11 +40,11 @@ } -
+
{#each modelSchema as [key, meta]} -
+
{#if meta.type === 'link'} {/each} -
-
-
+
-
-
-
-
+ +
diff --git a/packages/builder/src/components/database/DataTable/modals/DeleteRecord.svelte b/packages/builder/src/components/database/DataTable/modals/DeleteRecord.svelte deleted file mode 100644 index 4b4d51329..000000000 --- a/packages/builder/src/components/database/DataTable/modals/DeleteRecord.svelte +++ /dev/null @@ -1,61 +0,0 @@ - - -
-
-
- -

Delete Record

-
-

- Are you sure you want to delete this record? All of your data will be - permanently removed. This action cannot be undone. -

-
-
- Cancel - { - await api.deleteRecord(record) - notifier.danger('Record deleted') - backendUiStore.actions.records.delete(record) - onClosed() - }}> - Delete - -
-
- - diff --git a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte index 991a5fea6..34766b7ee 100644 --- a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte +++ b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte @@ -41,7 +41,7 @@ {#if type === 'select'} +
{:else} - {#if type === 'checkbox'} - - {/if} {/if} diff --git a/packages/builder/src/components/database/DataTable/modals/index.js b/packages/builder/src/components/database/DataTable/modals/index.js index af0b3cd70..0d2a3532c 100644 --- a/packages/builder/src/components/database/DataTable/modals/index.js +++ b/packages/builder/src/components/database/DataTable/modals/index.js @@ -1,2 +1,3 @@ -export { default as DeleteRecordModal } from "./DeleteRecord.svelte" export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte" +export { default as CreateEditColumnModal } from "./CreateEditColumn.svelte" +export { default as RecordFieldControlModal } from "./RecordFieldControl.svelte" diff --git a/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte b/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte index f43fec7cc..0723394f4 100644 --- a/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte +++ b/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte @@ -46,47 +46,52 @@
-
Calculate
-
-

The

- -

of

- -
-
- - +
+
Calculate
+
+

The

+ +

of

+ +
+
+ + +
diff --git a/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte b/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte index 3b5d309f0..edc4229a8 100644 --- a/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte +++ b/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte @@ -38,15 +38,11 @@ placeholder="Table Name" thin bind:value={name} /> -
-
-
+
-
-
-
-
+ + diff --git a/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte b/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte index c8e291498..62676d6c6 100644 --- a/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte +++ b/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte @@ -43,15 +43,11 @@
Edit Table
-
-
-
+
-
-
-
-
+ + {:else}
  • @@ -88,6 +84,7 @@ padding: var(--spacing-xl); display: grid; grid-gap: var(--spacing-xl); + min-width: 400px; } h5 { @@ -96,11 +93,9 @@ } footer { - padding: var(--spacing-xl); - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; + display: flex; + justify-content: flex-end; gap: var(--spacing-m); - background: var(--grey-1); } ul { @@ -127,19 +122,4 @@ li:active { color: var(--blue); } - - .button-margin-1 { - grid-column-start: 1; - display: grid; - } - - .button-margin-3 { - grid-column-start: 3; - display: grid; - } - - .button-margin-4 { - grid-column-start: 4; - display: grid; - } diff --git a/packages/builder/src/components/nav/ModelNavigator/EditView.svelte b/packages/builder/src/components/nav/ModelNavigator/EditView.svelte index a5067e61a..83d1c9ef1 100644 --- a/packages/builder/src/components/nav/ModelNavigator/EditView.svelte +++ b/packages/builder/src/components/nav/ModelNavigator/EditView.svelte @@ -51,15 +51,11 @@
    Edit View
    -
    -
    -
    +
    -
    -
    -
    -
    + + {:else}
    • @@ -96,6 +92,7 @@ padding: var(--spacing-xl); display: grid; grid-gap: var(--spacing-xl); + min-width: 400px; } h5 { @@ -104,11 +101,9 @@ } footer { - padding: var(--spacing-xl); - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; + display: flex; + justify-content: flex-end; gap: var(--spacing-m); - background: var(--grey-1); } ul { @@ -135,19 +130,4 @@ li:active { color: var(--blue); } - - .button-margin-1 { - grid-column-start: 1; - display: grid; - } - - .button-margin-3 { - grid-column-start: 3; - display: grid; - } - - .button-margin-4 { - grid-column-start: 4; - display: grid; - }