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

feat: darkmode draft version

Browse Source
This commit is contained in:
Tristan Yang
2023-02-06 07:35:31 +08:00
parent b4c5d5cb86
commit 07ddfbf12b
111 changed files with 885 additions and 2102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/ChannelChat/index.tsx
+4 -4
View File
@@ -145,7 +145,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
<header className="head flex items-center h-full justify-center md:justify-between">
<div className="flex items-center gap-1 text-base">
<ChannelIcon personal={!is_public} />
<span className="text-gray-800">{name}</span>
<span className="text-gray-800 dark:text-white">{name}</span>
<span className="ml-2 text-gray-500">{description}</span>
</div>
</header>
@@ -155,7 +155,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
{addVisible && (
<div className="add" onClick={toggleAddVisible}>
<img className="icon" src={addIcon} />
<div className="txt">{t("add_channel_members")}</div>
<div className="txt dark:!text-gray-50">{t("add_channel_members")}</div>
</div>
)}
{memberIds.map((uid: number) => {
@@ -179,8 +179,8 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
<LoadMore pullUp={pullUp} pulling={pulling} />
) : (
<div className="info">
<h2 className="title">{t("welcome_channel", { name })}</h2>
<p className="desc">{t("welcome_desc", { name })} </p>
<h2 className="title dark:text-white">{t("welcome_channel", { name })}</h2>
<p className="desc dark:!text-gray-300">{t("welcome_desc", { name })} </p>
{loginUser?.is_admin && (
<NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="edit">
<EditIcon className="icon" />
src/routes/chat/ChannelChat/styled.tsx
-25
View File
@@ -1,30 +1,5 @@
import styled from "styled-components";
export const StyledNotification = styled.div`
padding: 3px 8px;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 18px;
color: #fff;
position: absolute;
top: 0;
left: 10px;
width: 900px;
height: 24px;
background: linear-gradient(135deg, #3c8ce7 0%, #00eaff 100%);
border-radius: 0px 0px 8px 8px;
display: flex;
align-items: center;
justify-content: space-between;
.clear {
cursor: pointer;
color: inherit;
border: none;
background: none;
outline: none;
}
`;
export const StyledUsers = styled.div`
/* display: flex; */
flex-direction: column;
src/routes/chat/GuestBlankPlaceholder.tsx
+3 -3
View File
@@ -20,10 +20,10 @@ const GuestBlankPlaceholder = () => {
navigateTo("/login");
};
return (
<section className="flex flex-col items-center">
<h2 className="text-3xl text-gray-600 font-bold ">{t("welcome", { name: serverName })}</h2>
<section className="flex flex-col items-center bg-transparent">
<h2 className="text-3xl text-gray-600 dark:text-gray-50 font-bold ">{t("welcome", { name: serverName })}</h2>
<div className="flex flex-col">
<span className="text-gray-400 my-3 text-sm">{t("guest_login_tip")}</span>
<span className="text-gray-400 dark:text-gray-200 my-3 text-sm">{t("guest_login_tip")}</span>
<Button onClick={handleSignIn} className="small">{t("sign_in")}</Button>
</div>
</section>
src/routes/chat/GuestChannelChat/index.tsx
+8 -8
View File
@@ -1,13 +1,13 @@
// import { useState, useEffect } from "react";
// import { NavLink } from "react-router-dom";
import { useTranslation } from "react-i18next";
import useMessageFeed from "../../../common/hook/useMessageFeed";
import ChannelIcon from "../../../common/component/ChannelIcon";
import Layout from "../Layout";
import { renderMessageFragment } from "../utils";
import { StyledChannelChat } from "./styled";
import LoadMore from "../LoadMore";
import { useAppSelector } from "../../../app/store";
import { useTranslation } from "react-i18next";
type Props = {
cid?: number;
};
@@ -43,19 +43,19 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
<header className="head flex items-center h-full justify-center md:justify-between">
<div className="flex items-center gap-1 text-base">
<ChannelIcon personal={!is_public} />
<span className="text-gray-800">{name}</span>
<span className="text-gray-800 dark:text-white">{name}</span>
<span className="ml-2 text-gray-500">{description}</span>
</div>
</header>
}
>
<StyledChannelChat id={`VOCECHAT_FEED_channel_${cid}`}>
<article className="py-4.5 px-4 w-full h-full overflow-x-hidden overflow-y-auto" id={`VOCECHAT_FEED_channel_${cid}`}>
{hasMore ? (
<LoadMore pullUp={pullUp} pulling={pulling} />
) : (
<div className="info">
<h2 className="title">{t("welcome_channel", { name })}</h2>
<p className="desc">{t("welcome_desc", { name })} </p>
<div className="pt-14 flex flex-col items-start gap-2">
<h2 className="font-bold text-4xl dark:text-white">{t("welcome_channel", { name })}</h2>
<p className="text-gray-600 dark:text-gray-300">{t("welcome_desc", { name })} </p>
</div>
)}
{/* <div className="feed"> */}
@@ -73,7 +73,7 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
context: "channel"
});
})}
</StyledChannelChat>
</article>
</Layout>
</>
);
src/routes/chat/GuestChannelChat/styled.tsx
-28
View File
@@ -1,28 +0,0 @@
import styled from "styled-components";
export const StyledChannelChat = styled.article`
padding: 18px 16px;
width: 100%;
height: 100%;
height: -webkit-fill-available;
overflow-x: hidden;
overflow-y: auto;
overflow-anchor: auto;
> .info {
padding-top: 62px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
.title {
font-weight: bold;
font-size: 36px;
line-height: 44px;
}
.desc {
color: #78787c;
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
}
`;
src/routes/chat/GuestSessionList/Session.tsx
+11 -11
View File
@@ -1,9 +1,9 @@
// @ts-nocheck
import { useState, useEffect, FC } from "react";
import dayjs from "dayjs";
import clsx from "clsx";
import { renderPreviewMessage } from "../../chat/utils";
import Avatar from "../../../common/component/Avatar";
import IconLock from "../../../assets/icons/lock.svg";
import { NavLink } from "react-router-dom";
import { useAppSelector } from "../../../app/store";
@@ -35,25 +35,25 @@ const Session: FC<IProps> = ({ id, mid }) => {
}, [id, mid, userData, channelData]);
if (!data) return null;
const previewMsg = messageData[mid] || {};
const { name, icon, is_public } = data;
const { name, icon } = data;
return (
<li className="session">
<NavLink className={`nav`} to={`/chat/channel/${id}`}>
<div className="icon">
<NavLink className={({ isActive: linkActive }) => clsx(`nav flex gap-2 rounded-lg p-2 w-full hover:bg-gray-500/20`, linkActive && "bg-gray-500/20")} to={`/chat/channel/${id}`}>
<div className="flex bg-slate-50 rounded-full">
<Avatar width={40} height={40} className="icon" type="channel" name={name} src={icon} />
</div>
<div className="details">
<div className="up">
<span className={`name ${previewMsg.created_at ? "" : "only_title"}`}>
{name} {!is_public && <IconLock />}
<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]")}>
{name}
</span>
<span className="time">
<span className="text-xs text-gray-600 whitespace-nowrap overflow-hidden max-w-[80px] text-ellipsis">
{previewMsg.created_at ? dayjs(previewMsg.created_at).fromNow() : null}
</span>
</div>
<div className="down">
<span className="msg">{renderPreviewMessage(previewMsg)}</span>
<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>
</div>
</div>
</NavLink>
src/routes/chat/GuestSessionList/index.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import { FC } from "react";
import { useState, useEffect } from "react";
import Styled from "./styled";
import Session from "./Session";
import { useAppSelector } from "../../../app/store";
export interface ChatSession {
@@ -41,12 +40,12 @@ const SessionList: FC<Props> = () => {
}, [channelIDs, channelMessage, readChannels, readUsers, loginUid, userMessage]);
return (
<Styled>
<ul className="flex flex-col gap-0.5 p-2 overflow-auto h-[calc(100vh_-_56px_-_16px_-_8px)]">
{sessions.map((s) => {
const { key, id, mid = 0 } = s;
return <Session key={key} id={id} mid={mid} />;
})}
</Styled>
</ul>
);
};
export default SessionList;
src/routes/chat/GuestSessionList/styled.tsx
-86
View File
@@ -1,86 +0,0 @@
import styled from "styled-components";
const Styled = styled.ul`
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
height: calc(100vh - 56px - 16px - 8px);
overflow: auto;
> .session {
> a {
display: flex;
gap: 8px;
border-radius: 8px;
padding: 8px;
width: 100%;
&.active,
&:hover {
background: rgba(116, 127, 141, 0.2);
}
.icon {
display: flex;
background-color: #eee;
border-radius: 50%;
img {
max-width: unset;
width: 40px;
height: 40px;
&.channel_default {
padding: 5px;
}
}
}
.details {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.up {
display: flex;
align-items: center;
justify-content: space-between;
.name {
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #52525b;
max-width: 112px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.only_title {
max-width: 190px;
}
}
.time {
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #78787c;
white-space: nowrap;
overflow: hidden;
max-width: 80px;
text-overflow: ellipsis;
}
}
.down {
display: flex;
align-items: center;
justify-content: space-between;
> .msg {
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: #78787c;
white-space: nowrap;
overflow: hidden;
width: 140px;
text-overflow: ellipsis;
}
}
}
}
}
`;
export default Styled;
src/routes/chat/Layout/LoginTip.tsx
+2 -2
View File
@@ -20,8 +20,8 @@ const LoginTip = () => {
};
return (
<div className="flex items-center justify-between bg-slate-200/80 rounded-lg w-full p-4">
<span className="text-base text-[#98a2b3]">
<div className="flex items-center justify-between bg-slate-200/80 dark:bg-gray-800 rounded-lg w-full p-4">
<span className="text-base text-[#98a2b3] dark:text-gray-100">
<i className="mr-2 text-lg">👋</i>
{t("sign_in_tip")}
</span>
src/routes/chat/Layout/styled.tsx
-2
View File
@@ -2,7 +2,6 @@ import styled from "styled-components";
const Styled = styled.article`
position: relative;
width: 100%;
background: #fff;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
> .head {
@@ -21,7 +20,6 @@ const Styled = styled.article`
> .chat {
border-bottom-right-radius: 16px;
width: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
padding: 0;
src/routes/chat/SessionList/Session.tsx
+12 -12
View File
@@ -1,15 +1,16 @@
// @ts-nocheck
import { useState, useEffect, FC } from "react";
import clsx from "clsx";
import dayjs from "dayjs";
import { useDrop } from "react-dnd";
import { NativeTypes } from "react-dnd-html5-backend";
import { useNavigate, NavLink } from "react-router-dom";
import ContextMenu from "./ContextMenu";
import getUnreadCount, { renderPreviewMessage } from "../utils";
import User from "../../../common/component/User";
import Avatar from "../../../common/component/Avatar";
import IconLock from "../../../assets/icons/lock.svg";
import useContextMenu from "../../../common/hook/useContextMenu";
import { useNavigate, NavLink } from "react-router-dom";
import useUploadFile from "../../../common/hook/useUploadFile";
import { useAppSelector } from "../../../app/store";
@@ -95,7 +96,6 @@ const Session: FC<IProps> = ({
messageData,
loginUid
});
return (
<li className="session">
<ContextMenu
@@ -109,11 +109,11 @@ const Session: FC<IProps> = ({
>
<NavLink
ref={drop}
className={`nav ${isActive ? "drop_over" : ""} ${muted ? "muted" : ""}`}
className={({ isActive: linkActive }) => clsx(`nav flex gap-2 rounded-lg p-2 w-full hover:bg-gray-500/20`, isActive && "shadow-[inset_0_0_0_2px_#52edff]", linkActive && "bg-gray-500/20")}
to={type == "user" ? `/chat/dm/${id}` : `/chat/channel/${id}`}
onContextMenu={handleContextMenuEvent}
>
<div className="icon">
<div className="flex bg-slate-50 rounded-full">
{type == "user" ? (
<User avatarSize={40} compact interactive={false} uid={id} />
) : (
@@ -127,21 +127,21 @@ const Session: FC<IProps> = ({
/>
)}
</div>
<div className="details">
<div className="up">
<span className={`name ${previewMsg.created_at ? "" : "only_title"}`}>
<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]")}>
{name} {!is_public && <IconLock />}
</span>
<span className="time">
<span className="text-xs text-gray-600 whitespace-nowrap overflow-hidden max-w-[80px] text-ellipsis">
{previewMsg.created_at ? dayjs(previewMsg.created_at).fromNow() : null}
</span>
</div>
<div className="down">
<span className="msg">{renderPreviewMessage(previewMsg)}</span>
<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>
{unreads > 0 && (
<i className={`badge ${unreads > 99 ? "dot" : ""}`}>
<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}
</i>
</strong>
)}
</div>
</div>
src/routes/chat/SessionList/index.tsx
+2 -4
View File
@@ -1,6 +1,5 @@
import { FC } from "react";
import { useState, useEffect } from "react";
import Styled from "./styled";
import Session from "./Session";
import DeleteChannelConfirmModal from "../../settingChannel/DeleteConfirmModal";
import InviteModal from "../../../common/component/InviteModal";
@@ -65,10 +64,9 @@ const SessionList: FC<Props> = ({ tempSession }) => {
userMessage,
tempSession
]);
return (
<>
<Styled>
<ul className="flex flex-col gap-0.5 p-2 overflow-auto h-[calc(100vh_-_56px_-_16px_-_8px)]">
{sessions.map((s) => {
const { key, type, id, mid = 0 } = s;
return (
@@ -82,7 +80,7 @@ const SessionList: FC<Props> = ({ tempSession }) => {
/>
);
})}
</Styled>
</ul>
{!!deleteId && (
<DeleteChannelConfirmModal
id={deleteId}
src/routes/chat/SessionList/styled.tsx
-124
View File
@@ -1,124 +0,0 @@
import styled from "styled-components";
const Styled = styled.ul`
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
height: calc(100vh - 56px - 16px - 8px);
overflow: auto;
> .session {
> a {
display: flex;
gap: 8px;
border-radius: 8px;
padding: 8px;
width: 100%;
&.active,
&:hover {
background: rgba(116, 127, 141, 0.2);
}
&.drop_over {
box-shadow: inset 0 0 0 2px #52edff;
}
.icon {
display: flex;
background-color: #eee;
border-radius: 50%;
img {
max-width: unset;
width: 40px;
height: 40px;
&.channel_default {
padding: 5px;
}
}
}
.details {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.up {
display: flex;
align-items: center;
justify-content: space-between;
.name {
display: flex;
align-items: center;
gap: 2px;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #52525b;
max-width: 112px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.only_title {
max-width: 190px;
}
}
.time {
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #78787c;
white-space: nowrap;
overflow: hidden;
max-width: 80px;
text-overflow: ellipsis;
}
}
.down {
display: flex;
align-items: center;
justify-content: space-between;
> .msg {
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: #78787c;
white-space: nowrap;
overflow: hidden;
width: 140px;
text-overflow: ellipsis;
}
> .badge {
color: #fff;
height: 20px;
min-width: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #1fe1f9;
font-weight: 900;
font-size: 10px;
line-height: 10px;
&.dot {
min-width: unset;
width: 6px;
height: 6px;
padding: 0;
}
&.mute {
background: #bfbfbf;
}
}
}
}
&.muted {
.up .name,
.up .time,
.down .msg {
color: #d0d5dd;
}
.down .badge {
background: #bfbfbf;
}
}
}
}
`;
export default Styled;
src/routes/chat/index.tsx
+5 -5
View File
@@ -14,7 +14,7 @@ import GuestBlankPlaceholder from "./GuestBlankPlaceholder";
import GuestChannelChat from "./GuestChannelChat";
import GuestSessionList from "./GuestSessionList";
import IconList from '../../assets/icons/list.svg';
import IconClose from '../../assets/icons/close.svg';
// import IconClose from '../../assets/icons/close.svg';
function ChatPage() {
const [sessionListVisible, setSessionListVisible] = useState(false);
const [channelModalVisible, setChannelModalVisible] = useState(false);
@@ -52,16 +52,16 @@ function ChatPage() {
<ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
)}
{usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
<StyledWrapper className={`${isGuest ? "!pr-1 !pt-0" : ""} md:!pr-12`}>
<StyledWrapper className={`${isGuest ? "!pr-1 !pt-0" : ""} 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("left !fixed top-0 left-0 z-40 transition-all md:!relative md:translate-x-0 md:overflow-auto", sessionListVisible ? "translate-x-0" : "-translate-x-full")}>
<div className={clsx("left 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} />
{isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
{sessionListVisible ? null : <button className="absolute top-2 -right-[52px] z-50 p-2 bg-none md:hidden" onClick={toggleSessionList}>
<IconList />
<IconList className="dark:stroke-gray-300" />
</button>}
</div>
<div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
<div className={`right ${placeholderVisible ? "placeholder" : ""} bg-white dark:!bg-[#384250]`}>
{placeholderVisible && (isGuest ? <GuestBlankPlaceholder /> : <BlankPlaceholder />)}
{channel_id !== 0 &&
(isGuest ? (
src/routes/chat/styled.tsx
-5
View File
@@ -6,14 +6,10 @@ const StyledWrapper = styled.div`
padding-bottom: 10px;
padding-right: 4px;
> .left {
background-color: #fff;
position: relative;
/* display: flex; */
flex-direction: column;
min-width: 268px;
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.05);
height: 100%;
/* overflow: auto; */
border-radius: 16px 0 0 16px;
.list {
margin: 12px 8px;
@@ -149,7 +145,6 @@ const StyledWrapper = styled.div`
border-radius: 0 16px 16px 0;
width: 100%;
&.placeholder {
background-color: #fff;
height: 100%;
display: flex;
align-items: center;