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;