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

refactor: polish the tailwind refactor

Browse Source
This commit is contained in:
Tristan Yang
2023-02-09 17:50:42 +08:00
parent 0b817773a0
commit 446e9a17d9
38 changed files with 80 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/DMChat/index.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
</ul>
}
header={
<header className="box-border h-14 px-5 border-b border-b-black/10 flex items-center justify-between">
<header className="box-border h-14 px-5 flex items-center justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
<User interactive={false} uid={currUser.uid} />
</header>
}
src/routes/chat/GuestChannelChat/index.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
to={cid}
context="channel"
header={
<header className="box-border h-14 px-5 border-solid border-b border-b-black/10 flex items-center justify-center md:justify-between">
<header className="h-14 px-5 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
<div className="flex items-center gap-1">
<ChannelIcon personal={!is_public} />
<span className="text-gray-800 dark:text-white">{name}</span>
src/routes/chat/GuestSessionList/Session.tsx
+3 -3
View File
@@ -45,15 +45,15 @@ const Session: FC<IProps> = ({ id, mid }) => {
</div>
<div className="w-full flex flex-col justify-between">
<div className="flex items-center justify-between">
<span className={clsx(`flex items-center gap-2 font-semibold text-sm text-gray-500 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis`, previewMsg.created_at && "max-w-[190px]")}>
<span className={clsx(`flex items-center gap-2 font-semibold text-sm text-gray-500 dark:text-white truncate`, previewMsg.created_at && "max-w-[190px]")}>
{name}
</span>
<span className="text-xs text-gray-600 whitespace-nowrap overflow-hidden max-w-[80px] text-ellipsis">
<span className="text-xs text-gray-600 max-w-[80px] truncate">
{previewMsg.created_at ? dayjs(previewMsg.created_at).fromNow() : null}
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-gray-500 whitespace-nowrap overflow-hidden w-36 text-ellipsis">{renderPreviewMessage(previewMsg)}</span>
<span className="text-xs text-gray-500 w-36 truncate">{renderPreviewMessage(previewMsg)}</span>
</div>
</div>
</NavLink>
src/routes/chat/SessionList/Session.tsx
+9 -6
View File
@@ -127,17 +127,20 @@ const Session: FC<IProps> = ({
/>
)}
</div>
<div className="w-full flex flex-col justify-between">
<div className="flex items-center justify-between">
<span className={clsx(`flex items-center gap-1 font-semibold text-sm text-gray-500 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis`, previewMsg.created_at && "max-w-[190px]")}>
{name} {!is_public && <IconLock className="dark:fill-gray-400" />}
<div className="w-full flex flex-col justify-between overflow-hidden">
<div className="flex items-center justify-between ">
<span className={clsx(`flex items-center gap-1`)}>
<i className={clsx("not-italic font-semibold text-sm text-gray-500 dark:text-white max-w-[120px] truncate", !previewMsg.created_at && "max-w-[190px]")}>
{name}
</i>
{!is_public && <IconLock className="dark:fill-gray-400" />}
</span>
<span className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap overflow-hidden max-w-[80px] text-ellipsis">
<span className={clsx("text-xs text-gray-600 dark:text-gray-400 max-w-[80px] truncate")}>
{previewMsg.created_at ? dayjs(previewMsg.created_at).fromNow() : null}
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap overflow-hidden w-36 text-ellipsis">{renderPreviewMessage(previewMsg)}</span>
<span className={clsx("text-xs text-gray-500 dark:text-gray-400 truncate", unreads > 0 ? `w-36` : ``)}>{renderPreviewMessage(previewMsg)}</span>
{unreads > 0 && (
<strong className={clsx(`text-white h-5 min-w-[20px] bg-primary-400 font-bold text-[10px] rounded-[10px] flex-center`, unreads > 99 && 'w-1.5 h-1.5 p-0 min-w-[unset]', muted && "bg-gray-500")}>
{unreads > 99 ? null : unreads}
src/routes/chat/SessionList/index.tsx
+2 -2
View File
@@ -37,7 +37,7 @@ const SessionList: FC<Props> = ({ tempSession }) => {
if (!mids || mids.length == 0) {
return { key: `channel_${id}`, unreads: 0, id, type: "channel" };
}
const mid = [...mids].sort().pop();
const mid = [...mids].pop();
return { key: `channel_${id}`, id, mid, type: "channel" };
});
const uSessions = DMs.map((id) => {
@@ -45,7 +45,7 @@ const SessionList: FC<Props> = ({ tempSession }) => {
if (!mids || mids.length == 0) {
return { key: `user_${id}`, unreads: 0, id, type: "user" };
}
const mid = [...mids].sort().pop();
const mid = [...mids].pop();
return { key: `user_${id}`, type: "user", id, mid };
});
const tmps = [...(cSessions as ChatSession[]), ...(uSessions as ChatSession[])].sort((a, b) => {
src/routes/chat/index.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ function ChatPage() {
<ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
)}
{usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
<div className={`flex h-full pt-2 pb-2.5 pr-1 ${isGuest ? "!pr-1 !pt-0" : ""} md:!pr-12 `}>
<div className={`flex h-full pt-2 pb-2.5 pr-1 ${isGuest ? "px-1" : "md:pr-12"}`}>
{sessionListVisible && <div onClick={toggleSessionList} className="z-30 fixed top-0 left-4 w-screen h-screen bg-black/50 transition-all backdrop-blur-sm"></div>}
<div className={clsx("flex-col rounded-l-2xl min-w-[268px] h-full shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] fixed md:relative top-0 left-0 z-40 transition-all md:overflow-auto bg-white dark:!bg-[#1F2A37]", sessionListVisible ? "max-md:translate-x-0" : "max-md:-translate-x-full")}>
<Server readonly={isGuest} />
src/routes/home/index.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ function HomePage() {
<>
<Manifest />
{!guest && <Notification />}
<div className={`flex w-screen h-screen bg-[#e5e7eb] dark:bg-[#121926]`}>
<div className={`vocechat-container flex w-screen h-screen bg-[#e5e7eb] dark:bg-[#121926]`}>
{!guest && (
<div className={`h-full flex flex-col items-center relative w-16 bg-transparent transition-all`}>
{loginUid && <User uid={loginUid} />}
src/routes/lazy.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { ReactNode, Suspense, FC } from "react";
import { ReactNode, Suspense, FC } from "react";
import Loading from "../common/component/Loading";
type Props = {
@@ -7,7 +7,7 @@ type Props = {
const Lazy: FC<Props> = ({ children }) => {
return (
<Suspense fallback={<Loading />}>
<Suspense fallback={<Loading fullscreen={true} />}>
{children}
</Suspense>
);
src/routes/setting/License/index.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import UpdateLicenseModal from "./UpdateLicenseModal";
interface ItemProps extends HTMLAttributes<HTMLSpanElement> { label: string, data?: string | number | string[], foldable?: boolean }
const Item = ({ label, data, foldable = false, ...rest }: ItemProps) => {
const infoClass = clsx("font-bold w-full cursor-pointer", foldable ? " overflow-hidden text-ellipsis" : "whitespace-pre-wrap break-all");
const infoClass = clsx("font-bold w-full cursor-pointer", foldable ? "truncate" : "whitespace-pre-wrap break-all");
if (!data) return null;
return <div className="whitespace-nowrap flex flex-col items-start justify-start text-lg">
<span className="text-sm text-gray-400 dark:text-white">{label}</span>
src/routes/users/Search.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ const Search: FC<Props> = ({ input, updateInput }) => {
<div className="relative min-h-[56px] px-2 py-3 flex items-center justify-between gap-2 shadow-[rgb(0_0_0_/_10%)_0px_1px_0px] dark:border-b-gray-500">
<div className="flex items-center gap-1">
<img src={searchIcon} alt="search icon" />
<input value={input} placeholder={`${t("action.search")}...`} className="w-full text-sm bg-transparent" onChange={handleInput} />
<input value={input} placeholder={`${t("action.search")}...`} className="w-full text-sm bg-transparent dark:text-gray-50" onChange={handleInput} />
</div>
<Tooltip tip={t("more")} placement="bottom">
<Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>