diff --git a/net/web/src/context/useUploadContext.hook.js b/net/web/src/context/useUploadContext.hook.js
index f61fef01..3e6be232 100644
--- a/net/web/src/context/useUploadContext.hook.js
+++ b/net/web/src/context/useUploadContext.hook.js
@@ -31,6 +31,7 @@ export function useUploadContext() {
upload: entry.index,
topicId: topic,
active: entry.active,
+ uploaded: entry.assets.length,
index: entry.assets.length + active,
count: entry.assets.length + entry.files.length + active,
error: entry.error,
diff --git a/net/web/src/session/account/Account.styled.js b/net/web/src/session/account/Account.styled.js
index a17ba46d..5bc305f2 100644
--- a/net/web/src/session/account/Account.styled.js
+++ b/net/web/src/session/account/Account.styled.js
@@ -35,7 +35,7 @@ export const AccountWrapper = styled.div`
.content {
min-height: 0;
width: 100%;
- overflow: scroll;
+ overflow: auto;
display: flex;
flex-direction: column;
justify-content: center;
diff --git a/net/web/src/session/cards/Cards.styled.js b/net/web/src/session/cards/Cards.styled.js
index 08b8f60a..29c277b8 100644
--- a/net/web/src/session/cards/Cards.styled.js
+++ b/net/web/src/session/cards/Cards.styled.js
@@ -10,7 +10,7 @@ export const CardsWrapper = styled.div`
.view {
min-height: 0;
- overflow: scroll;
+ overflow: auto;
flex-grow: 1;
}
diff --git a/net/web/src/session/channels/Channels.styled.js b/net/web/src/session/channels/Channels.styled.js
index 7e60c5c8..91c27ca2 100644
--- a/net/web/src/session/channels/Channels.styled.js
+++ b/net/web/src/session/channels/Channels.styled.js
@@ -10,7 +10,7 @@ export const ChannelsWrapper = styled.div`
.view {
min-height: 0;
- overflow: scroll;
+ overflow: auto;
flex-grow: 1;
}
diff --git a/net/web/src/session/channels/addChannel/AddChannel.styled.js b/net/web/src/session/channels/addChannel/AddChannel.styled.js
index 9ab2566e..752d825c 100644
--- a/net/web/src/session/channels/addChannel/AddChannel.styled.js
+++ b/net/web/src/session/channels/addChannel/AddChannel.styled.js
@@ -18,7 +18,7 @@ export const AddChannelWrapper = styled.div`
width: 100%;
min-height: 100px;
max-height: 200px;
- overflow: scroll;
+ overflow: auto;
border: 1px solid ${Colors.divider};
}
`;
diff --git a/net/web/src/session/contact/Contact.styled.js b/net/web/src/session/contact/Contact.styled.js
index ca3d3e4c..39c8d7fc 100644
--- a/net/web/src/session/contact/Contact.styled.js
+++ b/net/web/src/session/contact/Contact.styled.js
@@ -37,7 +37,7 @@ export const ContactWrapper = styled.div`
.content {
min-height: 0;
width: 100%;
- overflow: scroll;
+ overflow: auto;
display: flex;
flex-direction: row;
justify-content: center;
@@ -92,7 +92,7 @@ export const ContactWrapper = styled.div`
.view {
width: 100%;
height: 100%;
- overflow: scroll;
+ overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
diff --git a/net/web/src/session/conversation/Conversation.jsx b/net/web/src/session/conversation/Conversation.jsx
index 7b8ddba6..67ee8b3d 100644
--- a/net/web/src/session/conversation/Conversation.jsx
+++ b/net/web/src/session/conversation/Conversation.jsx
@@ -5,6 +5,7 @@ import { Logo } from 'logo/Logo';
import { AddTopic } from './addTopic/AddTopic';
import { VirtualList } from './virtualList/VirtualList';
import { TopicItem } from './topicItem/TopicItem';
+import { Progress } from 'antd';
export function Conversation({ closeConversation, openDetails, cardId, channelId }) {
@@ -40,6 +41,12 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
+ { state.upload && (
+
+ )}
+ { !state.upload && (
+
+ )}
diff --git a/net/web/src/session/conversation/Conversation.styled.js b/net/web/src/session/conversation/Conversation.styled.js
index 7e218137..504f7dec 100644
--- a/net/web/src/session/conversation/Conversation.styled.js
+++ b/net/web/src/session/conversation/Conversation.styled.js
@@ -62,6 +62,14 @@ export const ConversationWrapper = styled.div`
.line {
border-top: 1px solid ${Colors.divider};
}
+
+ .progress-idle {
+ border-top: 1px solid ${Colors.divider};
+ }
+
+ .progress-active {
+ border-top: 1px solid ${Colors.primary};
+ }
}
.topic {
diff --git a/net/web/src/session/conversation/topicItem/TopicItem.styled.js b/net/web/src/session/conversation/topicItem/TopicItem.styled.js
index 43c279e1..df70771c 100644
--- a/net/web/src/session/conversation/topicItem/TopicItem.styled.js
+++ b/net/web/src/session/conversation/topicItem/TopicItem.styled.js
@@ -5,6 +5,10 @@ export const TopicItemWrapper = styled.div`
flex-direction: column;
width: 100%;
+ &:hover .options {
+ visibility: visible;
+ }
+
.topic-header {
display: flex;
flex-direction: row;
diff --git a/net/web/src/session/conversation/useConversation.hook.js b/net/web/src/session/conversation/useConversation.hook.js
index 1d74ff4d..32476cf0 100644
--- a/net/web/src/session/conversation/useConversation.hook.js
+++ b/net/web/src/session/conversation/useConversation.hook.js
@@ -3,6 +3,7 @@ import { ViewportContext } from 'context/ViewportContext';
import { CardContext } from 'context/CardContext';
import { ChannelContext } from 'context/ChannelContext';
import { ConversationContext } from 'context/ConversationContext';
+import { UploadContext } from 'context/UploadContext';
export function useConversation(cardId, channelId) {
@@ -12,12 +13,16 @@ export function useConversation(cardId, channelId) {
logo: null,
subject: null,
topics: [],
+ upload: false,
+ uploadError: false,
+ uploadPercent: 0,
});
const viewport = useContext(ViewportContext);
const card = useContext(CardContext);
const channel = useContext(ChannelContext);
const conversation = useContext(ConversationContext);
+ const upload = useContext(UploadContext);
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
@@ -27,6 +32,38 @@ export function useConversation(cardId, channelId) {
updateState({ display: viewport.state.display });
}, [viewport]);
+ useEffect(() => {
+ let active = false;
+ let uploadError = false;
+ let uploadPercent = 0;
+ let uploadIndex = 0;
+ let uploadCount = 0;
+ let uploadActive = { loaded: 0, total: 0 };
+ let uploadActiveCount = 0;
+
+ const progress = upload.state.progress.get(`${cardId ? cardId : ''}:${channelId}`);
+
+ if (progress) {
+ progress.forEach((entry) => {
+ active = true;
+ if (entry.error) {
+ uploadError = true;
+ }
+ uploadIndex += entry.uploaded;
+ uploadCount += entry.count;
+ if (entry.active) {
+ uploadActiveCount += 1;
+ uploadActive.loaded += entry.active.loaded;
+ uploadActive.total += entry.active.total;
+ }
+ });
+ uploadPercent = (uploadIndex + (uploadActiveCount * (uploadActive.loaded / uploadActive.total)) / uploadCount);
+ uploadPercent = Math.floor(uploadPercent * 100);
+ }
+
+ updateState({ upload: active, uploadError, uploadPercent });
+ }, [cardId, channelId, upload]);
+
useEffect(() => {
let chan, image, subject, logo;
@@ -85,6 +122,10 @@ export function useConversation(cardId, channelId) {
more: () => {
conversation.actions.addHistory();
},
+ clearUploadError: () => {
+ },
+ cancelUpload: () => {
+ },
};
return { state, actions };
diff --git a/net/web/src/session/details/Details.styled.js b/net/web/src/session/details/Details.styled.js
index b770be9d..b23d6a2f 100644
--- a/net/web/src/session/details/Details.styled.js
+++ b/net/web/src/session/details/Details.styled.js
@@ -35,7 +35,7 @@ export const DetailsWrapper = styled.div`
.content {
min-height: 0;
width: 100%;
- overflow: scroll;
+ overflow: auto;
display: flex;
flex-direction: column;
padding-top: 32px;
@@ -43,7 +43,6 @@ export const DetailsWrapper = styled.div`
flex-grow: 1;
position: relative;
min-height: 0;
- overflow: scroll;
.label {
padding-top: 16px;
diff --git a/net/web/src/session/details/editMembers/EditMembers.styled.js b/net/web/src/session/details/editMembers/EditMembers.styled.js
index c265ab80..e9c0d5cb 100644
--- a/net/web/src/session/details/editMembers/EditMembers.styled.js
+++ b/net/web/src/session/details/editMembers/EditMembers.styled.js
@@ -11,7 +11,7 @@ export const EditMembersWrapper = styled.div`
width: 100%;
min-height: 100px;
max-height: 200px;
- overflow: scroll;
+ overflow: auto;
border: 1px solid ${Colors.divider};
}
diff --git a/net/web/src/session/listing/Listing.styled.js b/net/web/src/session/listing/Listing.styled.js
index 878004bf..6d1a867b 100644
--- a/net/web/src/session/listing/Listing.styled.js
+++ b/net/web/src/session/listing/Listing.styled.js
@@ -10,7 +10,7 @@ export const ListingWrapper = styled.div`
.view {
min-height: 0;
- overflow: scroll;
+ overflow: auto;
flex-grow: 1;
}
diff --git a/net/web/src/session/profile/Profile.styled.js b/net/web/src/session/profile/Profile.styled.js
index f1a80f28..d5fa6454 100644
--- a/net/web/src/session/profile/Profile.styled.js
+++ b/net/web/src/session/profile/Profile.styled.js
@@ -36,7 +36,7 @@ export const ProfileWrapper = styled.div`
.content {
min-height: 0;
width: 100%;
- overflow: scroll;
+ overflow: auto;
display: flex;
flex-direction: row;
justify-content: center;
@@ -125,7 +125,7 @@ export const ProfileWrapper = styled.div`
.view {
width: 100%;
height: 100%;
- overflow: scroll;
+ overflow: auto;
display: flex;
flex-direction: column;
align-items: center;