martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-22 09:35:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

render message for empty list

Browse Source
This commit is contained in:
Roland Osborne 2022-09-02 11:13:01 -07:00
parent 5820ec7e2d
commit 8fe49041cf
9 changed files with 70 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
net/web/src/session/cardSelect/CardSelect.jsx
View File

@ -4,7 +4,7 @@ import { SelectItem } from './selectItem/SelectItem';
import { useCardSelect } from './useCardSelect.hook';
import { Logo } from 'logo/Logo';
export function CardSelect({ filter, unknown, select, selected, markup }) {
export function CardSelect({ filter, unknown, select, selected, markup, emptyMessage }) {
const { state } = useCardSelect(filter);
@ -17,6 +17,9 @@ export function CardSelect({ filter, unknown, select, selected, markup }) {
)}
/>
)}
{ !state.cards?.length && (
<div class="empty">{ emptyMessage }</div>
)}
{ unknown > 0 && (
<div class="unknown">
<Logo img="avatar" width={32} height={32} radius={8} />

10
net/web/src/session/cardSelect/CardSelect.styled.js
View File

@ -1,10 +1,20 @@
import styled from 'styled-components';
import Colors from 'constants/Colors';
export const CardSelectWrapper = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
.empty {
display: flex;
align-items: center;
justify-content: center;
font-style: italic;
color: ${Colors.grey};
padding-top: 16px;
}
.unknown {
height: 48px;
width: 100%;

13
net/web/src/session/cards/Cards.jsx
View File

@ -42,10 +42,15 @@ export function Cards({ closeCards, openContact, openListing }) {
)}
</div>
<div class="view">
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
renderItem={item => (
<CardItem item={item} open={openContact} />
)} />
{ state.cards.length > 0 && (
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
renderItem={item => (
<CardItem item={item} open={openContact} />
)} />
)}
{ state.cards.length == 0 && (
<div class="empty">No Contacts</div>
)}
</div>
{ state.display !== 'small' && (
<div class="bar">

9
net/web/src/session/cards/Cards.styled.js
View File

@ -12,6 +12,15 @@ export const CardsWrapper = styled.div`
min-height: 0;
overflow: auto;
flex-grow: 1;
.empty {
display: flex;
align-items: center;
justify-content: center;
font-style: italic;
color: ${Colors.grey};
height: 100%;
}
}
.search {

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

@ -47,11 +47,16 @@ export function Channels({ open, active }) {
)}
</div>
<div class="view">
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
renderItem={item => (
<ChannelItem item={item} openChannel={open} active={active} />
)}
/>
{ state.channels.length > 0 && (
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
renderItem={item => (
<ChannelItem item={item} openChannel={open} active={active} />
)}
/>
)}
{ state.channels.length == 0 && (
<div class="empty">No Topics</div>
)}
</div>
{ state.display !== 'small' && (
<div class="bar">

9
net/web/src/session/channels/Channels.styled.js
View File

@ -12,6 +12,15 @@ export const ChannelsWrapper = styled.div`
min-height: 0;
overflow: auto;
flex-grow: 1;
.empty {
display: flex;
align-items: center;
justify-content: center;
font-style: italic;
color: ${Colors.grey};
height: 100%;
}
}
.search {

1
net/web/src/session/channels/addChannel/AddChannel.jsx
View File

@ -18,6 +18,7 @@ export function AddChannel({ state, actions }) {
<CardSelect
select={actions.onMember}
selected={state.members}
emptyMessage={'No Connected Contacts'}
filter={(card) => card?.data?.cardDetail?.status === 'connected'}
unknown={0}
/>

13
net/web/src/session/listing/Listing.jsx
View File

@ -42,10 +42,15 @@ export function Listing({ closeListing, openContact }) {
</div>
</div>
<div class="view">
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.contacts} gutter="0"
renderItem={item => (
<ListingItem item={item} node={state.node} open={openContact} />
)} />
{ state.contacts.length > 0 && (
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.contacts} gutter="0"
renderItem={item => (
<ListingItem item={item} node={state.node} open={openContact} />
)} />
)}
{ state.contacts.length == 0 && (
<div class="empty">No Contacts</div>
)}
</div>
</ListingWrapper>
);

9
net/web/src/session/listing/Listing.styled.js
View File

@ -12,6 +12,15 @@ export const ListingWrapper = styled.div`
min-height: 0;
overflow: auto;
flex-grow: 1;
.empty {
display: flex;
align-items: center;
justify-content: center;
font-style: italic;
color: ${Colors.grey};
height: 100%;
}
}
.search {