feat(ui): enhance UI components for turnstile and mask mode

- Replace inline styles for turnstile title with a CSS class (`wplace-turnstile-title`).
- Add buttons for clearing ignored pixels (`clearIgnoredBtn`) and inverting masks (`invertMaskBtn`).
- Introduce a helper text (`resize-shortcut-help`) for keyboard shortcuts.

Benefits:
- Improves maintainability by using CSS classes instead of inline styles.
- Provides additional functionality for mask management and user guidance.
This commit is contained in:
kyuketski committed 2025-09-01 14:11:23 +03:00
1 parent 86da419f88
commit 8947dc036f
1 file changed
+4 -2
+4 -2
View File
@@ -1429,8 +1429,7 @@
const title = document.createElement('div');
title.textContent = Utils.t('turnstileInstructions');
title.style.cssText =
'font: 600 12px/1.3 "Segoe UI",sans-serif; margin-bottom: 8px; opacity: 0.9;';
title.className = 'wplace-turnstile-title';
const host = document.createElement('div');
host.id = 'turnstile-overlay-host';
@@ -4020,6 +4019,9 @@
<button id="maskModeToggle" class="wplace-btn wplace-btn-primary resize-mode-btn">Toggle</button>
</div>
</div>
<button id="clearIgnoredBtn" class="wplace-btn resize-clear-btn" title="Clear all ignored pixels">Clear</button>
<button id="invertMaskBtn" class="wplace-btn resize-invert-btn" title="Invert mask">Invert</button>
<span class="resize-shortcut-help">Shift = Row • Alt = Column</span>
</div>
</div>