Fix fast reaction overlap goto button
This commit is contained in:
parent
10f4ca27a7
commit
55c5dfec45
|
@ -1211,7 +1211,12 @@ export default class ChatBubbles {
|
||||||
|
|
||||||
private onBubblesMouseMove = async(e: MouseEvent) => {
|
private onBubblesMouseMove = async(e: MouseEvent) => {
|
||||||
const content = findUpClassName(e.target, 'bubble-content');
|
const content = findUpClassName(e.target, 'bubble-content');
|
||||||
if(content && !this.chat.selection.isSelecting && !findUpClassName(e.target, 'service')) {
|
if(
|
||||||
|
content &&
|
||||||
|
!this.chat.selection.isSelecting &&
|
||||||
|
!findUpClassName(e.target, 'service') &&
|
||||||
|
!findUpClassName(e.target, 'bubble-beside-button')
|
||||||
|
) {
|
||||||
const bubble = findUpClassName(content, 'bubble');
|
const bubble = findUpClassName(content, 'bubble');
|
||||||
if(!this.chat.selection.canSelectBubble(bubble)) {
|
if(!this.chat.selection.canSelectBubble(bubble)) {
|
||||||
this.unhoverPrevious();
|
this.unhoverPrevious();
|
||||||
|
@ -1304,6 +1309,7 @@ export default class ChatBubbles {
|
||||||
}
|
}
|
||||||
|
|
||||||
private setHoverVisible(hoverReaction: HTMLElement, visible: boolean) {
|
private setHoverVisible(hoverReaction: HTMLElement, visible: boolean) {
|
||||||
|
hoverReaction.parentElement.classList.toggle('hover-reaction-visible', visible);
|
||||||
SetTransition(hoverReaction, 'is-visible', visible, 200, visible ? undefined : () => {
|
SetTransition(hoverReaction, 'is-visible', visible, 200, visible ? undefined : () => {
|
||||||
hoverReaction.remove();
|
hoverReaction.remove();
|
||||||
}, 2);
|
}, 2);
|
||||||
|
|
|
@ -331,6 +331,16 @@ $bubble-beside-button-width: 38px;
|
||||||
html.is-touch body:not(.no-select) .chat:not(.no-forwards) .bubbles.is-selecting & { // * need no-select on body because chat-input transforms in channels
|
html.is-touch body:not(.no-select) .chat:not(.no-forwards) .bubbles.is-selecting & { // * need no-select on body because chat-input transforms in channels
|
||||||
user-select: text;
|
user-select: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.hover-reaction-visible {
|
||||||
|
.bubble-beside-button {
|
||||||
|
transform: translateX(1.125rem);
|
||||||
|
|
||||||
|
.bubble.is-out & {
|
||||||
|
transform: translateX(-1.125rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-hover-reaction {
|
&-hover-reaction {
|
||||||
|
@ -338,7 +348,8 @@ $bubble-beside-button-width: 38px;
|
||||||
--offset: calc(var(--size) * -.75);
|
--offset: calc(var(--size) * -.75);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: var(--offset);
|
right: var(--offset);
|
||||||
bottom: -.125rem;
|
// bottom: -.0625rem;
|
||||||
|
bottom: 0;
|
||||||
width: var(--size);
|
width: var(--size);
|
||||||
height: 1.625rem;
|
height: 1.625rem;
|
||||||
border-radius: var(--size);
|
border-radius: var(--size);
|
||||||
|
@ -471,13 +482,14 @@ $bubble-beside-button-width: 38px;
|
||||||
//background: rgba(0, 0, 0, .16);
|
//background: rgba(0, 0, 0, .16);
|
||||||
background: var(--message-highlightning-color);
|
background: var(--message-highlightning-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transform: translateX(0);
|
||||||
|
|
||||||
html.no-touch & {
|
html.no-touch & {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
html.no-touch body.animation-level-2 & {
|
html.no-touch body.animation-level-2 & {
|
||||||
transition: opacity .2s ease-in-out;
|
transition: opacity .2s ease-in-out, transform .2s ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2243,7 +2255,8 @@ $bubble-beside-button-width: 38px;
|
||||||
bottom: 0 !important;
|
bottom: 0 !important;
|
||||||
} */
|
} */
|
||||||
|
|
||||||
&:after {
|
&:after,
|
||||||
|
.document-container:last-of-type .document-selection {
|
||||||
bottom: -#{$bubble-overflow};
|
bottom: -#{$bubble-overflow};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user