mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-25 16:40:58 -05:00
feat(messaging): show last read message divider
This commit is contained in:
parent
46c652d54c
commit
3d723574f4
5 changed files with 25 additions and 9 deletions
|
@ -14,7 +14,7 @@ const Base = styled.div<{ unread?: boolean }>`
|
|||
margin-top: -2px;
|
||||
font-size: 0.6875rem;
|
||||
line-height: 0.6875rem;
|
||||
padding: 2px 0 2px 0;
|
||||
padding-inline-start: 5px;
|
||||
padding-inline-end: 5px;
|
||||
color: var(--tertiary-foreground);
|
||||
background: var(--primary-background);
|
||||
|
@ -30,7 +30,8 @@ const Base = styled.div<{ unread?: boolean }>`
|
|||
const Unread = styled.div`
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
padding: 5px 8px;
|
||||
font-size: 7px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 60px;
|
||||
font-weight: 600;
|
||||
`;
|
||||
|
|
|
@ -201,10 +201,12 @@ export default class STheme {
|
|||
}
|
||||
}
|
||||
|
||||
function getContrastingColour(hex: string, fallback = "black"): string {
|
||||
function getContrastingColour(hex: string, fallback?: string): string {
|
||||
if (typeof hex !== "string") return "black";
|
||||
|
||||
// TODO: Switch to color-parse
|
||||
// Try parse hex value.
|
||||
hex = hex.replace("#", "");
|
||||
hex = hex.replace(/#/g, "");
|
||||
const r = parseInt(hex.substr(0, 2), 16) / 255;
|
||||
const g = parseInt(hex.substr(2, 2), 16) / 255;
|
||||
const b = parseInt(hex.substr(4, 2), 16) / 255;
|
||||
|
|
|
@ -21,7 +21,7 @@ import MessageBox from "../../components/common/messaging/MessageBox";
|
|||
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
|
||||
import NewMessages from "../../components/common/messaging/bars/NewMessages";
|
||||
import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
|
||||
import Header, { PageHeader } from "../../components/ui/Header";
|
||||
import { PageHeader } from "../../components/ui/Header";
|
||||
|
||||
import RightSidebar from "../../components/navigation/RightSidebar";
|
||||
import ChannelHeader from "./ChannelHeader";
|
||||
|
@ -130,7 +130,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
|
|||
<ChannelContent>
|
||||
<VoiceHeader id={channel._id} />
|
||||
<NewMessages channel={channel} last_id={last_id} />
|
||||
<MessageArea channel={channel} />
|
||||
<MessageArea channel={channel} last_id={last_id} />
|
||||
<TypingIndicator channel={channel} />
|
||||
<JumpToBottom channel={channel} />
|
||||
<MessageBox channel={channel} />
|
||||
|
|
|
@ -51,13 +51,14 @@ const Area = styled.div`
|
|||
`;
|
||||
|
||||
interface Props {
|
||||
last_id?: string;
|
||||
channel: Channel;
|
||||
}
|
||||
|
||||
export const MessageAreaWidthContext = createContext(0);
|
||||
export const MESSAGE_AREA_PADDING = 82;
|
||||
|
||||
export const MessageArea = observer(({ channel }: Props) => {
|
||||
export const MessageArea = observer(({ last_id, channel }: Props) => {
|
||||
const history = useHistory();
|
||||
const status = useContext(StatusContext);
|
||||
const { focusTaken } = useContext(IntermediateContext);
|
||||
|
@ -323,6 +324,7 @@ export const MessageArea = observer(({ channel }: Props) => {
|
|||
)}
|
||||
{renderer.state === "RENDER" && (
|
||||
<MessageRenderer
|
||||
last_id={last_id}
|
||||
renderer={renderer}
|
||||
highlight={highlight}
|
||||
/>
|
||||
|
|
|
@ -30,6 +30,7 @@ import ConversationStart from "./ConversationStart";
|
|||
import MessageEditor from "./MessageEditor";
|
||||
|
||||
interface Props {
|
||||
last_id?: string;
|
||||
highlight?: string;
|
||||
renderer: ChannelRenderer;
|
||||
}
|
||||
|
@ -45,7 +46,7 @@ const BlockedMessage = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
export default observer(({ renderer, highlight }: Props) => {
|
||||
export default observer(({ last_id, renderer, highlight }: Props) => {
|
||||
const client = useClient();
|
||||
const userId = client.user!._id;
|
||||
const queue = useApplicationState().queue;
|
||||
|
@ -94,6 +95,7 @@ export default observer(({ renderer, highlight }: Props) => {
|
|||
}
|
||||
|
||||
let head = true;
|
||||
let divided = false;
|
||||
function compare(
|
||||
current: string,
|
||||
curAuthor: string,
|
||||
|
@ -107,16 +109,25 @@ export default observer(({ renderer, highlight }: Props) => {
|
|||
btime = decodeTime(previous),
|
||||
bdate = new Date(btime);
|
||||
|
||||
let unread = false;
|
||||
if (!divided && last_id && previous >= last_id) {
|
||||
unread = true;
|
||||
divided = true;
|
||||
}
|
||||
|
||||
head = false;
|
||||
if (
|
||||
unread ||
|
||||
adate.getFullYear() !== bdate.getFullYear() ||
|
||||
adate.getMonth() !== bdate.getMonth() ||
|
||||
adate.getDate() !== bdate.getDate()
|
||||
) {
|
||||
render.push(<DateDivider date={adate} />);
|
||||
render.push(<DateDivider date={adate} unread={unread} />);
|
||||
head = true;
|
||||
}
|
||||
|
||||
head =
|
||||
head ||
|
||||
curAuthor !== prevAuthor ||
|
||||
Math.abs(btime - atime) >= 420000 ||
|
||||
!isEqual(currentMasq, previousMasq);
|
||||
|
|
Loading…
Reference in a new issue