dwindown/emoji-chrome-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux: improve skintone interaction & active state behavior

Browse Source 
- Remove swatch modal → replaced with inline tone row UX
- Add active card highlight and tone selection row spanning 4 columns
- Apply tone immediately on click (copy/insert according to settings)
- Add tooltip on hover for names (replacing marquee on hover)
- Enable marquee animation only for overflowed text when active
- Integrate forbid & non-toneable filters matching site policy (LGBT & fantasy exclusions)
- Sync tone whitelist (roles like technologist, scientist, firefighter, etc.)
- Sync tone blacklist (e.g. merman, mermaid, deaf man/woman, woman beard, men with bunny ears)
- Add overflow-y hidden toggle when settings modal shown
- Move inline styles to style.css for cleaner structure
- Refactor panel.js for maintainable tone row injection logic
This commit is contained in:
dwindown
2025-10-02 11:27:25 +07:00
parent 6b1efab615
commit d689249f3f
4 changed files with 566 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
panel.html
View File

@@ -5,6 +5,16 @@
<title>Emoji Widget</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css" rel="stylesheet">
<style>
.modal { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; z-index: 1000; }
.modal[hidden] { display:none; }
.modal-card { background: var(--c-bg, #0b1220); color: var(--c-fg, #e5e7eb); border: 1px solid var(--c-border, rgba(255,255,255,.1)); border-radius: 14px; width: min(420px, 92vw); padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.theme-light .modal-card { background: #fff; color: #111827; border-color: rgba(0,0,0,.08); }
.modal-head { display:flex; align-items:center; gap:12px; margin-bottom: 8px; }
.modal-logo { width: 28px; height: 28px; border-radius: 6px; }
.modal-body { font-size: 14px; opacity: .9; margin: 8px 0 14px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; }
</style>
<script src="vendor/twemoji.min.js"></script>
</head>
<body>
@@ -86,7 +96,12 @@
<div class="row" style="margin-top:6px;">
<button id="license-edit" class="link" style="width: fit-content">Change key</button>
<button id="license-cancel-edit" class="link" style="display:none;width: fit-content">Cancel</button>
<span id="license-status" class="muted">Free mode — Pro features locked.</span>
<span id="license-status" class="muted">
Free mode — Pro features locked.
<br><a href="https://dewemoji.com/pricing" target="_blank" class="cta-link" style="margin-left:6px; text-decoration: underline; font-weight: 500;">
🔓 Upgrade to Pro
</a>
</span>
</div>
</div>
@@ -107,7 +122,23 @@
</aside>
<!-- Branded confirm modal -->
<div id="confirm-backdrop" class="backdrop" hidden></div>
<div id="confirm-modal" class="modal" hidden role="dialog" aria-modal="true" aria-labelledby="confirm-title" aria-describedby="confirm-message">
<div class="modal-card">
<div class="modal-head">
<img src="assets/icon-128.png" alt="Dewemoji" class="modal-logo" />
<h3 id="confirm-title">Confirm</h3>
</div>
<div id="confirm-message" class="modal-body">Are you sure?</div>
<div class="modal-actions">
<button id="confirm-cancel" class="btn ghost">Cancel</button>
<button id="confirm-ok" class="btn">OK</button>
</div>
</div>
</div>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script src="panel.js"></script>
<script src="panel.js?ver=1.0.1"></script>
</body>
</html>