feat(messaging): show last read message divider

This commit is contained in:
Paul 2021-12-24 14:32:04 +00:00
parent 46c652d54c
commit 3d723574f4
5 changed files with 25 additions and 9 deletions

View file

@ -14,7 +14,7 @@ const Base = styled.div<{ unread?: boolean }>`
margin-top: -2px; margin-top: -2px;
font-size: 0.6875rem; font-size: 0.6875rem;
line-height: 0.6875rem; line-height: 0.6875rem;
padding: 2px 0 2px 0; padding-inline-start: 5px;
padding-inline-end: 5px; padding-inline-end: 5px;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
background: var(--primary-background); background: var(--primary-background);
@ -30,7 +30,8 @@ const Base = styled.div<{ unread?: boolean }>`
const Unread = styled.div` const Unread = styled.div`
background: var(--accent); background: var(--accent);
color: white; color: white;
padding: 5px 8px; font-size: 7px;
padding: 2px 6px;
border-radius: 60px; border-radius: 60px;
font-weight: 600; font-weight: 600;
`; `;

View file

@ -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 // TODO: Switch to color-parse
// Try parse hex value. // Try parse hex value.
hex = hex.replace("#", ""); hex = hex.replace(/#/g, "");
const r = parseInt(hex.substr(0, 2), 16) / 255; const r = parseInt(hex.substr(0, 2), 16) / 255;
const g = parseInt(hex.substr(2, 2), 16) / 255; const g = parseInt(hex.substr(2, 2), 16) / 255;
const b = parseInt(hex.substr(4, 2), 16) / 255; const b = parseInt(hex.substr(4, 2), 16) / 255;

View file

@ -21,7 +21,7 @@ import MessageBox from "../../components/common/messaging/MessageBox";
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom"; import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
import NewMessages from "../../components/common/messaging/bars/NewMessages"; import NewMessages from "../../components/common/messaging/bars/NewMessages";
import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator"; 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 RightSidebar from "../../components/navigation/RightSidebar";
import ChannelHeader from "./ChannelHeader"; import ChannelHeader from "./ChannelHeader";
@ -130,7 +130,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
<ChannelContent> <ChannelContent>
<VoiceHeader id={channel._id} /> <VoiceHeader id={channel._id} />
<NewMessages channel={channel} last_id={last_id} /> <NewMessages channel={channel} last_id={last_id} />
<MessageArea channel={channel} /> <MessageArea channel={channel} last_id={last_id} />
<TypingIndicator channel={channel} /> <TypingIndicator channel={channel} />
<JumpToBottom channel={channel} /> <JumpToBottom channel={channel} />
<MessageBox channel={channel} /> <MessageBox channel={channel} />

View file

@ -51,13 +51,14 @@ const Area = styled.div`
`; `;
interface Props { interface Props {
last_id?: string;
channel: Channel; channel: Channel;
} }
export const MessageAreaWidthContext = createContext(0); export const MessageAreaWidthContext = createContext(0);
export const MESSAGE_AREA_PADDING = 82; export const MESSAGE_AREA_PADDING = 82;
export const MessageArea = observer(({ channel }: Props) => { export const MessageArea = observer(({ last_id, channel }: Props) => {
const history = useHistory(); const history = useHistory();
const status = useContext(StatusContext); const status = useContext(StatusContext);
const { focusTaken } = useContext(IntermediateContext); const { focusTaken } = useContext(IntermediateContext);
@ -323,6 +324,7 @@ export const MessageArea = observer(({ channel }: Props) => {
)} )}
{renderer.state === "RENDER" && ( {renderer.state === "RENDER" && (
<MessageRenderer <MessageRenderer
last_id={last_id}
renderer={renderer} renderer={renderer}
highlight={highlight} highlight={highlight}
/> />

View file

@ -30,6 +30,7 @@ import ConversationStart from "./ConversationStart";
import MessageEditor from "./MessageEditor"; import MessageEditor from "./MessageEditor";
interface Props { interface Props {
last_id?: string;
highlight?: string; highlight?: string;
renderer: ChannelRenderer; 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 client = useClient();
const userId = client.user!._id; const userId = client.user!._id;
const queue = useApplicationState().queue; const queue = useApplicationState().queue;
@ -94,6 +95,7 @@ export default observer(({ renderer, highlight }: Props) => {
} }
let head = true; let head = true;
let divided = false;
function compare( function compare(
current: string, current: string,
curAuthor: string, curAuthor: string,
@ -107,16 +109,25 @@ export default observer(({ renderer, highlight }: Props) => {
btime = decodeTime(previous), btime = decodeTime(previous),
bdate = new Date(btime); bdate = new Date(btime);
let unread = false;
if (!divided && last_id && previous >= last_id) {
unread = true;
divided = true;
}
head = false;
if ( if (
unread ||
adate.getFullYear() !== bdate.getFullYear() || adate.getFullYear() !== bdate.getFullYear() ||
adate.getMonth() !== bdate.getMonth() || adate.getMonth() !== bdate.getMonth() ||
adate.getDate() !== bdate.getDate() adate.getDate() !== bdate.getDate()
) { ) {
render.push(<DateDivider date={adate} />); render.push(<DateDivider date={adate} unread={unread} />);
head = true; head = true;
} }
head = head =
head ||
curAuthor !== prevAuthor || curAuthor !== prevAuthor ||
Math.abs(btime - atime) >= 420000 || Math.abs(btime - atime) >= 420000 ||
!isEqual(currentMasq, previousMasq); !isEqual(currentMasq, previousMasq);