feat: add draggable zoom control with close button and menu toggle
- Add close button (X) to zoom control widget - Make zoom control draggable anywhere on screen - Persist dragged position in localStorage (cv-zoom-position) - Add "Zoom" button to action bar to show control when hidden - Persist visibility state in localStorage (cv-zoom-visible) - Cursor changes to "move" to indicate draggability - Interactive elements (slider, buttons) don't trigger drag - Position stays within viewport bounds - All features work on desktop only (zoom hidden on mobile)
This commit is contained in:
+18
-1
@@ -174,6 +174,15 @@
|
||||
|
||||
<!-- Right: Action buttons -->
|
||||
<div class="action-buttons-right">
|
||||
<button
|
||||
id="show-zoom-btn"
|
||||
class="action-btn zoom-toggle-btn"
|
||||
onclick="showZoomControl()"
|
||||
style="display: none;"
|
||||
aria-label="{{if eq .Lang "es"}}Mostrar control de zoom{{else}}Show zoom control{{end}}">
|
||||
<iconify-icon icon="mdi:magnify" width="18" height="18"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Zoom{{else}}Zoom{{end}}
|
||||
</button>
|
||||
<button
|
||||
class="action-btn pdf-btn"
|
||||
onclick="openPdfModal()"
|
||||
@@ -454,8 +463,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zoom Control (Fixed Bottom Center) -->
|
||||
<!-- Zoom Control (Fixed Bottom Center, Draggable) -->
|
||||
<div id="zoom-control" class="zoom-control no-print" role="group" aria-label="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}">
|
||||
<button
|
||||
id="zoom-close"
|
||||
class="zoom-close-btn"
|
||||
aria-label="{{if eq .Lang "es"}}Cerrar control de zoom{{else}}Close zoom control{{end}}"
|
||||
title="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
|
||||
<iconify-icon icon="mdi:close" width="16" height="16"></iconify-icon>
|
||||
</button>
|
||||
|
||||
<span class="zoom-value zoom-value-min" aria-hidden="true">50</span>
|
||||
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user