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

dont show button tooltip in small

Browse Source
This commit is contained in:
Roland Osborne 2022-09-06 11:44:00 -07:00
parent aebd74e8df
commit 1608d20255
4 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
net/web/src/context/useConversationContext.hook.js
View File

@ -221,9 +221,6 @@ export function useConversationContext() {
catch (err) { catch (err) {
console.log(err); console.log(err);
updateState({ error: true }); updateState({ error: true });
if (ev.type === EVENT_RESYNC) {
window.alert("failed to syncrhonize conversation");
}
} }
} }

7
net/web/src/session/cards/cardItem/CardItem.jsx
View File

@ -33,7 +33,12 @@ export function CardItem({ item, open }) {
<div class="handle">{ handle() }</div> <div class="handle">{ handle() }</div>
</div> </div>
<div class="markup"> <div class="markup">
{ !state.resync && item.error && ( { !state.resync && item.error && state.display === 'small' && (
<StatusError onClick={resync}>
<ExclamationCircleOutlined />
</StatusError>
)}
{ !state.resync && item.error && state.display !== 'small' && (
<Tooltip placement="left" title="sync error"> <Tooltip placement="left" title="sync error">
<StatusError onClick={resync}> <StatusError onClick={resync}>
<ExclamationCircleOutlined /> <ExclamationCircleOutlined />

6
net/web/src/session/cards/cardItem/useCardItem.hook.js
View File

@ -1,5 +1,6 @@
import { useContext, useState, useEffect } from 'react'; import { useContext, useState, useEffect } from 'react';
import { CardContext } from 'context/CardContext'; import { CardContext } from 'context/CardContext';
import { ViewportContext } from 'context/ViewportContext';
export function useCardItem(item) { export function useCardItem(item) {
@ -9,6 +10,7 @@ export function useCardItem(item) {
}); });
const card = useContext(CardContext); const card = useContext(CardContext);
const viewport = useContext(ViewportContext);
const updateState = (value) => { const updateState = (value) => {
setState((s) => ({ ...s, ...value })); setState((s) => ({ ...s, ...value }));
@ -18,6 +20,10 @@ export function useCardItem(item) {
updateState({ logo: card.actions.getImageUrl(item.id) }); updateState({ logo: card.actions.getImageUrl(item.id) });
}, [card, item]); }, [card, item]);
useEffect(() => {
updateState({ display: viewport.state.display });
}, [viewport]);
const actions = { const actions = {
resync: async () => { resync: async () => {
if (!state.resync) { if (!state.resync) {

20
net/web/src/session/conversation/Conversation.jsx
View File

@ -23,7 +23,12 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
<Logo img={state.image} url={state.logo} width={32} height={32} radius={4} /> <Logo img={state.image} url={state.logo} width={32} height={32} radius={4} />
</div> </div>
<div class="label">{ state.subject }</div> <div class="label">{ state.subject }</div>
{ state.error && ( { state.error && state.display === 'small' && (
<StatusError onClick={actions.resync}>
<ExclamationCircleOutlined />
</StatusError>
)}
{ state.error && state.display !== 'small' && (
<Tooltip placement="bottom" title="sync error"> <Tooltip placement="bottom" title="sync error">
<StatusError onClick={actions.resync}> <StatusError onClick={actions.resync}>
<ExclamationCircleOutlined /> <ExclamationCircleOutlined />
@ -72,13 +77,22 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
<AddTopic cardId={cardId} channelId={channelId} /> <AddTopic cardId={cardId} channelId={channelId} />
{ state.uploadError && ( { state.uploadError && (
<div class="upload-error"> <div class="upload-error">
<Tooltip placement="bottom" title="upload error"> { state.display === 'small' && (
<StatusError> <StatusError>
<div onClick={() => actions.clearUploadErrors(cardId, channelId)}> <div onClick={() => actions.clearUploadErrors(cardId, channelId)}>
<ExclamationCircleOutlined /> <ExclamationCircleOutlined />
</div> </div>
</StatusError> </StatusError>
</Tooltip> )}
{ state.display !== 'small' && (
<Tooltip placement="bottom" title="upload error">
<StatusError>
<div onClick={() => actions.clearUploadErrors(cardId, channelId)}>
<ExclamationCircleOutlined />
</div>
</StatusError>
</Tooltip>
)}
</div> </div>
)} )}
</div> </div>