Commit a4f3b3ff authored by insert's avatar insert

Work on friends UI

Co-authored-by: default avatarnizune <[email protected]>
parent 8c22f950
Pipeline #285 passed with stage
in 3 minutes and 54 seconds
.tabs {
width: 100%;
display: flex;
color: white;
height: 58px;
align-items: center;
justify-content: center;
}
.tab {
flex: 1;
background: blue;
margin: 1em;
padding: 0.4em;
cursor: pointer;
display: flex;
height: 58px;
min-width: 80px;
font-size: 14px;
align-items: center;
justify-content: center;
&[data-active=true] {
background: green;
cursor: default;
border-bottom: 1px solid mediumslateblue;
}
}
\ No newline at end of file
......@@ -13,7 +13,7 @@
&:hover {background: var(--button-hover);}
&:active {background: var(--button-active);}
&.active {
&[data-active=true] {
cursor: default;
transition: none;
background: var(--button-active);
......
......@@ -53,9 +53,9 @@ export const HomeSidebar = memo(() => {
return (
<div className={classes}>
<div className={styles.tabs}>
<div onClick={e => chat.switch(Page.HOME)} className={styles.tab}><Icon icon="homeSolid"/>Home</div>
<div onClick={e => chat.switch(Page.FEED)} className={styles.tab}><Icon icon="newsSolid"/>Feed</div>
<div onClick={e => chat.switch(Page.FRIENDS)} className={styles.tab}><Icon icon="userDetailSolid"/>Friends</div>
<div data-active={chat.page === Page.HOME} onClick={e => chat.switch(Page.HOME)} className={styles.tab}><Icon icon="homeSolid"/>Home</div>
<div data-active={chat.page === Page.FEED} onClick={e => chat.switch(Page.FEED)} className={styles.tab}><Icon icon="newsSolid"/>Feed</div>
<div data-active={chat.page === Page.FRIENDS} onClick={e => chat.switch(Page.FRIENDS)} className={styles.tab}><Icon icon="userDetailSolid"/>Friends</div>
</div>
<Section title="Direct Messages" icon="userPlusSolid" type={DMChannel} />
<Section title="Group Messages" icon="plusRegular" type={GroupChannel} />
......
......@@ -8,6 +8,7 @@
cursor: pointer;
align-items: center;
opacity: .99;
&:hover {
background-color: var(--button-hover);
.avatar .indicator { border: 2px solid var(--button-hover) !important; }
......@@ -18,7 +19,7 @@
.avatar .indicator { border: 2px solid var(--button-active) !important; }
}
&.active {
&[data-active=true] {
cursor: default;
transition: none;
background-color: var(--button-hover) !important;
......
......@@ -28,7 +28,8 @@ export const ChannelEntry = memo((props: ChannelProps) => {
}
return (
<div className={styles.parent} onClick={click} key={props.channel.id}>
<div className={styles.parent} onClick={click} key={props.channel.id}
data-active={props.channel.id === chat.channel}>
<div className={styles.avatar}
aria-label={name}
style={{ backgroundImage: `url("${iconURL}")` }}>
......
.tabs {
display: flex;
width: 100vw;
[data-active=true] {
color: green;
}
.container {
height: 100%;
}
\ No newline at end of file
import React, { Fragment, useState, useContext } from 'react';
//import styles from './Friends.module.scss';
import styles from './Friends.module.scss';
import { Instance } from '../../internal/Client';
import SwipeableViews from 'react-swipeable-views';
......@@ -34,11 +34,11 @@ export default function Friends() {
return (
<Fragment>
<Tabs index={index} setIndex={setIndex}>
<Fragment>ONLINE</Fragment>
<Fragment>ALL</Fragment>
<Fragment>REQUESTS</Fragment>
<Fragment>Online</Fragment>
<Fragment>All</Fragment>
<Fragment>Requests</Fragment>
</Tabs>
<SwipeableViews index={index} onChangeIndex={setIndex}>
<SwipeableViews index={index} onChangeIndex={setIndex} className={styles.container}>
{ renderList(u => u.relation === 'active' && u.status !== 'offline', switchTo) }
{ renderList(u => u.relation === 'active', switchTo) }
<Fragment>
......@@ -46,7 +46,8 @@ export default function Friends() {
<Fragment>PENDING</Fragment>
<Fragment>INCOMING</Fragment>
</Tabs>
<SwipeableViews index={requestIndex} onChangeIndex={setRequestIndex}>
<SwipeableViews index={requestIndex} onChangeIndex={setRequestIndex}
className={styles.container}>
{ renderList(u => u.relation === 'pending', switchTo) }
{ renderList(u => u.relation === 'incoming', switchTo) }
</SwipeableViews>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment