移除不必要的鼠标移动绑定逻辑
This commit is contained in:
shuaiplus committed
1 parent
554fedaefe
commit
fbf036f4b5
4 files changed
+3
-168
No files matched your search
+2
-98
@@ -19,7 +19,6 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 2px 0 8px #e0e0e0a0;
|
||||
transition: width 0.15s;
|
||||
}
|
||||
|
||||
.sidebar-user {
|
||||
@@ -41,7 +40,6 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.18s;
|
||||
}
|
||||
|
||||
.settings-btn:hover {
|
||||
@@ -75,21 +73,18 @@ body {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
pointer-events: auto;
|
||||
opacity: 0;
|
||||
transform: translateY(-16px) scale(0.98);
|
||||
transition: opacity 0.18s, transform 0.18s;
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.settings-panel-card.open-anim {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
transition: opacity 0.18s, transform 0.18s;
|
||||
}
|
||||
|
||||
.settings-panel-card.close-anim {
|
||||
opacity: 0;
|
||||
transform: translateY(-16px) scale(0.98);
|
||||
transition: opacity 0.18s, transform 0.18s;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
@@ -116,7 +111,6 @@ body {
|
||||
padding: 4px 10px;
|
||||
background: #fafbfc;
|
||||
outline: none;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
.settings-item select:focus {
|
||||
@@ -146,7 +140,6 @@ body {
|
||||
bottom: 0;
|
||||
background: #e0e0e0;
|
||||
border-radius: 22px;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
@@ -158,7 +151,6 @@ body {
|
||||
bottom: 3px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transition: .2s;
|
||||
box-shadow: 0 1px 4px #0001;
|
||||
}
|
||||
|
||||
@@ -182,7 +174,6 @@ body {
|
||||
z-index: 3;
|
||||
line-height: 1;
|
||||
border-radius: 50%;
|
||||
transition: background 0.18s, color 0.18s;
|
||||
}
|
||||
|
||||
.settings-close:hover {
|
||||
@@ -211,7 +202,6 @@ body {
|
||||
|
||||
.sidebar .join-room:hover {
|
||||
background: #f5f5f5;
|
||||
transition: box-shadow 0.18s, background 0.18s;
|
||||
}
|
||||
|
||||
.sidebar .rooms {
|
||||
@@ -227,7 +217,6 @@ body {
|
||||
border-bottom: 2px solid #ededed3b;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
transition: background 0.2s;
|
||||
border-radius: 10px;
|
||||
margin: 6px 8px;
|
||||
box-sizing: border-box;
|
||||
@@ -297,7 +286,6 @@ body {
|
||||
z-index: 2;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
transition: background 0.18s, box-shadow 0.18s;
|
||||
}
|
||||
|
||||
.room:not(.active) .room-unread-badge {
|
||||
@@ -566,7 +554,6 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-icon.toggle-emoticons:hover {
|
||||
@@ -603,7 +590,6 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.18s cubic-bezier(.4, 0, .2, 1), background 0.18s cubic-bezier(.4, 0, .2, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -622,14 +608,12 @@ body {
|
||||
background: rgba(48, 168, 247, 0.18);
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-icon.rp.btn-menu-toggle:active .c-ripple {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
transition: opacity 0.18s, transform 0.18s;
|
||||
}
|
||||
|
||||
.tgico.button-icon {
|
||||
@@ -681,7 +665,6 @@ body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 37px;
|
||||
transition: opacity 0.2s;
|
||||
white-space: pre;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -716,7 +699,6 @@ body {
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: box-shadow 0.18s cubic-bezier(.4, 0, .2, 1), background 0.18s cubic-bezier(.4, 0, .2, 1);
|
||||
overflow: hidden;
|
||||
gap: 3px;
|
||||
}
|
||||
@@ -725,46 +707,6 @@ body {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.more-btn:active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
background: rgba(48, 168, 247, 0.18);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
animation: more-btn-ripple 0.35s cubic-bezier(.4, 0, .2, 1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes more-btn-ripple {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
transform: translate(-50%, -50%) scale(0.7);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.more-btn-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #707579;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
transition: background 0.18s;
|
||||
}
|
||||
|
||||
.more-btn br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.more-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@@ -775,7 +717,6 @@ body {
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);
|
||||
min-width: 120px;
|
||||
z-index: 100;
|
||||
animation: more-menu-fade-in 0.22s cubic-bezier(.4, 0, .2, 1);
|
||||
font-size: 1rem;
|
||||
width: max-content;
|
||||
user-select: none;
|
||||
@@ -786,7 +727,6 @@ body {
|
||||
--transform-origin-y: center;
|
||||
transform-origin: var(--transform-origin-x) var(--transform-origin-y);
|
||||
transform: var(--transform-extra);
|
||||
transition: opacity 0.22s cubic-bezier(.4, 0, .2, 1), transform 0.22s cubic-bezier(.4, 0, .2, 1);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -796,26 +736,12 @@ body {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
animation: more-menu-fade-in 0.22s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
|
||||
.more-menu.close {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(-10px);
|
||||
transition: opacity 0.18s cubic-bezier(.4, 0, .2, 1), transform 0.18s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
|
||||
@keyframes more-menu-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.more-menu-item {
|
||||
@@ -824,7 +750,6 @@ body {
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
color: #222;
|
||||
transition: background 0.15s;
|
||||
margin: 5px 5px;
|
||||
}
|
||||
|
||||
@@ -839,7 +764,6 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: -2px 0 8px #e0e0e0a0;
|
||||
transition: width 0.15s;
|
||||
}
|
||||
|
||||
.rightbar-header {
|
||||
@@ -887,7 +811,6 @@ body {
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
border-radius: 8px 8px 0 0;
|
||||
margin-right: 8px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.rightbar .tabs .active {
|
||||
@@ -909,7 +832,6 @@ body {
|
||||
padding: 10px 18px;
|
||||
border-radius: 8px;
|
||||
margin: 6px 8px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.member:hover {
|
||||
@@ -1001,7 +923,6 @@ body {
|
||||
padding: 14px 14px;
|
||||
font-size: 1.1rem;
|
||||
outline: none;
|
||||
transition: border 0.2s;
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
@@ -1020,7 +941,6 @@ body {
|
||||
border-radius: 12px;
|
||||
padding: 14px 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.18s;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
@@ -1177,7 +1097,6 @@ body {
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 10000;
|
||||
transition: background 0.18s, color 0.18s;
|
||||
line-height: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -1202,18 +1121,6 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes emoji-panel-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-22-middle {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@@ -1246,7 +1153,6 @@ body {
|
||||
}
|
||||
|
||||
.input-message-input-init {
|
||||
transition-duration: 0ms;
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
@@ -1375,7 +1281,6 @@ body {
|
||||
z-index: 1000;
|
||||
height: 100dvh;
|
||||
background: #fff;
|
||||
transition: transform 0.28s cubic-bezier(.4, 0, .2, 1), box-shadow 0.18s;
|
||||
box-shadow: 2px 0 16px #0002;
|
||||
}
|
||||
|
||||
@@ -1428,7 +1333,6 @@ body {
|
||||
z-index: 1100;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
transition: background 0.18s, box-shadow 0.18s, transform 0.22s cubic-bezier(.4, 0, .2, 1);
|
||||
opacity: 1;
|
||||
will-change: transform, opacity;
|
||||
color: #707070;
|
||||
|
||||
@@ -145,42 +145,7 @@ export function setupMoreBtnMenu() {
|
||||
const btn = $id('more-btn');
|
||||
const menu = $id('more-menu');
|
||||
if (!btn || !menu) return;
|
||||
let menuRect = null;
|
||||
let animating = false;
|
||||
let isMouseMoveBound = false;
|
||||
|
||||
// Mouse move event for closing menu if mouse leaves
|
||||
// 鼠标移出菜单区域时关闭菜单
|
||||
function onMouseMove(ev) {
|
||||
if (!menuRect) return;
|
||||
const mx = ev.clientX,
|
||||
my = ev.clientY;
|
||||
const btnRect = btn.getBoundingClientRect();
|
||||
const safe = 100;
|
||||
const inMenu = mx >= menuRect.left - safe && mx <= menuRect.right + safe && my >= menuRect.top - safe && my <= menuRect.bottom + safe;
|
||||
const inBtn = mx >= btnRect.left - safe && mx <= btnRect.right + safe && my >= btnRect.top - safe && my <= btnRect.bottom + safe;
|
||||
if (!inMenu && !inBtn) {
|
||||
closeMenu()
|
||||
}
|
||||
}
|
||||
|
||||
// Bind mousemove event
|
||||
// 绑定鼠标移动事件
|
||||
function bindMouseMove() {
|
||||
if (!isMouseMoveBound) {
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
isMouseMoveBound = true
|
||||
}
|
||||
}
|
||||
|
||||
// Unbind mousemove event
|
||||
// 解绑鼠标移动事件
|
||||
function unbindMouseMove() {
|
||||
if (isMouseMoveBound) {
|
||||
window.removeEventListener('mousemove', onMouseMove);
|
||||
isMouseMoveBound = false
|
||||
}
|
||||
}
|
||||
|
||||
// Open the menu
|
||||
// 打开菜单
|
||||
@@ -188,8 +153,6 @@ export function setupMoreBtnMenu() {
|
||||
menu.classList.remove('close');
|
||||
menu.classList.add('open');
|
||||
menu.style.display = 'block';
|
||||
menuRect = menu.getBoundingClientRect();
|
||||
bindMouseMove()
|
||||
}
|
||||
|
||||
// Close the menu
|
||||
@@ -202,9 +165,7 @@ export function setupMoreBtnMenu() {
|
||||
setTimeout(() => {
|
||||
if (menu.classList.contains('close')) menu.style.display = 'none';
|
||||
animating = false;
|
||||
unbindMouseMove()
|
||||
}, 180);
|
||||
menuRect = null
|
||||
}
|
||||
btn.onclick = function(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
@@ -11,7 +11,7 @@ const addEmojiPickerStyles = () => {
|
||||
if (document.querySelector('#emoji-picker-styles')) return;
|
||||
const style = document.createElement('style');
|
||||
style.id = 'emoji-picker-styles';
|
||||
style.textContent = `emoji-picker{--background:#fff;--border-color:rgba(0,0,0,0.1);--border-radius:10px;--emoji-padding:0.4rem;--category-emoji-size:1.2rem;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;position:absolute;bottom:60px;left:22px;z-index:5;box-shadow:0 3px 12px rgba(0,0,0,0.15);animation:emoji-panel-fade-in 0.18s;width:320px;display:none}@keyframes emoji-panel-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}`;
|
||||
style.textContent = `emoji-picker{--background:#fff;--border-color:rgba(0,0,0,0.1);--border-radius:10px;--emoji-padding:0.4rem;--category-emoji-size:1.2rem;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;position:absolute;bottom:60px;left:22px;z-index:5;box-shadow:0 3px 12px rgba(0,0,0,0.15);width:320px;display:none}`;
|
||||
document.head.appendChild(style)
|
||||
};
|
||||
// Setup emoji picker for chat input
|
||||
|
||||
@@ -146,35 +146,6 @@ function openSettingsPanel() {
|
||||
card.style.transform = 'translateX(0)';
|
||||
removeClass(card, 'close-anim');
|
||||
addClass(card, 'open-anim');
|
||||
|
||||
function onMouseMove(ev) {
|
||||
const cardRect = card.getBoundingClientRect();
|
||||
const safe = 60;
|
||||
const mx = ev.clientX,
|
||||
my = ev.clientY;
|
||||
const inCard = mx >= cardRect.left - safe && mx <= cardRect.right + safe && my >= cardRect.top - safe && my <= cardRect.bottom + safe;
|
||||
const btnRect = btn.getBoundingClientRect();
|
||||
const inBtn = mx >= btnRect.left - safe && mx <= btnRect.right + safe && my >= btnRect.top - safe && my <= btnRect.bottom + safe;
|
||||
if (!inCard && !inBtn) {
|
||||
closeSettingsPanel()
|
||||
}
|
||||
}
|
||||
|
||||
function bindMouseMove() {
|
||||
if (!panel._mousemoveBound) {
|
||||
on(window, 'mousemove', onMouseMove);
|
||||
panel._mousemoveBound = true
|
||||
}
|
||||
}
|
||||
|
||||
function unbindMouseMove() {
|
||||
if (panel._mousemoveBound) {
|
||||
off(window, 'mousemove', onMouseMove);
|
||||
panel._mousemoveBound = false
|
||||
}
|
||||
}
|
||||
bindMouseMove();
|
||||
panel._unbind = unbindMouseMove
|
||||
}
|
||||
|
||||
// Close the settings panel
|
||||
@@ -186,7 +157,6 @@ function closeSettingsPanel() {
|
||||
if (!card) return;
|
||||
removeClass(card, 'open-anim');
|
||||
addClass(card, 'close-anim');
|
||||
if (panel._unbind) panel._unbind();
|
||||
setTimeout(() => {
|
||||
panel.style.display = 'none';
|
||||
removeClass(card, 'close-anim')
|
||||
|
||||
Reference in new issue
Block a user