From 9bbd53b5865dfa49d1bb01b678aea49e2ab9b9ad Mon Sep 17 00:00:00 2001 From: lexx Date: Fri, 16 Aug 2024 16:00:48 +0300 Subject: [PATCH] references --- .../svelte/content/tools/AppliedFilter.svelte | 20 ++----- front/js/svelte/content/tools/Tools.svelte | 2 +- front/js/svelte/dialog/Dialog.svelte | 18 +++--- front/js/svelte/layout/Navbar.svelte | 7 +-- front/js/svelte/layout/NavbarMenu.svelte | 4 +- front/js/svelte/libs/Sortable.svelte | 40 ++++--------- front/js/svelte/records/Edit.svelte | 7 ++- front/js/svelte/records/elements/File.svelte | 5 +- .../svelte/records/elements/Reference.svelte | 6 +- .../elements/ReferenceInlineButtons.svelte | 10 ++-- .../svelte/records/header/EditHeader.svelte | 4 +- front/js/svelte/records/header/Title.svelte | 12 ++-- .../records/previews/PreviewReference.svelte | 56 +++++++++++++++++++ front/sass/_button.scss | 7 +++ front/sass/_dialog.scss | 12 +++- front/sass/_preview.scss | 12 +++- front/sass/_record-edit.scss | 10 +++- front/sass/_sidebar.scss | 3 +- front/sass/_toolbar.scss | 24 +++++++- front/sass/app.scss | 1 + 20 files changed, 170 insertions(+), 90 deletions(-) create mode 100644 front/js/svelte/records/previews/PreviewReference.svelte diff --git a/front/js/svelte/content/tools/AppliedFilter.svelte b/front/js/svelte/content/tools/AppliedFilter.svelte index 146853c..e3d0ab3 100644 --- a/front/js/svelte/content/tools/AppliedFilter.svelte +++ b/front/js/svelte/content/tools/AppliedFilter.svelte @@ -1,6 +1,7 @@ - -
+ + {#if filter.isReference && filterRecord} {filter.label} is {previewTitle(channel.schemas, filterRecord)} {:else} @@ -83,20 +84,9 @@
+ > - diff --git a/front/js/svelte/content/tools/Tools.svelte b/front/js/svelte/content/tools/Tools.svelte index 7e180a8..ad8d260 100644 --- a/front/js/svelte/content/tools/Tools.svelte +++ b/front/js/svelte/content/tools/Tools.svelte @@ -130,7 +130,7 @@ {#if Object.entries(filter).length > 0} -
+
{#each Object.entries(filter) as [k, v]} {/if} + +
- +
diff --git a/front/js/svelte/layout/Navbar.svelte b/front/js/svelte/layout/Navbar.svelte index 56eb6c0..949cb9e 100644 --- a/front/js/svelte/layout/Navbar.svelte +++ b/front/js/svelte/layout/Navbar.svelte @@ -1,22 +1,19 @@
- + - - +
diff --git a/front/js/svelte/layout/NavbarMenu.svelte b/front/js/svelte/layout/NavbarMenu.svelte index aba315d..7065786 100644 --- a/front/js/svelte/layout/NavbarMenu.svelte +++ b/front/js/svelte/layout/NavbarMenu.svelte @@ -17,14 +17,14 @@ } -
+
+ {#if expanded} {#each schemas as aschema} import Sortable from "sortablejs"; - import { onMount, createEventDispatcher } from "svelte"; + import {createEventDispatcher, onMount} from "svelte"; + export let sortableClass = ""; // export let handle; export let isTable = false; @@ -10,50 +11,29 @@ onMount(() => { let options = { - // handle: ".sortable-handle", - // draggable: ".quote-line-wrapper", - // filter: ".not-draggable", // Selectors that do not lead to dragging (String or Function) - // preventOnFilter: true, animation: 150, // ms, animation speed moving items when sorting, `0` — without animation easing: "cubic-bezier(1, 0, 0, 1)", + direction: 'vertical', onUpdate: function (/**Event*/ evt) { - // reorder(evt.oldIndex,evt.newIndex); - // console.log(evt) dispatch("update", { source: evt.oldIndex, target: evt.newIndex, }); - }, - onMove(event) { - // if (event.related.className.indexOf("not-draggable") > -1) { - // return false; - // } - }, + } }; - // if (handle) { - // options.handle = handle; - // } sortableInstance = Sortable.create(sortableContainer, options); }); - // function reorder(from, to) { - // let newList = JSON.parse(JSON.stringify(value)); - // let fromElem = newList[from]; - // newList.splice(from, 1); - // newList.splice(to, 0, fromElem); - // value = newList; - // dispatch("reordered", value); - // } {#if isTable} - - - + + + {:else} -
- -
+
+ +
{/if} diff --git a/front/js/svelte/records/Edit.svelte b/front/js/svelte/records/Edit.svelte index 37c3965..e3d7bfe 100644 --- a/front/js/svelte/records/Edit.svelte +++ b/front/js/svelte/records/Edit.svelte @@ -19,9 +19,9 @@ records: [], edges: [] }; - export let recordHistory; + // export let recordHistory; export let isCreateMode; - export let isWritable = false; + // export let isWritable = false; export let users; let originalContent; let activeContentTab = ""; @@ -154,6 +154,7 @@
+ {#if isCreateMode}
diff --git a/front/js/svelte/records/elements/File.svelte b/front/js/svelte/records/elements/File.svelte index 9b0d4ce..0b2dafe 100644 --- a/front/js/svelte/records/elements/File.svelte +++ b/front/js/svelte/records/elements/File.svelte @@ -74,7 +74,10 @@ {#if references.length > 0} <Sortable sortableClass="mt-3" on:update={reorder}> {#each references as reference (reference.id)} - <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile> + <!--This div helps the sorting thing--> + <div> + <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile> + </div> {/each} </Sortable> {/if} diff --git a/front/js/svelte/records/elements/Reference.svelte b/front/js/svelte/records/elements/Reference.svelte index 15f6f18..58e20fb 100644 --- a/front/js/svelte/records/elements/Reference.svelte +++ b/front/js/svelte/records/elements/Reference.svelte @@ -1,11 +1,11 @@ <script> import {getContext} from "svelte"; import {insertEdges} from "./reference"; - import PreviewCard from "../PreviewCard.svelte"; import {getErrorMessage} from "./errorMessage"; import {sortByField} from "../../edges/sortEdges"; import ReferenceInlineButtons from "./ReferenceInlineButtons.svelte"; import Sortable from "../../libs/Sortable.svelte"; + import PreviewReference from "../previews/PreviewReference.svelte"; const channel = getContext("channel"); export let record; @@ -61,8 +61,8 @@ {#if references.length > 0} <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}> {#each references as reference (reference.id)} - <div class="col mb-3"> - <PreviewCard + <div> + <PreviewReference classes="h-100" record={reference} hasDelete={true} diff --git a/front/js/svelte/records/elements/ReferenceInlineButtons.svelte b/front/js/svelte/records/elements/ReferenceInlineButtons.svelte index 0b500af..d1867c4 100644 --- a/front/js/svelte/records/elements/ReferenceInlineButtons.svelte +++ b/front/js/svelte/records/elements/ReferenceInlineButtons.svelte @@ -60,7 +60,7 @@ <button type="button" class:is-first={!recordId} - class=" btn btn-lg btn-link text-decoration-none inline-card-button" + class="button" on:click|preventDefault={(e) => (showOptions = !showOptions)} > <Icon width={24} height={24} icon="circle-plus"/> @@ -95,21 +95,19 @@ </div> {/if} {:else} - <div class="pb-2 text-start"> - <div class="mb-2"> + <div style="display:flex;align-items: center;gap: 4px"> <button - class="btn btn-sm btn-primary" + class="button" on:click={(e) => createInlineReference(e, schemas[0].name)} >New </button> <button - class="btn btn-sm btn-outline-primary" + class="button" on:click={(e) => openBrowseModal(e, schemas[0].name)} > <Icon icon="magnifying-glass"/> </button > - </div> </div> {/if} diff --git a/front/js/svelte/records/header/EditHeader.svelte b/front/js/svelte/records/header/EditHeader.svelte index de38999..17558e1 100644 --- a/front/js/svelte/records/header/EditHeader.svelte +++ b/front/js/svelte/records/header/EditHeader.svelte @@ -21,8 +21,8 @@ </script> - <StatusSelect bind:status={record.status} {record}></StatusSelect> +<div style="display: flex;align-items: center; gap:10px;"> {#if !isCreateMode} <Dropdown orientation="right"> <div slot="button"> @@ -52,3 +52,5 @@ </Dropdown> {/if} +<StatusSelect bind:status={record.status} {record}></StatusSelect> +</div> \ No newline at end of file diff --git a/front/js/svelte/records/header/Title.svelte b/front/js/svelte/records/header/Title.svelte index e075914..3ba35cc 100644 --- a/front/js/svelte/records/header/Title.svelte +++ b/front/js/svelte/records/header/Title.svelte @@ -11,7 +11,11 @@ <div class="record-header"> - + <a + class="schema-name" + href="{channel.lucentUrl}/content/{schema.name}" + >{schema.label.toUpperCase()}</a + > <span class="record-title"> {#if !isCreateMode} {previewTitle(channel.schemas, record)} @@ -19,9 +23,5 @@ New Record {/if} </span> - <a - class="schema-name" - href="{channel.lucentUrl}/content/{schema.name}" - >{schema.label.toUpperCase()}</a - > + </div> \ No newline at end of file diff --git a/front/js/svelte/records/previews/PreviewReference.svelte b/front/js/svelte/records/previews/PreviewReference.svelte new file mode 100644 index 0000000..b813c29 --- /dev/null +++ b/front/js/svelte/records/previews/PreviewReference.svelte @@ -0,0 +1,56 @@ +<script> + import Icon from "../../common/Icon.svelte"; + + import { getContext, createEventDispatcher } from "svelte"; + import { previewTitle } from "./../Preview"; + import Status from "./../Status.svelte"; + const dispatch = createEventDispatcher(); + const channel = getContext("channel"); + export let graph; + export let record; + export let hasDelete = false; + + let schema = channel.schemas.find((aschema) => aschema.name === record.schema); + let cardTitle = previewTitle(channel.schemas, record, graph); + function remove(e) { + e.preventDefault(); + + dispatch("remove", record.id); + } +</script> + + +<div class="preview-reference"> + <div style="display: flex;align-items: center;gap: 10px;"> + + <div class="title"> + <div> + <a + class="record-title" + href="{channel.lucentUrl}/records/{record.id}" + > + {cardTitle} + </a> + <small class="d-block"> + from {schema.label} + {#if record.status === "draft"} + <Status status={record.status}/> + {/if} + </small> + + </div> + + </div> + </div> + {#if hasDelete} + <div class="trash-action"> + <button + class="button" + on:click={remove} + > + <Icon icon="trash-can"/> + </button> + </div> + {/if} +</div> + diff --git a/front/sass/_button.scss b/front/sass/_button.scss index 573bb8e..5ad8f71 100644 --- a/front/sass/_button.scss +++ b/front/sass/_button.scss @@ -45,3 +45,10 @@ font-weight: normal; } } + +.button-text{ + border: none; + padding: 0; + background: transparent; + cursor: pointer; +} \ No newline at end of file diff --git a/front/sass/_dialog.scss b/front/sass/_dialog.scss index e263d70..8aa95b2 100644 --- a/front/sass/_dialog.scss +++ b/front/sass/_dialog.scss @@ -14,18 +14,19 @@ body:has(dialog[open]) { } dialog { - margin: 10px auto; + margin: 2vh auto; background-color: #fff; padding: 34px; border: none; border-radius: 5px; overflow: auto; + max-height: 96vh; //position: relative; .close { position: absolute; - top: 20px; - right: 20px; + top: 10px; + right: 0px; } .dialog-body { @@ -44,4 +45,9 @@ dialog::backdrop { display: flex; align-items: center; gap: 8px; + position: sticky; + top: -34px; + z-index: 999; + background: #fff; + padding: 10px 0; } \ No newline at end of file diff --git a/front/sass/_preview.scss b/front/sass/_preview.scss index 6af47a6..3028611 100644 --- a/front/sass/_preview.scss +++ b/front/sass/_preview.scss @@ -1,4 +1,4 @@ -.preview-file{ +.preview-file,.preview-reference{ display: flex; align-items: center; justify-content: space-between; @@ -24,7 +24,13 @@ } } } - +.preview-reference{ + filter: brightness(97%); + padding: 10px 20px; + margin-bottom: 4px; +} .sortable-ghost{ border: 2px dashed var(--primary); -} \ No newline at end of file +} + +.sortable-drag { opacity: 0 !important; } .sortable-ghost { opacity: 1 !important; } \ No newline at end of file diff --git a/front/sass/_record-edit.scss b/front/sass/_record-edit.scss index b3abb72..9c29bc2 100644 --- a/front/sass/_record-edit.scss +++ b/front/sass/_record-edit.scss @@ -1,5 +1,12 @@ .record-edit { + position: relative; + .invalid-feedback{ + color: var(--error); + font-size: 15px; + line-height: 20px; + margin-top: 10px; + } } .record-header { @@ -19,6 +26,7 @@ margin: 30px 0 0; display: flex; align-items: center; + justify-content: space-between; gap: 10px; font-size: 14px; position: relative; @@ -26,7 +34,7 @@ padding: 10px; border-radius: 12px; background: var(--background); - filter: brightness(90%); + filter: brightness(97%); } .editor-field { diff --git a/front/sass/_sidebar.scss b/front/sass/_sidebar.scss index 6d98f64..a98e97b 100644 --- a/front/sass/_sidebar.scss +++ b/front/sass/_sidebar.scss @@ -34,7 +34,8 @@ padding: 3px 12px 6px; color: var(--text); filter: brightness(94%); - border-bottom: 0px solid var(--border-color); + border: none; + //border-bottom: 0px solid var(--border-color); border-radius: 12px; &:hover { diff --git a/front/sass/_toolbar.scss b/front/sass/_toolbar.scss index e6a1c6d..c07d834 100644 --- a/front/sass/_toolbar.scss +++ b/front/sass/_toolbar.scss @@ -18,4 +18,26 @@ } .toolbar-filters{ display: flex; align-items: center; - gap: 5px;} \ No newline at end of file + gap: 5px;} + +.applied-filters{ + display: flex; + gap: 4px; + margin-top: 10px; + + .applied-filter { + font-size: 13px; + border-radius: 12px; + background: var(--background); + padding: 3px 10px; + display: flex; + justify-content: center; + gap: 4px; + line-height: 22px; + } + + .applied-filter:hover { + opacity: .8; + background-color: #eee; + } +} \ No newline at end of file diff --git a/front/sass/app.scss b/front/sass/app.scss index 26564ab..b37be2a 100644 --- a/front/sass/app.scss +++ b/front/sass/app.scss @@ -126,6 +126,7 @@ $themes: ( --secondary: #7bc8f1; --accent: #5086ed; --success: #80c671; + --error: red; }