Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit c2b31d1

Browse files
weeman1337weeman1337
committed
migrate the message context menu to IconizedContextMenu
Signed-off-by: Michael Weimann <[email protected]>
1 parent a794bfd commit c2b31d1

File tree

4 files changed

+145
-119
lines changed

4 files changed

+145
-119
lines changed

‎res/css/_components.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@
5353
@import "./views/avatars/_WidgetAvatar.scss";
5454
@import "./views/context_menus/_CallContextMenu.scss";
5555
@import "./views/context_menus/_IconizedContextMenu.scss";
56-
@import "./views/context_menus/_MessageContextMenu.scss";
5756
@import "./views/context_menus/_StatusMessageContextMenu.scss";
5857
@import "./views/context_menus/_TagTileContextMenu.scss";
5958
@import "./views/dialogs/_AddressPickerDialog.scss";

‎res/css/views/context_menus/_MessageContextMenu.scss‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/components/views/context_menus/MessageContextMenu.js‎

Lines changed: 137 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@ import {EventStatus} from 'matrix-js-sdk';
2424
import {MatrixClientPeg} from '../../../MatrixClientPeg';
2525
import dis from '../../../dispatcher/dispatcher';
2626
import * as sdk from '../../../index';
27-
import { _t } from '../../../languageHandler';
27+
import {_t} from '../../../languageHandler';
2828
import Modal from '../../../Modal';
2929
import Resend from '../../../Resend';
3030
import SettingsStore from '../../../settings/SettingsStore';
31-
import { isUrlPermitted } from '../../../HtmlUtils';
32-
import { isContentActionable } from '../../../utils/EventUtils';
33-
import {MenuItem} from "../../structures/ContextMenu";
31+
import {isUrlPermitted} from '../../../HtmlUtils';
32+
import {isContentActionable} from '../../../utils/EventUtils';
3433
import {EventType} from "matrix-js-sdk/src/@types/event";
34+
import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
3535

3636
function canCancel(eventStatus) {
3737
return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -314,95 +314,107 @@ export default class MessageContextMenu extends React.Component {
314314
let externalURLButton;
315315
let quoteButton;
316316
let collapseReplyThread;
317+
const optionLists = [];
317318

318319
// status is SENT before remote-echo, null after
319320
const isSent = !eventStatus || eventStatus === EventStatus.SENT;
320321
if (!mxEvent.isRedacted()) {
321322
if (eventStatus === EventStatus.NOT_SENT) {
322323
resendButton = (
323-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
324-
{ _t('Resend') }
325-
</MenuItem>
324+
<IconizedContextMenuOption
325+
label={_t("Resend")}
326+
onClick={this.onResendClick}
327+
/>
326328
);
327329
}
328330

329331
if (editStatus === EventStatus.NOT_SENT) {
330332
resendEditButton = (
331-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendEditClick}>
332-
{ _t('Resend edit') }
333-
</MenuItem>
333+
<IconizedContextMenuOption
334+
label={_t("Resend edit")}
335+
onClick={this.onResendEditClick}
336+
/>
334337
);
335338
}
336339

337340
if (unsentReactionsCount !== 0) {
338341
resendReactionsButton = (
339-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendReactionsClick}>
340-
{ _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
341-
</MenuItem>
342+
<IconizedContextMenuOption
343+
label={ _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
344+
onClick={this.onResendReactionsClick}
345+
/>
342346
);
343347
}
344348
}
345349

346350
if (redactStatus === EventStatus.NOT_SENT) {
347351
resendRedactionButton = (
348-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendRedactionClick}>
349-
{ _t('Resend removal') }
350-
</MenuItem>
352+
<IconizedContextMenuOption
353+
label={_t("Resend removal")}
354+
onClick={this.onResendRedactionClick}
355+
/>
351356
);
352357
}
353358

354359
if (isSent && this.state.canRedact) {
355360
redactButton = (
356-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
357-
{ _t('Remove') }
358-
</MenuItem>
361+
<IconizedContextMenuOption
362+
label={_t("Remove")}
363+
onClick={this.onRedactClick}
364+
/>
359365
);
360366
}
361367

362368
if (allowCancel) {
363369
cancelButton = (
364-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
365-
{ _t('Cancel Sending') }
366-
</MenuItem>
370+
<IconizedContextMenuOption
371+
label={_t("Cancel Sending")}
372+
onClick={this.onCancelSendClick}
373+
/>
367374
);
368375
}
369376

370377
if (isContentActionable(mxEvent)) {
371378
forwardButton = (
372-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
373-
{ _t('Forward Message') }
374-
</MenuItem>
379+
<IconizedContextMenuOption
380+
label={_t("Forward Message")}
381+
onClick={this.onForwardClick}
382+
/>
375383
);
376384

377385
if (this.state.canPin) {
378386
pinButton = (
379-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
380-
{ this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
381-
</MenuItem>
387+
<IconizedContextMenuOption
388+
label={ this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
389+
onClick={this.onPinClick}
390+
/>
382391
);
383392
}
384393
}
385394

386395
const viewSourceButton = (
387-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
388-
{ _t('View Source') }
389-
</MenuItem>
396+
<IconizedContextMenuOption
397+
label={_t("View Source")}
398+
onClick={this.onViewSourceClick}
399+
/>
390400
);
391401

392402
if (mxEvent.getType() !== mxEvent.getWireType()) {
393403
viewClearSourceButton = (
394-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onViewClearSourceClick}>
395-
{ _t('View Decrypted Source') }
396-
</MenuItem>
404+
<IconizedContextMenuOption
405+
label={_t("View Decrypted Source")}
406+
onClick={this.onViewClearSourceClick}
407+
/>
397408
);
398409
}
399410

400411
if (this.props.eventTileOps) {
401412
if (this.props.eventTileOps.isWidgetHidden()) {
402413
unhidePreviewButton = (
403-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
404-
{ _t('Unhide Preview') }
405-
</MenuItem>
414+
<IconizedContextMenuOption
415+
label={_t("Unhide Preview")}
416+
onClick={this.onUnhidePreviewClick}
417+
/>
406418
);
407419
}
408420
}
@@ -413,82 +425,128 @@ export default class MessageContextMenu extends React.Component {
413425
}
414426
// XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
415427
const permalinkButton = (
416-
<MenuItem
417-
element="a"
418-
className="mx_MessageContextMenu_field"
428+
<IconizedContextMenuOption
419429
onClick={this.onPermalinkClick}
430+
label= { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
431+
? _t('Share Permalink') : _t('Share Message') }
432+
element="a"
420433
href={permalink}
421434
target="_blank"
422435
rel="noreferrer noopener"
423-
>
424-
{ mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
425-
? _t('Share Permalink') : _t('Share Message') }
426-
</MenuItem>
436+
/>
427437
);
428438

429439
if (this.props.eventTileOps) { // this event is rendered using TextualBody
430440
quoteButton = (
431-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
432-
{ _t('Quote') }
433-
</MenuItem>
441+
<IconizedContextMenuOption
442+
label={_t("Quote")}
443+
onClick={this.onQuoteClick}
444+
/>
434445
);
435446
}
436447

437448
// Bridges can provide a 'external_url' to link back to the source.
438449
if (
439-
typeof(mxEvent.event.content.external_url) === "string" &&
450+
typeof (mxEvent.event.content.external_url) === "string" &&
440451
isUrlPermitted(mxEvent.event.content.external_url)
441452
) {
442453
externalURLButton = (
443-
<MenuItem
454+
<IconizedContextMenuOption
455+
onClick={this.closeMenu}
456+
label={_t('Source URL')}
444457
element="a"
445-
className="mx_MessageContextMenu_field"
446458
target="_blank"
447459
rel="noreferrer noopener"
448-
onClick={this.closeMenu}
449460
href={mxEvent.event.content.external_url}
450-
>
451-
{ _t('Source URL') }
452-
</MenuItem>
453-
);
461+
/>
462+
);
454463
}
455464

456465
if (this.props.collapseReplyThread) {
457466
collapseReplyThread = (
458-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onCollapseReplyThreadClick}>
459-
{ _t('Collapse Reply Thread') }
460-
</MenuItem>
467+
<IconizedContextMenuOption
468+
label={_t("Collapse Reply Thread")}
469+
onClick={this.onCollapseReplyThreadClick}
470+
/>
461471
);
462472
}
463473

464474
let reportEventButton;
465475
if (mxEvent.getSender() !== me) {
466476
reportEventButton = (
467-
<MenuItem className="mx_MessageContextMenu_field" onClick={this.onReportEventClick}>
468-
{ _t('Report Content') }
469-
</MenuItem>
477+
<IconizedContextMenuOption
478+
label={_t("Report Content")}
479+
onClick={this.onReportEventClick}
480+
/>
470481
);
471482
}
472483

484+
if (viewSourceButton || viewClearSourceButton) {
485+
optionLists.push((
486+
<IconizedContextMenuOptionList>
487+
{viewSourceButton}
488+
{viewClearSourceButton}
489+
</IconizedContextMenuOptionList>
490+
));
491+
}
492+
493+
if (resendButton || resendEditButton || resendReactionsButton || resendRedactionButton) {
494+
optionLists.push((
495+
<IconizedContextMenuOptionList>
496+
{resendButton}
497+
{resendEditButton}
498+
{resendReactionsButton}
499+
{resendRedactionButton}
500+
</IconizedContextMenuOptionList>
501+
));
502+
}
503+
504+
if (redactButton || cancelButton) {
505+
optionLists.push((
506+
<IconizedContextMenuOptionList red>
507+
{redactButton}
508+
{cancelButton}
509+
</IconizedContextMenuOptionList>
510+
));
511+
}
512+
513+
if (externalURLButton || permalinkButton) {
514+
optionLists.push((
515+
<IconizedContextMenuOptionList>
516+
{externalURLButton}
517+
{permalinkButton}
518+
</IconizedContextMenuOptionList>
519+
));
520+
}
521+
522+
if (pinButton || unhidePreviewButton || reportEventButton) {
523+
optionLists.push((
524+
<IconizedContextMenuOptionList>
525+
{pinButton}
526+
{unhidePreviewButton}
527+
{reportEventButton}
528+
</IconizedContextMenuOptionList>
529+
));
530+
}
531+
532+
if (forwardButton || quoteButton || collapseReplyThread) {
533+
optionLists.push((
534+
<IconizedContextMenuOptionList>
535+
{forwardButton}
536+
{collapseReplyThread}
537+
{quoteButton}
538+
</IconizedContextMenuOptionList>
539+
));
540+
}
541+
473542
return (
474-
<div className="mx_MessageContextMenu">
475-
{ resendButton }
476-
{ resendEditButton }
477-
{ resendReactionsButton }
478-
{ resendRedactionButton }
479-
{ redactButton }
480-
{ cancelButton }
481-
{ forwardButton }
482-
{ pinButton }
483-
{ viewSourceButton }
484-
{ viewClearSourceButton }
485-
{ unhidePreviewButton }
486-
{ permalinkButton }
487-
{ quoteButton }
488-
{ externalURLButton }
489-
{ collapseReplyThread }
490-
{ reportEventButton }
491-
</div>
543+
<IconizedContextMenu
544+
{...this.props}
545+
className="mx_MessageContextMenu"
546+
compact={true}
547+
>
548+
{optionLists}
549+
</IconizedContextMenu>
492550
);
493551
}
494552
}

‎src/components/views/messages/MessageActionBar.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,14 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
4444
const replyThread = getReplyThread && getReplyThread();
4545

4646
const buttonRect = button.current.getBoundingClientRect();
47-
contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu}>
48-
<MessageContextMenu
49-
mxEvent={mxEvent}
50-
permalinkCreator={permalinkCreator}
51-
eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
52-
collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
53-
onFinished={closeMenu}
54-
/>
55-
</ContextMenu>;
47+
contextMenu = <MessageContextMenu
48+
{...aboveLeftOf(buttonRect)}
49+
mxEvent={mxEvent}
50+
permalinkCreator={permalinkCreator}
51+
eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
52+
collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
53+
onFinished={closeMenu}
54+
/>;
5655
}
5756

5857
return <React.Fragment>

0 commit comments

Comments
 (0)