lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

references

Browse Source
This commit is contained in:
Alex Lingris
2024-08-16 16:00:48 +03:00
parent a04e338ce2
commit 9bbd53b586
20 changed files with 170 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/content/tools/AppliedFilter.svelte
+5 -15
View File
@@ -1,6 +1,7 @@
<script>
import {createEventDispatcher, getContext} from "svelte";
import {previewTitle} from "../../records/Preview";
import Icon from "../../common/Icon.svelte";
const channel = getContext("channel");
const dispatch = createEventDispatcher();
@@ -73,8 +74,8 @@
}
</script>
<span class="applied-filter d-inline-block border border-primary rounded lx-small-text me-1 px-2 py-1">
<div class="d-flex align-items-center justify-content-center">
<span class="applied-filter">
{#if filter.isReference && filterRecord}
{filter.label} is {previewTitle(channel.schemas, filterRecord)}
{:else}
@@ -83,20 +84,9 @@
<button
on:click|preventDefault={() => removeFilter(key)}
type="button"
class="btn-close btn-close ms-1"
class="button-text"
aria-label="Close"
/>
</div>
><Icon width={12} height={12} icon="close"></Icon></button>
</span>
<style>
.applied-filter {
background-color: #fff;
line-height: 22px;
}
.applied-filter:hover {
opacity: .8;
background-color: #eee;
}
</style>
front/js/svelte/content/tools/Tools.svelte
+1 -1
View File
@@ -130,7 +130,7 @@
{#if Object.entries(filter).length > 0}
<div class=" d-flex mb-3">
<div class="applied-filters">
{#each Object.entries(filter) as [k, v]}
<AppliedFilter
{schema}
front/js/svelte/dialog/Dialog.svelte
+10 -8
View File
@@ -83,15 +83,17 @@
{selectedRecords.length} records selected
</span>
{/if}
<button
on:click|preventDefault={close}
type="button"
class="button close"
aria-label="Close"
>
<Icon icon="close"></Icon>
</button>
</div>
<button
on:click|preventDefault={close}
type="button"
class="button close"
aria-label="Close"
>
<Icon icon="close"></Icon>
</button>
<div class="dialog-body">
<Index {...data} bind:selected={selectedRecords}></Index>
</div>
front/js/svelte/layout/Navbar.svelte
+2 -5
View File
@@ -1,22 +1,19 @@
<script>
import NavbarMenu from "./NavbarMenu.svelte";
import {getContext} from "svelte";
import Avatar from "../account/Avatar.svelte";
export let schema;
const channel = getContext("channel");
const readableSchemas = getContext("readableSchemas");
const user = getContext("user");
const fileSchemas = readableSchemas.filter((sc) => sc.type === "files");
const otherSchemas = readableSchemas.filter((sc) => !sc.isEntry && sc.type === "collection");
</script>
<div class="sidebar-top">
<a class="logo" href="{channel.lucentUrl}">{channel.name}</a>
<a class="logo" href="{channel.lucentUrl}">{channel.name}</a>
<a class="nav-item" href="{channel.lucentUrl}/profile">
<Avatar side="28" name={user.name}/>
</a>
</a>
</div>
<div class="sidebar">
front/js/svelte/layout/NavbarMenu.svelte
+2 -2
View File
@@ -17,14 +17,14 @@
}
</script>
<div class="sidebar-header" role="button" tabindex="0" on:click={toggleExpand}>
<button class="sidebar-header" tabindex="0" on:click={toggleExpand}>
{title}
{#if expanded}
<Icon icon="circle-chevron-up"></Icon>
{:else}
<Icon icon="circle-chevron-down"></Icon>
{/if}
</div>
</button>
{#if expanded}
{#each schemas as aschema}
<a class="sidebar-item" class:active={aschema.name === schema?.name}
front/js/svelte/libs/Sortable.svelte
+10 -30
View File
@@ -1,6 +1,7 @@
<script>
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);
// }
</script>
{#if isTable}
<tbody class="sortable-container {sortableClass}" bind:this={sortableContainer}>
<slot />
</tbody>
<tbody class="sortable-container {sortableClass}" bind:this={sortableContainer}>
<slot/>
</tbody>
{:else}
<div class="sortable-container {sortableClass}" bind:this={sortableContainer}>
<slot />
</div>
<div class="sortable-container {sortableClass}" bind:this={sortableContainer}>
<slot/>
</div>
{/if}
front/js/svelte/records/Edit.svelte
+4 -3
View File
@@ -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 @@
<div class="record-edit">
<div class="tools-header">
<!-- <Manager managerRecords={recordHistory} {graph}/>-->
<EditHeader {schema} bind:record {isCreateMode} {graph} bind:activeContentTab/>
{#if isCreateMode}
<button
class="button primary btn-spinner"
@@ -180,7 +181,7 @@
Save
</button>
{/if}
<EditHeader {schema} bind:record {isCreateMode} {graph} bind:activeContentTab/>
</div>
<Title {schema} {record} {isCreateMode}/>
front/js/svelte/records/elements/File.svelte
+4 -1
View File
@@ -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}
front/js/svelte/records/elements/Reference.svelte
+3 -3
View File
@@ -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}
front/js/svelte/records/elements/ReferenceInlineButtons.svelte
+4 -6
View File
@@ -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}
front/js/svelte/records/header/EditHeader.svelte
+3 -1
View File
@@ -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>
front/js/svelte/records/header/Title.svelte
+6 -6
View File
@@ -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>
front/js/svelte/records/previews/PreviewReference.svelte
+56
View File
@@ -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>
front/sass/_button.scss
+7
View File
@@ -45,3 +45,10 @@
font-weight: normal;
}
}
.button-text{
border: none;
padding: 0;
background: transparent;
cursor: pointer;
}
front/sass/_dialog.scss
+9 -3
View File
@@ -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;
}
front/sass/_preview.scss
+8 -2
View File
@@ -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);
}
.sortable-drag { opacity: 0 !important; } .sortable-ghost { opacity: 1 !important; }
front/sass/_record-edit.scss
+9 -1
View File
@@ -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 {
front/sass/_sidebar.scss
+2 -1
View File
@@ -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 {
front/sass/_toolbar.scss
+22
View File
@@ -19,3 +19,25 @@
.toolbar-filters{ display: flex;
align-items: center;
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;
}
}
front/sass/app.scss
+1
View File
@@ -126,6 +126,7 @@ $themes: (
--secondary: #7bc8f1;
--accent: #5086ed;
--success: #80c671;
--error: red;
}