ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: file message UI in expired mode

Browse Source
This commit is contained in:
Tristan Yang
2023-06-02 21:25:01 +08:00
parent 2bc8062a6f
commit f91954eda2
4 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FileMessage/AudioMessage.tsx
+7 -10
View File
@@ -26,21 +26,18 @@ const AudioMessage = ({ url, name, size, download }: Props) => {
return (
<div
className={clsx(
"md:w-96 flex flex-col gap-2 px-3 py-2 rounded-md border overflow-hidden bg-stone-100 dark:bg-stone-900",
error ? "border-red-100 dark:border-red-900/50" : "border-gray-300 dark:border-gray-500"
"md:w-96 flex flex-col gap-2 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-500 overflow-hidden bg-stone-100 dark:bg-stone-900"
// error ? "border-red-100 dark:border-red-900/50" : "border-gray-300 dark:border-gray-500"
)}
>
<div className="flex justify-between z-30 overflow-hidden">
<div className="flex gap-2 ">
<IconAudio className="w-9 h-auto" />
<div className="flex flex-col gap-1 text-sm text-gray-700 dark:text-gray-300">
<span
title={name}
className={clsx("font-bold truncate", error ? "w-56 text-red-500" : " w-[240px]")}
>
{name}
<IconAudio className={clsx("w-9 h-auto", error && "grayscale")} />
<div className="flex flex-col gap-1 text-sm text-gray-900 dark:text-gray-100">
<span title={name} className={clsx("font-bold truncate w-[240px]")}>
{error ? "File not Found" : name}
</span>
<span>{_size}</span>
<span className="text-gray-400">{error ? "File expired or deleted" : _size}</span>
</div>
</div>
{error ? (
src/components/FileMessage/OtherFileMessage.tsx
+10 -8
View File
@@ -13,7 +13,7 @@ const ExpireTip = () => {
const { t } = useTranslation("chat");
return (
<span className="text-red-500 text-xs whitespace-nowrap flex items-center gap-1">
<IconInfo className="stroke-red-500 w-4 h-4" /> {t("file_expired")}
<IconInfo className="stroke-gray-600 w-6 h-6" />
</span>
);
};
@@ -42,7 +42,7 @@ const OtherFileMessage = ({
handleCancel
}: Props) => {
const [error, setError] = useState(false);
const icon = getFileIcon(content_type, name, "w-9 shrink-0 h-auto");
const icon = getFileIcon(content_type, name, `w-9 shrink-0 h-auto ${error ? "grayscale" : ""}`);
useEffect(() => {
if (content) {
fetch(content)
@@ -62,9 +62,9 @@ const OtherFileMessage = ({
return (
<div
className={clsx(
`bg-stone-100 dark:bg-stone-900 border box-border md:w-96 rounded-md`,
sending && "opacity-90",
error ? "border-red-100 dark:border-red-900/50" : "border-gray-300 dark:border-gray-500"
`bg-stone-100 dark:bg-stone-900 border box-border md:w-96 rounded-md border-gray-300 dark:border-gray-500`,
sending && "opacity-90"
// error ? "border-red-100 dark:border-red-900/50" : "border-gray-300 dark:border-gray-500"
)}
>
<div className="px-3 py-2 flex items-center justify-between gap-2">
@@ -72,15 +72,17 @@ const OtherFileMessage = ({
<div className="flex flex-col gap-1 w-full overflow-hidden">
<span
className={clsx(
"font-semibold text-sm truncate",
error ? "text-red-500" : "text-gray-800 dark:text-gray-100"
"font-semibold text-sm truncate text-gray-800 dark:text-gray-100"
// error ? "text-red-500" : "text-gray-800 dark:text-gray-100"
)}
>
{name}
{error ? "File not Found" : name}
</span>
<span className="hidden md:flex whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 gap-4">
{sending ? (
<Progress value={progress} width={"80%"} />
) : error ? (
<strong>File expired or deleted</strong>
) : (
<>
<strong>{formatBytes(size)}</strong>
src/components/FileMessage/VideoMessage.tsx
+9 -11
View File
@@ -43,10 +43,8 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
return (
<div
className={clsx(
"w-60 md:w-96 relative rounded-md border overflow-hidden group",
error
? "bg-stone-100 dark:bg-stone-900 border-red-100 dark:border-red-900/50"
: "border-gray-300 dark:border-gray-500 h-32 md:h-52"
"w-60 md:w-96 relative rounded-md border overflow-hidden group border-gray-300 dark:border-gray-500",
error ? "bg-stone-100 dark:bg-stone-900" : "h-32 md:h-52"
)}
>
{!error && (
@@ -54,23 +52,23 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
)}
<div
className={clsx(
"w-full flex justify-between z-30 px-3 py-2 overflow-hidden group-hover:bg-black/20",
"w-full flex justify-between z-30 px-3 py-2 overflow-hidden",
error ? "" : "absolute top-0 left-0 "
)}
>
<div className="flex gap-2 ">
<IconVideo className="hidden md:block w-9 h-auto" />
<div className="flex flex-col gap-1 text-sm text-white">
<IconVideo className={clsx("hidden md:block w-9 h-auto", error && "grayscale")} />
<div className="flex flex-col gap-1 text-sm dark:text-white text-gray-900">
<span
title={name}
className={clsx(
"font-bold truncate",
error ? "w-56 text-red-500" : "w-56 md:w-[240px]"
"font-bold truncate w-56 md:w-[240px]"
// error ? "w-56 text-red-500" : "w-56 md:w-[240px]"
)}
>
{name}
{error ? "File not Found" : name}
</span>
<span>{_size}</span>
<span className="text-gray-400">{error ? "File expired or deleted" : _size}</span>
</div>
</div>
{error ? (
src/components/VoiceMessage.tsx
+1 -1
View File
@@ -121,7 +121,7 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
<IconPlay className="stroke-primary-500" />
)}
</button>
<div ref={containerRef} className={clsx("flex-1 h-8 min-w-[100px]")}>
<div ref={containerRef} className={clsx("flex-1 h-8 min-w-[100px] flex items-center")}>
{status == "loading" && <span className="text-xs">Loading voice message...</span>}
{status == "error" && (
<span className="text-xs text-red-800">Load voice message error</span>