cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-19 17:47:18 -04:00
Code Issues Projects Releases Packages Wiki Activity

Server Sidebar: Add home icon hover.

Browse source 
Home Sidebar: Remove top bar.
This commit is contained in:
Paul 2021-07-09 22:15:36 +01:00
parent f403875ae6
commit 54185b5839
9 changed files with 79 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

@ -1 +1 @@
Subproject commit 2054052c791ff2396dcbde68ae257fa13a93ab6c
Subproject commit de2b94c8d8615b732cbbec3679041e73fd3c7640

41
src/components/common/user/UserHover.tsx Normal file
View file

@ -0,0 +1,41 @@
import { Children } from "../../../types/Preact";
import { Username } from "./UserShort";
import styled from "styled-components";
import UserStatus from "./UserStatus";
import Tooltip from "../Tooltip";
import { User } from "revolt.js";
interface Props {
user?: User,
children: Children
}
const Base = styled.div`
display: flex;
flex-direction: column;
.username {
font-weight: 600;
}
.status {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
`;
export default function UserHover({ user, children }: Props) {
return (
<Tooltip placement="right-end" content={
<Base>
<Username className="username" user={user} />
<span className="status">
<UserStatus user={user} />
</span>
</Base>
}>
{ children }
</Tooltip>
)
}

4
src/components/common/user/UserStatus.tsx
View file

@ -5,12 +5,12 @@ import { Text } from "preact-i18n";
import Tooltip from "../Tooltip";
interface Props {
user: User;
user?: User;
tooltip?: boolean;
}
export default function UserStatus({ user, tooltip }: Props) {
if (user.online) {
if (user?.online) {
if (user.status?.text) {
if (tooltip) {
return (

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

@ -27,7 +27,6 @@ import {
useUsers,
} from "../../../context/revoltjs/hooks";
import UserHeader from "../../common/user/UserHeader";
import Category from "../../ui/Category";
import placeholderSVG from "../items/placeholder.svg";
import { mapChannelWithUnread, useUnreads } from "./common";
@ -81,7 +80,6 @@ function HomeSidebar(props: Props) {
return (
<GenericSidebarBase padding>
<UserHeader user={client.user!} />
<ConnectionStatus />
<GenericSidebarList>
{!isTouchscreenDevice && (

9
src/components/navigation/left/ServerListSidebar.tsx
View file

@ -29,6 +29,7 @@ import LineDivider from "../../ui/LineDivider";
import { mapChannelWithUnread } from "./common";
import { Children } from "../../../types/Preact";
import UserHover from "../../common/user/UserHover";
function Icon({
children,
@ -241,9 +242,11 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
onClick={() =>
homeActive && openContextMenu("Status")
}>
<Icon size={42} unread={homeUnread}>
<UserIcon target={self} size={32} status />
</Icon>
<UserHover user={self}>
<Icon size={42} unread={homeUnread}>
<UserIcon target={self} size={32} status />
</Icon>
</UserHover>
</div>
<span />
</ServerEntry>

31
src/lib/ContextMenus.tsx
View file

@ -10,6 +10,7 @@ import {
LeftArrowAlt,
Trash,
} from "@styled-icons/boxicons-regular";
import Tooltip from "../components/common/Tooltip";
import { Cog, UserVoice } from "@styled-icons/boxicons-solid";
import { useHistory } from "react-router-dom";
import {
@ -875,8 +876,14 @@ function ContextMenus(props: Props) {
<>
<div className="header">
<div className="main">
<div>@{client.user!.username}</div>
<div className="status">
<div className="username"
onClick={() => writeClipboard(client.user!.username)}>
<Tooltip content={<Text id="app.special.copy_username" />}>
@{client.user!.username}
</Tooltip>
</div>
<div className="status"
onClick={() => contextClick({ action: 'set_status' })}>
<UserStatus user={client.user!} />
</div>
</div>
@ -924,23 +931,21 @@ function ContextMenus(props: Props) {
<Text id={`app.status.invisible`} />
</MenuItem>
<LineDivider />
<MenuItem
data={{ action: "set_status" }}
disabled={!isOnline}>
<UserVoice size={18} />
<Text
id={`app.context_menu.custom_status`}
/>
{client.user!.status?.text && (
<MenuItem
data={{ action: "set_status" }}
disabled={!isOnline}>
<UserVoice size={18} />
<Text
id={`app.context_menu.custom_status`}
/>
{client.user!.status?.text && (
<IconButton>
<MenuItem data={{ action: "clear_status" }}>
<Trash size={18} />
</MenuItem>
</IconButton>
)}
</MenuItem>
</MenuItem>
</>
)}
</ContextMenuWithData>

12
src/redux/reducers/index.ts
View file

@ -46,15 +46,3 @@ export type Action =
| NotificationsAction
| SectionToggleAction
| { type: "__INIT"; state: State };
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function filter(obj: any, keys: string[]) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const newObj: any = {};
for (const key of keys) {
const v = obj[key];
if (v) newObj[key] = v;
}
return newObj;
}

5
src/redux/reducers/settings.ts
View file

@ -2,7 +2,6 @@ import type { Theme, ThemeOptions } from "../../context/Theme";
import { setEmojiPack } from "../../components/common/Emoji";
import { filter } from ".";
import type { Sounds } from "../../assets/sounds/Audio";
import type { SyncUpdateAction } from "./sync";
@ -67,7 +66,7 @@ export function settings(
return {
...state,
theme: {
...filter(state.theme, ["custom", "preset", "ligatures"]),
...state.theme,
...action.theme,
},
};
@ -94,7 +93,7 @@ export function settings(
return {
...state,
appearance: {
...filter(state.appearance, ["emojiPack"]),
...state.appearance,
...action.options,
},
};

10
src/styles/_context-menu.scss
View file

@ -1,5 +1,5 @@
.preact-context-menu .context-menu {
z-index: 10000;
z-index: 5000;
min-width: 190px;
padding: 6px 8px;
user-select: none;
@ -48,9 +48,17 @@
flex-grow: 1;
display: flex;
flex-direction: column;
.username {
> div {
cursor: pointer;
width: fit-content;
}
}
}
.status {
cursor: pointer;
max-width: 132px;
font-size: .625rem;
color: var(--secondary-foreground);