style: otimização compacta dos controles de ajuste fino integrados na legenda e remoção de labels no modal

This commit is contained in:
VPS 4 Builder
2026-05-25 00:03:48 +02:00
parent 5d47a8ebb5
commit c65a3118e3
3 changed files with 106 additions and 48 deletions
+17 -11
View File
@@ -6,7 +6,7 @@
<title>Gerenciador de Imagens Dentais</title>
<meta name="description" content="Sistema de gerenciamento de imagens de raio-X dental">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/style.css?v=2.1">
</head>
<body>
<div class="app-container">
@@ -129,22 +129,28 @@
<div id="transformViewWrapper" style="display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%;">
<div id="transformOptions" class="transform-grid" style="flex: 1; min-height: 0;"></div>
<div id="transformActionArea" style="display: none; margin-top: 15px; background: #f8f9fa; padding: 15px; border-radius: 8px; flex-shrink: 0; border: 1px solid #e3e8ee;">
<label style="font-weight: 600; display: block; margin-bottom: 8px;">Nova Observação / Detalhes (Opcional):</label>
<textarea id="newImageRemark" class="search-input" rows="2" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px;" placeholder="Ex: Raio-X Dente 45..."></textarea>
<textarea id="newImageRemark" class="search-input" rows="2" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px;" placeholder="Nova Observação / Detalhes (Opcional)..."></textarea>
<div style="display: flex; gap: 10px; margin-top: 10px;">
<button class="btn btn-secondary" style="flex: 1; padding: 12px; font-size: 1.1rem;" onclick="clearTransformSelection()">Cancelar</button>
<button id="btnSaveTransform" class="btn btn-primary" style="flex: 2; padding: 12px; font-size: 1.1rem;" onclick="saveSelectedTransform()">Salvar Nova Imagem</button>
</div>
</div>
<!-- Bloco de Ajuste Fino (Movido dinamicamente para o card selecionado) -->
<!-- Bloco de Ajuste Fino (Integrado na legenda do card selecionado) -->
<div id="fineTuneContainer" style="display: none;" onclick="event.stopPropagation()">
<button type="button" onclick="adjustFineTune(-5)" title="Rotacionar -5°">-5°</button>
<button type="button" onclick="adjustFineTune(-1)" title="Rotacionar -1°">-1°</button>
<div class="fine-tune-val-display" id="fineTuneValDisplay">0°</div>
<button type="button" onclick="adjustFineTune(1)" title="Rotacionar +1°">+1°</button>
<button type="button" onclick="adjustFineTune(5)" title="Rotacionar +5°">+5°</button>
<button type="button" id="btnResetFineTune" onclick="resetFineTune()" style="display: none; background: #e53e3e; border-color: #e53e3e; color: white; border-radius: 15px; width: auto; padding: 0 10px; height: 32px;" title="Resetar ajuste fino">Reset</button>
<div class="fine-tune-left-btns">
<button type="button" onclick="adjustFineTune(-5)" title="Rotacionar -5°">-5°</button>
<button type="button" onclick="adjustFineTune(-1)" title="Rotacionar -1°">-1°</button>
</div>
<div id="fineTuneLabelPlaceholder"></div>
<div class="fine-tune-right-btns">
<button type="button" onclick="adjustFineTune(1)" title="Rotacionar +1°">+1°</button>
<button type="button" onclick="adjustFineTune(5)" title="Rotacionar +5°">+5°</button>
</div>
<button type="button" id="btnResetFineTune" onclick="resetFineTune()" style="display: none;" title="Resetar ajuste fino">↩️ Reset</button>
</div>
</div>
@@ -451,6 +457,6 @@
<!-- Application Script -->
<script src="/socket.io/socket.io.js"></script>
<script src="/app.js"></script>
<script src="/app.js?v=2.1"></script>
</body>
</html>