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

chore: updates by dingyi's feedbacks

Browse Source
This commit is contained in:
zerosoul
2022-05-20 20:24:28 +08:00
parent 17ef9a31b1
commit fd5dd0a83e
20 changed files with 114 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/slices/channels.js
-6
View File
@@ -54,12 +54,6 @@ const channelsSlice = createSlice({
const filtered = state.byId[id].members.filter(
(id) => members.findIndex((uid) => uid == id) == -1
);
console.log(
"remove member from channel",
filtered,
members,
state.byId[id].members
);
state.byId[id].members = filtered;
}
break;
src/assets/icons/arrow.down.mini.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.01" width="6" height="6" fill="#D8D8D8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.62506 1.64911C5.41795 1.4503 5.08216 1.45029 4.87506 1.64911L3.00003 3.44911L1.12506 1.64916C0.917951 1.45034 0.582164 1.45034 0.375057 1.64916C0.16795 1.84798 0.16795 2.17033 0.375057 2.36915L2.62506 4.52912C2.83217 4.72794 3.16795 4.72794 3.37506 4.52912C3.37665 4.5276 3.37822 4.52608 3.37977 4.52454L5.62506 2.36911C5.83216 2.17029 5.83216 1.84793 5.62506 1.64911Z" fill="black" fill-opacity="0.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 614 B

src/assets/icons/reaction.svg
+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM8.81606 14.5046C8.58538 14.2118 8.16104 14.1615 7.86826 14.3922C7.57548 14.6228 7.52514 15.0472 7.75582 15.34C8.77321 16.6312 10.3239 17.4006 12 17.4006C13.6739 17.4006 15.2227 16.6333 16.2402 15.345C16.4712 15.0525 16.4214 14.6281 16.1289 14.397C15.8364 14.166 15.412 14.2158 15.181 14.5084C14.4167 15.4759 13.2564 16.0508 12 16.0508C10.7419 16.0508 9.58016 15.4744 8.81606 14.5046ZM9.30082 9.07603C8.67995 9.07603 8.17664 9.57935 8.17664 10.2002C8.17664 10.8211 8.67995 11.3244 9.30082 11.3244C9.92169 11.3244 10.425 10.8211 10.425 10.2002C10.425 9.57935 9.92169 9.07603 9.30082 9.07603ZM14.7 9.07603C14.0791 9.07603 13.5758 9.57935 13.5758 10.2002C13.5758 10.8211 14.0791 11.3244 14.7 11.3244C15.3209 11.3244 15.8242 10.8211 15.8242 10.2002C15.8242 9.57935 15.3209 9.07603 14.7 9.07603Z" fill="#616161"/>
<path d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM8.81606 14.5046C8.58538 14.2118 8.16104 14.1615 7.86826 14.3922C7.57548 14.6228 7.52514 15.0472 7.75582 15.34C8.77321 16.6312 10.3239 17.4006 12 17.4006C13.6739 17.4006 15.2227 16.6333 16.2402 15.345C16.4712 15.0525 16.4214 14.6281 16.1289 14.397C15.8364 14.166 15.412 14.2158 15.181 14.5084C14.4167 15.4759 13.2564 16.0508 12 16.0508C10.7419 16.0508 9.58016 15.4744 8.81606 14.5046ZM9.30082 9.07603C8.67995 9.07603 8.17664 9.57935 8.17664 10.2002C8.17664 10.8211 8.67995 11.3244 9.30082 11.3244C9.92169 11.3244 10.425 10.8211 10.425 10.2002C10.425 9.57935 9.92169 9.07603 9.30082 9.07603ZM14.7 9.07603C14.0791 9.07603 13.5758 9.57935 13.5758 10.2002C13.5758 10.8211 14.0791 11.3244 14.7 11.3244C15.3209 11.3244 15.8242 10.8211 15.8242 10.2002C15.8242 9.57935 15.3209 9.07603 14.7 9.07603Z" fill="#667085"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

src/common/component/Channel.js
+11 -3
View File
@@ -34,10 +34,17 @@ const StyledWrapper = styled.div`
}
.name {
/* user-select: text; */
display: flex;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #52525b;
.txt {
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
`;
export default function Channel({
@@ -66,9 +73,10 @@ export default function Channel({
<Avatar type="channel" url={avatar} name={"#"} alt="avatar" />
</div>
{!compact && (
<span className="name">
{name} ({is_public ? totalMemberCount : members.length})
</span>
<div className="name">
<span className="txt">{name}</span> (
{is_public ? totalMemberCount : members.length})
</div>
)}
</StyledWrapper>
);
src/common/component/CurrentUser.js
+2 -2
View File
@@ -6,14 +6,14 @@ import micIcon from "../../assets/icons/mic.on.svg?url";
import Avatar from "./Avatar";
// import UserGuide from "./UserGuide";
const StyledWrapper = styled.div`
background-color: #e5e5e5;
background-color: #f4f4f5;
position: sticky;
bottom: 16px;
margin: 8px;
width: 94%;
width: -webkit-fill-available;
border-radius: 25px;
padding: 7px 8px 7px 4px;
padding: 8px;
display: flex;
align-items: center;
justify-content: space-between;
src/common/component/InviteLink.js
+1 -6
View File
@@ -54,12 +54,7 @@ export default function InviteLink() {
Share this link to invite people to this server.
</span>
<div className="link">
<Input
readOnly
className="higher"
placeholder="Generating"
value={link}
/>
<Input readOnly placeholder="Generating" value={link} />
<Button onClick={copyLink} className="small">
{linkCopied ? "Copied" : `Copy`}
</Button>
src/common/component/InviteModal/InviteByEmail.js
+9 -6
View File
@@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import styled from "styled-components";
import useInviteLink from "../../hook/useInviteLink";
@@ -67,6 +67,7 @@ const Styled = styled.div`
import Button from "../styled/Button";
import Input from "../styled/Input";
export default function InviteByEmail({ cid = null }) {
const [email, setEmail] = useState("");
const {
enableSMTP,
linkCopied,
@@ -80,20 +81,22 @@ export default function InviteByEmail({ cid = null }) {
toast.success("Invite Link Copied!");
}
}, [linkCopied]);
const handleEmail = (evt) => {
setEmail(evt.target.value);
};
return (
<Styled>
<div className="invite">
<label htmlFor="">Invite by Email</label>
<div className="input">
<Input
readOnly={true}
value={email}
onChange={handleEmail}
disabled={!enableSMTP}
type="email"
className="higher "
placeholder={enableSMTP ? "Enter Email" : "Enable SMTP First"}
/>
<Button disabled={!enableSMTP} className="send">
<Button disabled={!enableSMTP || !email} className="send">
Send
</Button>
</div>
@@ -103,7 +106,7 @@ export default function InviteByEmail({ cid = null }) {
<div className="input">
<Input
readOnly
className="higher invite"
className="invite"
placeholder="Generating"
value={link}
/>
src/common/component/ManageMembers.js
+12 -4
View File
@@ -16,7 +16,7 @@ import StyledMenu from "./styled/Menu";
import InviteLink from "./InviteLink";
import moreIcon from "../../assets/icons/more.svg?url";
import IconOwner from "../../assets/icons/owner.svg";
import IconArrowDown from "../../assets/icons/arrow.down.svg";
import IconArrowDown from "../../assets/icons/arrow.down.mini.svg";
import IconCheck from "../../assets/icons/check.sign.svg";
const StyledWrapper = styled.section`
display: flex;
@@ -44,7 +44,7 @@ const StyledWrapper = styled.section`
.members {
display: flex;
flex-direction: column;
gap: 24px;
gap: 4px;
width: 512px;
margin-bottom: 176px;
.member {
@@ -52,7 +52,11 @@ const StyledWrapper = styled.section`
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
padding: 8px 12px;
border-radius: var(--br);
&:hover {
background: #f9fafb;
}
.left {
display: flex;
gap: 8px;
@@ -89,12 +93,16 @@ const StyledWrapper = styled.section`
display: flex;
align-items: center;
gap: 4px;
.icon {
> .icon {
cursor: pointer;
}
/* override */
.menu {
min-width: 120px;
.item .icon {
width: 16px;
height: 12px;
}
}
}
.opts {
src/common/component/Message/Commands.js
+32 -25
View File
@@ -5,7 +5,8 @@ import Tippy from "@tippyjs/react";
import { hideAll } from "tippy.js";
import { updateSelectMessages } from "../../../app/slices/ui";
import { addReplyingMessage } from "../../../app/slices/message";
import StyledMenu from "../styled/Menu";
// import StyledMenu from "../styled/Menu";
import ContextMenu from "../ContextMenu";
import Tooltip from "../../component/Tooltip";
import useFavMessage from "../../hook/useFavMessage";
@@ -14,6 +15,10 @@ import replyIcon from "../../../assets/icons/reply.svg?url";
import reactIcon from "../../../assets/icons/reaction.svg?url";
import editIcon from "../../../assets/icons/edit.svg?url";
import IconBookmark from "../../../assets/icons/bookmark.add.svg";
import IconPin from "../../../assets/icons/pin.svg";
import IconForward from "../../../assets/icons/forward.svg";
import IconSelect from "../../../assets/icons/select.svg";
import IconDelete from "../../../assets/icons/delete.svg";
import moreIcon from "../../../assets/icons/more.svg?url";
import toast from "react-hot-toast";
import useMessageOperation from "./useMessageOperation";
@@ -164,30 +169,32 @@ export default function Commands({
placement="left-start"
trigger="click"
content={
<StyledMenu className="menu">
{canPin && (
<li
className="item"
onClick={pinned ? handleUnpin : togglePinModal}
>
{pinned ? `Unpin Message` : `Pin Message`}
</li>
)}
<li className="item" onClick={toggleForwardModal}>
Forward
</li>
<li className="item" onClick={handleReply.bind(null, true)}>
Reply
</li>
<li className="item" onClick={handleSelect.bind(null, mid)}>
Select
</li>
{canDelete && (
<li className="item danger" onClick={toggleDeleteModal}>
Delete Message
</li>
)}
</StyledMenu>
<ContextMenu
items={[
canPin && {
title: pinned ? `Unpin Message` : `Pin Message`,
icon: <IconPin className="icon" />,
handler: pinned ? handleUnpin : togglePinModal,
},
{
title: "Forward",
icon: <IconForward className="icon" />,
handler: toggleForwardModal,
},
{
title: "Select",
icon: <IconSelect className="icon" />,
handler: handleSelect.bind(null, mid),
},
canDelete && {
title: " Delete",
danger: true,
icon: <IconDelete className="icon" />,
handler: toggleDeleteModal,
},
]}
/>
}
>
<li className="cmd">
src/common/component/Message/FavoritedMessage.js
+4 -1
View File
@@ -23,7 +23,10 @@ const FavoritedMessage = ({ id }) => {
const favorite_mids = messages.map(({ from_mid }) => from_mid) || [];
setMsgs(
<StyledFav data-favorite-mids={favorite_mids.join(",")}>
<StyledFav
data-favorite-mids={favorite_mids.join(",")}
className="favorite"
>
<div className="list">
{messages.map((msg, idx) => {
const {
src/common/component/styled/Button.js
+2 -2
View File
@@ -7,8 +7,8 @@ const StyledButton = styled.button`
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: var(--br, 4px);
font-weight: 500;
font-size: 16px;
line-height: 24px;
font-size: 14px;
line-height: 20px;
color: #fff;
background-color: #22ccee;
&.flex {
src/common/component/styled/Input.js
-3
View File
@@ -41,9 +41,6 @@ const StyledInput = styled.input`
border: 1px solid #e5e7eb;
box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
}
&.higher {
padding: 12px 8px;
}
&.large {
font-weight: 400;
font-size: 16px;
src/common/component/styled/Menu.js
+14 -2
View File
@@ -10,9 +10,9 @@ const StyledMenu = styled.ul`
border-radius: 12px;
min-width: 200px;
.item {
position: relative;
display: flex;
align-items: center;
gap: 14px;
white-space: nowrap;
cursor: pointer;
@@ -44,7 +44,19 @@ const StyledMenu = styled.ul`
}
}
&.underline {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 9px;
&:before {
position: absolute;
content: "";
left: 6px;
bottom: -4px;
display: block;
padding: 0 6px;
box-sizing: border-box;
width: calc(100% - 12px);
height: 1px;
background-color: #f2f4f7;
}
}
&.danger {
color: #a11043;
src/common/hook/useInviteLink.js
+6 -6
View File
@@ -23,11 +23,6 @@ export default function useInviteLink(cid = null) {
const copyLink = () => {
copy(finalLink);
};
const regenLink = cid
? () => {
generateChannelInviteLink(cid);
}
: generateServerInviteLink;
useEffect(() => {
if (cid) {
generateChannelInviteLink(cid);
@@ -45,10 +40,15 @@ export default function useInviteLink(cid = null) {
setFinalLink(tmpURL.href);
}
}, [serverInviteLink, channelInviteLink, smtpStatusFetchSuccess]);
const genServerLink = () => {
generateServerInviteLink();
};
return {
enableSMTP: SMTPEnabled,
generating: cid ? generatingChannelLink : generatingServerLink,
generateNewLink: regenLink,
generateNewLink: cid
? generateChannelInviteLink.bind(null, cid)
: genServerLink,
link: finalLink,
linkCopied,
copyLink,
src/routes/chat/Layout/Operations.js
+3
View File
@@ -28,6 +28,9 @@ const Styled = styled.div`
&:disabled svg path {
fill: #ccc;
}
&:hover {
background: #eaecf0;
}
}
.close {
cursor: pointer;
src/routes/chat/Layout/styled.js
+1
View File
@@ -19,6 +19,7 @@ const Styled = styled.article`
justify-content: space-between;
position: relative;
> .chat {
border-bottom-right-radius: 16px;
width: 100%;
background-color: #fff;
display: flex;
src/routes/favs/index.js
+1 -1
View File
@@ -157,7 +157,7 @@ function FavsPage() {
</span>
);
return (
<div className="fav" key={id}>
<div className="container" key={id}>
<h4 className="tip">
{tip}
{dayjs(created_at).format("YYYY-MM-DD")}
src/routes/favs/styled.js
+4 -1
View File
@@ -45,11 +45,14 @@ const Styled = styled.div`
flex-direction: column;
gap: 32px;
overflow-y: scroll;
.fav {
.container {
max-width: 600px;
display: flex;
flex-direction: column;
gap: 4px;
> .favorite {
background: #f2f4f7;
}
.tip {
display: inline-flex;
align-items: center;
src/routes/resources/Filter/Type.js
+4
View File
@@ -34,6 +34,10 @@ const Styled = styled.div`
align-items: center;
gap: 8px;
color: #616161;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #475467;
.icon {
width: 15px;
height: auto;
src/routes/resources/View.js
+3
View File
@@ -16,6 +16,9 @@ const Styled = styled.ul`
cursor: pointer;
padding: 8px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
&.item .item,
&.grid .grid {