mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-13 10:40:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Clear the UI up to accurate reflect the thresholds

Browse source
This commit is contained in:
Gigiaj 2025-06-18 20:53:10 -05:00
parent 791381c978
commit 9e7b37dcd1
1 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/app/components/message/behavior/DraggableMessage.tsx
View file

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import { useSpring, animated } from '@react-spring/web'; import { useSpring, animated } from '@react-spring/web';
import { useDrag } from 'react-use-gesture'; import { useDrag } from 'react-use-gesture';
import { Icon, Icons } from 'folds'; import { Icon, Icons } from 'folds';
@ -23,19 +23,20 @@ export function DraggableMessage({
const isMobile = screenSize === ScreenSize.Mobile; const isMobile = screenSize === ScreenSize.Mobile;
const canEdit = mx.getUserId() === event.getSender(); const canEdit = mx.getUserId() === event.getSender();
const REPLY_THRESHOLD = 80; const REPLY_THRESHOLD = 30;
const EDIT_THRESHOLD = canEdit ? 250 : Infinity; const EDIT_THRESHOLD = canEdit ? 180 : Infinity;
const [{ x, replyOpacity, editOpacity, iconScale }, api] = useSpring(() => ({ const [isEditVisible, setEditVisible] = useState(false);
const [{ x, replyOpacity, iconScale }, api] = useSpring(() => ({
x: 0, x: 0,
replyOpacity: 0, replyOpacity: 0,
editOpacity: 0,
iconScale: 0.5, iconScale: 0.5,
config: { tension: 250, friction: 25 }, config: { tension: 250, friction: 25 },
})); }));
const bind = useDrag( const bind = useDrag(
({ down, movement: [mvx], vxvy: [vx] }) => { ({ down, movement: [mvx] }) => {
if (!down) { if (!down) {
const finalDistance = Math.abs(mvx); const finalDistance = Math.abs(mvx);
@ -49,19 +50,18 @@ export function DraggableMessage({
const xTarget = down ? Math.min(0, mvx) : 0; const xTarget = down ? Math.min(0, mvx) : 0;
const distance = Math.abs(xTarget); const distance = Math.abs(xTarget);
setEditVisible(canEdit && distance >= EDIT_THRESHOLD);
let newReplyOpacity = 0; let newReplyOpacity = 0;
let newEditOpacity = 0;
let newScale = 1.0; let newScale = 1.0;
if (canEdit && distance > REPLY_THRESHOLD) { if (canEdit && (distance < REPLY_THRESHOLD || distance >= EDIT_THRESHOLD)) {
newReplyOpacity = 0; newReplyOpacity = 0;
newEditOpacity = 1;
if (down && distance > EDIT_THRESHOLD) { if (down && distance > EDIT_THRESHOLD) {
newScale = 1.1; newScale = 1.1;
} }
} else { } else {
newReplyOpacity = 1; newReplyOpacity = 1;
newEditOpacity = 0;
newScale = 0.5 + (distance / REPLY_THRESHOLD) * 0.5; newScale = 0.5 + (distance / REPLY_THRESHOLD) * 0.5;
} }
@ -72,7 +72,6 @@ export function DraggableMessage({
api.start({ api.start({
x: xTarget, x: xTarget,
replyOpacity: newReplyOpacity, replyOpacity: newReplyOpacity,
editOpacity: newEditOpacity,
iconScale: newScale, iconScale: newScale,
}); });
}, },
@ -82,6 +81,7 @@ export function DraggableMessage({
threshold: 10, threshold: 10,
} }
); );
if (isMobile) { if (isMobile) {
return ( return (
<div className={container}> <div className={container}>
@ -99,7 +99,7 @@ export function DraggableMessage({
<animated.div <animated.div
className={icon} className={icon}
style={{ style={{
opacity: editOpacity, opacity: isEditVisible ? 1 : 0,
transform: iconScale.to((s) => `scale(${s})`), transform: iconScale.to((s) => `scale(${s})`),
}} }}
> >