feat: pin message
This commit is contained in:
zerosoul
@@ -0,0 +1,134 @@
|
||||
// import React from "react";
|
||||
// import { useSelector } from "react-redux";
|
||||
import styled from "styled-components";
|
||||
import usePinMessage from "../../../common/hook/usePinMessage";
|
||||
import PreviewMessage from "../../../common/component/Message/PreviewMessage";
|
||||
import IconSurprise from "../../../assets/icons/emoji.suprise.svg";
|
||||
// import IconForward from "../../../assets/icons/forward.svg";
|
||||
import IconClose from "../../../assets/icons/close.svg";
|
||||
const Styled = styled.div`
|
||||
padding: 16px;
|
||||
background: #f9fafb;
|
||||
filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
|
||||
border-radius: 12px;
|
||||
width: 406px;
|
||||
> .head {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #344054;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
> .none {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
.tip {
|
||||
width: 240px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #475467;
|
||||
}
|
||||
}
|
||||
> .list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.pin {
|
||||
position: relative;
|
||||
border: 1px solid #f2f4f7;
|
||||
border-radius: var(--br);
|
||||
> .preview {
|
||||
background: none;
|
||||
.down img {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
> .opts {
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
padding: 4px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 6px;
|
||||
.btn {
|
||||
display: flex;
|
||||
background: none;
|
||||
border: none;
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
path {
|
||||
fill-opacity: 1;
|
||||
fill: #667085;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .opts {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default function PinList({ id }) {
|
||||
const { pins, unpinMessage, canPin } = usePinMessage(id);
|
||||
const handleUnpin = (evt) => {
|
||||
const { mid } = evt.currentTarget.dataset;
|
||||
console.log("unpin msg", mid);
|
||||
unpinMessage(+mid);
|
||||
};
|
||||
const noPins = pins.length == 0;
|
||||
return (
|
||||
<Styled>
|
||||
<h4 className="head">Pinned Message({pins.length})</h4>
|
||||
|
||||
{noPins ? (
|
||||
<div className="none">
|
||||
<IconSurprise />
|
||||
<div className="tip">
|
||||
This channel doesn’t have any pinned message yet.
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="list">
|
||||
{pins.map(({ mid }) => {
|
||||
return (
|
||||
<li key={mid} className="pin">
|
||||
<PreviewMessage mid={mid} />
|
||||
<div className="opts">
|
||||
{/* <button
|
||||
className="btn"
|
||||
data-mid={mid}
|
||||
// onClick={handleUnpin}
|
||||
>
|
||||
<IconForward />
|
||||
</button> */}
|
||||
{canPin && (
|
||||
<button
|
||||
className="btn"
|
||||
data-mid={mid}
|
||||
onClick={handleUnpin}
|
||||
>
|
||||
<IconClose />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</Styled>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState } from "react";
|
||||
import { useDebounce } from "rooks";
|
||||
import { useSelector } from "react-redux";
|
||||
import PinList from "./PinList";
|
||||
import { useReadMessageMutation } from "../../../app/services/message";
|
||||
import useChatScroll from "../../../common/hook/useChatScroll";
|
||||
import ChannelIcon from "../../../common/component/ChannelIcon";
|
||||
@@ -9,7 +10,7 @@ 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 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";
|
||||
@@ -25,8 +26,10 @@ import {
|
||||
} from "./styled";
|
||||
import ChannelInviteModal from "../../../common/component/ChannelInviteModal";
|
||||
import { NavLink, useLocation } from "react-router-dom";
|
||||
import Tippy from "@tippyjs/react";
|
||||
|
||||
export default function ChannelChat({ cid = "", dropFiles = [] }) {
|
||||
const [toolVisible, setToolVisible] = useState("");
|
||||
const { pathname } = useLocation();
|
||||
const [updateReadIndex] = useReadMessageMutation();
|
||||
const updateReadDebounced = useDebounce(updateReadIndex, 300);
|
||||
@@ -70,6 +73,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
|
||||
const addVisible = loginUser?.is_admin || owner == loginUid;
|
||||
console.log("channel message list", msgIds);
|
||||
const readIndex = footprint.readChannels[cid];
|
||||
const pinCount = data?.pinned_messages?.length || 0;
|
||||
return (
|
||||
<>
|
||||
{addMemberModalVisible && (
|
||||
@@ -93,16 +97,40 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
|
||||
<img src={headphoneIcon} alt="opt icon" />
|
||||
</Tooltip>
|
||||
</li>
|
||||
<li className="tool">
|
||||
{/* <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> */}
|
||||
<Tooltip
|
||||
tip="Pin"
|
||||
placement="left"
|
||||
disabled={toolVisible == "pin"}
|
||||
>
|
||||
<Tippy
|
||||
onShow={() => {
|
||||
setToolVisible("pin");
|
||||
}}
|
||||
onHide={() => {
|
||||
setToolVisible("");
|
||||
}}
|
||||
delay={[0, 0]}
|
||||
duration={0}
|
||||
placement="left-start"
|
||||
popperOptions={{ strategy: "fixed" }}
|
||||
offset={[0, 80]}
|
||||
interactive
|
||||
trigger="click"
|
||||
content={<PinList id={cid} />}
|
||||
>
|
||||
<li
|
||||
className={`tool ${pinCount > 0 ? "badge" : ""}`}
|
||||
data-count={pinCount}
|
||||
>
|
||||
<img src={pinIcon} alt="opt icon" />
|
||||
</li>
|
||||
</Tippy>
|
||||
</Tooltip>
|
||||
<li className="tool" onClick={toggleMembersVisible}>
|
||||
<Tooltip tip="Channel Members" placement="left">
|
||||
<img src={peopleIcon} alt="opt icon" />
|
||||
|
||||
@@ -65,7 +65,28 @@ const Styled = styled.article`
|
||||
.tools {
|
||||
gap: 24px;
|
||||
.tool {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&.badge:after {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
content: attr(data-count);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: #22ccee;
|
||||
color: #fff;
|
||||
font-weight: 900;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.apps {
|
||||
|
||||
Reference in New Issue
Block a user