From 2429d4acb524f2f98e0b7dc61a2912ba533657a6 Mon Sep 17 00:00:00 2001 From: lexx Date: Thu, 15 Aug 2024 22:11:26 +0300 Subject: [PATCH] dialog wip --- front/js/svelte/Channel.svelte | 3 + front/js/svelte/common/Icon.svelte | 26 +++-- .../svelte/content/ActionsOnSelected.svelte | 54 +++++------ front/js/svelte/content/Index.svelte | 15 ++- front/js/svelte/content/RecordRow.svelte | 10 +- front/js/svelte/content/Table.svelte | 22 +++-- front/js/svelte/dialog/Dialog.svelte | 97 +++++++++++++++++++ front/js/svelte/files/Preview.svelte | 5 +- front/js/svelte/records/Edit.svelte | 38 ++++---- front/js/svelte/records/elements/File.svelte | 56 +++++------ .../records/previews/PreviewFile.svelte | 57 +++++++++++ front/sass/_button.scss | 8 ++ front/sass/_dropdown.scss | 5 +- front/sass/_modal.scss | 35 +++++++ front/sass/_preview.scss | 28 ++++++ front/sass/_record-edit.scss | 8 +- front/sass/_table.scss | 6 +- front/sass/_toolbar.scss | 1 + front/sass/app.scss | 2 + 19 files changed, 364 insertions(+), 112 deletions(-) create mode 100644 front/js/svelte/dialog/Dialog.svelte create mode 100644 front/js/svelte/records/previews/PreviewFile.svelte create mode 100644 front/sass/_modal.scss create mode 100644 front/sass/_preview.scss diff --git a/front/js/svelte/Channel.svelte b/front/js/svelte/Channel.svelte index 46c8f02..5e85f1c 100644 --- a/front/js/svelte/Channel.svelte +++ b/front/js/svelte/Channel.svelte @@ -8,6 +8,8 @@ import HomeIndex from "./home/Index.svelte"; import BuildReport from "./build/Report.svelte"; import Header from "./layout/Header.svelte"; + import BrowseModal from "./records/elements/BrowseModal.svelte"; + import Dialog from "./dialog/Dialog.svelte"; const components = { members: Members, @@ -48,3 +50,4 @@ + diff --git a/front/js/svelte/common/Icon.svelte b/front/js/svelte/common/Icon.svelte index b0a4d0a..fdd88e0 100644 --- a/front/js/svelte/common/Icon.svelte +++ b/front/js/svelte/common/Icon.svelte @@ -76,7 +76,7 @@ path: '', viewBox: "0 0 640 512", }, - + "triangle-exclamation": { path: '', viewBox: "0 0 512 512", @@ -105,7 +105,13 @@ path: '', viewBox: "0 0 448 512", }, + "close": { + path: '', + viewBox: "0 0 24 24", + }, }; + + export let width = 16; export let height = 16; export let icon = ""; @@ -116,15 +122,15 @@ {@html selectedIcon.path} diff --git a/front/js/svelte/content/ActionsOnSelected.svelte b/front/js/svelte/content/ActionsOnSelected.svelte index 24cbf87..e9e08ff 100644 --- a/front/js/svelte/content/ActionsOnSelected.svelte +++ b/front/js/svelte/content/ActionsOnSelected.svelte @@ -37,47 +37,45 @@
{selected.length} records selected -
- - - {#if filter["status_in"] === "trashed"} - - {#if schema.hasDrafts} - - {/if} - - {:else} - {/if} -
+ + {:else} + + {/if}
diff --git a/front/js/svelte/content/Index.svelte b/front/js/svelte/content/Index.svelte index b979445..121e501 100644 --- a/front/js/svelte/content/Index.svelte +++ b/front/js/svelte/content/Index.svelte @@ -39,6 +39,7 @@ limit = response.data.limit; total = response.data.total; modalUrl = response.data.modalUrl; + document.querySelector("dialog h3").scrollIntoView(); }) .catch((error) => { console.log(error); @@ -84,12 +85,24 @@ bind:selected /> {:else} - + + + + + + {/if} diff --git a/front/js/svelte/content/RecordRow.svelte b/front/js/svelte/content/RecordRow.svelte index 7f2d7a6..64dc522 100644 --- a/front/js/svelte/content/RecordRow.svelte +++ b/front/js/svelte/content/RecordRow.svelte @@ -23,7 +23,7 @@ {/each} -{#if schema.visible.includes("status")} +{#if schema.visible?.includes("status")} {/if} -{#if schema.visible.includes("_sys.createdBy")} +{#if schema.visible?.includes("_sys.createdBy")} {/if} -{#if schema.visible.includes("_sys.updatedBy")} +{#if schema.visible?.includes("_sys.updatedBy")} {/if} -{#if schema.visible.includes("_sys.createdAt")} +{#if schema.visible?.includes("_sys.createdAt")} {friendlyDate(record._sys.createdAt)} {/if} -{#if schema.visible.includes("_sys.updatedAt")} +{#if schema.visible?.includes("_sys.updatedAt")} {friendlyDate(record._sys.updatedAt)} diff --git a/front/js/svelte/content/Table.svelte b/front/js/svelte/content/Table.svelte index 9da614d..3be07e0 100644 --- a/front/js/svelte/content/Table.svelte +++ b/front/js/svelte/content/Table.svelte @@ -6,6 +6,7 @@ import Avatar from "../account/Avatar.svelte"; import {selectRecord, toggleAll} from "./functions/recordSelect.js"; import Checkbox from "../common/Checkbox.svelte"; + import Preview from "../files/Preview.svelte"; const channel = getContext("channel"); @@ -28,7 +29,7 @@ selected = selectRecord(record, selected) } - $: visibleColumns = schema.fields.filter(c => schema.visible.includes(c.name)) + $: visibleColumns = schema.fields.filter(c => schema.visible?.includes(c.name) ?? []) @@ -39,6 +40,7 @@ {#if isWritable} 0 && selected.length < records.length} checked={selected.length === records.length} @@ -53,10 +55,10 @@ class:is-sort={field.name === sortField.name} scope="col" title={field.help} - >{field.label}{field.label} {/each} - {#each systemFields.filter(c => schema.visible.includes(c.name)) as sysField} + {#each systemFields.filter(c => schema.visible?.includes(c.name)) as sysField} {sysField.label} {/each} @@ -78,7 +80,9 @@ {/if} - + {#if record._file?.path} + + {/if} - + + side={24} + /> + {/each} diff --git a/front/js/svelte/dialog/Dialog.svelte b/front/js/svelte/dialog/Dialog.svelte new file mode 100644 index 0000000..61154b7 --- /dev/null +++ b/front/js/svelte/dialog/Dialog.svelte @@ -0,0 +1,97 @@ + + +{#if data.schema} + + +
+ + + + {#if selectedRecords.length > 0} + + {selectedRecords.length} records selected + + {/if} +
+ +
+ +
+ + {/if} + \ No newline at end of file diff --git a/front/js/svelte/files/Preview.svelte b/front/js/svelte/files/Preview.svelte index 0b6571d..5b5737f 100644 --- a/front/js/svelte/files/Preview.svelte +++ b/front/js/svelte/files/Preview.svelte @@ -1,6 +1,6 @@ + +
+
+ +
+
+
+ + {cardTitle} + + + from {schema.label} + {#if record.status === "draft"} + + {/if} + + +
+ +
+ {#if hasDelete} +
+ +
+ {/if} +
+ diff --git a/front/sass/_button.scss b/front/sass/_button.scss index 54eabfa..dc92623 100644 --- a/front/sass/_button.scss +++ b/front/sass/_button.scss @@ -10,6 +10,14 @@ display: flex; align-items: center; gap: 4px; + + &.secondary{ + background: var(--secondary); + } + &.primary{ + background: var(--primary); + } + &:focus { filter: brightness(94%); } diff --git a/front/sass/_dropdown.scss b/front/sass/_dropdown.scss index 0956ca3..368c3e2 100644 --- a/front/sass/_dropdown.scss +++ b/front/sass/_dropdown.scss @@ -1,5 +1,8 @@ .dropdown { position: relative; + z-index: 20; + overflow: visible; + } .dropdown-button > div { @@ -15,7 +18,7 @@ overflow: visible; position: absolute; border-radius: 12px; - z-index: 9; + z-index: 20; background: var(--background); filter: brightness(97%); transition: 600ms; diff --git a/front/sass/_modal.scss b/front/sass/_modal.scss new file mode 100644 index 0000000..8ce15fd --- /dev/null +++ b/front/sass/_modal.scss @@ -0,0 +1,35 @@ +// +//:modal { +// background-color: beige; +// border: 2px solid burlywood; +// border-radius: 5px; +//} +body:has(dialog[open]) { + overflow: hidden; +} +dialog{ + margin: 10px auto; + background-color: #fff; + padding: 34px; + border: none; + border-radius: 5px; + overflow: auto; + position: relative; + + .close{ + position: absolute; + top: 20px; + right: 20px; + } + + .dialog-body{ + width: fit-content; + } +} + + + +dialog::backdrop { + + backdrop-filter: blur(3px); +} diff --git a/front/sass/_preview.scss b/front/sass/_preview.scss new file mode 100644 index 0000000..19294ed --- /dev/null +++ b/front/sass/_preview.scss @@ -0,0 +1,28 @@ +.preview-file{ + display: flex; + align-items: center; + gap: 10px; + background: var(--background); + border-radius: 12px; + .image{ + + + display: flex; + + } + + .trash-action{ + display: none; + } + + &:hover{ + filter: brightness(95%); + .trash-action{ + display: block; + } + } +} + +.sortable-ghost{ + border: 2px dashed var(--primary); +} \ No newline at end of file diff --git a/front/sass/_record-edit.scss b/front/sass/_record-edit.scss index 8a67799..b3abb72 100644 --- a/front/sass/_record-edit.scss +++ b/front/sass/_record-edit.scss @@ -21,11 +21,17 @@ align-items: center; gap: 10px; font-size: 14px; + position: relative; + z-index: 20; + padding: 10px; + border-radius: 12px; + background: var(--background); + filter: brightness(90%); } .editor-field { background: var(--background); - filter: brightness(98%); + filter: brightness(97%); padding: 18px; border-radius: 12px; margin: 6px 0; diff --git a/front/sass/_table.scss b/front/sass/_table.scss index f6458e2..7f2daab 100644 --- a/front/sass/_table.scss +++ b/front/sass/_table.scss @@ -34,9 +34,9 @@ overflow: hidden; - img{ - width: 48px; - } + //img{ + // width: 48px; + //} .status{ color:var(--accent); diff --git a/front/sass/_toolbar.scss b/front/sass/_toolbar.scss index 3a75b36..e6a1c6d 100644 --- a/front/sass/_toolbar.scss +++ b/front/sass/_toolbar.scss @@ -4,6 +4,7 @@ gap: 5px; justify-content: space-between; + input.search{ border-radius: 12px; background: var(--background); diff --git a/front/sass/app.scss b/front/sass/app.scss index d7cd558..42942ab 100644 --- a/front/sass/app.scss +++ b/front/sass/app.scss @@ -151,6 +151,8 @@ $themes: ( @import "./record-edit"; @import "./tabs"; @import "./switch"; +@import "./preview"; +@import "./modal"; body { background-color: var(--background);