content and edit record

front/js/svelte/records/Edit.svelte

@@ -1,15 +1,15 @@
 <script>
     import {afterUpdate, getContext, onMount} from "svelte";
     import {isEqual} from "lodash";
-    import Manager from "./Manager.svelte";
-    import EditHeader from "./EditHeader.svelte"
-    import StatusSelect from "./StatusSelect.svelte"
+    import axios from "axios";
+    import EditHeader from "./header/EditHeader.svelte"
     import FilePreview from "./FilePreview.svelte"
-    import ContentTabs from "./ContentTabs.svelte"
+    import ContentTabs from "./header/ContentTabs.svelte"
     import FormField from "./FormField.svelte"
     import Graph from "./Graph.svelte"
     import Info from "./Info.svelte"
     import ErrorAlert from "../common/ErrorAlert.svelte"
+    import Title from "./header/Title.svelte";
 
     const channel = getContext("channel");
 
@@ -151,47 +151,39 @@
 
 <svelte:window on:beforeunload={beforeUnload}/>
 
-<div class="wrapper-normal transparent">
-    <Manager managerRecords={recordHistory} {graph}/>
-    <EditHeader {schema} {record} {isCreateMode} {graph} bind:activeContentTab/>
-
-    {#if !["_graph", "_info"].includes(activeContentTab) && isWritable}
-        <div class="shadow-lg "
-             style="position:fixed;bottom:0;left:0px;width:100%;background: rgb(206, 223, 210);z-index:1050"
+<div class="record-edit">
+    <div class="tools-header">
+    <!--    <Manager managerRecords={recordHistory} {graph}/>-->
+    {#if isCreateMode}
+        <button
+                class="button btn-spinner"
+                on:click={save}
         >
-            <div
-                    class="d-flex mt-3 mb-3  align-items-center justify-content-center"
-            >
-                <StatusSelect bind:status={record.status} {record} {schema}/>
-                {#if isCreateMode}
-                    <button
-                            class="ms-2 btn btn-primary btn-spinner"
-                            on:click={save}
-                    >
                             <span
                                     class="spinner-border spinner-border-sm"
                                     role="status"
                                     aria-hidden="true"
                             />
-                        Create
-                    </button>
-                {:else if hasUnsavedData}
-                    <button
-                            type="button"
-                            class="ms-2 btn btn-primary btn-spinner"
-                            on:click={save}
-                    >
+            Create
+        </button>
+    {:else if hasUnsavedData}
+        <button
+                type="button"
+                class="button ms-2 btn btn-primary btn-spinner"
+                on:click={save}
+        >
                             <span
                                     class="spinner-border spinner-border-sm"
                                     role="status"
                                     aria-hidden="true"
                             />
-                        Save
-                    </button>
-                {/if}
-            </div>
-        </div>
+            Save
+        </button>
     {/if}
+    <EditHeader {schema} bind:record {isCreateMode} {graph} bind:activeContentTab/>
+    </div>
+    <Title {schema} {record} {isCreateMode}/>
+
 
     <ErrorAlert message={errorMessage}/>
 

front/js/svelte/records/EditHeader.svelte

@@ -1,73 +0,0 @@
-<script>
-    import {getContext} from "svelte";
-    import Icon from "../common/Icon.svelte";
-    import {previewTitle} from "./Preview";
-
-    const channel = getContext("channel");
-    export let schema;
-    export let graph;
-    export let record;
-    export let isCreateMode;
-    export let activeContentTab;
-
-    function clone(e) {
-        e.preventDefault();
-        axios.post(channel.lucentUrl + "/records/clone/" + record.id).then(response => {
-            window.location = channel.lucentUrl + "/records/" + response.data.id;
-        }).catch(error => {
-
-        });
-    }
-</script>
-
-<h3 class="header-normal mt-5 mb-0">
-    <a
-        class="text-muted d-block text-decoration-none fs-6 mb-1"
-        href="{channel.lucentUrl}/content/{schema.name}"
-    >{schema.label.toUpperCase()}</a
-    >
-
-    <span class="text-dark d-block">
-        {#if !isCreateMode}
-            {previewTitle(channel.schemas, record, graph)}
-        {:else}
-            New Record
-        {/if}
-    </span>
-    {#if !isCreateMode}
-        <div class="dropdown d-inline-block">
-            <button
-                class="btn btn-link btn-sm"
-                type="button"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-            >
-                <Icon icon="ellipsis"/>
-            </button>
-            <div class="dropdown-menu">
-
-                <h6 class="dropdown-header">Record Actions</h6>
-                <a
-                    class="dropdown-item"
-                    href="{channel.lucentUrl}/records/new?schema={schema.name}"
-                >Create new</a
-                >
-                {#if !isCreateMode}
-                    <a
-                        class="dropdown-item"
-                        on:click={clone}
-                        href={channel.lucentUrl}
-                    >
-                        Clone
-                    </a>
-                {/if}
-                <a
-                    on:click|preventDefault={(e) =>
-                        (activeContentTab = "_info")}
-                    class="dropdown-item"
-                    href="{channel.lucentUrl}">Revisions</a
-                >
-            </div>
-        </div>
-    {/if}
-</h3>

front/js/svelte/records/FormField.svelte

@@ -47,8 +47,8 @@
     const id = `field-${field.name}-${record.id}`;
 </script>
 
-<div class="card editor-field">
-    <FieldHeader {schema} {field} {id}/>
+<div class="editor-field">
+    <FieldHeader   {field} {id}/>
     {#if field.info.name === "reference" && field.layout === "inline"}
         <ReferenceInline
             bind:graph

front/js/svelte/records/InlineEdit.svelte

@@ -4,8 +4,8 @@
     import {isEqual} from "lodash";
     import FormField from "./FormField.svelte";
     import FilePreview from "./FilePreview.svelte";
-    import ContentTabs from "./ContentTabs.svelte";
-    import StatusSelect from "./StatusSelect.svelte";
+    import ContentTabs from "./header/ContentTabs.svelte";
+    import StatusSelect from "./header/StatusSelect.svelte";
     import ErrorAlert from "../common/ErrorAlert.svelte";
 
     const channel = getContext("channel");

front/js/svelte/records/StatusSelect.svelte

@@ -1,57 +0,0 @@
-<script>
-    import {getContext} from "svelte";
-    import {getStatus, getStatusList} from "./StatusText";
-
-    const channel = getContext("channel");
-    export let status = "draft";
-    export let record;
-    export let schema;
-    let dropdown;
-    $: currentStatus = getStatus(status);
-    const statusList = Object.values(getStatusList());
-
-    function updateStatus(e, statusValue) {
-        // e.preventDefault();
-        status = statusValue;
-        dropdown.click();
-    }
-</script>
-
-<!-- Example split danger button -->
-<div class="d-flex justify-content-between">
-    <div class="btn-group dropup">
-        <button type="button" class="btn btn-{currentStatus.bg}"
-        >{currentStatus.text}</button
-        >
-        <button
-                bind:this={dropdown}
-                type="button"
-                class="btn btn-{currentStatus.bg} dropdown-toggle dropdown-toggle-split"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-        >
-            <span class="visually-hidden">Toggle Dropdown</span>
-        </button>
-        <div class="dropdown-menu">
-            <div class="dropdown-header">Change status to</div>
-            {#each statusList as astatus}
-                {#if astatus.value !== status}
-                    <button
-                            type="button"
-                            class="dropdown-item my-2 rounded w-100 bg-{astatus.bg} text-{astatus.color}"
-                            on:click={(e) => updateStatus(e, astatus.value)}
-                    >
-                        {astatus.text}
-                    </button>
-                {/if}
-            {/each}
-        </div>
-
-
-    </div>
-    {#if channel.previewTarget}
-        <a href="{channel.previewTargetUrl}?schema={schema.name}&id={record.id}" target="_blank" class="btn btn-info ms-3">
-            Preview
-        </a>
-    {/if}
-</div>

front/js/svelte/records/elements/Checkbox.svelte

@@ -8,7 +8,7 @@
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 </script>
 
-<div>
+<div class="field-checkbox">
     <div class="form-check form-check-inline">
         <input
             class="form-check-input"

front/js/svelte/records/elements/FieldHeader.svelte

@@ -3,20 +3,20 @@
     export let id;
 </script>
 
-<div class="mb-1">
-    <div class="d-flex justify-content-between">
-        <div>
-            <label for={id} class="form-label"
+<div class="field-header">
+    <div class="labels">
+        <div class="label-and-help">
+            <label for={id}
             >{field.label}</label
             >
             {#if field.help}
-                <small class=" text-primary  opacity-50">{field.help}</small>
+                <small class="help-text">{field.help}</small>
             {/if}
         </div>
         <span
             tabindex="-1"
             class="text-decoration-none"
-        ><code class="text-primary opacity-50">{field.name}</code>
+        ><code class="field-id">{field.name}</code>
         </span>
     </div>
 </div>

front/js/svelte/records/header/ContentTabs.svelte

@@ -37,12 +37,12 @@
 </script>
 
 {#if tabs.length > 1}
-    <ul class="nav nav-pills mb-4 justify-content-center">
+    <ul class="tabs">
         {#each tabs as tab}
-            <li class="nav-item">
+            <li class="tab">
                 <button
                         on:click={(e) => changeTab(e, tab.name)}
-                        class="nav-link"
+                        class="button"
                         class:active={active === tab.name}
                         aria-current="page"
                 >

front/js/svelte/records/header/EditHeader.svelte

@@ -0,0 +1,54 @@
+<script>
+    import {getContext} from "svelte";
+    import Icon from "../../common/Icon.svelte";
+    import Dropdown from "../../common/Dropdown.svelte";
+    import StatusSelect from "./StatusSelect.svelte";
+
+    const channel = getContext("channel");
+    export let schema;
+    export let record;
+    export let isCreateMode;
+    export let activeContentTab;
+
+    function clone(e) {
+        e.preventDefault();
+        axios.post(channel.lucentUrl + "/records/clone/" + record.id).then(response => {
+            window.location = channel.lucentUrl + "/records/" + response.data.id;
+        }).catch(error => {
+
+        });
+    }
+</script>
+
+
+    <StatusSelect bind:status={record.status} {record}></StatusSelect>
+
+    {#if !isCreateMode}
+        <Dropdown orientation="right">
+            <div slot="button">
+                <Icon icon="ellipsis"/>
+            </div>
+            <h6 class="dropdown-header">Record Actions</h6>
+            <a
+                    class="dropdown-item"
+                    href="{channel.lucentUrl}/records/new?schema={schema.name}"
+            >Create new</a
+            >
+            {#if !isCreateMode}
+                <a
+                        class="dropdown-item"
+                        on:click={clone}
+                        href={channel.lucentUrl}
+                >
+                    Clone
+                </a>
+            {/if}
+            <a
+                    on:click|preventDefault={(e) =>
+                        (activeContentTab = "_info")}
+                    class="dropdown-item"
+                    href="{channel.lucentUrl}">Revisions</a
+            >
+        </Dropdown>
+    {/if}
+

front/js/svelte/records/header/StatusSelect.svelte

@@ -0,0 +1,26 @@
+<script>
+    import Switch from "../../common/Switch.svelte";
+
+    export let status = "draft";
+    export let record;
+    function updateStatus(e) {
+
+        if(e.target.checked){
+            status = "published";
+        }else{
+            status = "draft";
+        }
+    }
+</script>
+
+
+{#if record.status !== "trashed"}
+    <Switch value="published" on:change={updateStatus} checked={record.status === "published"}></Switch>
+{/if}
+{#if record.status === "published"}
+    Published
+{:else if record.status === "draft"}
+    Draft
+{:else if record.status === "trashed"}
+    Trashed
+{/if}

front/js/svelte/records/header/Title.svelte

@@ -0,0 +1,27 @@
+<script>
+    import {getContext} from "svelte";
+    import {previewTitle} from "./../Preview";
+
+    const channel = getContext("channel");
+    export let schema;
+    export let record;
+    export let isCreateMode;
+
+</script>
+
+<div class="record-header">
+
+
+    <span class="record-title">
+        {#if !isCreateMode}
+            {previewTitle(channel.schemas, record)}
+        {:else}
+            New Record
+        {/if}
+    </span>
+    <a
+            class="schema-name"
+            href="{channel.lucentUrl}/content/{schema.name}"
+    >{schema.label.toUpperCase()}</a
+    >
+</div>