From 4d9d74224fb0f90d4c08fb4dfe829202985639b1 Mon Sep 17 00:00:00 2001 From: nizune <9-nizune@users.noreply.gitlab.insrt.uk> Date: Fri, 2 Jul 2021 10:38:43 +0200 Subject: [PATCH] Update: Work on new Friends tab + minor fixes --- .../navigation/BottomNavigation.tsx | 4 +- .../navigation/items/ButtonItem.tsx | 9 +- .../navigation/items/Item.module.scss | 4 +- .../navigation/left/ServerListSidebar.tsx | 4 +- src/components/ui/Header.tsx | 9 +- src/components/ui/Modal.tsx | 2 + src/pages/channels/ChannelHeader.tsx | 4 + src/pages/friends/Friend.module.scss | 29 ++++- src/pages/friends/Friend.tsx | 13 ++- src/pages/settings/server/Panes.module.scss | 14 +++ src/pages/settings/server/Roles.tsx | 101 ++++++++++-------- src/styles/_context-menu.scss | 2 +- 12 files changed, 128 insertions(+), 67 deletions(-) diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx index c88fa2d..7faa1a0 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 { MessageRounded, Group } from "@styled-icons/boxicons-regular"; +import { Message, Group } from "@styled-icons/boxicons-regular"; const NavigationBase = styled.div` z-index: 10; @@ -50,7 +50,7 @@ export default function BottomNavigation() { } } }}> - <MessageRounded size={26} /> + <Message size={26} /> </IconButton> </Button> <Button active={friendsActive}> diff --git a/src/components/navigation/items/ButtonItem.tsx b/src/components/navigation/items/ButtonItem.tsx index 6f82c5d..139ec67 100644 --- a/src/components/navigation/items/ButtonItem.tsx +++ b/src/components/navigation/items/ButtonItem.tsx @@ -41,9 +41,7 @@ export function UserButton({ active, alert, alertCount, user, context, channel } unread: alert, contextualChannel: context?._id })}> - <div className={styles.avatar}> - <UserIcon target={user} size={32} status /> - </div> + <UserIcon className={styles.avatar} target={user} size={32} status /> <div className={styles.name}> <div>{user.username}</div> { @@ -99,11 +97,10 @@ export function ChannelButton({ active, alert, alertCount, channel, user, compac return ( <div data-active={active} data-alert={typeof alert === 'string'} + aria-label={{}} /*TOFIX: ADD ARIA LABEL*/ className={classNames(styles.item, { [styles.compact]: compact })} onContextMenu={attachContextMenu('Menu', { channel: channel._id, unread: typeof channel.unread !== 'undefined' })}> - <div className={styles.avatar}> - <ChannelIcon target={channel} size={compact ? 24 : 32} /> - </div> + <ChannelIcon className={styles.avatar} target={channel} size={compact ? 24 : 32} /> <div className={styles.name}> <div>{channel.name}</div> { channel.channel_type === 'Group' && diff --git a/src/components/navigation/items/Item.module.scss b/src/components/navigation/items/Item.module.scss index fb855f0..0cccb59 100644 --- a/src/components/navigation/items/Item.module.scss +++ b/src/components/navigation/items/Item.module.scss @@ -1,5 +1,5 @@ .item { - height: 48px; + height: 42px; display: flex; padding: 0 8px; user-select: none; @@ -31,7 +31,7 @@ &.user { opacity: 0.4; cursor: pointer; - transition: .15s ease opacity; + transition: .1s ease-in-out opacity; &[data-online="true"], &:hover { diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index cb1c7d1..7607b20 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/src/components/navigation/left/ServerListSidebar.tsx @@ -111,7 +111,7 @@ const ServerEntry = styled.div<{ active: boolean, home?: boolean }>` height: 46px; ${ props => props.active && css` - background: var(--sidebar-active); + background-color: var(--sidebar-active); &::before, &::after { // outline: 1px solid blue; @@ -128,7 +128,7 @@ const ServerEntry = styled.div<{ active: boolean, home?: boolean }>` margin-left: -25px; z-index: -1; - background: var(--background); + background-color: var(--background); border-bottom-right-radius: 32px; box-shadow: 0 32px 0 0 var(--sidebar-active); diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index 2b2c0d3..05b941a 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -11,10 +11,13 @@ export default styled.div<Props>` font-weight: 600; user-select: none; + display: flex; + align-items: center; + gap: 10px; flex: 0 auto; display: flex; - padding: 20px; + padding: 0 20px; flex-shrink: 0; align-items: center; @@ -22,6 +25,10 @@ export default styled.div<Props>` background-size: cover !important; background-position: center !important; + svg { + flex-shrink: 0; + } + ${ props => props.background && css` height: 120px; align-items: flex-end; diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx index 2faecde..4fa3d7c 100644 --- a/src/components/ui/Modal.tsx +++ b/src/components/ui/Modal.tsx @@ -42,6 +42,8 @@ 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 6834c18..6508cb6 100644 --- a/src/pages/channels/ChannelHeader.tsx +++ b/src/pages/channels/ChannelHeader.tsx @@ -22,6 +22,10 @@ const Info = styled.div` overflow: hidden; white-space: nowrap; + display: flex; + gap: 8px; + align-items: baseline; + * { display: inline-block; } diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss index b9e90c0..5ac68fa 100644 --- a/src/pages/friends/Friend.module.scss +++ b/src/pages/friends/Friend.module.scss @@ -3,6 +3,10 @@ user-select: none; overflow-y: scroll; + .overline { + display: flex; + } + &[data-empty="true"] { img { height: 120px; @@ -41,14 +45,21 @@ display: flex; flex-direction: column; - justify-content: center; - white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; + overflow: hidden; + + span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } .subtext { font-size: 12px; color: var(--tertiary-foreground); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } @@ -57,8 +68,16 @@ gap: 12px; > div { - height: 32px; - width: 32px; + height: 40px; + width: 40px; + + &:nth-child(1):hover { + background: var(--status-online); //TOFIX: change to normal green color + } + + &:nth-child(3):hover { + background: var(--error); + } } } } diff --git a/src/pages/friends/Friend.tsx b/src/pages/friends/Friend.tsx index a33c342..6a6bbdc 100644 --- a/src/pages/friends/Friend.tsx +++ b/src/pages/friends/Friend.tsx @@ -3,7 +3,8 @@ import { Link } from "react-router-dom"; import styles from "./Friend.module.scss"; import { useContext } from "preact/hooks"; import { Children } from "../../types/Preact"; -import { X, Plus, Envelope } from "@styled-icons/boxicons-regular"; +import { X, Plus } from "@styled-icons/boxicons-regular"; +import { PhoneCall, Envelope } from "@styled-icons/boxicons-solid"; import IconButton from "../../components/ui/IconButton"; import { attachContextMenu } from "preact-context-menu"; import { User, Users } from "revolt.js/dist/api/objects"; @@ -27,12 +28,20 @@ export function Friend({ user }: Props) { if (user.relationship === Users.Relationship.Friend) { subtext = <UserStatus user={user} /> actions.push( + <> + <IconButton type="circle" + onClick={stopPropagation}> + <Link to={'/open/' + user._id}> + <PhoneCall size={20} /> + </Link> + </IconButton> <IconButton type="circle" onClick={stopPropagation}> <Link to={'/open/' + user._id}> <Envelope size={20} /> </Link> </IconButton> + </> ); } @@ -77,7 +86,7 @@ export function Friend({ user }: Props) { <div className={styles.friend} onClick={() => openScreen({ id: 'profile', user_id: user._id })} onContextMenu={attachContextMenu('Menu', { user: user._id })}> - <UserIcon target={user} size={32} status /> + <UserIcon target={user} size={38} status /> <div className={styles.name}> <span>@{user.username}</span> {subtext && ( diff --git a/src/pages/settings/server/Panes.module.scss b/src/pages/settings/server/Panes.module.scss index 91e4cb3..cbf8e5a 100644 --- a/src/pages/settings/server/Panes.module.scss +++ b/src/pages/settings/server/Panes.module.scss @@ -75,4 +75,18 @@ flex-direction: row; background: var(--secondary-background); } +} + +.roles { + .overview { + height: 85vh; //TOFIX change later + display: flex; + .list { + overflow-y: scroll; + } + + .permissions { + overflow-y: scroll; + } + } } \ No newline at end of file diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx index 5d530c1..2db9baf 100644 --- a/src/pages/settings/server/Roles.tsx +++ b/src/pages/settings/server/Roles.tsx @@ -1,4 +1,5 @@ import Tip from "../../../components/ui/Tip"; +import styles from './Panes.module.scss'; import Button from "../../../components/ui/Button"; import { Servers } from "revolt.js/dist/api/objects"; import InputBox from "../../../components/ui/InputBox"; @@ -6,6 +7,7 @@ import Checkbox from "../../../components/ui/Checkbox"; import { useContext, useEffect, useState } from "preact/hooks"; import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { ChannelPermission, ServerPermission } from "revolt.js/dist/api/permissions"; +import { Styleshare } from "@styled-icons/simple-icons"; interface Props { server: Servers.Server; @@ -42,56 +44,63 @@ export function Roles({ server }: Props) { const [ name, setName ] = useState(''); return ( - <div> + <div className={styles.roles}> <Tip warning>This section is under construction.</Tip> - <h2>select role</h2> - { selected } - { keys - .map(id => { - let role: Servers.Role = id === 'default' ? defaultRole : roles[id]; + <div className={styles.overview}> + <div className={styles.list}> + <h2>select role</h2> + { selected } + { keys + .map(id => { + let role: Servers.Role = id === 'default' ? defaultRole : roles[id]; - return ( - <Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}> - { role.name } - </Checkbox> - ) - }) - } - <Button disabled={selected === 'default'} error onClick={() => { - setSelected('default'); - client.servers.deleteRole(server._id, selected); - }}>delete role</Button><br/> - <InputBox placeholder="role name" value={name} onChange={e => setName(e.currentTarget.value)} /> - <Button contrast onClick={() => { - client.servers.createRole(server._id, name); - }}>create</Button> - <h2>serverm permmissions</h2> - { Object.keys(ServerPermission) - .map(perm => { - let value = ServerPermission[perm as keyof typeof ServerPermission]; + return ( + <Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}> + { role.name } + </Checkbox> + ) + }) + } + <Button disabled={selected === 'default'} error onClick={() => { + setSelected('default'); + client.servers.deleteRole(server._id, selected); + }}>delete role</Button><br/> + <InputBox placeholder="role name" value={name} onChange={e => setName(e.currentTarget.value)} /> + <Button contrast onClick={() => { + client.servers.createRole(server._id, name); + }}>create</Button> + </div> + <div className={styles.permissions}> + <h2>serverm permmissions</h2> + { Object.keys(ServerPermission) + .map(perm => { + let value = ServerPermission[perm as keyof typeof ServerPermission]; - return ( - <Checkbox checked={(p[0] & value) > 0} onChange={c => setPerm([ c ? (p[0] | value) : (p[0] ^ value), p[1] ])}> - { perm } - </Checkbox> - ) - }) - } - <h2>channel permmissions</h2> - { Object.keys(ChannelPermission) - .map(perm => { - let value = ChannelPermission[perm as keyof typeof ChannelPermission]; + return ( + <Checkbox checked={(p[0] & value) > 0} onChange={c => setPerm([ c ? (p[0] | value) : (p[0] ^ value), p[1] ])}> + { perm } + </Checkbox> + ) + }) + } + <h2>channel permmissions</h2> + { Object.keys(ChannelPermission) + .map(perm => { + let value = ChannelPermission[perm as keyof typeof ChannelPermission]; - return ( - <Checkbox checked={((p[1] >>> 0) & value) > 0} onChange={c => setPerm([ p[0], c ? (p[1] | value) : (p[1] ^ value) ])}> - { perm } - </Checkbox> - ) - }) - } - <Button contrast onClick={() => { - client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] }); - }}>click here to save permissions for role</Button> + return ( + <Checkbox checked={((p[1] >>> 0) & value) > 0} onChange={c => setPerm([ p[0], c ? (p[1] | value) : (p[1] ^ value) ])}> + { perm } + </Checkbox> + ) + }) + } + <Button contrast onClick={() => { + client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] }); + }}>click here to save permissions for role</Button> + </div> + </div> + </div> ); } diff --git a/src/styles/_context-menu.scss b/src/styles/_context-menu.scss index a90e99e..66df134 100644 --- a/src/styles/_context-menu.scss +++ b/src/styles/_context-menu.scss @@ -1,6 +1,6 @@ .preact-context-menu .context-menu { z-index: 100; - min-width: 180px; + min-width: 190px; padding: 6px 8px; user-select: none; border-radius: 4px; -- GitLab