imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use Compound tooltips more widely (#12128)

Browse source 
* Switch MIMageBody & MStickerBody to Compound Tooltip

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch E2ePadlock & SentReceipt to Compound Tooltips

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Workaround compound bug

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-01-11 11:49:24 +00:00 • committed by GitHub
parent 88a57fbf39
commit 0820994463
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 150 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/views/messages/MImageBody.tsx
View file

@ -21,6 +21,7 @@ import classNames from "classnames";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import { logger } from "matrix-js-sdk/src/logger";
import { ClientEvent, ClientEventHandlerMap } from "matrix-js-sdk/src/matrix";
import { Tooltip } from "@vector-im/compound-web";
import MFileBody from "./MFileBody";
import Modal from "../../../Modal";
@ -520,10 +521,12 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
);
}
const thumbnail = (
const tooltipProps = this.getTooltipProps();
let thumbnail = (
<div
className="mx_MImageBody_thumbnail_container"
style={{ maxHeight, maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}
tabIndex={tooltipProps ? 0 : undefined}
>
{placeholder}
@ -537,11 +540,19 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
{!this.props.forExport && !this.state.imgLoaded && (
<div style={{ height: maxHeight, width: maxWidth }} />
)}
{this.state.hover && this.getTooltip()}
</div>
);
if (tooltipProps) {
// We specify isTriggerInteractive=true and make the div interactive manually as a workaround for
// https://github.com/element-hq/compound/issues/294
thumbnail = (
<Tooltip {...tooltipProps} isTriggerInteractive={true}>
{thumbnail}
</Tooltip>
);
}
return this.wrapImage(contentUrl, thumbnail);
}
@ -578,7 +589,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
}
// Overridden by MStickerBody
protected getTooltip(): ReactNode {
protected getTooltipProps(): ComponentProps<typeof Tooltip> | null {
return null;
}

18
src/components/views/messages/MStickerBody.tsx
View file

@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { ReactNode } from "react";
import React, { ComponentProps, ReactNode } from "react";
import { Tooltip } from "@vector-im/compound-web";
import MImageBody from "./MImageBody";
import { BLURHASH_FIELD } from "../../../utils/image-media";
import Tooltip from "../elements/Tooltip";
import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
export default class MStickerBody extends MImageBody {
@ -63,16 +63,16 @@ export default class MStickerBody extends MImageBody {
}
// Tooltip to show on mouse over
protected getTooltip(): ReactNode {
protected getTooltipProps(): ComponentProps<typeof Tooltip> | null {
const content = this.props.mxEvent && this.props.mxEvent.getContent();
if (!content || !content.body || !content.info || !content.info.w) return null;
if (!content?.body || !content.info?.w) return null;
return (
<div style={{ left: content.info.w + "px" }} className="mx_MStickerBody_tooltip">
<Tooltip label={content.body} />
</div>
);
return {
align: "center",
side: "right",
label: content.body,
};
}
// Don't show "Download this_file.png ..."