melissa/templates: layout 2-col + preview antes de duplicar
Refatora MelissaDocumentosTemplates seguindo padrao do
MelissaAgendaConfig (2-col com sidebar). Dois ajustes pedidos:
1. Layout 2-col (mdt-cols grid 360px + 1fr):
- COL 1 (sidebar): "Templates do sistema" — lista vertical
compacta com nome/tipo/descricao. Click abre preview.
- COL 2 (main): "Seus documentos" + subtitulo + grid de cards
dos templates do tenant.
- Empty states distintos por coluna.
- Mobile (<900px): empilha 1-col.
2. Preview antes de duplicar:
- View 'preview' nova (alem de list/create/edit).
- Click num template do sistema -> view='preview' (substitui
"Seus documentos" no main, sidebar permanece pra navegar).
- Header da main muda: nome do template + tipo/desc + 2 botoes
(Voltar / Duplicar).
- Iframe sandbox=allow-same-origin renderiza HTML completo
(cabecalho+corpo+rodape com CSS basico A4-like).
- Footer com lista de variaveis {{...}} do template (5 +N).
- Item ativo na sidebar destaca borda primary + opacity 1 no
icone de visualizar.
- Pos-duplicar: volta pra view='list' pra mostrar o novo
template no main.
UX result: user le antes de copiar (evita lixo em "Seus documentos"
de copias que nao queria).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
@@ -9,7 +9,7 @@
|
|||||||
* Lógica idêntica à DocumentTemplatesPage (composable
|
* Lógica idêntica à DocumentTemplatesPage (composable
|
||||||
* useDocumentTemplates + DocumentTemplateEditor reusado).
|
* useDocumentTemplates + DocumentTemplateEditor reusado).
|
||||||
*/
|
*/
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, computed, onMounted } from 'vue';
|
||||||
import { useToast } from 'primevue/usetoast';
|
import { useToast } from 'primevue/usetoast';
|
||||||
import { useConfirm } from 'primevue/useconfirm';
|
import { useConfirm } from 'primevue/useconfirm';
|
||||||
|
|
||||||
@@ -29,11 +29,15 @@ const {
|
|||||||
fetchTemplates, create, update, remove, duplicate
|
fetchTemplates, create, update, remove, duplicate
|
||||||
} = useDocumentTemplates();
|
} = useDocumentTemplates();
|
||||||
|
|
||||||
// ── Views ───────────────────────────────────────────────
|
// ── Views: list | create | edit | preview ───────────────
|
||||||
const view = ref('list');
|
const view = ref('list');
|
||||||
const editingTemplate = ref({});
|
const editingTemplate = ref({});
|
||||||
const editingId = ref(null);
|
const editingId = ref(null);
|
||||||
|
|
||||||
|
// Preview de template global (somente leitura) — abre antes de duplicar
|
||||||
|
// para o usuário ler o conteúdo. Inclui botão "Duplicar" no header.
|
||||||
|
const previewTemplate = ref(null);
|
||||||
|
|
||||||
// ── Acoes ───────────────────────────────────────────────
|
// ── Acoes ───────────────────────────────────────────────
|
||||||
function openCreate() {
|
function openCreate() {
|
||||||
editingId.value = null;
|
editingId.value = null;
|
||||||
@@ -56,6 +60,56 @@ function openEdit(tpl) {
|
|||||||
view.value = 'edit';
|
view.value = 'edit';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Preview de template do sistema — leitura + botão Duplicar.
|
||||||
|
// Clique na sidebar de templates do sistema cai aqui em vez de
|
||||||
|
// duplicar direto.
|
||||||
|
function openPreview(tpl) {
|
||||||
|
previewTemplate.value = tpl;
|
||||||
|
view.value = 'preview';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Monta HTML completo do template (cabeçalho + corpo + rodapé) com
|
||||||
|
// estilos básicos pra preview legível dentro do iframe.
|
||||||
|
const previewHtml = computed(() => {
|
||||||
|
const tpl = previewTemplate.value;
|
||||||
|
if (!tpl) return '';
|
||||||
|
const cabecalho = tpl.cabecalho_html || '';
|
||||||
|
const corpo = tpl.corpo_html || '';
|
||||||
|
const rodape = tpl.rodape_html || '';
|
||||||
|
return `<!DOCTYPE html>
|
||||||
|
<html lang="pt-BR">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<style>
|
||||||
|
@page { size: A4; margin: 20mm 15mm 25mm 15mm; }
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Arial, sans-serif;
|
||||||
|
font-size: 12pt;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #1a1a1a;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 32px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
h2 { font-size: 16pt; margin-bottom: 16px; }
|
||||||
|
h3 { font-size: 13pt; margin-top: 20px; margin-bottom: 8px; }
|
||||||
|
p { margin: 8px 0; }
|
||||||
|
table { border-collapse: collapse; width: 100%; }
|
||||||
|
td { padding: 4px 8px; }
|
||||||
|
hr { border: none; border-top: 1px solid #333; }
|
||||||
|
ul, ol { margin: 8px 0; padding-left: 24px; }
|
||||||
|
.doc-header { text-align: center; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid #ccc; }
|
||||||
|
.doc-footer { margin-top: 40px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 10pt; color: #666; text-align: center; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
${cabecalho ? `<div class="doc-header">${cabecalho}</div>` : ''}
|
||||||
|
<div class="doc-content">${corpo}</div>
|
||||||
|
${rodape ? `<div class="doc-footer">${rodape}</div>` : ''}
|
||||||
|
</body>
|
||||||
|
</html>`;
|
||||||
|
});
|
||||||
|
|
||||||
async function onSave(payload) {
|
async function onSave(payload) {
|
||||||
try {
|
try {
|
||||||
if (view.value === 'create') {
|
if (view.value === 'create') {
|
||||||
@@ -82,7 +136,12 @@ function onDuplicate(tpl) {
|
|||||||
accept: async () => {
|
accept: async () => {
|
||||||
try {
|
try {
|
||||||
await duplicate(tpl.id);
|
await duplicate(tpl.id);
|
||||||
toast.add({ severity: 'success', summary: 'Duplicado', detail: `"${tpl.nome_template}" copiado para Meus Templates.`, life: 3000 });
|
toast.add({ severity: 'success', summary: 'Duplicado', detail: `"${tpl.nome_template}" copiado para Seus documentos.`, life: 3000 });
|
||||||
|
// Se veio do preview, volta pra list pra mostrar o novo template no main
|
||||||
|
if (view.value === 'preview') {
|
||||||
|
view.value = 'list';
|
||||||
|
previewTemplate.value = null;
|
||||||
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
||||||
}
|
}
|
||||||
@@ -152,7 +211,8 @@ onMounted(() => {
|
|||||||
<span>
|
<span>
|
||||||
<template v-if="view === 'list'">Templates de documentos</template>
|
<template v-if="view === 'list'">Templates de documentos</template>
|
||||||
<template v-else-if="view === 'create'">Novo template</template>
|
<template v-else-if="view === 'create'">Novo template</template>
|
||||||
<template v-else>Editar template</template>
|
<template v-else-if="view === 'edit'">Editar template</template>
|
||||||
|
<template v-else-if="view === 'preview'">Visualizar template</template>
|
||||||
</span>
|
</span>
|
||||||
<span v-if="view === 'list'" class="mdt-page__count">{{ templates.length }}</span>
|
<span v-if="view === 'list'" class="mdt-page__count">{{ templates.length }}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -210,8 +270,8 @@ onMounted(() => {
|
|||||||
|
|
||||||
<!-- Body -->
|
<!-- Body -->
|
||||||
<div class="mdt-body">
|
<div class="mdt-body">
|
||||||
<!-- ══ LIST VIEW ══ -->
|
<!-- ══ LIST + PREVIEW VIEWS — sidebar do sistema sempre presente ══ -->
|
||||||
<template v-if="view === 'list'">
|
<template v-if="view === 'list' || view === 'preview'">
|
||||||
<!-- Loading -->
|
<!-- Loading -->
|
||||||
<div v-if="loading && !templates.length" class="mdt-loading">
|
<div v-if="loading && !templates.length" class="mdt-loading">
|
||||||
<i class="pi pi-spin pi-spinner" />
|
<i class="pi pi-spin pi-spinner" />
|
||||||
@@ -229,53 +289,121 @@ onMounted(() => {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-else>
|
<!-- ══ Layout 2-col: sidebar (globais) + main (do tenant) ══ -->
|
||||||
<!-- Templates globais (padrão) -->
|
<div v-else class="mdt-cols">
|
||||||
<div v-if="globalTemplates.length" class="mdt-section">
|
<!-- ─── COL 1 — Sidebar: Templates do sistema ─── -->
|
||||||
<div class="mdt-section__head">
|
<aside class="mdt-side">
|
||||||
<div class="mdt-section__title">
|
<header class="mdt-side__head">
|
||||||
|
<div class="mdt-side__title">
|
||||||
<i class="pi pi-shield" />
|
<i class="pi pi-shield" />
|
||||||
<span>Templates padrão do sistema</span>
|
<span>Templates do sistema</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="mdt-section__count is-info">{{ globalTemplates.length }}</span>
|
<span class="mdt-section__count is-info">{{ globalTemplates.length }}</span>
|
||||||
|
</header>
|
||||||
|
<p class="mdt-side__subtitle">Modelos padrão da plataforma. Clique pra duplicar e personalizar.</p>
|
||||||
|
|
||||||
|
<div v-if="!globalTemplates.length" class="mdt-side__empty">
|
||||||
|
<i class="pi pi-info-circle" />
|
||||||
|
<span>Sem templates do sistema disponíveis.</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdt-grid">
|
|
||||||
<button
|
<ul v-else class="mdt-side__list">
|
||||||
|
<li
|
||||||
v-for="tpl in globalTemplates"
|
v-for="tpl in globalTemplates"
|
||||||
:key="tpl.id"
|
:key="tpl.id"
|
||||||
class="mdt-card mdt-card--global"
|
class="mdt-side__item"
|
||||||
type="button"
|
:class="{ 'is-active': view === 'preview' && previewTemplate?.id === tpl.id }"
|
||||||
@click="onDuplicate(tpl)"
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
@click="openPreview(tpl)"
|
||||||
|
@keydown.enter.prevent="openPreview(tpl)"
|
||||||
>
|
>
|
||||||
<div class="mdt-card__head">
|
<span class="mdt-side__item-icon">
|
||||||
<span class="mdt-card__icon mdt-card__icon--info">
|
<i class="pi pi-file" />
|
||||||
<i class="pi pi-file" />
|
</span>
|
||||||
</span>
|
<div class="mdt-side__item-main">
|
||||||
<div class="mdt-card__main">
|
<div class="mdt-side__item-name">{{ tpl.nome_template }}</div>
|
||||||
<div class="mdt-card__name">{{ tpl.nome_template }}</div>
|
<div class="mdt-side__item-tipo">{{ tipoLabel(tpl.tipo) }}</div>
|
||||||
<div class="mdt-card__tipo">{{ tipoLabel(tpl.tipo) }}</div>
|
<div v-if="tpl.descricao" class="mdt-side__item-desc">{{ tpl.descricao }}</div>
|
||||||
<div v-if="tpl.descricao" class="mdt-card__desc">{{ tpl.descricao }}</div>
|
</div>
|
||||||
|
<i class="pi pi-eye mdt-side__item-action" v-tooltip.left="'Visualizar'" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- ─── COL 2 — Main: Seus documentos OU Preview do sistema ─── -->
|
||||||
|
<main class="mdt-main">
|
||||||
|
<!-- ── HEADER: muda conforme view ── -->
|
||||||
|
<header class="mdt-main__head">
|
||||||
|
<template v-if="view === 'list'">
|
||||||
|
<div class="mdt-main__title-row">
|
||||||
|
<div class="mdt-main__title">
|
||||||
|
<i class="pi pi-user-edit" />
|
||||||
|
<span>Seus documentos</span>
|
||||||
|
</div>
|
||||||
|
<span class="mdt-section__count is-accent">{{ tenantTemplates.length }}</span>
|
||||||
|
</div>
|
||||||
|
<p class="mdt-main__subtitle">
|
||||||
|
Templates personalizados da sua clínica. Crie do zero ou duplique um modelo do sistema.
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="view === 'preview' && previewTemplate">
|
||||||
|
<div class="mdt-main__title-row">
|
||||||
|
<div class="mdt-main__title">
|
||||||
|
<i class="pi pi-eye" />
|
||||||
|
<span>{{ previewTemplate.nome_template }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="mdt-preview-actions">
|
||||||
|
<button class="mdt-act-btn" @click="view = 'list'">
|
||||||
|
<i class="pi pi-arrow-left" />
|
||||||
|
<span>Voltar</span>
|
||||||
|
</button>
|
||||||
|
<button class="mdt-act-btn mdt-act-btn--primary" @click="onDuplicate(previewTemplate)">
|
||||||
|
<i class="pi pi-copy" />
|
||||||
|
<span>Duplicar pra meus templates</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="mdt-card__badge mdt-card__badge--info">padrão</span>
|
<p class="mdt-main__subtitle">
|
||||||
<div class="mdt-card__hint">
|
<strong>{{ tipoLabel(previewTemplate.tipo) }}</strong>
|
||||||
<i class="pi pi-copy" />
|
<span v-if="previewTemplate.descricao"> · {{ previewTemplate.descricao }}</span>
|
||||||
Click pra duplicar e personalizar
|
</p>
|
||||||
</div>
|
</template>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- ── PREVIEW VIEW: iframe com o template renderizado ── -->
|
||||||
|
<div v-if="view === 'preview' && previewTemplate" class="mdt-preview-wrap">
|
||||||
|
<iframe
|
||||||
|
:srcdoc="previewHtml"
|
||||||
|
class="mdt-preview-iframe"
|
||||||
|
sandbox="allow-same-origin"
|
||||||
|
title="Pré-visualização do template"
|
||||||
|
/>
|
||||||
|
<div v-if="previewTemplate.variaveis?.length" class="mdt-preview-vars">
|
||||||
|
<i class="pi pi-info-circle" />
|
||||||
|
<span>
|
||||||
|
Este template usa {{ previewTemplate.variaveis.length }} variável(eis):
|
||||||
|
<code>{{ previewTemplate.variaveis.slice(0, 5).map(v => `{{${v}}}`).join(', ') }}</code>
|
||||||
|
<span v-if="previewTemplate.variaveis.length > 5"> e +{{ previewTemplate.variaveis.length - 5 }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ── LIST VIEW: empty ou grid ── -->
|
||||||
|
<div v-else-if="!tenantTemplates.length" class="mdt-main__empty">
|
||||||
|
<i class="pi pi-file-edit mdt-main__empty-icon" />
|
||||||
|
<div class="mdt-main__empty-title">Nenhum template personalizado ainda</div>
|
||||||
|
<div class="mdt-main__empty-hint">
|
||||||
|
Clique em "Novo template" no topo da página ou duplique um modelo do sistema na coluna ao lado.
|
||||||
|
</div>
|
||||||
|
<button class="mdt-act-btn mdt-act-btn--primary mdt-main__empty-btn" @click="openCreate">
|
||||||
|
<i class="pi pi-plus" />
|
||||||
|
<span>Criar primeiro template</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Templates do tenant (meus) -->
|
<!-- Grid dos templates do tenant -->
|
||||||
<div v-if="tenantTemplates.length" class="mdt-section">
|
<div v-else class="mdt-grid">
|
||||||
<div class="mdt-section__head">
|
|
||||||
<div class="mdt-section__title">
|
|
||||||
<i class="pi pi-user-edit" />
|
|
||||||
<span>Meus templates</span>
|
|
||||||
</div>
|
|
||||||
<span class="mdt-section__count is-accent">{{ tenantTemplates.length }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="mdt-grid">
|
|
||||||
<div
|
<div
|
||||||
v-for="tpl in tenantTemplates"
|
v-for="tpl in tenantTemplates"
|
||||||
:key="tpl.id"
|
:key="tpl.id"
|
||||||
@@ -324,8 +452,8 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
</template>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- ══ CREATE / EDIT VIEW ══ -->
|
<!-- ══ CREATE / EDIT VIEW ══ -->
|
||||||
@@ -473,19 +601,284 @@ onMounted(() => {
|
|||||||
.mdt-subheader__text { flex: 1; min-width: 0; }
|
.mdt-subheader__text { flex: 1; min-width: 0; }
|
||||||
.mdt-subheader__text strong { color: var(--m-text); font-weight: 600; }
|
.mdt-subheader__text strong { color: var(--m-text); font-weight: 600; }
|
||||||
|
|
||||||
/* Body */
|
/* Body (container externo — fica em flex pra acomodar 2-col body OU editor full) */
|
||||||
.mdt-body {
|
.mdt-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
min-height: 0;
|
||||||
padding: 12px;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Layout 2-col: sidebar (sistema) + main (do tenant) ─── */
|
||||||
|
.mdt-cols {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(280px, 360px) 1fr;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.mdt-cols {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── COL 1: Sidebar (templates do sistema) ── */
|
||||||
|
.mdt-side {
|
||||||
|
background: var(--m-bg-soft);
|
||||||
|
border: 1px solid var(--m-border);
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.mdt-side__head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 12px 14px 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.mdt-side__title {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 0.86rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--m-text);
|
||||||
|
}
|
||||||
|
.mdt-side__title > i {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--m-text-muted);
|
||||||
|
}
|
||||||
|
.mdt-side__subtitle {
|
||||||
|
margin: 0 14px 8px;
|
||||||
|
font-size: 0.74rem;
|
||||||
|
color: var(--m-text-muted);
|
||||||
|
line-height: 1.45;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.mdt-side__empty {
|
||||||
|
padding: 24px 14px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--m-text-muted);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.mdt-side__empty > i { font-size: 1.4rem; color: var(--m-text-faint); }
|
||||||
|
|
||||||
|
.mdt-side__list {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 4px 8px 12px;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: var(--m-border-strong) transparent;
|
scrollbar-color: var(--m-border-strong) transparent;
|
||||||
}
|
}
|
||||||
.mdt-body::-webkit-scrollbar { width: 5px; }
|
.mdt-side__list::-webkit-scrollbar { width: 5px; }
|
||||||
.mdt-body::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
|
.mdt-side__list::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
|
||||||
|
|
||||||
|
.mdt-side__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px 10px;
|
||||||
|
background: var(--m-bg-medium);
|
||||||
|
border: 1px solid var(--m-border);
|
||||||
|
border-radius: 9px;
|
||||||
|
color: var(--m-text);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 140ms ease, border-color 140ms ease;
|
||||||
|
}
|
||||||
|
.mdt-side__item:hover,
|
||||||
|
.mdt-side__item:focus-visible {
|
||||||
|
background: var(--m-bg-soft-hover);
|
||||||
|
border-color: var(--p-primary-color);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.mdt-side__item.is-active {
|
||||||
|
background: color-mix(in srgb, var(--p-primary-color) 12%, var(--m-bg-medium));
|
||||||
|
border-color: var(--p-primary-color);
|
||||||
|
}
|
||||||
|
.mdt-side__item.is-active .mdt-side__item-action {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.mdt-side__item-icon {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: color-mix(in srgb, rgb(37, 99, 235) 14%, transparent);
|
||||||
|
color: rgb(37, 99, 235);
|
||||||
|
border-radius: 7px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.mdt-side__item-main {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1px;
|
||||||
|
}
|
||||||
|
.mdt-side__item-name {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--m-text);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.mdt-side__item-tipo {
|
||||||
|
font-size: 0.66rem;
|
||||||
|
color: var(--m-text-muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
.mdt-side__item-desc {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: var(--m-text-muted);
|
||||||
|
margin-top: 3px;
|
||||||
|
line-height: 1.4;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.mdt-side__item-action {
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: var(--m-text-faint);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 140ms ease;
|
||||||
|
}
|
||||||
|
.mdt-side__item:hover .mdt-side__item-action {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── COL 2: Main (Seus documentos) ── */
|
||||||
|
.mdt-main {
|
||||||
|
background: var(--m-bg-soft);
|
||||||
|
border: 1px solid var(--m-border);
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.mdt-main__head {
|
||||||
|
padding: 12px 14px 8px;
|
||||||
|
border-bottom: 1px solid var(--m-border);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.mdt-main__title-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.mdt-main__title {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 0.86rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--m-text);
|
||||||
|
}
|
||||||
|
.mdt-main__title > i {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--p-primary-color);
|
||||||
|
}
|
||||||
|
.mdt-main__subtitle {
|
||||||
|
margin: 6px 0 0;
|
||||||
|
font-size: 0.74rem;
|
||||||
|
color: var(--m-text-muted);
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
.mdt-main__empty {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 56px 28px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--m-text-muted);
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.mdt-main__empty-icon { font-size: 2.4rem; color: var(--m-text-faint); margin-bottom: 6px; }
|
||||||
|
.mdt-main__empty-title { font-size: 0.95rem; font-weight: 600; color: var(--m-text); }
|
||||||
|
.mdt-main__empty-hint { font-size: 0.82rem; max-width: 360px; line-height: 1.5; }
|
||||||
|
.mdt-main__empty-btn { margin-top: 10px; }
|
||||||
|
|
||||||
|
.mdt-main .mdt-grid {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--m-border-strong) transparent;
|
||||||
|
}
|
||||||
|
.mdt-main .mdt-grid::-webkit-scrollbar { width: 5px; }
|
||||||
|
.mdt-main .mdt-grid::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
|
||||||
|
|
||||||
|
/* ── Preview de template do sistema ── */
|
||||||
|
.mdt-preview-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.mdt-preview-wrap {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #f4f4f4;
|
||||||
|
}
|
||||||
|
.mdt-preview-iframe {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
.mdt-preview-vars {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
background: var(--m-bg-soft);
|
||||||
|
border-top: 1px solid var(--m-border);
|
||||||
|
color: var(--m-text-muted);
|
||||||
|
font-size: 0.74rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.mdt-preview-vars > i { color: var(--p-primary-color); flex-shrink: 0; }
|
||||||
|
.mdt-preview-vars code {
|
||||||
|
font-family: 'JetBrains Mono', 'Consolas', monospace;
|
||||||
|
background: var(--m-bg-medium);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: var(--p-primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
/* Loading + Empty */
|
/* Loading + Empty */
|
||||||
.mdt-loading,
|
.mdt-loading,
|
||||||
|
|||||||
Reference in New Issue
Block a user