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

fixing layout issues with list

Browse Source
This commit is contained in:
Roland Osborne 2022-08-23 22:58:33 -07:00
parent 53de020d74
commit 0501884708
6 changed files with 61 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
net/web/src/carousel/Carousel.jsx
View File

@ -134,12 +134,14 @@ export function Carousel({ pad, ready, error, items, itemRenderer, itemRemove })
</div>
)}
{ ready && !error && (
<div class="carousel" style={{ paddingLeft: pad + 32 }} ref={onRefSet}>
{slots}
</div>
<>
<div class="carousel" style={{ paddingLeft: pad + 32 }} ref={onRefSet}>
{slots}
</div>
<div class="left-arrow" onClick={onRight} style={{ marginLeft: pad, visibility: scrollRight }}><LeftOutlined /></div>
<div class="right-arrow" onClick={onLeft} style={{ visibility: scrollLeft }}><RightOutlined /></div>
</>
)}
<div class="left-arrow" onClick={onRight} style={{ marginLeft: pad, visibility: scrollRight }}><LeftOutlined /></div>
<div class="right-arrow" onClick={onLeft} style={{ visibility: scrollLeft }}><RightOutlined /></div>
</CarouselWrapper>
);
}

1
net/web/src/carousel/Carousel.styled.js
View File

@ -27,6 +27,7 @@ export const CarouselWrapper = styled.div`
justify-content: center;
color: #888888;
background-color: #eeeeee;
margin-left: 72px;
}
.carousel::-webkit-scrollbar {

7
net/web/src/context/useCardContext.hook.js
View File

@ -310,6 +310,13 @@ export function useCardContext() {
else {
await addContactChannelTopic(node, token, channelId, message, files);
}
try {
resync.current.push(cardId);
await setCards(null);
}
catch (err) {
console.log(err);
}
},
getChannel: (cardId, channelId) => {
let card = cards.current.get(cardId);

13
net/web/src/context/useChannelContext.hook.js
View File

@ -68,9 +68,14 @@ export function useChannelContext() {
}
const setChannels = async (rev) => {
let force = false;
if (rev == null) {
force = true;
rev = revision.current;
}
if (next.current == null) {
next.current = rev;
if (revision.current !== rev) {
if (force || revision.current !== rev) {
await updateChannels();
updateState({ init: true, channels: channels.current });
revision.current = rev;
@ -138,6 +143,12 @@ export function useChannelContext() {
else {
await addChannelTopic(access.current, channelId, message, files);
}
try {
await setChannels(null);
}
catch (err) {
console.log(err);
}
},
getChannel: (channelId) => {
return channels.current.get(channelId);

20
net/web/src/session/conversation/addTopic/AddTopic.jsx
View File

@ -24,15 +24,17 @@ export function AddTopic({ cardId, channelId }) {
}
const addTopic = async () => {
try {
await actions.addTopic();
}
catch (err) {
console.log(err);
Modal.error({
title: 'Failed to Post Message',
content: 'Please try again.',
});
if (state.messageText || state.assets.length) {
try {
await actions.addTopic();
}
catch (err) {
console.log(err);
Modal.error({
title: 'Failed to Post Message',
content: 'Please try again.',
});
}
}
};

52
net/web/src/session/conversation/topicItem/TopicItem.jsx
View File

@ -96,26 +96,6 @@ export function TopicItem({ host, topic }) {
return <div style={{ color: state.textColor, fontSize: state.textSize }}>{ state.message?.text }</div>
}
if (!state.confirmed) {
return (
<TopicItemWrapper>
<div class="avatar">
<Logo width={32} height={32} radius={4} url={state.imageUrl} />
</div>
<div class="topic">
<div class="info">
<div class={nameClass}>{ name }</div>
<div>{ getTime(offset) }</div>
</div>
<Skeleton size={'small'} active={true} />
<div class="options">
<Options />
</div>
</div>
</TopicItemWrapper>
)
}
return (
<TopicItemWrapper>
<div class="topic-header">
@ -127,17 +107,31 @@ export function TopicItem({ host, topic }) {
<div>{ getTime(offset) }</div>
</div>
</div>
{ state.assets.length > 0 && (
<div class="topic-assets">
<Carousel pad={40} ready={state.ready} error={state.error} items={state.assets} itemRenderer={renderAsset} />
{ !state.confirmed && (
<div>
<div class="message">
<Skeleton size={'small'} active={true} />
</div>
<div class="options">
<Options />
</div>
</div>
)}
{ state.confirmed && (
<div>
{ state.assets.length > 0 && (
<div class="topic-assets">
<Carousel pad={40} ready={state.ready} error={state.error} items={state.assets} itemRenderer={renderAsset} />
</div>
)}
<div class="message">
<Message />
</div>
<div class="options">
<Options />
</div>
</div>
)}
<div class="message">
<Message />
</div>
<div class="options">
<Options />
</div>
</TopicItemWrapper>
)
}