mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-06 23:45:52 -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;
|
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;
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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} />
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue