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

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

View file

@ -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} />

View file

@ -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}
/>

View file

@ -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);