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

theming

Browse Source
This commit is contained in:
Alex Lingris
2024-08-18 19:04:32 +03:00
parent 5d6869c118
commit 50c8af7bda
10 changed files with 156 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/records/FilePreview.svelte
+2
View File
@@ -1,7 +1,9 @@
<script>
import Preview from "../files/Preview.svelte";
import {fileurl} from "../files/imageserver"
import {getContext} from "svelte"
const channel = getContext("channel");
export let record;
export let schema;
</script>
front/js/svelte/records/Info.svelte
+29 -44
View File
@@ -2,7 +2,7 @@
import {friendlyDate} from "../../helpers";
import Avatar from "../account/Avatar.svelte";
import {usernameById} from "../account/users";
import {isEqual, sortBy} from "lodash";
import {isEqual} from "lodash";
import Icon from "../common/Icon.svelte";
import RevisionCell from "./revisions/RevisionCell.svelte";
import {getContext} from "svelte";
@@ -123,19 +123,19 @@
</div>
</div>
</div>
<div class="lx-card mt-4">
<div class="revisions">
{#if schema.revisions > 0}
<div class="header-small mb-3">Revisions</div>
{#each revisions as revision}
{#if revision._sys.version != record._sys.version}
{#if revision._sys.version !== record._sys.version}
<div
class="row p-2 rounded"
class="revision"
class:active={revision._sys.version ===
selectedRevision?._sys.version}
>
<div class="col-2">version {revision._sys.version}</div>
<div class="col-5">
<div class="version">
<span>version {revision._sys.version}</span>
<Avatar
name={usernameById(users, revision._sys.updatedBy)}
side={24}
@@ -147,7 +147,7 @@
<button
disabled={revision._sys.version ===
selectedRevision?._sys.version}
class="btn btn-sm btn-outline-primary"
class="button"
on:click={(e) => compare(e, revision)}
>Compare
</button
@@ -164,14 +164,14 @@
</div>
<div bind:this={revisionSection}>
{#if selectedRevision}
<div class="mt-4">
<div class="selected-revision">
{#if fieldsWithDiff.length > 0}
<p class="text-center fw-bold mb-3 mt-5">
If you choose to rollback to this revision
</p>
<button
on:click={rollback}
class="btn btn-primary mb-5 d-block mx-auto"
class="button"
>
Rollback to version {selectedRevision._sys.version}
</button>
@@ -189,29 +189,25 @@
{field.label}
</div> -->
<div
class="lx-card row p-4 mb-4 w-100"
class="revision-field"
style="overflow:hidden"
>
<div class="col-5">
<div class="compare-left">
<RevisionCell
{field}
side={record.data[field.name]}
colorClass="text-danger"
/>
</div>
<div class="col-2">
<div
class="h-100 d-flex align-items-center justify-content-center text-secondary"
>
<span class="me-1">{field.label}</span>
<Icon
icon="angle-right"
width="12"
height="12"
/>
</div>
<div class="compare-center">
<span class="me-1">{field.label}</span>
<Icon
icon="angle-right"
width="12"
height="12"
/>
</div>
<div class="col-5">
<div class="compare-right">
<RevisionCell
edges={selectedRevision._edges}
{field}
@@ -235,22 +231,25 @@
</p>
{#each Object.entries(edgeFieldsDiff) as [field, edges]}
<div
class="lx-card row p-4 mb-4 w-100"
class="revision-references"
style="overflow:hidden"
>
<div class="col-4">
<div class="reference-field">
{field}:
</div>
<div class="col-8">
<p class="mb-2 text-danger">Record</p>
<div class="reference-compare">
<p class="">Record</p>
{#each edges.record as edge}
<RevisionEdgeRow {edge} />
<RevisionEdgeRow {edge}/>
{:else}
<p>No references</p>
{/each}
<p class="mt-4 mb-2 text-success">Revision</p>
</div>
<div class="reference-compare">
<p class="text-success">Revision</p>
{#each edges.revision as edge}
<RevisionEdgeRow {edge} />
<RevisionEdgeRow {edge}/>
{:else}
<p>No references</p>
{/each}
@@ -263,17 +262,3 @@
{/if}
</div>
<style>
.label {
width: 180px;
margin-right: 10px;
margin-bottom: 4px;
display: inline-block;
}
.active {
background-color: #eee;
border: 1px solid #ccc;
}
</style>
front/js/svelte/records/Preview.js
+4 -5
View File
@@ -3,7 +3,6 @@ import {stripHtml} from "../../helpers";
export function previewTitle(schemas, record, graph) {
let schema = schemas.find((aSchema) => aSchema.name === record?.schema);
if (!schema?.titleTemplate) {
return noTemplate(schema, record);
}
@@ -16,17 +15,17 @@ export function previewTitle(schemas, record, graph) {
.map((segment) => segment[1]) // map to fieldNames
.filter(fieldName => { // keep only references
let schemaField = schema.fields.find(f => f.name === fieldName)
return schemaField?.info.name === "reference";
return ["reference","file"].includes(schemaField?.info.name);
}).reduce((carry, field) => { // map to records
let edge = graph.edges.find(edge => edge.source === record.id && edge.field === field)
let referenceRecord = graph.records.find(rec => rec.id === edge?.target)
let edge = graph?.edges.find(edge => edge.source === record.id && edge.field === field)
let referenceRecord = graph?.records.find(rec => rec.id === edge?.target)
carry[field] = previewTitle(schemas, referenceRecord, graph);
return carry;
}, {});
recordData = {...recordData, ...referencePreviews}
let render = Mustache.render(schema.titleTemplate, recordData);
if (!render || render === "") {
return noTemplate(schema, record);
}
front/js/svelte/records/elements/Reference.svelte
+1
View File
@@ -62,6 +62,7 @@
{#each references as reference (reference.id)}
<div>
<PreviewReference
{graph}
record={reference}
hasDelete={true}
on:remove={removeReference}
front/js/svelte/records/elements/ReferenceInlineButtons.svelte
+25 -35
View File
@@ -5,6 +5,8 @@
import Dialog from "../../dialog/Dialog.svelte";
import DialogRecord from "../../dialog/DialogRecord.svelte";
import axios from "axios";
import Dropdown from "../../common/Dropdown.svelte";
const dispatch = createEventDispatcher();
const channel = getContext("channel");
export let schemas;
@@ -56,43 +58,31 @@
</script>
{#if schemas.length > 1}
<button
type="button"
class:is-first={!recordId}
class="button"
on:click|preventDefault={(e) => (showOptions = !showOptions)}
<div
style="display: flex;align-items: center;gap:4px"
>
<Icon width={24} height={24} icon="circle-plus"/>
</button>
{#if showOptions}
<div class="bg-light lx-card d-flex">
{#each schemas as schema}
<div
class="lx-card p-4 text-center me-4"
style="max-width: 250px;"
>
<p>{schema.label}</p>
<div class="mb-2">
<button
class="btn btn-sm btn-primary"
on:click={(e) =>
createInlineReference(e, schema.name)}
>New
</button>
<button
class="btn btn-sm btn-outline-primary"
on:click={(e) => openBrowseModal(e, schema.name)}
>
<Icon icon="magnifying-glass"/>
</button
>
</div>
{#each schemas as schema}
<Dropdown>
<div slot="button" class:is-first={!recordId}>
{schema.label}
</div>
{/each}
</div>
{/if}
<button
class=" button"
on:click={(e) =>
createInlineReference(e, schema.name)}
>Create New Record
</button>
<button
class="button"
on:click={(e) => openBrowseModal(e, schema.name)}
>
<Icon icon="magnifying-glass"/>
Search
</button
>
</Dropdown>
{/each}
</div>
{:else}
<div style="display:flex;align-items: center;gap: 4px">
<button
front/js/svelte/records/elements/ReferenceTags.svelte
+1 -1
View File
@@ -114,7 +114,7 @@
on:click={(e) => insert(e, option)}
on:keypress={(e) => insert(e, option)}
>
{previewTitle(channel.schemas, option)}
{previewTitle(channel.schemas, option ,graph)}
</div>
{:else}
front/js/svelte/records/revisions/RevisionEdgeRow.svelte
-2
View File
@@ -1,6 +1,4 @@
<script>
import Preview from "../../files/Preview.svelte";
import PreviewCardSmall from "../PreviewCardSmall.svelte";
import {getContext} from "svelte";
const channel = getContext("channel")
front/sass/_dropdown.scss
+6
View File
@@ -64,4 +64,10 @@
flex-shrink: 0;
}
}
.editor-field{
.dropdown-menu {
background: var(--p30);
}
}
front/sass/_revisions.scss
+87
View File
@@ -0,0 +1,87 @@
.revisions{
display: flex;
flex-direction: column;
gap: 5px;
.revision{
justify-content: space-between;
display: flex;
gap: 20px;
align-items: center;
background: var(--p20);
padding: 12px;
border-radius: 12px;
.version{
display: flex;
gap: 10px;
}
&.active{
background: var(--p30);
}
}
}
.selected-revision{
margin-top: 30px;
align-items: center;
background: var(--p20);
padding: 12px;
border-radius: 12px;
.button{
background: var(--p30);
}
.revision-field{
display: flex;
gap: 20px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--p30);
flex: 1;
.compare-left{
width: 45%;
border-radius: 12px;
padding: 20px;
background: var(--p30);
}
.compare-right{
width: 45%;
border-radius: 12px;
padding: 20px;
background: var(--p30);
}
.compare-center{
width: 10%;
height: 100%;
display: flex;
gap: 20px;
align-items: center;
}
}
}
.reference-field{
width: 100px;
}
.revision-references{
display: flex;
gap: 20px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--p30);
}
.reference-compare{
width: 45%;
border-radius: 12px;
padding: 20px;
background: var(--p30);
}
front/sass/app.scss
+1
View File
@@ -68,6 +68,7 @@
@import "./autocomplete";
@import "./reference-tags";
@import "./members";
@import "./revisions";
body {
background-color: var(--p10);