colors and filters

front/js/svelte/records/InlineEdit.svelte

@@ -1,12 +1,14 @@
 <script>
-    import {afterUpdate, createEventDispatcher, onMount,getContext} from "svelte";
+    import {afterUpdate, createEventDispatcher, getContext, onMount} from "svelte";
 
     import {isEqual} from "lodash";
     import FormField from "./FormField.svelte";
     import FilePreview from "./FilePreview.svelte";
     import ContentTabs from "./header/ContentTabs.svelte";
-    import StatusSelect from "./header/StatusSelect.svelte";
     import ErrorAlert from "../common/ErrorAlert.svelte";
+    import EditHeader from "./header/EditHeader.svelte";
+    import axios from "axios";
+    import Title from "./header/Title.svelte";
 
     const channel = getContext("channel");
     const dispatch = createEventDispatcher();
@@ -135,7 +137,6 @@
                     resolve(null);
                 })
                 .catch(function (error) {
-                    // setOriginalContent();
                     if (error.response) {
                         if (typeof error.response.data.error === "string") {
                             errorMessage = error.response.data.error;
@@ -144,9 +145,6 @@
                         }
                     }
                     resolve(null);
-                    // msgSuccess = null;
-                    // msgError = error.response.data.error;
-                    // submitted = false;
                 });
         });
     }
@@ -154,15 +152,45 @@
 
 <svelte:window on:beforeunload={beforeUnload}/>
 
-<div class="inline-edit my-4">
+<div class="inline-edit record-edit">
+    <div class="tools-header">
+        <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab/>
+        {#if isCreateMode}
+            <button
+                    class="button 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="button primary 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>
+    <Title {schema} {record} {isCreateMode}/>
     <ErrorAlert message={errorMessage}/>
 
-    <div class=" mt-1">
+    <div class=" mt-4" style="margin-bottom:150px;position:relative;">
         <ContentTabs
                 {schema}
                 {isCreateMode}
                 bind:active={activeContentTab}
-                {record}
         />
         <FilePreview {record} {schema}/>
         <!-- <fieldset disabled="disabled"> -->
@@ -181,48 +209,5 @@
         {/each}
         <!-- </fieldset> -->
     </div>
-    <div>
-        <div class="d-flex  mt-3 align-items-center justify-content-center">
-            {#if schema.hasDrafts}
-                <StatusSelect bind:status={record.status} {schema}/>
-            {/if}
-            {#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"
-                    />
-                    Add
-                </button>
-            {:else}
-                <button
-                        disabled={!hasUnsavedData}
-                        class="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}
-            <button class="ms-2 btn btn-link" on:click={cancel}>
-                cancel
-            </button>
-        </div>
-    </div>
 </div>
 
-<style>
-    .inline-edit {
-        padding: 44px;
-        background-color: #eee;
-        border-radius: 32px;
-    }
-</style>