From 7f0b782697feba60ab267145f271729451b23bc6 Mon Sep 17 00:00:00 2001
From: jimafisk <jim.fisk@jantcu.com>
Date: Tue, 24 Sep 2024 20:52:06 -0400
Subject: [PATCH] Reconfigure content directory (#342).

---
 defaults/core/cms/add_content.svelte          |   9 +-
 defaults/core/cms/admin_menu.svelte           |  30 +----
 defaults/core/cms/modals/content_modal.svelte | 107 ++++++++++--------
 3 files changed, 68 insertions(+), 78 deletions(-)

diff --git a/defaults/core/cms/add_content.svelte b/defaults/core/cms/add_content.svelte
index a9a6bacf..36868556 100644
--- a/defaults/core/cms/add_content.svelte
+++ b/defaults/core/cms/add_content.svelte
@@ -3,11 +3,10 @@
     import ButtonWrapper from './button_wrapper.svelte';
     import validateFilename from './validate_filename.js';
 
-    export let showAdd, showEditor, env;
+    export let showContentModal, showAdd, showEditor, env, selectedType;
     let filename = "";
     let baseurl = env.baseurl ? env.baseurl : '/';
 
-    let selectedType;
     const setType = type => {
         selectedType = type;
     }
@@ -17,6 +16,7 @@
         validationErrors = validateFilename(filename, selectedType);
         // No errors, redirect to "add" page
         if (validationErrors.length === 0) {
+            showContentModal = false;
             redirectAndEdit(baseurl + '#add/' + selectedType + '/' + filename);
         }
     }
@@ -49,7 +49,10 @@
     {/if}
     <ButtonWrapper>
         <button on:click={checkFilename} class="primary">Set Filename</button>
-        <button on:click={() => setType(null)}>Go back</button>
+        <button on:click={() => {
+            showAdd = false;
+            setType("");
+        }}>Go back</button>
     </ButtonWrapper>
 {:else}
     <h1>Add content of type:</h1>
diff --git a/defaults/core/cms/admin_menu.svelte b/defaults/core/cms/admin_menu.svelte
index 0a7f0985..7fd81689 100644
--- a/defaults/core/cms/admin_menu.svelte
+++ b/defaults/core/cms/admin_menu.svelte
@@ -1,6 +1,5 @@
 <script>
     export let user, content, shadowContent;
-    import AddContent from "./add_content.svelte";
     import ModalWrapper from "./modals/modal_wrapper.svelte";
     import MediaModal from "./modals/media_modal.svelte";
     import ContentModal from "./modals/content_modal.svelte";
@@ -23,8 +22,6 @@
         showEditor = !showEditor;
     }
 
-    let showAdd = false;
-
     const horizontalSlide = () => {
       return 	{
         delay: 0,
@@ -66,15 +63,6 @@
     {/if}
   </a>
   <span class="gap"></span>
-  <a href="." class="add" on:click|preventDefault={() => { showAdd = true; }}>
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="30" height="30" viewBox="0 0 24 24" stroke-width="2" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <circle cx="12" cy="12" r="9" />
-      <line x1="9" y1="12" x2="15" y2="12" />
-      <line x1="12" y1="9" x2="12" y2="15" />
-    </svg>
-    Add
-  </a>
   <a href="." class="content" on:click|preventDefault={() => showContentModal = !showContentModal}>
     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icons-tabler-outline icon-tabler-file-text" width="30" height="30" viewBox="0 0 24 24" stroke-width="2" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
@@ -108,7 +96,7 @@
 
 {#if showContentModal}
   <ModalWrapper on:click={() => showContentModal = !showContentModal}>
-    <ContentModal bind:showAdd bind:showEditor {env} />
+    <ContentModal bind:showContentModal bind:showEditor {env} />
   </ModalWrapper>
 {/if}
 
@@ -125,22 +113,6 @@
   </ModalWrapper>
 {/if}
 
-{#if showAdd}
-  <div class="modal-wrapper" on:click={() => { showAdd = false; }}>
-    <div class="modal-close">
-        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="35" height="35" viewBox="5 5 14 14" stroke-width="1.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-        </svg>
-    </div>
-    <div class="modal small" on:click|stopPropagation>
-      <AddContent bind:showAdd bind:showEditor {env} />
-    </div>
-  </div>
-  
-{/if}
-
 <div class={showEditor ? "sidenav-wrapper" : ""}>
 {#if showEditor}
   <div transition:horizontalSlide|local class={showEditor ? "sidenav" : ""}>
diff --git a/defaults/core/cms/modals/content_modal.svelte b/defaults/core/cms/modals/content_modal.svelte
index 21d01f11..019a1c45 100644
--- a/defaults/core/cms/modals/content_modal.svelte
+++ b/defaults/core/cms/modals/content_modal.svelte
@@ -2,19 +2,19 @@
     import AddContent from "../add_content.svelte";
     import allContent from '../../../generated/content.js';
 
-    export let showAdd, showEditor, env;
-    let title = "All Content";
+    export let showContentModal, showEditor, env;
+    let selectedType = "";
     let filteredContent = allContent;
-    let active = "listing";
+    let showAdd = false;
 </script>
 
 <div class="plenti-content plenti-modal" on:click|stopPropagation>
     <div class="plenti-column-1">
         <div class="plenti-type-reset">
             <button 
-                class="plenti-type-reset-selector"
+                class="plenti-type-reset-selector {selectedType == '' ? 'selected' : ''}"
                 on:click={() => {
-                    title = "All Content";
+                    selectedType = "";
                     filteredContent = allContent;
                 }}
             >
@@ -26,9 +26,9 @@
             {#each env?.types as content_type}
                 <div class="plenti-type">
                     <button 
-                        class="plenti-type-selector"
+                        class="plenti-type-selector {selectedType == content_type ? 'selected' : ''}"
                         on:click={() => {
-                            title = content_type;
+                            selectedType = content_type;
                             filteredContent = allContent.filter(c => c?.type == content_type);
                         }}
                     >
@@ -42,9 +42,9 @@
             {#each env?.singleTypes as single_type}
                 <div class="plenti-single-type">
                     <button 
-                        class="plenti-single-type-selector"
+                        class="plenti-single-type-selector {selectedType == single_type ? 'selected' : ''}"
                         on:click={() => {
-                            title = single_type;
+                            selectedType = single_type;
                             filteredContent = allContent.filter(c => c?.type == single_type);
                         }}
                     >
@@ -55,43 +55,35 @@
         </div>
     </div>
     <div class="plenti-column-2">
-        <div class="plenti-selectors">
-            <div class="plenti-selector {active === 'listing' ? 'active' : ''}" on:click={() => active = 'listing'}>
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-upload" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
-                <polyline points="7 9 12 4 17 9" />
-                <line x1="12" y1="4" x2="12" y2="16" />
-                </svg>
-                <span>Listing</span>
-            </div>
-            <div class="plenti-selector {active === 'add' ? 'active' : ''}" on:click={() => active = 'add'}>
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="30" height="30" viewBox="0 0 24 24" stroke-width="2" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                <circle cx="12" cy="12" r="9" />
-                <line x1="9" y1="12" x2="15" y2="12" />
-                <line x1="12" y1="9" x2="12" y2="15" />
-                </svg>
-                <span>Add New</span>
-            </div>
-        </div>
-        {#if active === 'listing'}
-            <h2>{title}:</h2>
-            <div class="plenti-content-items">
-                {#each filteredContent as c}
-                    <a href="{c?.path}" class="plenti-content-item">
-                        <div class="plenti-content-item-filename">{c?.filename}</div>
-                        <div class="plenti-content-item-path">
-                            <svg  xmlns="http://www.w3.org/2000/svg"  width="18"  height="18"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-link"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg>
-                            <span>{c?.path}</span>
-                        </div>
-                    </a>
-                {/each}
+        {#if showAdd && !env?.singleTypes?.includes(selectedType)}
+            <AddContent bind:showContentModal bind:showAdd bind:showEditor bind:selectedType {env} />
+        {:else}
+        <div class="plenti-content-items">
+            {#if !env?.singleTypes?.includes(selectedType)}
+                <button
+                    class="add-new" 
+                    on:click={() => showAdd = true}
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="30" height="30" viewBox="0 0 24 24" stroke-width="2" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <circle cx="12" cy="12" r="9" />
+                        <line x1="9" y1="12" x2="15" y2="12" />
+                        <line x1="12" y1="9" x2="12" y2="15" />
+                    </svg>
+                    Add {selectedType}
+                </button>
+            {/if}
+            {#each filteredContent as c}
+                <a href="{c?.path}" class="plenti-content-item">
+                    <div class="plenti-content-item-filename">{c?.filename}</div>
+                    <div class="plenti-content-item-path">
+                        <svg  xmlns="http://www.w3.org/2000/svg"  width="18"  height="18"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-link"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg>
+                        <span>{c?.path}</span>
+                    </div>
+                </a>
+            {/each}
             </div>
         {/if}
-        {#if active === 'add'}
-            <AddContent bind:showAdd bind:showEditor {env} />
-        {/if}
     </div>
 </div>
 
@@ -101,12 +93,14 @@
         gap: 40px;
     }
     .plenti-column-1 {
-        flex-basis: 250px;
+        flex-basis: 0;
+        flex-grow: 1;
         border-right: 1px solid gainsboro;
         padding-right: 40px;
     }
     .plenti-column-2 {
-        flex-grow: 1;
+        flex-basis: 0;
+        flex-grow: 7;
     }
     button {
         width: 100%;
@@ -116,6 +110,22 @@
         border: 1px solid gainsboro;
         border-radius: 5px;
         margin: 6px 0;
+        cursor: pointer;
+    }
+    button.selected {
+        background-color: gainsboro;
+    }
+    button.add-new {
+        margin: 0;
+        font-size: initial;
+        border: 1px dashed;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+    }
+    button.add-new:hover {
+        background-color: gainsboro;
     }
     .plenti-content-items {
         display: grid;
@@ -123,6 +133,7 @@
         gap: 10px;
         overflow-y: scroll;
         max-height: 100%;
+        word-break: break-all;
     }
     .plenti-content-item {
         text-decoration: none;
@@ -137,4 +148,8 @@
         align-content: center;
         gap: 4px;
     }
+    svg.icon-tabler-link {
+        min-width: 18px;
+        min-height: 18px;
+    }
 </style>
\ No newline at end of file