From 0f2b6b6b44b731479afb28bbc3483fe9153d881d Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Fri, 2 Jul 2021 16:51:06 +0200
Subject: [PATCH] Fix: Message copy brackets and icon changes
---
external/lang | 2 +-
src/components/common/messaging/Message.tsx | 4 +-
.../common/messaging/MessageBase.tsx | 42 +++++++++++++------
.../common/messaging/MessageBox.tsx | 3 +-
src/components/common/user/UserShort.tsx | 4 +-
.../navigation/BottomNavigation.tsx | 6 +--
.../navigation/left/HomeSidebar.tsx | 4 +-
src/components/ui/Modal.tsx | 2 -
src/pages/channels/ChannelHeader.tsx | 4 +-
src/pages/friends/Friend.module.scss | 20 ++++++---
src/pages/friends/Friends.tsx | 34 +++++++++++----
11 files changed, 83 insertions(+), 42 deletions(-)
diff --git a/external/lang b/external/lang
index e200511..dad0038 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit e200511dcb2c655e6ee89580fee9ef96c9f1f387
+Subproject commit dad00381aaaafc1ab829816dffc31f0f37ee56a9
diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx
index 8c27c51..46edea7 100644
--- a/src/components/common/messaging/Message.tsx
+++ b/src/components/common/messaging/Message.tsx
@@ -55,9 +55,7 @@ function Message({ attachContext, message, contrast, content: replacement, head:
</MessageInfo>
<MessageContent>
{ head && <span className="detail">
- <span className="author">
- <Username user={user} onContextMenu={userContext} onClick={openProfile} />
- </span>
+ <Username className="author" user={user} onContextMenu={userContext} onClick={openProfile} />
<MessageDetail message={message} position="top" />
</span> }
{ replacement ?? <Markdown content={content} /> }
diff --git a/src/components/common/messaging/MessageBase.tsx b/src/components/common/messaging/MessageBase.tsx
index de70edc..cd9d4b8 100644
--- a/src/components/common/messaging/MessageBase.tsx
+++ b/src/components/common/messaging/MessageBase.tsx
@@ -61,6 +61,7 @@ export default styled.div<BaseMessageProps>`
.author {
cursor: pointer;
+ font-weight: 600 !important;
&:hover {
text-decoration: underline;
@@ -68,9 +69,6 @@ export default styled.div<BaseMessageProps>`
}
.copy {
- width: 0;
- height: 0;
- opacity: 0;
display: block;
overflow: hidden;
}
@@ -92,13 +90,23 @@ export const MessageInfo = styled.div`
flex-direction: row;
justify-content: center;
- ::selection {
- background-color: transparent;
- color: var(--tertiary-foreground);
+ .copyBracket {
+ opacity: 0;
+ position: absolute;
+ }
+
+ .copyTime {
+ opacity: 0;
+ position: absolute;
}
svg {
+ user-select: none;
cursor: pointer;
+
+ &:active {
+ transform: translateY(1px);
+ }
}
time {
@@ -106,11 +114,19 @@ export const MessageInfo = styled.div`
}
time, .edited {
+ margin-top: 1px;
cursor: default;
display: inline;
font-size: 10px;
color: var(--tertiary-foreground);
}
+
+ time, .edited > div {
+ &::selection {
+ background-color: transparent;
+ color: var(--tertiary-foreground);
+ }
+ }
`;
export const MessageContent = styled.div`
@@ -118,7 +134,7 @@ export const MessageContent = styled.div`
flex-grow: 1;
display: flex;
overflow: hidden;
- font-size: 0.875rem;
+ font-size: .875rem;
flex-direction: column;
justify-content: center;
`;
@@ -135,9 +151,11 @@ export function MessageDetail({ message, position }: { message: MessageObject, p
if (message.edited) {
return (
<>
- <span className="copy">
- [<time>{dayjs(decodeTime(message._id)).format("H:mm")}</time>]
- </span>
+ <time className="copyTime">
+ <i className="copyBracket">[</i>
+ {dayjs(decodeTime(message._id)).format("H:mm")}
+ <i className="copyBracket">]</i>
+ </time>
<span className="edited">
<Tooltip content={dayjs(message.edited).format("LLLL")}>
<Text id="app.main.channel.edited" />
@@ -149,9 +167,9 @@ export function MessageDetail({ message, position }: { message: MessageObject, p
return (
<>
<time>
- <i className="copy">[</i>
+ <i className="copyBracket">[</i>
{ dayjs(decodeTime(message._id)).format("H:mm") }
- <i className="copy">]</i>
+ <i className="copyBracket">]</i>
</time>
</>
)
diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index 19ab5ce..b035bfa 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -5,7 +5,8 @@ import { Channel } from "revolt.js";
import styled from "styled-components";
import { defer } from "../../../lib/defer";
import IconButton from "../../ui/IconButton";
-import { Send, X } from '@styled-icons/boxicons-regular';
+import { X } from '@styled-icons/boxicons-regular';
+import { Send } from '@styled-icons/boxicons-solid';
import { debounce } from "../../../lib/debounce";
import Axios, { CancelTokenSource } from "axios";
import { useTranslation } from "../../../lib/i18n";
diff --git a/src/components/common/user/UserShort.tsx b/src/components/common/user/UserShort.tsx
index 69a15fd..f0cec4e 100644
--- a/src/components/common/user/UserShort.tsx
+++ b/src/components/common/user/UserShort.tsx
@@ -3,7 +3,7 @@ import UserIcon from "./UserIcon";
import { Text } from "preact-i18n";
export function Username({ user, ...otherProps }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
- return <b {...otherProps}>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</b>;
+ return <span {...otherProps}>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</span>;
}
export default function UserShort({ user, size }: { user?: User, size?: number }) {
@@ -11,4 +11,4 @@ export default function UserShort({ user, size }: { user?: User, size?: number }
<UserIcon size={size ?? 24} target={user} />
<Username user={user} />
</>;
-}
+}
\ No newline at end of file
diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx
index 675659c..00bd0ab 100644
--- a/src/components/navigation/BottomNavigation.tsx
+++ b/src/components/navigation/BottomNavigation.tsx
@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
import { useSelf } from "../../context/revoltjs/hooks";
import { useHistory, useLocation } from "react-router";
import ConditionalLink from "../../lib/ConditionalLink";
-import { Message, Group } from "@styled-icons/boxicons-regular";
+import { Message, Group } from "@styled-icons/boxicons-solid";
const NavigationBase = styled.div`
z-index: 100;
@@ -50,13 +50,13 @@ export default function BottomNavigation() {
}
}
}}>
- <Message size={26} />
+ <Message size={24} />
</IconButton>
</Button>
<Button active={friendsActive}>
<ConditionalLink active={friendsActive} to="/friends">
<IconButton>
- <Group size={26} />
+ <Group size={25} />
</IconButton>
</ConditionalLink>
</Button>
diff --git a/src/components/navigation/left/HomeSidebar.tsx b/src/components/navigation/left/HomeSidebar.tsx
index 6cfd9a4..edde0aa 100644
--- a/src/components/navigation/left/HomeSidebar.tsx
+++ b/src/components/navigation/left/HomeSidebar.tsx
@@ -1,6 +1,6 @@
import { Localizer, Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks";
-import { Home, UserDetail, Wrench, Save } from "@styled-icons/boxicons-solid";
+import { Home, UserDetail, Wrench, Notepad } from "@styled-icons/boxicons-solid";
import Category from '../../ui/Category';
import PaintCounter from "../../../lib/PaintCounter";
@@ -93,7 +93,7 @@ function HomeSidebar(props: Props) {
)}
<ConditionalLink active={obj?.channel_type === "SavedMessages"} to="/open/saved">
<ButtonItem active={obj?.channel_type === "SavedMessages"}>
- <Save size={20} />
+ <Notepad size={20} />
<span><Text id="app.navigation.tabs.saved" /></span>
</ButtonItem>
</ConditionalLink>
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 4fa3d7c..2faecde 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -42,8 +42,6 @@ const ModalContainer = styled.div`
border-radius: 8px;
max-width: calc(100vw - 20px);
- inline-size: min(100%, 500px);
-
animation-name: ${zoomIn};
animation-duration: 0.25s;
animation-timing-function: cubic-bezier(.3,.3,.18,1.1);
diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx
index d4a9121..a67204f 100644
--- a/src/pages/channels/ChannelHeader.tsx
+++ b/src/pages/channels/ChannelHeader.tsx
@@ -8,7 +8,7 @@ import { getChannelName } from "../../context/revoltjs/util";
import UserStatus from "../../components/common/user/UserStatus";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import { At, Hash } from "@styled-icons/boxicons-regular";
-import { Save, Group } from "@styled-icons/boxicons-solid";
+import { Notepad, Group } from "@styled-icons/boxicons-solid";
import { useStatusColour } from "../../components/common/user/UserIcon";
import { useIntermediate } from "../../context/intermediate/Intermediate";
@@ -62,7 +62,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
let icon, recipient;
switch (channel.channel_type) {
case "SavedMessages":
- icon = <Save size={24} />;
+ icon = <Notepad size={24} />;
break;
case "DirectMessage":
icon = <At size={24} />;
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index 3021e9a..de5fee4 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -6,12 +6,16 @@
.overline {
display: flex;
position: sticky;
+ align-items: center;
top: 0;
background: var(--primary-background);
- padding: 8px 0;
+ padding: 5px 0;
z-index: 10;
+ cursor: pointer;
-
+ svg {
+ margin-inline-end: 4px;
+ }
}
&[data-empty="true"] {
@@ -90,9 +94,16 @@
}
}
+.divider {
+ width: 1px;
+ height: 24px;
+ margin: 0 8px;
+ background: var(--primary-background);
+}
+
@media only screen and (max-width: 768px) {
.list {
- padding: 0 12px 12px 12px;
+ padding: 0 8px 8px 8px;
}
.call {
@@ -100,10 +111,9 @@
}
}
-
//! FIXME: Move this to the Header component, do this:
// 1. Check if header has topic, if yes, flex-grow: 0 on the title.
// 2. If header has no topic (example: friends page), flex-grow 1 on the header title.
.title {
flex-grow: 1;
-}
+}
\ No newline at end of file
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index b144030..689419a 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -1,8 +1,7 @@
-import styles from "./Friend.module.scss";
-import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid";
-
import { Friend } from "./Friend";
import { Text } from "preact-i18n";
+import styles from "./Friend.module.scss";
+import Tooltip from "../../components/common/Tooltip";
import Header from "../../components/ui/Header";
import Overline from "../../components/ui/Overline";
import IconButton from "../../components/ui/IconButton";
@@ -10,6 +9,8 @@ import { useUsers } from "../../context/revoltjs/hooks";
import { User, Users } from "revolt.js/dist/api/objects";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { ChevronDown, ChevronRight } from "@styled-icons/boxicons-regular";
+import { UserDetail, Conversation, UserPlus, TennisBall } from "@styled-icons/boxicons-solid";
export default function Friends() {
const { openScreen } = useIntermediate();
@@ -39,12 +40,24 @@ export default function Friends() {
<div className={styles.title}>
<Text id="app.navigation.tabs.friends" />
</div>
- <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
- <Conversation size={24} />
- </IconButton>
- <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
- <UserPlus size={24} />
- </IconButton>
+ <Tooltip content={"Create Group"} placement="bottom">
+ <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
+ <Conversation size={24} />
+ </IconButton>
+ </Tooltip>
+ <Tooltip content={"Add Friend"} placement="bottom">
+ <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
+ <UserPlus size={24} />
+ </IconButton>
+ </Tooltip>
+ {/*
+ <div className={styles.divider} />
+ <Tooltip content={"Friend Activity"} placement="bottom">
+ <IconButton>
+ <TennisBall size={24} />
+ </IconButton>
+ </Tooltip>
+ */}
</Header>
<div
className={styles.list}
@@ -60,6 +73,7 @@ export default function Friends() {
)}
{pending.length > 0 && (
<Overline className={styles.overline} type="subtle">
+ <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
<Text id="app.special.friends.pending" /> —{" "}
{pending.length}
</Overline>
@@ -69,6 +83,7 @@ export default function Friends() {
))}
{online.length > 0 && (
<Overline className={styles.overline} type="subtle">
+ <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
<Text id="app.status.online" /> —{" "}
{online.length}
</Overline>
@@ -78,6 +93,7 @@ export default function Friends() {
))}
{offline.length > 0 && (
<Overline className={styles.overline} type="subtle">
+ <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
<Text id="app.status.offline" /> —{" "}
{offline.length}
</Overline>
--
GitLab