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/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>