martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

highlight active conversation

Browse Source
This commit is contained in:
Roland Osborne 2022-08-30 22:42:15 -07:00
parent 384569abc6
commit 3b470680a5
5 changed files with 78 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/src/constants/Colors.js
View File

@ -3,7 +3,7 @@ const Colors = {
primary: '#448866', primary: '#448866',
formBackground: '#f2f2f2', formBackground: '#f2f2f2',
formFocus: '#f8f8f8', formFocus: '#f8f8f8',
formHover: '#e8e8e8', formHover: '#efefef',
grey: '#888888', grey: '#888888',
white: '#ffffff', white: '#ffffff',
divider: '#dddddd', divider: '#dddddd',

18
net/web/src/session/Session.jsx
View File

@ -74,7 +74,11 @@ export function Session() {
<div class="left"> <div class="left">
<Identity openAccount={openAccount} openCards={openCards} cardUpdated={state.cardUpdated} /> <Identity openAccount={openAccount} openCards={openCards} cardUpdated={state.cardUpdated} />
<div class="bottom"> <div class="bottom">
<Channels open={openConversation} /> <Channels open={openConversation} active={{
set: state.conversation,
card: state.cardId,
channel: state.channelId,
}} />
</div> </div>
{ state.loading && ( { state.loading && (
<div class="reframe"> <div class="reframe">
@ -136,7 +140,11 @@ export function Session() {
<div class="left"> <div class="left">
<Identity openAccount={actions.openProfile} openCards={actions.openCards} cardUpdated={state.cardUpdated} /> <Identity openAccount={actions.openProfile} openCards={actions.openCards} cardUpdated={state.cardUpdated} />
<div class="bottom"> <div class="bottom">
<Channels open={actions.openConversation} /> <Channels open={actions.openConversation} active={{
set: state.conversation,
card: state.cardId,
channel: state.channelId,
}} />
</div> </div>
{ state.loading && ( { state.loading && (
<div class="reframe"> <div class="reframe">
@ -190,7 +198,11 @@ export function Session() {
<div class="mobile-layout noselect"> <div class="mobile-layout noselect">
<div class="top"> <div class="top">
<div class="reframe"> <div class="reframe">
<Channels open={actions.openConversation} /> <Channels open={actions.openConversation} active={{
set: state.conversation,
card: state.cardId,
channel: state.channelId,
}} />
</div> </div>
{ state.conversation && ( { state.conversation && (
<div class="reframe"> <div class="reframe">

4
net/web/src/session/channels/Channels.jsx
View File

@ -5,7 +5,7 @@ import { useChannels } from './useChannels.hook';
import { ChannelItem } from './channelItem/ChannelItem'; import { ChannelItem } from './channelItem/ChannelItem';
import { AddChannel } from './addChannel/AddChannel'; import { AddChannel } from './addChannel/AddChannel';
export function Channels({ open }) { export function Channels({ open, active }) {
const { state, actions } = useChannels(); const { state, actions } = useChannels();
@ -49,7 +49,7 @@ export function Channels({ open }) {
<div class="view"> <div class="view">
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0" <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
renderItem={item => ( renderItem={item => (
<ChannelItem item={item} openChannel={open} /> <ChannelItem item={item} openChannel={open} active={active} />
)} )}
/> />
</div> </div>

89
net/web/src/session/channels/channelItem/ChannelItem.jsx
View File

@ -3,51 +3,60 @@ import { ChannelItemWrapper, Markup } from './ChannelItem.styled';
import { Logo } from 'logo/Logo'; import { Logo } from 'logo/Logo';
import { AppstoreFilled, SolutionOutlined } from '@ant-design/icons'; import { AppstoreFilled, SolutionOutlined } from '@ant-design/icons';
export function ChannelItem({ item, openChannel }) { export function ChannelItem({ item, openChannel, active }) {
const itemClass = () => {
if (active.set && active.channel === item.id && active.card === item.cardId) {
return "active"
}
return "idle"
};
return ( return (
<ChannelItemWrapper onClick={() => openChannel(item.id, item.cardId)}> <ChannelItemWrapper onClick={() => openChannel(item.id, item.cardId)}>
{ item.contacts.length === 0 && ( <div class={itemClass()}>
<div class="item"> { item.contacts.length === 0 && (
<div class="logo"> <div class="item">
<SolutionOutlined /> <div class="logo">
<SolutionOutlined />
</div>
<div class="details">
<div class="subject">{ item.subject }</div>
<div class="message">{ item.message }</div>
</div>
</div> </div>
<div class="details"> )}
<div class="subject">{ item.subject }</div> { item.contacts.length === 1 && (
<div class="message">{ item.message }</div> <div class="item">
</div> <div class="avatar">
</div> <Logo url={item.logo} width={32} height={32} radius={8} />
)} </div>
{ item.contacts.length === 1 && ( <div class="details">
<div class="item"> <div class="subject">{ item.subject }</div>
<div class="avatar"> <div class="message">{ item.message }</div>
<Logo url={item.logo} width={32} height={32} radius={8} /> </div>
</div> { item.updated && (
<div class="details">
<div class="subject">{ item.subject }</div>
<div class="message">{ item.message }</div>
</div>
{ item.updated && (
<Markup />
)}
</div>
)}
{ item.contacts.length > 1 && (
<div class="item">
<div class="logo">
<AppstoreFilled />
</div>
<div class="details">
<div class="subject">{ item.subject }</div>
<div class="message">{ item.message }</div>
</div>
{ item.updated && (
<Tooltip placement="right" title="new message">
<Markup /> <Markup />
</Tooltip> )}
)} </div>
</div> )}
)} { item.contacts.length > 1 && (
<div class="item">
<div class="logo">
<AppstoreFilled />
</div>
<div class="details">
<div class="subject">{ item.subject }</div>
<div class="message">{ item.message }</div>
</div>
{ item.updated && (
<Tooltip placement="right" title="new message">
<Markup />
</Tooltip>
)}
</div>
)}
</div>
</ChannelItemWrapper> </ChannelItemWrapper>
) )
} }

14
net/web/src/session/channels/channelItem/ChannelItem.styled.js
View File

@ -7,13 +7,19 @@ export const ChannelItemWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid ${Colors.itemDivider}; border-bottom: 1px solid ${Colors.itemDivider};
padding-left: 16px;
padding-right: 16px;
line-height: 16px; line-height: 16px;
cursor: pointer;
&:hover { &:hover {
background-color: ${Colors.formHover}; background-color: ${Colors.formHover};
cursor: pointer; }
.active {
background-color: ${Colors.profileForm};
width: 100%;
height: 100%;
display: flex;
align-item: center;
} }
.item { .item {
@ -21,6 +27,8 @@ export const ChannelItemWrapper = styled.div`
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
min-width: 0; min-width: 0;
padding-left: 16px;
padding-right: 16px;
.avatar{ .avatar{
display: flex; display: flex;