feat: improvements on ui and i18n
This commit is contained in:
Paulo Castellano
parent
2834fdd81a
commit
20a6c78804
6 changed files with 46 additions and 68 deletions
|
|
@ -17,6 +17,10 @@
|
|||
'delete' => 'Delete post',
|
||||
],
|
||||
|
||||
'form' => [
|
||||
'post_type' => 'Post Type',
|
||||
],
|
||||
|
||||
'status' => [
|
||||
'draft' => 'Draft',
|
||||
'scheduled' => 'Scheduled',
|
||||
|
|
@ -61,11 +65,10 @@
|
|||
],
|
||||
|
||||
'sync_enable' => [
|
||||
'title' => 'Discard text and sync with :platform?',
|
||||
'description' => 'If you enable syncing, you\'ll lose all edits made specifically to other platforms.',
|
||||
'confirm_question' => 'Are you sure you want to sync with the :platform version?',
|
||||
'title' => 'Enable sync?',
|
||||
'description' => 'All platforms will share the same content. Any custom edits made to individual platforms will be replaced with the current content.',
|
||||
'cancel' => 'Cancel',
|
||||
'action' => 'Sync with :platform',
|
||||
'action' => 'Enable sync',
|
||||
],
|
||||
|
||||
'sync_disable' => [
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -17,6 +17,10 @@
|
|||
'delete' => 'Excluir post',
|
||||
],
|
||||
|
||||
'form' => [
|
||||
'post_type' => 'Tipo de Post',
|
||||
],
|
||||
|
||||
'status' => [
|
||||
'draft' => 'Rascunho',
|
||||
'scheduled' => 'Agendado',
|
||||
|
|
@ -61,11 +65,10 @@
|
|||
],
|
||||
|
||||
'sync_enable' => [
|
||||
'title' => 'Descartar texto e sincronizar com :platform?',
|
||||
'description' => 'Se você ativar a sincronização, perderá todas as edições feitas especificamente para outras plataformas.',
|
||||
'confirm_question' => 'Tem certeza que deseja sincronizar com a versão do :platform?',
|
||||
'title' => 'Ativar sincronização?',
|
||||
'description' => 'Todas as plataformas compartilharão o mesmo conteúdo. Qualquer edição personalizada feita em plataformas individuais será substituída pelo conteúdo atual.',
|
||||
'cancel' => 'Cancelar',
|
||||
'action' => 'Sincronizar com :platform',
|
||||
'action' => 'Ativar sincronização',
|
||||
],
|
||||
|
||||
'sync_disable' => [
|
||||
|
|
|
|||
|
|
@ -26,13 +26,6 @@ import {
|
|||
ComboboxTrigger,
|
||||
} from '@/components/ui/combobox';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { useMediaRules } from '@/composables/useMediaRules';
|
||||
|
||||
|
|
@ -248,22 +241,21 @@ const handleDropOnItem = (e: DragEvent, targetId: string) => {
|
|||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<!-- Content Type Selector -->
|
||||
<!-- Content Type Selector (Tabs Style) -->
|
||||
<div v-if="hasMultipleContentTypes">
|
||||
<Label class="text-sm font-medium mb-2 block">Post Type</Label>
|
||||
<Select :model-value="contentType" @update:model-value="emit('update:contentType', $event)">
|
||||
<SelectTrigger class="w-full">
|
||||
<SelectValue placeholder="Select type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="option in contentTypeOptions" :key="option.value" :value="option.value">
|
||||
<div class="flex flex-col">
|
||||
<span>{{ option.label }}</span>
|
||||
<span class="text-xs text-muted-foreground">{{ option.description }}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Label class="text-sm font-medium mb-2 block">{{ $t('posts.form.post_type') }}</Label>
|
||||
<div
|
||||
class="bg-muted text-muted-foreground inline-flex h-10 w-auto items-center justify-start rounded-lg p-1">
|
||||
<button v-for="option in contentTypeOptions" :key="option.value" type="button"
|
||||
@click="emit('update:contentType', option.value)" :class="[
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all',
|
||||
contentType === option.value
|
||||
? 'bg-background text-foreground shadow-sm'
|
||||
: 'hover:bg-background/50 hover:text-foreground'
|
||||
]">
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pinterest Board Selector -->
|
||||
|
|
@ -282,7 +274,7 @@ const handleDropOnItem = (e: DragEvent, targetId: string) => {
|
|||
</ComboboxAnchor>
|
||||
<ComboboxList class="w-[var(--reka-combobox-trigger-width)]">
|
||||
<div class="relative">
|
||||
<ComboboxInput placeholder="Search board..." class="pl-9" />
|
||||
<ComboboxInput placeholder="Search board..." />
|
||||
<span class="absolute inset-y-0 start-0 flex items-center justify-center px-3">
|
||||
<IconSearch class="size-4 text-muted-foreground" />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -645,6 +645,7 @@ const deletePost = () => {
|
|||
<div class="flex flex-col h-screen">
|
||||
<!-- Top Bar with Tabs and Actions -->
|
||||
<div class="relative flex items-center justify-between border-b px-4 py-2 bg-background">
|
||||
|
||||
<!-- Platform Tabs -->
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Status Badge (when read-only) -->
|
||||
|
|
@ -654,6 +655,14 @@ const deletePost = () => {
|
|||
{{ getStatusConfig(post.status).label }}
|
||||
</Badge>
|
||||
|
||||
<!-- Sync Toggle (centered, only in edit mode with multiple platforms) -->
|
||||
<div v-if="!isReadOnly && selectedPlatformIds.length > 1" class="flex items-center gap-2">
|
||||
<Switch id="sync-content" v-model="synced" @click.capture="handleSyncClick" />
|
||||
<Label for="sync-content">
|
||||
{{ $t('posts.edit.sync') }}
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedPlatforms.length > 0"
|
||||
class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]">
|
||||
<TooltipProvider>
|
||||
|
|
@ -707,24 +716,6 @@ const deletePost = () => {
|
|||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<!-- Sync Toggle (centered, only in edit mode with multiple platforms) -->
|
||||
<div v-if="!isReadOnly && selectedPlatformIds.length > 1"
|
||||
class="absolute left-1/2 -translate-x-1/2 flex items-center gap-2">
|
||||
<div @click.capture="handleSyncClick">
|
||||
<Switch id="sync-content" v-model="synced" />
|
||||
</div>
|
||||
<Label for="sync-content" class="text-sm cursor-pointer flex items-center gap-1.5">
|
||||
<span>{{ $t('posts.edit.sync') }}</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<component v-for="op in otherSelectedPlatforms.slice(0, 1)" :key="op.id"
|
||||
:is="getPlatformIcon(op.platform)" class="h-4 w-4 text-neutral-600" />
|
||||
<span v-if="otherSelectedPlatforms.length > 1" class="text-muted-foreground">
|
||||
+{{ otherSelectedPlatforms.length - 1 }}
|
||||
</span>
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<!-- Schedule & Actions (only in edit mode) -->
|
||||
<div v-if="!isReadOnly" class="flex items-center gap-3">
|
||||
<!-- DateTime Picker -->
|
||||
|
|
@ -747,8 +738,8 @@ const deletePost = () => {
|
|||
{{ $t('posts.edit.schedule') }}
|
||||
</Button>
|
||||
|
||||
<Button type="button" size="sm"
|
||||
:disabled="!canSubmit || isSubmitting || isSaving" @click="submit('publishing')">
|
||||
<Button type="button" size="sm" :disabled="!canSubmit || isSubmitting || isSaving"
|
||||
@click="submit('publishing')">
|
||||
{{ $t('posts.edit.publish') }}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -770,11 +761,11 @@ const deletePost = () => {
|
|||
<!-- Autosave indicator -->
|
||||
<div v-if="!isReadOnly && (isSaving || showSaved)" class="absolute top-4 left-6 z-10">
|
||||
<span v-if="isSaving" class="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<IconLoader2 class="h-3 w-3 animate-spin" />
|
||||
<IconLoader2 class="h-4 w-4 animate-spin" />
|
||||
{{ $t('posts.edit.saving') }}
|
||||
</span>
|
||||
<span v-else-if="showSaved" class="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<IconCircleCheck class="h-3 w-3 text-green-500" />
|
||||
<IconCircleCheck class="h-4 w-4 text-green-500" />
|
||||
{{ $t('posts.edit.saved') }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -918,27 +909,16 @@ const deletePost = () => {
|
|||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
{{ $t('posts.edit.sync_enable.title', {
|
||||
platform: getPlatformLabel(firstSelectedPlatform?.platform
|
||||
|| '')
|
||||
}) }}
|
||||
{{ $t('posts.edit.sync_enable.title') }}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{{ $t('posts.edit.sync_enable.description') }}
|
||||
<br /><br />
|
||||
{{ $t('posts.edit.sync_enable.confirm_question', {
|
||||
platform:
|
||||
getPlatformLabel(firstSelectedPlatform?.platform || '')
|
||||
}) }}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>{{ $t('posts.edit.sync_enable.cancel') }}</AlertDialogCancel>
|
||||
<AlertDialogAction @click="confirmEnableSync">
|
||||
{{ $t('posts.edit.sync_enable.action', {
|
||||
platform: getPlatformLabel(firstSelectedPlatform?.platform
|
||||
|| '')
|
||||
}) }}
|
||||
{{ $t('posts.edit.sync_enable.action') }}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
|
|
|
|||
Loading…
Reference in a new issue