FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve design

Browse Source
This commit is contained in:
denis0001-dev
2025-09-26 14:31:37 +03:00
Unverified
parent 8a6b7903af
commit 13cc9d1c29
3 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/resources/css/_chat.scss
+14
View File
@@ -243,8 +243,22 @@
a { a {
text-decoration: none; text-decoration: none;
} }
.attachement-image {
max-width: 200px;
border-radius: 8px;
cursor: pointer;
margin-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
&:last-child {
margin-bottom: 0;
}
}
} }
} }
.message-time { .message-time {
font-size: 0.7rem; font-size: 0.7rem;
color: $color-dark-on-surface-variant; color: $color-dark-on-surface-variant;
frontend/src/ui/components/chat/Message.tsx
+2 -2
View File
@@ -314,9 +314,9 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
if (el) imageRefs.current.set(file.path, el); if (el) imageRefs.current.set(file.path, el);
}} }}
src={imageSrc} src={imageSrc}
alt={file.name || "image"} alt={file.name || "image"}
style={{ maxWidth: "200px", borderRadius: "8px", cursor: "pointer" }}
onClick={(e) => handleImageClick(file, e.currentTarget)} onClick={(e) => handleImageClick(file, e.currentTarget)}
className="attachement-image"
/> />
) : ( ) : (
<mdui-list-item> <mdui-list-item>
frontend/src/ui/components/core/animations/AnimatedHeight.tsx
+14 -9
View File
@@ -3,9 +3,10 @@ import type { AnimatedPropertyProps } from "./types";
export default function AnimatedHeight({ visible, duration = 0.25, onFinish, children, ...props }: AnimatedPropertyProps) { export default function AnimatedHeight({ visible, duration = 0.25, onFinish, children, ...props }: AnimatedPropertyProps) {
const [height, setHeight] = useState("0px"); const [height, setHeight] = useState("0px");
const [shouldRender, setShouldRender] = useState(visible); const [shouldRender, setShouldRender] = useState(!!visible);
const [isAnimating, setIsAnimating] = useState(false); const [isAnimating, setIsAnimating] = useState(false);
const measureRef = useRef<HTMLDivElement>(null); const measureRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
if (visible) { if (visible) {
@@ -19,6 +20,7 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
} }
// Animation complete // Animation complete
setTimeout(() => { setTimeout(() => {
setHeight("auto");
setIsAnimating(false); setIsAnimating(false);
}, duration * 1000); }, duration * 1000);
}, 0); }, 0);
@@ -29,7 +31,14 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
setHeight(`${contentHeight}px`); setHeight(`${contentHeight}px`);
// Force a reflow before animating to 0 // Force a reflow before animating to 0
requestAnimationFrame(() => { requestAnimationFrame(() => {
setHeight("0px"); // Read layout to ensure the previous height assignment is flushed
if (containerRef.current) {
containerRef.current.offsetHeight;
}
// Use a second frame to ensure the measured pixel height is applied before collapsing
requestAnimationFrame(() => {
setHeight("0px");
});
}); });
} }
// Hide content after animation completes // Hide content after animation completes
@@ -43,14 +52,10 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
} }
}, [visible, shouldRender]); }, [visible, shouldRender]);
// Don't render if not visible and not animating return (visible || shouldRender || isAnimating) && (
if (!visible && !shouldRender && !isAnimating) { <div
return null;
}
return (
<div
{...props} {...props}
ref={containerRef}
style={{ style={{
height, height,
transition: `height ${duration}s ease`, transition: `height ${duration}s ease`,