dont show button tooltip in small

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

View File

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

View File

@ -33,7 +33,12 @@ export function CardItem({ item, open }) {
<div class="handle">{ handle() }</div>
</div>
<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">
<StatusError onClick={resync}>
<ExclamationCircleOutlined />

View File

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

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} />
</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">
<StatusError onClick={actions.resync}>
<ExclamationCircleOutlined />
@ -72,13 +77,22 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
<AddTopic cardId={cardId} channelId={channelId} />
{ state.uploadError && (
<div class="upload-error">
<Tooltip placement="bottom" title="upload error">
{ state.display === 'small' && (
<StatusError>
<div onClick={() => actions.clearUploadErrors(cardId, channelId)}>
<ExclamationCircleOutlined />
</div>
</StatusError>
</Tooltip>
)}
{ state.display !== 'small' && (
<Tooltip placement="bottom" title="upload error">
<StatusError>
<div onClick={() => actions.clearUploadErrors(cardId, channelId)}>
<ExclamationCircleOutlined />
</div>
</StatusError>
</Tooltip>
)}
</div>
)}
</div>