Skip to content

Commit

Permalink
Reconfigure content directory (#342).
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimafisk
jimafisk committed Sep 25, 2024
1 parent 78ffe4e commit 7f0b782
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 78 deletions.
9 changes: 6 additions & 3 deletions defaults/core/cms/add_content.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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);
}
}
Expand Down Expand Up @@ -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>
Expand Down
30 changes: 1 addition & 29 deletions defaults/core/cms/admin_menu.svelte
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -23,8 +22,6 @@
showEditor = !showEditor;
}
let showAdd = false;
const horizontalSlide = () => {
return {
delay: 0,
Expand Down Expand Up @@ -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"/>
Expand Down Expand Up @@ -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}

Expand All @@ -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" : ""}>
Expand Down
107 changes: 61 additions & 46 deletions defaults/core/cms/modals/content_modal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}}
>
Expand All @@ -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);
}}
>
Expand All @@ -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);
}}
>
Expand All @@ -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>

Expand All @@ -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%;
Expand All @@ -116,13 +110,30 @@
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;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
overflow-y: scroll;
max-height: 100%;
word-break: break-all;
}
.plenti-content-item {
text-decoration: none;
Expand All @@ -137,4 +148,8 @@
align-content: center;
gap: 4px;
}
svg.icon-tabler-link {
min-width: 18px;
min-height: 18px;
}
</style>

0 comments on commit 7f0b782

Please sign in to comment.