mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
Update: Work on new Friends tab + minor fixes
This commit is contained in:
parent
82b8a9b28e
commit
4d9d74224f
12 changed files with 128 additions and 67 deletions
|
@ -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}>
|
||||
|
|
|
@ -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' &&
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -22,6 +22,10 @@ const Info = styled.div`
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: baseline;
|
||||
|
||||
* {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 && (
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue