jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve content editor navigation
All checks were successful
deploy-socialize / image (push) Successful in 50s
Details
deploy-socialize / deploy (push) Successful in 19s
Details

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-05-09 14:15:52 -04:00
parent 4ac8c039ed
commit 26f532c49b
2 changed files with 36 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/features/content/views/ContentItemDetailView.vue
View File

@@ -4,7 +4,6 @@
import { useRoute, useRouter } from 'vue-router';
import { useSessionStorage } from '@vueuse/core';
import {
mdiArrowLeft,
mdiCheckboxBlankOutline,
mdiCheckboxMarked,
mdiClose,
@@ -1110,12 +1109,14 @@
);
onBeforeUnmount(() => {
window.removeEventListener('content-editor:back', navigateBackToContent);
window.removeEventListener('content-editor:save', handleAppBarSave);
window.removeEventListener('content-editor:campaign-change', handleAppBarCampaignChange);
detailStore.reset();
});
onMounted(() => {
window.addEventListener('content-editor:back', navigateBackToContent);
window.addEventListener('content-editor:save', handleAppBarSave);
window.addEventListener('content-editor:campaign-change', handleAppBarCampaignChange);
dispatchCampaignState();
@@ -1124,15 +1125,6 @@
<template>
<section class="editor-shell">
<v-btn variant="text" :ripple="false"
class="back-button"
type="button"
@click="navigateBackToContent"
>
<v-icon :icon="mdiArrowLeft" />
Back to content
</v-btn>
<div
v-if="!isCreateMode && detailStore.isLoading"
class="page-message"
@@ -1421,6 +1413,7 @@
<input
v-if="activePlacementUsesTitle"
class="preview-title-input"
dir="ltr"
type="text"
:value="placementTitle(activePlacement)"
placeholder="Video title"
@@ -1430,6 +1423,7 @@
<div
class="preview-copy-editor"
contenteditable="true"
dir="ltr"
role="textbox"
aria-multiline="true"
data-placeholder="Write the video description..."
@@ -1445,6 +1439,7 @@
<div
class="preview-copy-editor is-x"
contenteditable="true"
dir="ltr"
role="textbox"
aria-multiline="true"
data-placeholder="Write the post..."
@@ -1514,6 +1509,7 @@
<input
v-if="activePlacementUsesTitle"
class="preview-title-input"
dir="ltr"
type="text"
:value="placementTitle(activePlacement)"
placeholder="Post title"
@@ -1522,6 +1518,7 @@
<div
class="preview-copy-editor"
contenteditable="true"
dir="ltr"
role="textbox"
aria-multiline="true"
data-placeholder="Write the post..."
@@ -1757,23 +1754,10 @@
color: var(--app-text-muted);
}
.back-button,
.secondary-button {
@apply inline-flex items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-bold transition;
}
.back-button {
@apply w-fit border;
background: rgba(255, 255, 255, 0.88);
border-color: var(--app-border-subtle);
color: var(--app-color-on-surface);
}
.back-button:hover {
background: var(--app-color-on-surface);
color: var(--app-color-on-primary);
}
.secondary-button {
background: var(--app-control-hover);
color: var(--app-color-on-surface);
@@ -2005,21 +1989,21 @@
}
.preview-editor {
@apply grid gap-4 lg:grid-cols-[6rem_minmax(0,1fr)];
@apply flex min-w-0 flex-col gap-4;
}
.target-tabs {
@apply flex min-w-0 flex-col gap-4 rounded-[1rem] border p-2;
@apply flex min-w-0 gap-3 overflow-x-auto rounded-[1rem] border p-2;
background: var(--app-color-on-primary);
border-color: var(--app-border-subtle);
}
.target-group {
@apply flex flex-col items-center gap-2;
@apply flex shrink-0 items-center gap-2;
}
.target-group > span {
@apply text-[0.62rem] font-bold uppercase tracking-[0.12em];
@apply px-1 text-[0.62rem] font-bold uppercase tracking-[0.12em];
color: var(--app-text-muted);
}
@@ -2153,7 +2137,10 @@
.preview-title-input {
@apply w-full border-0 bg-transparent p-0 text-xl font-black;
color: var(--app-color-on-surface);
direction: ltr;
outline: none;
text-align: left;
unicode-bidi: plaintext;
}
.preview-title-input::placeholder {
@@ -2165,7 +2152,10 @@
background: rgba(248, 250, 252, 0.72);
border-color: var(--app-border-subtle);
color: var(--app-color-on-surface);
direction: ltr;
outline: none;
text-align: left;
unicode-bidi: plaintext;
}
.preview-copy-editor:focus {

25
frontend/src/layouts/main/AppBar.vue
View File

@@ -7,6 +7,7 @@
import { useReleaseCommunicationsStore } from '@/features/release-communications/stores/releaseCommunicationsStore.js';
import WorkspaceSelector from './WorkspaceSelector.vue';
import {
mdiArrowLeft,
mdiCalendar,
mdiCheck,
mdiChevronDown,
@@ -107,6 +108,10 @@
window.dispatchEvent(new CustomEvent('content-editor:save'));
}
function dispatchContentEditorBack() {
window.dispatchEvent(new CustomEvent('content-editor:back'));
}
function handleContentCampaignState(event) {
isContentEditorCampaignSelectorVisible.value = true;
contentEditorCampaignId.value = event.detail?.campaignId ?? '';
@@ -139,12 +144,20 @@
: [];
case 'content-item-create':
case 'content-item-detail':
return [{
key: 'save-content',
label: route.name === 'content-item-create' ? 'Create content' : 'Save revision',
icon: mdiCheck,
handler: dispatchContentEditorSave,
}];
return [
{
key: 'back-content',
label: 'Back to content',
icon: mdiArrowLeft,
handler: dispatchContentEditorBack,
},
{
key: 'save-content',
label: route.name === 'content-item-create' ? 'Create content' : 'Save revision',
icon: mdiCheck,
handler: dispatchContentEditorSave,
},
];
case 'campaigns':
return [{
key: 'create-campaign',