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',
formBackground: '#f2f2f2',
formFocus: '#f8f8f8',
formHover: '#e8e8e8',
formHover: '#efefef',
grey: '#888888',
white: '#ffffff',
divider: '#dddddd',

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

@ -74,7 +74,11 @@ export function Session() {
<div class="left">
<Identity openAccount={openAccount} openCards={openCards} cardUpdated={state.cardUpdated} />
<div class="bottom">
<Channels open={openConversation} />
<Channels open={openConversation} active={{
set: state.conversation,
card: state.cardId,
channel: state.channelId,
}} />
</div>
{ state.loading && (
<div class="reframe">
@ -136,7 +140,11 @@ export function Session() {
<div class="left">
<Identity openAccount={actions.openProfile} openCards={actions.openCards} cardUpdated={state.cardUpdated} />
<div class="bottom">
<Channels open={actions.openConversation} />
<Channels open={actions.openConversation} active={{
set: state.conversation,
card: state.cardId,
channel: state.channelId,
}} />
</div>
{ state.loading && (
<div class="reframe">
@ -190,7 +198,11 @@ export function Session() {
<div class="mobile-layout noselect">
<div class="top">
<div class="reframe">
<Channels open={actions.openConversation} />
<Channels open={actions.openConversation} active={{
set: state.conversation,
card: state.cardId,
channel: state.channelId,
}} />
</div>
{ state.conversation && (
<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 { AddChannel } from './addChannel/AddChannel';
export function Channels({ open }) {
export function Channels({ open, active }) {
const { state, actions } = useChannels();
@ -49,7 +49,7 @@ export function Channels({ open }) {
<div class="view">
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
renderItem={item => (
<ChannelItem item={item} openChannel={open} />
<ChannelItem item={item} openChannel={open} active={active} />
)}
/>
</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 { 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 (
<ChannelItemWrapper onClick={() => openChannel(item.id, item.cardId)}>
{ item.contacts.length === 0 && (
<div class="item">
<div class="logo">
<SolutionOutlined />
<div class={itemClass()}>
{ item.contacts.length === 0 && (
<div class="item">
<div class="logo">
<SolutionOutlined />
</div>
<div class="details">
<div class="subject">{ item.subject }</div>
<div class="message">{ item.message }</div>
</div>
</div>
<div class="details">
<div class="subject">{ item.subject }</div>
<div class="message">{ item.message }</div>
</div>
</div>
)}
{ item.contacts.length === 1 && (
<div class="item">
<div class="avatar">
<Logo url={item.logo} width={32} height={32} radius={8} />
</div>
<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">
)}
{ item.contacts.length === 1 && (
<div class="item">
<div class="avatar">
<Logo url={item.logo} width={32} height={32} radius={8} />
</div>
<div class="details">
<div class="subject">{ item.subject }</div>
<div class="message">{ item.message }</div>
</div>
{ item.updated && (
<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>
)
}

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

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