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

feat: new Layout

Browse Source
This commit is contained in:
zerosoul
2022-04-15 13:15:41 +08:00
parent f9c43b887d
commit 408e02fe5b
16 changed files with 1540 additions and 1444 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/ChannelChat/index.js
+59 -19
View File
@@ -9,9 +9,14 @@ import Send from "../../../common/component/Send";
import Contact from "../../../common/component/Contact";
import Layout from "../Layout";
import { renderMessageFragment } from "../utils";
import EditIcon from "../../../assets/icons/edit.svg";
import alertIcon from "../../../assets/icons/alert.svg?url";
import peopleIcon from "../../../assets/icons/people.svg?url";
import pinIcon from "../../../assets/icons/pin.svg?url";
import searchIcon from "../../../assets/icons/search.svg?url";
import headphoneIcon from "../../../assets/icons/headphone.svg?url";
import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
import addIcon from "../../../assets/icons/add.svg?url";
import {
// StyledNotification,
@@ -20,8 +25,10 @@ import {
StyledHeader,
} from "./styled";
import AddMemberModal from "./AddMemberModal";
import { NavLink, useLocation } from "react-router-dom";
export default function ChannelChat({ cid = "", dropFiles = [] }) {
const { pathname } = useLocation();
const [updateReadIndex] = useReadMessageMutation();
const updateReadDebounced = useDebounce(updateReadIndex, 300);
const [membersVisible, setMembersVisible] = useState(true);
@@ -73,30 +80,57 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
context="channel"
dropFiles={dropFiles}
// ref={containerRef}
aside={
<>
<ul className="tools">
<li className="tool">
<Tooltip tip="Search" placement="left">
<img src={searchIcon} alt="opt icon" />
</Tooltip>
</li>
<li className="tool">
<Tooltip tip="Voice/Video Chat" placement="left">
<img src={headphoneIcon} alt="opt icon" />
</Tooltip>
</li>
<li className="tool">
<Tooltip tip="Notifications" placement="left">
<img src={alertIcon} alt="opt icon" />
</Tooltip>
</li>
<li className="tool">
<Tooltip tip="Pin" placement="left">
<img src={pinIcon} alt="opt icon" />
</Tooltip>
</li>
<li className="tool" onClick={toggleMembersVisible}>
<Tooltip tip="Channel Members" placement="left">
<img src={peopleIcon} alt="opt icon" />
</Tooltip>
</li>
</ul>
<hr className="divider" />
<ul className="apps">
<li className="app">
<Tooltip tip="Webrowse" placement="left">
<img src={webrowseIcon} alt="app icon" />
</Tooltip>
</li>
<li className="app">
<Tooltip tip="BoardOS" placement="left">
<img src={boardosIcon} alt="app icon" />
</Tooltip>
</li>
</ul>
</>
}
header={
<StyledHeader>
<StyledHeader className="head">
<div className="txt">
<ChannelIcon personal={!is_public} />
<span className="title">{name}</span>
<span className="desc">{description}</span>
</div>
<ul className="opts">
<li className="opt">
<Tooltip tip="Notifications" placement="bottom">
<img src={alertIcon} alt="opt icon" />
</Tooltip>
</li>
<li className="opt">
<Tooltip tip="Pin" placement="bottom">
<img src={pinIcon} alt="opt icon" />
</Tooltip>
</li>
<li className="opt" onClick={toggleMembersVisible}>
<Tooltip tip="Channel Members" placement="bottom">
<img src={peopleIcon} alt="opt icon" />
</Tooltip>
</li>
</ul>
</StyledHeader>
}
contacts={
@@ -125,7 +159,13 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
<p className="desc">
This is the start of the #{name} channel.{" "}
</p>
{/* <button className="edit">Edit Channel</button> */}
<NavLink
to={`/setting/channel/${cid}?f=${pathname}`}
className="edit"
>
<EditIcon className="icon" />
Edit Channel
</NavLink>
</div>
<div className="feed">
{[...msgIds]
src/routes/chat/ChannelChat/styled.js
+21 -24
View File
@@ -1,6 +1,5 @@
import styled from "styled-components";
export const StyledHeader = styled.header`
width: 100%;
height: 100%;
display: flex;
align-items: center;
@@ -22,20 +21,6 @@ export const StyledHeader = styled.header`
color: #616161;
}
}
.opts {
display: flex;
align-items: center;
gap: 16px;
.opt {
cursor: pointer;
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
}
`;
export const StyledNotification = styled.div`
padding: 3px 8px;
@@ -68,10 +53,10 @@ export const StyledContacts = styled.div`
gap: 5px;
/* todo */
width: 226px;
height: calc(100vh - 56px);
height: calc(100vh - 56px - 22px);
overflow-y: scroll;
background: #f5f6f7;
padding: 8px;
box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.1);
> .add {
cursor: pointer;
display: flex;
@@ -101,18 +86,19 @@ export const StyledChannelChat = styled.article`
width: 100%;
/* margin-bottom: 120px; */
> .wrapper {
background-color: #fff;
display: flex;
flex-direction: column;
padding: 0;
padding-bottom: 10px;
height: calc(100vh - 56px);
padding-bottom: 16px;
height: calc(100vh - 56px - 22px);
.chat {
padding: 18px 16px;
height: 100%;
height: -webkit-fill-available;
overflow: auto;
> .info {
padding-top: 114px;
padding-top: 62px;
display: flex;
flex-direction: column;
align-items: flex-start;
@@ -129,15 +115,26 @@ export const StyledChannelChat = styled.article`
line-height: 24px;
}
.edit {
color: #3c8ce7;
display: flex;
align-items: center;
gap: 4px;
.icon {
width: 16px;
height: 16px;
path {
fill: #3c8ce7;
}
}
padding: 0;
border: none;
outline: none;
background: none;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
background: linear-gradient(135deg, #3c8ce7 0%, #00eaff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
}
> .feed {
src/routes/chat/DMChat/index.js
+33 -14
View File
@@ -1,10 +1,12 @@
// import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { useDebounce } from "rooks";
import addIcon from "../../../assets/icons/add.person.svg?url";
import callIcon from "../../../assets/icons/call.svg?url";
import videoIcon from "../../../assets/icons/video.svg?url";
import Tooltip from "../../../common/component/Tooltip";
import alertIcon from "../../../assets/icons/alert.svg?url";
import pinIcon from "../../../assets/icons/pin.svg?url";
import searchIcon from "../../../assets/icons/search.svg?url";
import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
import useChatScroll from "../../../common/hook/useChatScroll";
import Send from "../../../common/component/Send";
import { useReadMessageMutation } from "../../../app/services/message";
@@ -38,20 +40,37 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
to={uid}
context="user"
dropFiles={dropFiles}
header={
<StyledHeader>
<Contact interactive={false} uid={currUser.uid} />
<ul className="opts">
<li className="opt">
<img src={callIcon} alt="opt icon" />
aside={
<>
<ul className="tools">
<li className="tool">
<img src={searchIcon} alt="opt icon" />
</li>
<li className="opt">
<img src={videoIcon} alt="opt icon" />
<li className="tool">
<img src={alertIcon} alt="opt icon" />
</li>
<li className="opt">
<img src={addIcon} alt="opt icon" />
<li className="tool">
<img src={pinIcon} alt="opt icon" />
</li>
</ul>
<hr className="divider" />
<ul className="apps">
<li className="app">
<Tooltip tip="Webrowse" placement="left">
<img src={webrowseIcon} alt="app icon" />
</Tooltip>
</li>
<li className="app">
<Tooltip tip="BoardOS" placement="left">
<img src={boardosIcon} alt="app icon" />
</Tooltip>
</li>
</ul>
</>
}
header={
<StyledHeader className="head">
<Contact interactive={false} uid={currUser.uid} />
</StyledHeader>
}
>
src/routes/chat/DMChat/styled.js
+2 -17
View File
@@ -1,6 +1,5 @@
import styled from "styled-components";
export const StyledHeader = styled.header`
width: 100%;
height: 100%;
/* padding: 0 20px 0 10px; */
display: flex;
@@ -27,20 +26,6 @@ export const StyledHeader = styled.header`
color: #616161;
}
}
.opts {
display: flex;
align-items: center;
gap: 16px;
.opt {
cursor: pointer;
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
}
`;
export const StyledDMChat = styled.article`
position: relative;
@@ -48,8 +33,8 @@ export const StyledDMChat = styled.article`
flex-direction: column;
width: 100%;
padding: 0;
padding-bottom: 10px;
height: calc(100vh - 56px);
padding-bottom: 16px;
height: calc(100vh - 56px - 22px);
> .chat {
padding: 18px 16px;
height: 100%;
src/routes/chat/Layout.js
+39 -4
View File
@@ -9,14 +9,17 @@ const StyledWrapper = styled.article`
position: relative;
width: 100%;
background: #fff;
height: 100vh;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
> .head {
box-sizing: content-box;
height: 56px;
padding: 0 20px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
/* box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); */
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
> .main {
height: calc(100vh - 56px);
height: calc(100vh - 56px - 22px);
width: 100%;
display: flex;
align-items: flex-start;
@@ -27,6 +30,36 @@ const StyledWrapper = styled.article`
/* margin-top: 1px; */
/* border-top: 1px solid transparent; */
}
> .aside {
padding: 12px;
position: absolute;
right: 0;
top: -56px;
transform: translateX(100%);
display: flex;
flex-direction: column;
.divider {
border: none;
background-color: #d4d4d4;
width: 16px;
height: 1px;
margin: 18px auto;
}
.tools,
.apps {
display: flex;
flex-direction: column;
}
.tools {
gap: 24px;
.tool {
cursor: pointer;
}
}
.apps {
gap: 15px;
}
}
}
.drag_tip {
display: flex;
@@ -75,6 +108,7 @@ const StyledWrapper = styled.article`
export default function Layout({
children,
header,
aside = null,
contacts = null,
dropFiles = [],
context = "channel",
@@ -137,10 +171,11 @@ export default function Layout({
<ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />
)}
<StyledWrapper ref={drop}>
<header className="head">{header}</header>
{header}
<main className="main" ref={messagesContainer}>
{children}
{contacts && <div className="members">{contacts}</div>}
{aside && <div className="aside">{aside}</div>}
</main>
<div
className={`drag_tip ${
src/routes/chat/styled.js
+6 -2
View File
@@ -2,14 +2,17 @@ import styled from "styled-components";
const StyledWrapper = styled.div`
display: flex;
height: 100%;
padding: 12px 48px 10px 0;
> .left {
background-color: #fff;
position: relative;
display: flex;
flex-direction: column;
min-width: 260px;
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
height: 100vh;
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.05);
height: calc(100vh - 22px);
overflow: auto;
border-radius: 16px 0 0 16px;
.list {
margin: 12px 8px;
&.dms {
@@ -146,6 +149,7 @@ const StyledWrapper = styled.div`
}
}
> .right {
border-radius: 0 16px 16px 0;
width: 100%;
}
`;
src/routes/contacts/styled.js
+6 -1
View File
@@ -2,7 +2,10 @@ import styled from "styled-components";
const StyledWrapper = styled.div`
display: flex;
height: 100%;
padding: 12px 48px 10px 0;
> .left {
border-radius: 16px 0 0 16px;
background-color: #fff;
position: relative;
display: flex;
flex-direction: column;
@@ -29,7 +32,9 @@ const StyledWrapper = styled.div`
}
}
.right {
height: 100vh;
border-radius: 0 16px 16px 0;
background-color: #fff;
/* height: 100vh; */
width: 100%;
display: flex;
justify-content: center;
src/routes/home/styled.js
+2 -2
View File
@@ -11,9 +11,9 @@ const StyledWrapper = styled.div`
&.left {
align-items: center;
position: relative;
background: #e5e7eb;
background: transparent;
width: 64px;
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
/* box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1); */
transition: all 0.5s ease-in;
> .divider {
width: -webkit-fill-available;