feat: refine content editor layout
This commit is contained in:
@@ -21,6 +21,7 @@ The editor should use one shared content body for every selected target channel,
|
||||
- Keep the editor focused on post text and target channels by removing confusing title, calendar, change summary, and base-caption fields.
|
||||
- Make target preview tabs compact.
|
||||
- Move the create content entry point into the top app menu bar.
|
||||
- Remove the asset-management tab from the content detail production panel.
|
||||
- Preserve existing save payloads and backend contracts.
|
||||
|
||||
## Validation
|
||||
@@ -42,3 +43,4 @@ npm run build
|
||||
- [x] The editor no longer shows title, calendar, change summary, or base-caption fields.
|
||||
- [x] Target channel tabs use compact icon-only buttons with channel names as accessible labels and tooltips.
|
||||
- [x] Create content is available from the top app menu bar.
|
||||
- [x] Assets are no longer shown in the content detail production panel.
|
||||
|
||||
@@ -335,7 +335,8 @@
|
||||
<style scoped>
|
||||
@reference "@/assets/main.css";
|
||||
.approval-panel {
|
||||
@apply relative flex w-11 justify-center self-start;
|
||||
@apply relative z-0 flex w-11 justify-center self-start;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.approval-empty strong,
|
||||
@@ -365,7 +366,7 @@
|
||||
}
|
||||
|
||||
.approval-step:not(:last-child)::after {
|
||||
@apply absolute bottom-[-3.5rem] top-10 border-l-2 border-dashed;
|
||||
@apply absolute bottom-[-3.5rem] top-10 z-0 border-l-2 border-dashed;
|
||||
content: '';
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@@ -377,12 +378,24 @@
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
@apply relative z-10 flex h-9 w-9 items-center justify-center rounded-full border text-xs font-black transition;
|
||||
@apply relative z-[1] flex items-center justify-center rounded-full border text-xs font-black transition;
|
||||
width: 2.25rem;
|
||||
min-width: 2.25rem;
|
||||
max-width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
min-height: 2.25rem;
|
||||
max-height: 2.25rem;
|
||||
padding: 0;
|
||||
aspect-ratio: 1 / 1;
|
||||
background: var(--app-color-surface);
|
||||
border-color: rgba(23, 32, 51, 0.16);
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.step-circle :deep(.v-btn__content) {
|
||||
@apply flex h-full w-full items-center justify-center;
|
||||
}
|
||||
|
||||
button.step-circle:not(:disabled) {
|
||||
@apply cursor-pointer shadow-sm;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@ export const useContentItemDetailStore = defineStore('content-item-detail', () =
|
||||
|
||||
const item = ref(null);
|
||||
const revisions = ref([]);
|
||||
const assets = ref([]);
|
||||
const comments = ref([]);
|
||||
const approvals = ref([]);
|
||||
const notifications = ref([]);
|
||||
@@ -18,8 +17,6 @@ export const useContentItemDetailStore = defineStore('content-item-detail', () =
|
||||
const error = ref(null);
|
||||
const actions = reactive({
|
||||
revision: false,
|
||||
asset: false,
|
||||
assetRevision: false,
|
||||
comment: false,
|
||||
decision: false,
|
||||
status: false,
|
||||
@@ -32,7 +29,6 @@ export const useContentItemDetailStore = defineStore('content-item-detail', () =
|
||||
function reset() {
|
||||
item.value = null;
|
||||
revisions.value = [];
|
||||
assets.value = [];
|
||||
comments.value = [];
|
||||
approvals.value = [];
|
||||
notifications.value = [];
|
||||
@@ -48,14 +44,12 @@ export const useContentItemDetailStore = defineStore('content-item-detail', () =
|
||||
const [
|
||||
itemResponse,
|
||||
revisionsResponse,
|
||||
assetsResponse,
|
||||
commentsResponse,
|
||||
approvalsResponse,
|
||||
activityResponse,
|
||||
] = await Promise.all([
|
||||
client.get(`/api/content-items/${contentItemId}`),
|
||||
client.get(`/api/content-items/${contentItemId}/revisions`),
|
||||
client.get('/api/assets', { params: { contentItemId } }),
|
||||
client.get('/api/comments', { params: { contentItemId } }),
|
||||
client.get('/api/approvals', { params: { contentItemId } }),
|
||||
client.get(`/api/content-items/${contentItemId}/activity`),
|
||||
@@ -63,7 +57,6 @@ export const useContentItemDetailStore = defineStore('content-item-detail', () =
|
||||
|
||||
item.value = itemResponse.data;
|
||||
revisions.value = revisionsResponse.data ?? [];
|
||||
assets.value = assetsResponse.data ?? [];
|
||||
comments.value = commentsResponse.data ?? [];
|
||||
approvals.value = approvalsResponse.data ?? [];
|
||||
activity.value = activityResponse.data ?? [];
|
||||
@@ -91,40 +84,6 @@ export const useContentItemDetailStore = defineStore('content-item-detail', () =
|
||||
}
|
||||
}
|
||||
|
||||
async function addGoogleDriveAsset(contentItemId, payload) {
|
||||
actions.asset = true;
|
||||
|
||||
try {
|
||||
const response = await client.post('/api/assets/google-drive', {
|
||||
...payload,
|
||||
contentItemId,
|
||||
workspaceId: currentItemWorkspaceId(),
|
||||
});
|
||||
if (response.data) {
|
||||
assets.value = [...assets.value, response.data];
|
||||
await fetchActivity(contentItemId);
|
||||
}
|
||||
return response.data;
|
||||
} finally {
|
||||
actions.asset = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function addAssetRevision(contentItemId, assetId, payload) {
|
||||
actions.assetRevision = true;
|
||||
|
||||
try {
|
||||
const response = await client.post(`/api/assets/${assetId}/revisions`, payload);
|
||||
if (response.data) {
|
||||
await fetchAssets(contentItemId);
|
||||
await fetchActivity(contentItemId);
|
||||
}
|
||||
return response.data;
|
||||
} finally {
|
||||
actions.assetRevision = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function addComment(contentItemId, payload) {
|
||||
actions.comment = true;
|
||||
|
||||
@@ -192,12 +151,6 @@ export const useContentItemDetailStore = defineStore('content-item-detail', () =
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async function fetchAssets(contentItemId) {
|
||||
const response = await client.get('/api/assets', { params: { contentItemId } });
|
||||
assets.value = response.data ?? [];
|
||||
return assets.value;
|
||||
}
|
||||
|
||||
async function fetchNotifications(contentItemId) {
|
||||
const response = await client.get('/api/notifications', {
|
||||
params: {
|
||||
@@ -218,7 +171,6 @@ export const useContentItemDetailStore = defineStore('content-item-detail', () =
|
||||
return {
|
||||
item,
|
||||
revisions,
|
||||
assets,
|
||||
comments,
|
||||
approvals,
|
||||
notifications,
|
||||
@@ -229,8 +181,6 @@ export const useContentItemDetailStore = defineStore('content-item-detail', () =
|
||||
reset,
|
||||
fetchContentItemDetail,
|
||||
createRevision,
|
||||
addGoogleDriveAsset,
|
||||
addAssetRevision,
|
||||
addComment,
|
||||
submitDecision,
|
||||
updateStatus,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
|
||||
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useSessionStorage } from '@vueuse/core';
|
||||
@@ -53,15 +53,6 @@
|
||||
placements: [],
|
||||
});
|
||||
|
||||
const assetForm = reactive({
|
||||
assetType: 'Image',
|
||||
displayName: '',
|
||||
googleDriveFileId: '',
|
||||
googleDriveLink: '',
|
||||
previewUrl: '',
|
||||
});
|
||||
|
||||
const assetRevisionForms = reactive({});
|
||||
const activeProductionTab = ref('comments');
|
||||
const activeCalendarEvent = ref(null);
|
||||
const activePlacementId = ref('');
|
||||
@@ -177,7 +168,6 @@
|
||||
const productionTabs = computed(() => [
|
||||
{ key: 'comments', label: 'Comments', count: detailStore.comments.length },
|
||||
{ key: 'revisions', label: 'Revisions', count: detailStore.revisions.length },
|
||||
{ key: 'assets', label: 'Assets', count: detailStore.assets.length },
|
||||
{ key: 'activity', label: 'Activity', count: detailStore.activity.length },
|
||||
]);
|
||||
const workspaceMembers = computed(() =>
|
||||
@@ -624,6 +614,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
function handleAppBarSave() {
|
||||
void saveContent();
|
||||
}
|
||||
|
||||
async function submitDecision(approvalId, payload) {
|
||||
if (!contentItemId.value) {
|
||||
return;
|
||||
@@ -640,76 +634,6 @@
|
||||
await detailStore.addComment(contentItemId.value, payload);
|
||||
}
|
||||
|
||||
function inferGoogleDriveFileId(value) {
|
||||
const trimmed = value.trim();
|
||||
const filePathMatch = trimmed.match(/\/d\/([^/]+)/);
|
||||
const queryMatch = trimmed.match(/[?&]id=([^&]+)/);
|
||||
|
||||
return filePathMatch?.[1] ?? queryMatch?.[1] ?? '';
|
||||
}
|
||||
|
||||
function resetAssetForm() {
|
||||
assetForm.assetType = 'Image';
|
||||
assetForm.displayName = '';
|
||||
assetForm.googleDriveFileId = '';
|
||||
assetForm.googleDriveLink = '';
|
||||
assetForm.previewUrl = '';
|
||||
}
|
||||
|
||||
async function linkGoogleDriveAsset() {
|
||||
if (!contentItemId.value || !assetForm.displayName.trim() || !assetForm.googleDriveLink.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const googleDriveFileId = assetForm.googleDriveFileId.trim() || inferGoogleDriveFileId(assetForm.googleDriveLink);
|
||||
|
||||
if (!googleDriveFileId) {
|
||||
saveError.message = 'A Google Drive file id is required when it cannot be read from the link.';
|
||||
return;
|
||||
}
|
||||
|
||||
await detailStore.addGoogleDriveAsset(contentItemId.value, {
|
||||
assetType: assetForm.assetType,
|
||||
displayName: assetForm.displayName.trim(),
|
||||
googleDriveFileId,
|
||||
googleDriveLink: assetForm.googleDriveLink.trim(),
|
||||
previewUrl: assetForm.previewUrl.trim() || null,
|
||||
});
|
||||
resetAssetForm();
|
||||
}
|
||||
|
||||
function assetRevisionForm(assetId) {
|
||||
if (!assetRevisionForms[assetId]) {
|
||||
assetRevisionForms[assetId] = {
|
||||
sourceReference: '',
|
||||
previewUrl: '',
|
||||
notes: '',
|
||||
};
|
||||
}
|
||||
|
||||
return assetRevisionForms[assetId];
|
||||
}
|
||||
|
||||
async function addAssetRevision(asset) {
|
||||
const draft = assetRevisionForm(asset.id);
|
||||
|
||||
if (!contentItemId.value || !draft.sourceReference.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
await detailStore.addAssetRevision(contentItemId.value, asset.id, {
|
||||
sourceReference: draft.sourceReference.trim(),
|
||||
previewUrl: draft.previewUrl.trim() || null,
|
||||
notes: draft.notes.trim() || null,
|
||||
});
|
||||
|
||||
assetRevisionForms[asset.id] = {
|
||||
sourceReference: '',
|
||||
previewUrl: '',
|
||||
notes: '',
|
||||
};
|
||||
}
|
||||
|
||||
async function navigateBackToContent() {
|
||||
const returnTo = typeof route.query.returnTo === 'string' ? route.query.returnTo : '';
|
||||
const previousPath = router.options.history.state.back;
|
||||
@@ -942,8 +866,13 @@
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('content-editor:save', handleAppBarSave);
|
||||
detailStore.reset();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('content-editor:save', handleAppBarSave);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -978,26 +907,6 @@
|
||||
<h1>{{ isCreateMode ? 'Compose post' : 'Edit post' }}</h1>
|
||||
<p>{{ placementSummary || 'Choose target channels and write the post once.' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<div
|
||||
v-if="!isCreateMode && item"
|
||||
class="status-badges"
|
||||
>
|
||||
<span class="meta-chip">{{ item.status }}</span>
|
||||
<span class="meta-chip">{{ item.currentRevisionLabel }}</span>
|
||||
</div>
|
||||
|
||||
<v-btn variant="text" :ripple="false"
|
||||
class="primary-button"
|
||||
:disabled="contentItemsStore.isCreating || detailStore.actions.revision"
|
||||
@click="saveContent"
|
||||
>
|
||||
{{ isCreateMode
|
||||
? (contentItemsStore.isCreating ? 'Creating...' : 'Create content')
|
||||
: (detailStore.actions.revision ? 'Saving...' : 'Save revision') }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -1253,7 +1162,7 @@
|
||||
v-if="isCreateMode"
|
||||
class="empty-note"
|
||||
>
|
||||
Save the content first to start comments, revisions, assets, and activity.
|
||||
Save the content first to start comments, revisions, and activity.
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
@@ -1311,126 +1220,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="activeProductionTab === 'assets'">
|
||||
<div class="panel-stack asset-form">
|
||||
<v-select
|
||||
v-model="assetForm.assetType"
|
||||
:items="['Image', 'Video', 'Document', 'Other']"
|
||||
label="Type"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="assetForm.displayName"
|
||||
label="Name"
|
||||
placeholder="Final reel, cover image..."
|
||||
variant="outlined"
|
||||
hide-details
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="assetForm.googleDriveLink"
|
||||
class="field-wide"
|
||||
label="Google Drive link"
|
||||
type="url"
|
||||
placeholder="https://drive.google.com/..."
|
||||
variant="outlined"
|
||||
hide-details
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="assetForm.googleDriveFileId"
|
||||
label="File id"
|
||||
placeholder="Optional if link includes it"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="assetForm.previewUrl"
|
||||
label="Preview URL"
|
||||
type="url"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
/>
|
||||
<v-btn variant="text" :ripple="false"
|
||||
class="primary-button field-wide"
|
||||
:disabled="detailStore.actions.asset"
|
||||
@click="linkGoogleDriveAsset"
|
||||
>
|
||||
{{ detailStore.actions.asset ? 'Linking...' : 'Link asset' }}
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<div class="timeline-list">
|
||||
<article
|
||||
v-for="asset in detailStore.assets"
|
||||
:key="asset.id"
|
||||
class="asset-card"
|
||||
>
|
||||
<div class="timeline-row-header">
|
||||
<div>
|
||||
<strong>{{ asset.displayName }}</strong>
|
||||
<span>{{ asset.assetType }} · {{ asset.sourceType }}</span>
|
||||
</div>
|
||||
<span class="revision-pill">v{{ asset.currentRevisionNumber }}</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="asset-link"
|
||||
:href="asset.googleDriveLink"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Open source
|
||||
</a>
|
||||
|
||||
<div class="asset-revisions">
|
||||
<div
|
||||
v-for="revision in asset.revisions"
|
||||
:key="revision.id"
|
||||
class="asset-revision-row"
|
||||
>
|
||||
<span>v{{ revision.revisionNumber }}</span>
|
||||
<small>{{ formatDateTime(revision.createdAt) }}</small>
|
||||
<p v-if="revision.notes">{{ revision.notes }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-stack compact-form">
|
||||
<v-text-field
|
||||
v-model="assetRevisionForm(asset.id).sourceReference"
|
||||
class="field-wide"
|
||||
label="New revision reference"
|
||||
type="url"
|
||||
placeholder="Updated Drive link or production reference"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="assetRevisionForm(asset.id).notes"
|
||||
class="field-wide"
|
||||
label="Notes"
|
||||
placeholder="What changed?"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
/>
|
||||
<v-btn variant="text" :ripple="false"
|
||||
class="secondary-button"
|
||||
:disabled="detailStore.actions.assetRevision"
|
||||
@click="addAssetRevision(asset)"
|
||||
>
|
||||
{{ detailStore.actions.assetRevision ? 'Adding...' : 'Add revision' }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div
|
||||
v-if="!detailStore.assets.length"
|
||||
class="empty-note"
|
||||
>
|
||||
No production assets have been linked yet.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="timeline-list">
|
||||
<article
|
||||
@@ -1515,9 +1304,7 @@
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
@apply flex flex-col gap-4 rounded-[1.75rem] border p-6 lg:flex-row lg:items-start lg:justify-between;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-color: var(--app-border-subtle);
|
||||
@apply flex flex-col gap-2 px-1;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
@@ -1526,7 +1313,7 @@
|
||||
}
|
||||
|
||||
.editor-header h1 {
|
||||
@apply mt-2 text-4xl font-black;
|
||||
@apply mt-1 text-3xl font-black;
|
||||
color: var(--app-color-on-surface);
|
||||
}
|
||||
|
||||
@@ -1541,19 +1328,7 @@
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.header-actions,
|
||||
.status-badges {
|
||||
@apply flex flex-wrap items-center gap-3;
|
||||
}
|
||||
|
||||
.meta-chip {
|
||||
@apply rounded-full px-4 py-2 text-xs font-bold uppercase tracking-[0.16em];
|
||||
background: var(--app-border-subtle);
|
||||
color: var(--app-color-on-surface);
|
||||
}
|
||||
|
||||
.back-button,
|
||||
.primary-button,
|
||||
.secondary-button {
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-bold transition;
|
||||
}
|
||||
@@ -1570,11 +1345,6 @@
|
||||
color: var(--app-color-on-primary);
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
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);
|
||||
@@ -2021,8 +1791,7 @@
|
||||
@apply flex items-start justify-between gap-3;
|
||||
}
|
||||
|
||||
.timeline-row p,
|
||||
.asset-revision-row p {
|
||||
.timeline-row p {
|
||||
@apply text-sm leading-6;
|
||||
color: var(--app-color-on-surface);
|
||||
}
|
||||
@@ -2056,48 +1825,12 @@
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.asset-form {
|
||||
@apply grid gap-4 sm:grid-cols-2;
|
||||
}
|
||||
|
||||
.asset-card {
|
||||
@apply flex flex-col gap-4 rounded-[1rem] border p-4;
|
||||
background: var(--app-color-on-primary);
|
||||
border-color: var(--app-border-subtle);
|
||||
}
|
||||
|
||||
.asset-card .timeline-row-header span,
|
||||
.asset-revision-row small {
|
||||
@apply text-sm leading-6;
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.asset-link {
|
||||
@apply w-fit text-sm font-semibold;
|
||||
color: var(--app-color-on-tertiary);
|
||||
}
|
||||
|
||||
.revision-pill {
|
||||
@apply rounded-full px-3 py-1 text-xs font-bold;
|
||||
background: rgba(15, 118, 110, 0.12);
|
||||
color: var(--app-color-on-tertiary);
|
||||
}
|
||||
|
||||
.asset-revisions {
|
||||
@apply flex flex-col gap-2;
|
||||
}
|
||||
|
||||
.asset-revision-row {
|
||||
@apply rounded-[0.875rem] border px-3 py-2;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-color: var(--app-border-subtle);
|
||||
}
|
||||
|
||||
.asset-revision-row span {
|
||||
@apply mr-2 text-sm font-bold;
|
||||
color: var(--app-color-on-surface);
|
||||
}
|
||||
|
||||
.compact-form {
|
||||
@apply gap-3;
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import WorkspaceSelector from './WorkspaceSelector.vue';
|
||||
import {
|
||||
mdiCalendar,
|
||||
mdiCheck,
|
||||
mdiChevronDown,
|
||||
mdiCogOutline,
|
||||
mdiEmailOutline,
|
||||
@@ -91,6 +92,10 @@
|
||||
}));
|
||||
}
|
||||
|
||||
function dispatchContentEditorSave() {
|
||||
window.dispatchEvent(new CustomEvent('content-editor:save'));
|
||||
}
|
||||
|
||||
const appBarActions = computed(() => {
|
||||
if (!authStore.isAuthenticated) {
|
||||
return [];
|
||||
@@ -99,7 +104,6 @@
|
||||
switch (route.name) {
|
||||
case 'workspace-dashboard':
|
||||
case 'content-items':
|
||||
case 'content-item-detail':
|
||||
return authStore.isManager || authStore.isProvider
|
||||
? [{
|
||||
key: 'create-content',
|
||||
@@ -108,6 +112,14 @@
|
||||
route: { name: 'content-item-create' },
|
||||
}]
|
||||
: [];
|
||||
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,
|
||||
}];
|
||||
case 'campaigns':
|
||||
return [{
|
||||
key: 'create-campaign',
|
||||
|
||||
Reference in New Issue
Block a user