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/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;