thandClaude Opus 4.6
f465306c1d
New tooltip.js module with styled tooltips (data-tip) and multi-line inline help (data-help). Migrates all ~70 native title attributes across index.php, JS modules, and all plugins. Adds inline help on 9 strategic UI elements (split, superview, zen, extract, assets, etc). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
46 lines
3.7 KiB
HTML
46 lines
3.7 KiB
HTML
<!-- Canvas Plugin: ASCII art overlay -->
|
|
<div class="overlay fixed inset-0" id="ascii-canvas-overlay" style="z-index:80;">
|
|
<div class="ascii-canvas-modal bg-t-surface border border-t-border rounded-lg shadow-xl flex flex-col" style="width:90vw;max-width:960px;height:85vh;max-height:700px;margin:auto;position:absolute;inset:0;">
|
|
<!-- Toolbar -->
|
|
<div class="flex items-center gap-1 px-3 py-2 border-b border-t-border shrink-0 flex-wrap" id="ascii-canvas-toolbar">
|
|
<button data-tool="brush" class="toolbar-btn active" data-tip="Brush (B)"><i class="ph ph-pencil-simple text-sm"></i></button>
|
|
<button data-tool="eraser" class="toolbar-btn" data-tip="Eraser (E)"><i class="ph ph-eraser text-sm"></i></button>
|
|
<button data-tool="line" class="toolbar-btn" data-tip="Line (L)"><i class="ph ph-line-segment text-sm"></i></button>
|
|
<button data-tool="rect" class="toolbar-btn" data-tip="Rectangle (R)"><i class="ph ph-rectangle text-sm"></i></button>
|
|
<button data-tool="circle" class="toolbar-btn" data-tip="Ellipse (O)"><i class="ph ph-circle text-sm"></i></button>
|
|
<button data-tool="fill" class="toolbar-btn" data-tip="Fill (F)"><i class="ph ph-paint-bucket text-sm"></i></button>
|
|
<button data-tool="text" class="toolbar-btn" data-tip="Text (T)"><i class="ph ph-text-t text-sm"></i></button>
|
|
<div class="w-px h-4 bg-t-border mx-1"></div>
|
|
<label class="flex items-center gap-1 text-t-muted text-xs">
|
|
<span>Char:</span>
|
|
<input id="ascii-char-input" type="text" value="#" maxlength="1" class="w-6 text-center bg-t-bg border border-t-border rounded text-t-text text-sm font-mono px-0 py-0">
|
|
</label>
|
|
<div class="w-px h-4 bg-t-border mx-1"></div>
|
|
<label class="flex items-center gap-1 text-t-muted text-xs">
|
|
<span>W:</span>
|
|
<input id="ascii-canvas-width" type="number" value="40" min="5" max="200" class="w-12 bg-t-bg border border-t-border rounded text-t-text text-xs text-center px-1 py-0">
|
|
</label>
|
|
<label class="flex items-center gap-1 text-t-muted text-xs">
|
|
<span>H:</span>
|
|
<input id="ascii-canvas-height" type="number" value="20" min="3" max="100" class="w-12 bg-t-bg border border-t-border rounded text-t-text text-xs text-center px-1 py-0">
|
|
</label>
|
|
<button id="ascii-canvas-resize" class="toolbar-btn text-xs" data-tip="Resize"><i class="ph ph-arrows-out text-sm"></i></button>
|
|
<div class="w-px h-4 bg-t-border mx-1"></div>
|
|
<button id="ascii-canvas-clear" class="toolbar-btn text-xs" data-tip="Clear"><i class="ph ph-trash text-sm"></i></button>
|
|
<div class="flex-1"></div>
|
|
<span id="ascii-canvas-coords" class="text-t-dim text-xs font-mono">1:1</span>
|
|
</div>
|
|
<!-- Char palette -->
|
|
<div id="ascii-char-palette" class="flex items-center gap-0.5 px-3 py-1.5 border-b border-t-border shrink-0 flex-wrap overflow-x-auto"></div>
|
|
<!-- Grid -->
|
|
<div class="flex-1 min-h-0 overflow-auto bg-t-bg p-2">
|
|
<pre id="ascii-canvas-grid" class="ascii-grid font-mono text-sm text-t-text select-none cursor-crosshair" style="line-height:1.35;letter-spacing:0;margin:0;"></pre>
|
|
</div>
|
|
<!-- Footer -->
|
|
<div class="flex items-center justify-end gap-2 px-3 py-2 border-t border-t-border shrink-0">
|
|
<button id="ascii-canvas-cancel" class="toolbar-btn text-xs px-3 py-1">Cancel</button>
|
|
<button id="ascii-canvas-ok" class="bg-t-accent text-t-bg text-xs font-bold px-4 py-1 rounded hover:opacity-90 cursor-pointer">Insert</button>
|
|
</div>
|
|
</div>
|
|
</div>
|