feat: darkmode draft version
This commit is contained in:
Tristan Yang
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user