cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 06:32:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fix: Message copy brackets and icon changes

Browse source
This commit is contained in:
nizune 2021-07-02 16:51:06 +02:00
parent a569f41d1c
commit 0f2b6b6b44
11 changed files with 83 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

@ -1 +1 @@
Subproject commit e200511dcb2c655e6ee89580fee9ef96c9f1f387
Subproject commit dad00381aaaafc1ab829816dffc31f0f37ee56a9

4
src/components/common/messaging/Message.tsx
View file

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

42
src/components/common/messaging/MessageBase.tsx
View file

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

3
src/components/common/messaging/MessageBox.tsx
View file

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

2
src/components/common/user/UserShort.tsx
View file

@ -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 }) {

6
src/components/navigation/BottomNavigation.tsx
View file

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

4
src/components/navigation/left/HomeSidebar.tsx
View file

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

2
src/components/ui/Modal.tsx
View file

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

4
src/pages/channels/ChannelHeader.tsx
View file

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

18
src/pages/friends/Friend.module.scss
View file

@ -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,7 +111,6 @@
}
}
//! 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.

22
src/pages/friends/Friends.tsx
View file

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