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

feat: tweak UXs

Browse Source
This commit is contained in:
zerosoul
2022-02-17 22:05:46 +08:00
parent edb9c94b52
commit 156d9dbac9
12 changed files with 284 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/Avatar.js
+2 -3
View File
@@ -1,6 +1,5 @@
import { useState, useEffect } from "react";
export default function Avatar({ url, id = 0, ...rest }) {
export default function Avatar({ url = "", id = 0, ...rest }) {
const [src, setSrc] = useState(url);
const [loaded, setLoaded] = useState(false);
@@ -22,7 +21,7 @@ export default function Avatar({ url, id = 0, ...rest }) {
if (!loaded) {
handleError();
}
}, 500);
}, 2000);
return () => {
clearTimeout(inter);
src/common/component/Contact.js
+22 -5
View File
@@ -1,6 +1,8 @@
// import React from 'react';
import styled from "styled-components";
import Avatar from "./Avatar";
import Tippy from "@tippyjs/react";
import Profile from "./Profile";
import { useGetContactsQuery } from "../../app/services/contact";
const StyledWrapper = styled.div`
@@ -18,6 +20,7 @@ const StyledWrapper = styled.div`
}
}
.avatar {
cursor: pointer;
width: 32px;
height: 32px;
position: relative;
@@ -50,16 +53,30 @@ const StyledWrapper = styled.div`
color: #52525b;
}
`;
export default function Contact({ interactive = true, status = "", uid = "" }) {
export default function Contact({
interactive = true,
status = "",
uid = "",
popover = false,
}) {
const { data: contacts } = useGetContactsQuery();
if (!contacts) return null;
const currUser = contacts.find((c) => c.uid == uid);
return (
<StyledWrapper className={`${interactive ? "interactive" : ""}`}>
<div className="avatar">
<Avatar url={currUser?.avatar} id={uid} alt="avatar" />
<div className={`status ${status}`}></div>
</div>
<Tippy
animation="perspective"
interactive
disabled={!popover}
placement="left"
trigger="click"
content={<Profile data={currUser} type="card" />}
>
<div className="avatar">
<Avatar url={currUser?.avatar} id={uid} alt="avatar" />
<div className={`status ${status}`}></div>
</div>
</Tippy>
<span className="name">{currUser?.name}</span>
</StyledWrapper>
);
src/common/component/Message/Commands.js
+53
View File
@@ -0,0 +1,53 @@
// import React from 'react'
import styled from "styled-components";
import toast from "react-hot-toast";
const StyledCmds = styled.ul`
position: absolute;
right: 10px;
top: 0;
transform: translateY(-50%);
display: flex;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
background-color: #fff;
visibility: hidden;
.cmd {
cursor: pointer;
padding: 4px;
img {
width: 24px;
height: 24px;
}
}
`;
// https://static.nicegoodthings.com/project/rustchat/icon.forward.svg
// https://static.nicegoodthings.com/project/rustchat/icon.edit.svg
export default function Commands() {
const handleClick = () => {
toast.success("cooming soon");
};
return (
<StyledCmds className="cmds">
<li className="cmd" onClick={handleClick}>
<img
src="https://static.nicegoodthings.com/project/rustchat/icon.reply.svg"
alt="icon emoji"
/>
</li>
<li className="cmd" onClick={handleClick}>
<img
src="https://static.nicegoodthings.com/project/rustchat/icon.edit.svg"
alt="icon emoji"
/>
</li>
<li className="cmd" onClick={handleClick}>
<img
src="https://static.nicegoodthings.com/project/rustchat/icon.dots.svg"
alt="icon emoji"
/>
</li>
</StyledCmds>
);
}
src/common/component/Message.js → src/common/component/Message/index.js
+22 -61
View File
@@ -1,63 +1,16 @@
import { useEffect, useRef } from "react";
import styled from "styled-components";
import dayjs from "dayjs";
import { useDispatch } from "react-redux";
import { useInViewRef } from "rooks";
import Avatar from "./Avatar";
import BASE_URL from "../../app/config";
import { useGetContactsQuery } from "../../app/services/contact";
import { setChannelMsgRead } from "../../app/slices/message.channel";
import { setUserMsgRead } from "../../app/slices/message.user";
const StyledMsg = styled.div`
display: flex;
align-items: flex-start;
gap: 16px;
padding: 12px 0;
.avatar {
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
.details {
display: flex;
flex-direction: column;
gap: 8px;
.up {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
.name {
color: #06b6d4;
font-style: normal;
font-size: 14px;
line-height: 20px;
}
.time {
color: #bfbfbf;
font-size: 12px;
line-height: 18px;
}
}
.down {
user-select: text;
color: #374151;
font-weight: normal;
font-size: 14px;
line-height: 20px;
word-break: break-all;
white-space: break-spaces;
&.pending {
opacity: 0.5;
}
.img {
max-width: 400px;
}
}
}
`;
import Tippy from "@tippyjs/react";
import Profile from "../Profile";
import Avatar from "../Avatar";
import BASE_URL from "../../../app/config";
import { useGetContactsQuery } from "../../../app/services/contact";
import { setChannelMsgRead } from "../../../app/slices/message.channel";
import { setUserMsgRead } from "../../../app/slices/message.user";
import StyledWrapper from "./styled";
import Commands from "./Commands";
const renderContent = (type, content) => {
let ctn = null;
switch (type) {
@@ -111,10 +64,17 @@ export default function Message({
if (!contacts) return null;
const currUser = contacts.find((c) => c.uid == fromUid) || {};
return (
<StyledMsg ref={myRef}>
<div className="avatar" data-uid={uid} ref={avatarRef}>
<Avatar url={currUser.avatar} id={fromUid} name={currUser.name} />
</div>
<StyledWrapper ref={myRef}>
<Tippy
interactive
placement="left"
trigger="click"
content={<Profile data={currUser} type="card" />}
>
<div className="avatar" data-uid={uid} ref={avatarRef}>
<Avatar url={currUser.avatar} id={fromUid} name={currUser.name} />
</div>
</Tippy>
<div className="details">
<div className="up">
<span className="name">{currUser.name}</span>
@@ -124,6 +84,7 @@ export default function Message({
{renderContent(content_type, content)}
</div>
</div>
</StyledMsg>
<Commands />
</StyledWrapper>
);
}
src/common/component/Message/styled.js
+63
View File
@@ -0,0 +1,63 @@
import styled from "styled-components";
const StyledMsg = styled.div`
position: relative;
display: flex;
align-items: flex-start;
gap: 16px;
padding: 4px;
margin: 8px 0;
border-radius: 8px;
&:hover {
background: #f5f6f7;
.cmds {
visibility: visible;
}
}
.avatar {
cursor: pointer;
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
.details {
display: flex;
flex-direction: column;
gap: 8px;
.up {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
.name {
color: #06b6d4;
font-style: normal;
font-size: 14px;
line-height: 20px;
}
.time {
color: #bfbfbf;
font-size: 12px;
line-height: 18px;
}
}
.down {
user-select: text;
color: #374151;
font-weight: normal;
font-size: 14px;
line-height: 20px;
word-break: break-all;
white-space: break-spaces;
&.pending {
opacity: 0.5;
}
.img {
max-width: 400px;
}
}
}
`;
export default StyledMsg;
src/common/component/Profile.js
+93
View File
@@ -0,0 +1,93 @@
// import React from "react";
// import toast from "react-hot-toast";
// import { useState, useEffect } from "react";
import { NavLink } from "react-router-dom";
import { BsChatText } from "react-icons/bs";
import { RiUserAddLine } from "react-icons/ri";
import { IoShareOutline } from "react-icons/io5";
import styled from "styled-components";
import Avatar from "../../common/component/Avatar";
const StyledWrapper = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin-top: 80px;
width: 432px;
gap: 4px;
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}
.name {
font-weight: bold;
font-size: 18px;
line-height: 100%;
color: #1c1c1e;
}
.email {
font-weight: normal;
font-size: 14px;
line-height: 20px;
color: #78787c;
}
.icons {
display: flex;
align-items: center;
padding: 26px 0;
gap: 28px;
.icon {
}
}
.line {
width: 100%;
height: 1px;
border: none;
background-color: rgba(0, 0, 0, 0.1);
}
&.card {
padding: 16px;
width: 332px;
background: #ffffff;
box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
0px 10px 10px rgba(31, 41, 55, 0.04);
border-radius: 6px;
.icons {
padding-bottom: 2px;
}
}
`;
export default function Profile({ data = null, type = "embed" }) {
if (!data) return null;
const { uid, name, email, avatar } = data;
return (
<StyledWrapper className={type}>
<Avatar className="avatar" url={avatar} id={uid} name={name} />
<h2 className="name">{name}</h2>
<span className="email">{email}</span>
<ul className="icons">
<li className="icon chat">
<NavLink to={`/chat/dm/${uid}`}>
<BsChatText size={20} color="#616161" />
</NavLink>
</li>
<li className="icon add">
{/* <NavLink to={`/chat/dm/${uid}`}> */}
<RiUserAddLine size={20} color="#616161" />
{/* </NavLink> */}
</li>
<li className="icon share">
{/* <NavLink to={`/chat/dm/${uid}`}> */}
<IoShareOutline size={20} color="#616161" />
{/* </NavLink> */}
</li>
</ul>
{type == "embed" && <hr className="line" />}
</StyledWrapper>
);
}