diff --git a/dental-server/public/app.js b/dental-server/public/app.js index a9622a8..ccf4285 100644 --- a/dental-server/public/app.js +++ b/dental-server/public/app.js @@ -625,6 +625,13 @@ function selectTransform(index) { fineTuneAngle = 0; updateFineTuneDisplay(); + // Mover a legenda do card selecionado para o placeholder de ajuste fino + const nameEl = el.querySelector('.transform-name'); + const placeholder = document.getElementById('fineTuneLabelPlaceholder'); + if (nameEl && placeholder) { + placeholder.appendChild(nameEl); + } + // Mover o contêiner de ajuste fino para dentro do card selecionado const ftContainer = document.getElementById('fineTuneContainer'); if (ftContainer) { @@ -646,6 +653,16 @@ function clearTransformSelection() { const container = document.getElementById('transformOptions'); container.classList.remove('selection-mode'); + // Devolver a legenda ativa para o card selecionado + const ftPlaceholder = document.getElementById('fineTuneLabelPlaceholder'); + if (ftPlaceholder) { + const activeLabel = ftPlaceholder.querySelector('.transform-name'); + const selectedEl = document.querySelector('.transform-option.selected'); + if (activeLabel && selectedEl) { + selectedEl.appendChild(activeLabel); + } + } + // Mover o contêiner de ajuste fino de volta para o Wrapper e esconder const ftContainer = document.getElementById('fineTuneContainer'); if (ftContainer) { diff --git a/dental-server/public/index.html b/dental-server/public/index.html index 8d28c55..2f30209 100644 --- a/dental-server/public/index.html +++ b/dental-server/public/index.html @@ -6,7 +6,7 @@ Gerenciador de Imagens Dentais - +
@@ -129,22 +129,28 @@
- +
@@ -451,6 +457,6 @@ - + diff --git a/dental-server/public/style.css b/dental-server/public/style.css index f95d708..634f2ab 100644 --- a/dental-server/public/style.css +++ b/dental-server/public/style.css @@ -755,8 +755,8 @@ body { grid-row: auto !important; } .selection-mode .transform-image-wrapper { - height: 45vh !important; - max-height: 500px; + height: 35vh !important; + max-height: 420px; } /* -90°: col 4, linha 2 (empilhado sob +90°) */ .transform-grid.grid-portrait .transform-option:nth-child(5) { grid-column: 4; grid-row: 2; } @@ -829,47 +829,42 @@ body { flex-shrink: 0; } -/* Estilo do Ajuste Fino Sobreposto como Marca d'Água */ +/* Nova Barra Inferior de Ajuste Fino para o Card Selecionado */ #fineTuneContainer { - position: absolute; - bottom: 45px; /* Logo acima do transform-name */ - left: 50%; - transform: translateX(-50%); - background: rgba(255, 255, 255, 0.96); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 30px; - padding: 6px 12px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.18); - z-index: 100; + width: 100%; display: flex; align-items: center; - gap: 8px; - width: max-content; - animation: fadeIn 0.2s ease-out; + justify-content: space-between; + padding: 5px 8px; + background: rgba(0, 0, 0, 0.03); + border-radius: 20px; + border: 1px solid rgba(0, 0, 0, 0.08); + box-sizing: border-box; + margin-top: 10px; + flex-shrink: 0; } -@keyframes fadeIn { - from { opacity: 0; transform: translateX(-50%) translateY(5px); } - to { opacity: 1; transform: translateX(-50%) translateY(0); } +.fine-tune-left-btns, +.fine-tune-right-btns { + display: flex; + gap: 4px; } #fineTuneContainer button { - background: #f1f3f5; + background: #ffffff; border: 1px solid #ced4da; - border-radius: 50%; - width: 32px; - height: 32px; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.8rem; + border-radius: 12px; + padding: 4px 8px; + font-size: 0.75rem; font-weight: 700; color: #495057; cursor: pointer; transition: all 0.15s ease; + min-width: 32px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; } #fineTuneContainer button:hover { @@ -878,13 +873,53 @@ body { color: #212529; } -#fineTuneContainer .fine-tune-val-display { - min-width: 48px; - text-align: center; - font-family: monospace; - font-weight: 700; - font-size: 1rem; - color: var(--primary-color); +#fineTuneContainer button:active { + transform: scale(0.95); +} + +/* Centralização do Título/Legenda */ +#fineTuneLabelPlaceholder { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 0 5px; + min-width: 0; /* Permite truncar se necessário */ +} + +#fineTuneLabelPlaceholder .transform-name { + margin-bottom: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.85rem; +} + +/* Botão Reset Flutuante no Canto Superior Direito do Card */ +#btnResetFineTune { + position: absolute !important; + top: 10px; + right: 10px; + background: rgba(229, 62, 62, 0.9) !important; + border: 1px solid #e53e3e !important; + color: #ffffff !important; + border-radius: 50% !important; + width: 28px !important; + height: 28px !important; + padding: 0 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + font-size: 0.7rem !important; + cursor: pointer; + z-index: 100; + box-shadow: 0 2px 6px rgba(0,0,0,0.15); +} + +#btnResetFineTune:hover { + background: #c53030 !important; + border-color: #c53030 !important; + transform: scale(1.05); }