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

refactor: mobile UX friendly

Browse Source
This commit is contained in:
Tristan Yang
2023-02-15 10:04:26 +08:00
parent 476ffc344d
commit 56bd1557db
28 changed files with 71 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/FileBox/index.tsx
+3 -3
View File
@@ -86,7 +86,7 @@ const FileBox: FC<Props> = ({
return (
<div
className={clsx(`h-[66px] rounded-md border border-solid border-gray-300 dark:border-gray-500 bg-gray-100 dark:bg-gray-900`, flex ? "w-full" : "w-[370px]", withPreview && "relative overflow-hidden h-[281px]", file_type.startsWith("audio") && "h-[125px]")}
className={clsx(`h-[66px] rounded-md border border-solid border-gray-300 dark:border-gray-500 bg-gray-100 dark:bg-gray-900`, flex ? "w-full" : "w-72 md:w-[370px]", withPreview && "relative overflow-hidden h-[281px]", file_type.startsWith("audio") && "h-[125px]")}
>
<div className="w-full p-2 flex items-center justify-between gap-2">
{icon}
@@ -94,13 +94,13 @@ const FileBox: FC<Props> = ({
<span className="font-semibold text-sm text-gray-800 dark:text-gray-200 truncate">{name}</span>
<em className="text-xs text-gray-500 flex gap-4 not-italic">
<span className="size">{formatBytes(size)}</span>
<span className="time">{fromNowTime(created_at)}</span>
<span className="hidden md:block time">{fromNowTime(created_at)}</span>
<span>
by <strong className="font-bold">{fromUser.name}</strong>
</span>
</em>
</div>
<a className="whitespace-nowrap" download={name} href={`${content}&download=true`}>
<a className="hidden md:block whitespace-nowrap" download={name} href={`${content}&download=true`}>
<IconDownload className="fill-gray-500 dark:fill-gray-300" />
</a>
</div>
src/common/component/FileMessage/VideoMessage.tsx
+4 -4
View File
@@ -37,17 +37,17 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
};
const tipClass = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2';
return (
<div className='w-64 h-32 md:w-96 md:h-52 relative rounded-md border border-solid border-gray-300 overflow-hidden group'>
<div className='w-60 h-32 md:w-96 md:h-52 relative rounded-md border border-solid border-gray-300 dark:border-gray-700 overflow-hidden group'>
<div className="absolute top-0 left-0 w-full h-full bg-black/40 z-20 group-hover:hidden"></div>
<div className="absolute top-0 left-0 w-full flex justify-between z-30 px-3 py-2 overflow-hidden group-hover:bg-black/20">
<div className="flex gap-2 ">
<IconVideo className="w-9 h-auto" />
<IconVideo className="hidden md:block w-9 h-auto" />
<div className="flex flex-col gap-1 text-sm text-white">
<span title={name} className='font-bold w-[240px] truncate'>{name}</span>
<span title={name} className='font-bold w-56 md:w-[240px] truncate'>{name}</span>
<span>{_size}</span>
</div>
</div>
<a href={download} className="mt-2"><IconDownload className="fill-white" /></a>
<a href={download} className="hidden md:block mt-2"><IconDownload className="fill-white" /></a>
</div>
{!canPlay ?
<div className={tipClass}>
src/common/component/FileMessage/index.tsx
+3 -3
View File
@@ -155,12 +155,12 @@ const FileMessage: FC<Props> = ({
/>
);
return (
<div className={clsx(`file_message bg-slate-50 dark:bg-slate-900 border border-solid border-gray-300 dark:border-gray-500 box-border w-[370px] rounded-md`, sending && "opacity-90")}>
<div className={clsx(`bg-slate-50 dark:bg-slate-900 border border-solid border-gray-300 dark:border-gray-500 box-border md:w-[370px] rounded-md`, sending && "opacity-90")}>
<div className="px-2 py-3 flex items-center justify-between gap-2">
{icon}
<div className="flex flex-col gap-1 w-full overflow-hidden">
<span className="font-semibold text-sm text-gray-800 dark:text-gray-100 truncate">{name}</span>
<span className="whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 flex gap-4">
<span className="hidden md:flex whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 gap-4">
{sending ? (
<Progress value={progress} width={"80%"} />
) : (
@@ -179,7 +179,7 @@ const FileMessage: FC<Props> = ({
{sending ? (
<IconClose className="cursor-pointer" onClick={handleCancel} />
) : (
<a className="whitespace-nowrap" download={name} href={`${content}&download=true`}>
<a className="hidden md:block whitespace-nowrap" download={name} href={`${content}&download=true`}>
<IconDownload className="fill-gray-500 dark:fill-gray-400" />
</a>
)}
src/common/component/Message/FavoredMessage.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ const FavoredMessage: FC<Props> = ({ id = "" }) => {
return (
<div className="w-full relative flex items-start gap-3 px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800" key={idx}>
{user && (
<div className="shrink-0">
<div className="shrink-0 w-10 h-10 flex">
<Avatar width={40} height={40} className="rounded-full object-cover" src={user.avatar} name={user.name} />
</div>
)}
src/common/component/Message/Reply.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ const renderContent = (data: MessagePayload) => {
switch (content_type) {
case ContentTypes.text:
res = (
<span className="truncate break-words break-all text-gray-800 dark:text-gray-100">
<span className="md:truncate md:break-words md:break-all text-gray-800 dark:text-gray-100">
<LinkifyText text={content} url={false} mentionTextOnly={true} mentionPopOver={false} />
</span>
);
@@ -77,7 +77,7 @@ const Reply: FC<ReplyProps> = ({ mid, interactive = true }) => {
<div
key={mid}
data-mid={mid}
className={`flex items-start p-2 bg-gray-100 dark:bg-gray-900 rounded-lg gap-2 mb-1 ${interactive ? "cursor-pointer" : "!bg-transparent"}`}
className={`flex items-start flex-col md:flex-row p-2 bg-gray-100 dark:bg-gray-900 rounded-lg gap-2 mb-1 ${interactive ? "cursor-pointer" : "!bg-transparent"}`}
onClick={interactive ? handleClick : undefined}
>
<div className="flex items-center gap-1 whitespace-nowrap">
src/common/component/Message/URLPreview.tsx
+5 -5
View File
@@ -40,7 +40,7 @@ export default function URLPreview({ url = "" }) {
if (!url || !data || !data.title) return null;
const { title, description, ogImage } = data;
const containerClass = `flex items-center border border-solid border-gray-300 box-border rounded-md w-[380px]`;
const containerClass = `flex items-center border border-solid border-gray-300 dark:border-gray-600 box-border rounded-md w-[80%] md:w-[380px]`;
const dotsClass = `truncate`;
return ogImage ? (
<a className={`${containerClass} flex-col !items-start p-3`} href={url} target="_blank" rel="noreferrer">
@@ -55,13 +55,13 @@ export default function URLPreview({ url = "" }) {
className={`${containerClass} gap-2 px-2 py-3`}
href={url} target="_blank" rel="noreferrer">
{favicon && (
<div className="flex w-12 h-12 rounded">
<img onError={handleFavError} className="object-contain" src={favicon} alt="favicon" />
<div className="flex rounded">
<img onError={handleFavError} className="object-contain w-12 h-12" src={favicon} alt="favicon" />
</div>
)}
<div className="flex flex-col">
<h3 className="text-sm text-gray-900">{title}</h3>
<p className={`text-xs text-gray-500 w-[288px] ${dotsClass}`}>{description}</p>
<h3 className="text-sm text-gray-900 dark:text-gray-100">{title}</h3>
<p className={`hidden md:block text-xs text-gray-500 dark:text-gray-400 w-[288px] ${dotsClass}`}>{description}</p>
<span className={`text-[10px] text-gray-500 w-[288px] ${dotsClass}`}>{url}</span>
</div>
</a>
src/common/component/Message/index.tsx
+2 -2
View File
@@ -96,7 +96,7 @@ const Message: FC<IProps> = ({
onContextMenu={readOnly ? undefined : handleContextMenuEvent}
data-msg-mid={mid}
ref={inviewRef}
className={clsx(`group w-full relative flex items-start gap-4 px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-100`,
className={clsx(`group w-[85%] md:w-full relative flex items-start gap-2 md:gap-4 px-1 md:px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-100`,
readOnly && "hover:bg-transparent",
showExpire && "bg-red-200",
pinInfo && "bg-cyan-50 dark:bg-cyan-800 pt-7"
@@ -111,7 +111,7 @@ const Message: FC<IProps> = ({
trigger="click"
content={<Profile uid={fromUid || 0} type="card" cid={context == "user" ? 0 : contextId} />}
>
<div className="cursor-pointer w-10 h-10 flex-shrink-0" data-uid={fromUid} ref={avatarRef}>
<div className="cursor-pointer w-10 h-10 shrink-0" data-uid={fromUid} ref={avatarRef}>
<Avatar className="w-10 h-10 rounded-full object-cover" width={40} height={40} src={currUser?.avatar} name={currUser?.name} />
</div>
</Tippy>
src/common/component/Profile/index.tsx
+2 -2
View File
@@ -45,7 +45,7 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
const canRemoveFromServer = !isCard && canRemove;
const hasMore = email || canRemoveFromChannel || canRemoveFromServer;
const iconClass = `cursor-pointer flex flex-col items-center gap-1 rounded-lg w-32 text-primary-400 bg-gray-50 dark:bg-gray-800 text-sm pt-3.5 pb-3`;
const containerClass = clsx(`flex-center flex-col gap-1 z-[99] mt-20 select-none`, isCard ? "p-4 w-[280px] bg-white dark:bg-gray-800 drop-shadow rounded-md" : "w-[432px]");
const containerClass = clsx(`flex-center flex-col gap-1 z-[99] mt-20 select-none`, isCard ? "p-4 w-[280px] bg-white dark:bg-gray-800 drop-shadow rounded-md" : "md:w-[432px]");
return (
<div className={containerClass}>
<Avatar
@@ -58,7 +58,7 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
<h2 className="text-lg select-text font-bold text-[#1c1c1e] dark:text-white">{name}</h2>
<span className="text-sm text-[#98a2b3] dark:text-gray-200 select-text">{email}</span>
{/* <p className="intro">{introduction}</p> */}
<ul className={clsx("mt-6 flex items-center gap-2", isCard && "pb-0.5")}>
<ul className={clsx("mt-6 flex flex-col md:flex-row items-center gap-2", isCard && "pb-0.5")}>
<NavLink to={`/chat/dm/${uid}`}>
<li className={`${iconClass} icon chat`}>
<IconMessage />
src/common/component/Send/EmojiPicker.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export default function EmojiPicker({ selectEmoji }: { selectEmoji: (e: string)
return (
<Tooltip placement="top" tip="Emojis" disabled={visible}>
<div className="relative w-fit flex items-center">
<div className="hidden md:flex relative w-fit items-center">
<div ref={ref} className={clsx(`absolute -top-5 -left-5 -translate-y-full`, visible ? 'block' : 'hidden')}>
{/* emoji picker */}
</div>
src/common/component/Send/Replying.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ export default function Replying({
const user = usersData[from_uid];
return (
<div className="reply bg-gray-100 dark:bg-gray-700 z-[999] flex items-start justify-start gap-4 rounded-t-lg w-full px-4 py-3 text-sm">
<div className="reply bg-gray-100 dark:bg-gray-700 z-[999] flex flex-col md:flex-row items-start justify-start gap-4 rounded-t-lg w-full px-4 py-3 text-sm">
<div className="whitespace-nowrap text-gray-400 ">
Replying to <span className="font-bold text-gray-600 dark:text-gray-400">{user?.name}</span>
</div>
src/common/component/Send/Toolbar.tsx
+2 -2
View File
@@ -45,8 +45,8 @@ const Toolbar: FC<Props> = ({
const isMarkdown = mode == 'markdown';
return (
<div className={`flex flex-col items-center justify-end gap-2.5 md:flex-row`}>
<div className="cursor-pointer flex gap-3.5">
<div className={`flex flex-col md:flex-row items-center justify-end gap-2.5`}>
<div className="hidden md:flex cursor-pointer gap-3.5">
<Tooltip placement="top" tip="Markdown">
<MarkdownIcon className={isMarkdown ? "fill-[#22ccee]" : "dark:fill-gray-300"} onClick={toggleMode} />
</Tooltip>
src/common/component/User/index.tsx
+2 -2
View File
@@ -43,8 +43,8 @@ const User: FC<Props> = ({
};
if (!curr) return null;
const online = curr.online || curr.uid == loginUid;
const containerClass = clsx(`relative flex items-center justify-start gap-2 rounded-lg select-none `, interactive && "hover:bg-gray-500/10", compact ? "p-0" : "p-2");
const nameClass = clsx(`text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`);
const containerClass = clsx(`relative flex items-center justify-start md:gap-2 rounded-lg select-none `, interactive && "hover:bg-gray-500/10", compact ? "p-0" : "p-2");
const nameClass = clsx(`hidden md:block text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`);
const statusClass = clsx(`absolute -bottom-0.5 -right-1.5 w-3 h-3 box-content rounded-full border-[2px] border-solid border-white dark:border-gray-300`,
online ? "bg-[#22c55e]" : "bg-[#a1a1aa]",
compact && "w-3.5 h-3.5");
src/common/component/styled/Modal.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ interface Props {
const StyledModal: FC<Props> = ({ compact = false, title = "", description = "", buttons, children, className }) => {
return (
<div className={clsx("rounded-lg bg-white dark:bg-gray-900 drop-shadow", compact ? "p-4 min-w-[406px] text-left" : "p-8 min-w-[440px] text-center", className)} >
<div className={clsx("rounded-lg bg-white dark:bg-gray-900 drop-shadow", compact ? "p-4 md:min-w-[406px] text-left" : "p-5 md:p-8 md:min-w-[440px] text-center", className)} >
{title && <h3 className="text-xl text-gray-600 dark:text-white mb-4 font-semibold">{title}</h3>}
{description && <p className="text-sm text-gray-400 dark:text-gray-100 mb-2">{description}</p>}
{children}
src/common/component/styled/Textarea.tsx
+4 -4
View File
@@ -1,13 +1,13 @@
import { TextareaHTMLAttributes } from "react";
import { forwardRef, TextareaHTMLAttributes } from "react";
type Props = TextareaHTMLAttributes<HTMLTextAreaElement>
const StyledTextarea = ({ className, ...rest }: Props) => {
return <textarea className={`rounded text-sm p-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 resize-none w-full shadow-sm border border-gray-200 dark:border-gray-400
const StyledTextarea = forwardRef(({ className, ...rest }: Props, ref) => {
return <textarea ref={ref} className={`rounded text-sm p-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 resize-none w-full shadow-sm border border-gray-200 dark:border-gray-400
disabled:bg-gray-100 dark:disabled:bg-gray-800/50
disabled:text-gray-400 dark:disabled:text-gray-500
disabled:pointer-events-none
placeholder:text-gray-400
${className}`}
{...rest}></textarea>;
};
});
export default StyledTextarea;
src/common/utils.tsx
+2
View File
@@ -10,6 +10,8 @@ import IconImage from "../assets/icons/file.image.svg";
import { Archive, ArchiveMessage } from "../types/resource";
import { MessagePayload } from "../app/slices/message";
export const isMobile = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
export const getLocalAuthData = () => {
return {
token: localStorage.getItem(KEY_TOKEN) || "",