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

Commit

Permalink
Merge pull request #6752 from matrix-org/revert-6682-gsouquet/compact…
Browse files Browse the repository at this point in the history 
…-composer-18533

Revert "Create narrow mode for Composer"
  • Loading branch information
@turt2live
turt2live authored Sep 7, 2021
2 parents 59de3c9 + 945181f commit eb6fa45
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 210 deletions.
14 changes: 0 additions & 14 deletions res/css/views/rooms/_MessageComposer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,15 +237,6 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
}

.mx_MessageComposer_buttonMenu::before {
mask-image: url('$(res)/img/image-view/more.svg');
}

.mx_MessageComposer_closeButtonMenu::before {
transform: rotate(90deg);
transform-origin: center;
}

.mx_MessageComposer_sendMessage {
cursor: pointer;
position: relative;
Expand Down Expand Up @@ -365,8 +356,3 @@ limitations under the License.
margin-right: 0;
}
}

.mx_MessageComposer_Menu .mx_CallContextMenu_item {
display: flex;
align-items: center;
}
178 changes: 29 additions & 149 deletions src/components/views/rooms/MessageComposer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { createRef } from 'react';
import React from 'react';
import classNames from 'classnames';
import { _t } from '../../../languageHandler';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
Expand All @@ -27,13 +27,7 @@ import { makeRoomPermalink, RoomPermalinkCreator } from '../../../utils/permalin
import ContentMessages from '../../../ContentMessages';
import E2EIcon from './E2EIcon';
import SettingsStore from "../../../settings/SettingsStore";
import {
aboveLeftOf,
ContextMenu,
ContextMenuTooltipButton,
useContextMenu,
MenuItem,
} from "../../structures/ContextMenu";
import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import ReplyPreview from "./ReplyPreview";
import { UIFeature } from "../../../settings/UIFeature";
Expand All @@ -51,9 +45,6 @@ import { Action } from "../../../dispatcher/actions";
import EditorModel from "../../../editor/model";
import EmojiPicker from '../emojipicker/EmojiPicker';
import MemberStatusMessageAvatar from "../avatars/MemberStatusMessageAvatar";
import UIStore, { UI_EVENTS } from '../../../stores/UIStore';

const NARROW_MODE_BREAKPOINT = 500;

interface IComposerAvatarProps {
me: object;
Expand All @@ -80,13 +71,13 @@ function SendButton(props: ISendButtonProps) {
);
}

const EmojiButton = ({ addEmoji, menuPosition }) => {
const EmojiButton = ({ addEmoji }) => {
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();

let contextMenu;
if (menuDisplayed) {
const position = menuPosition ?? aboveLeftOf(button.current.getBoundingClientRect());
contextMenu = <ContextMenu {...position} onFinished={closeMenu} managed={false}>
const buttonRect = button.current.getBoundingClientRect();
contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
<EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
</ContextMenu>;
}
Expand Down Expand Up @@ -205,17 +196,13 @@ interface IState {
haveRecording: boolean;
recordingTimeLeftSeconds?: number;
me?: RoomMember;
narrowMode?: boolean;
isMenuOpen: boolean;
showStickers: boolean;
}

@replaceableComponent("views.rooms.MessageComposer")
export default class MessageComposer extends React.Component<IProps, IState> {
private dispatcherRef: string;
private messageComposerInput: SendMessageComposer;
private voiceRecordingButton: VoiceRecordComposerTile;
private ref: React.RefObject<HTMLDivElement> = createRef();

static defaultProps = {
replyInThread: false,
Expand All @@ -233,30 +220,15 @@ export default class MessageComposer extends React.Component<IProps, IState> {
isComposerEmpty: true,
haveRecording: false,
recordingTimeLeftSeconds: null, // when set to a number, shows a toast
isMenuOpen: false,
showStickers: false,
};
}

componentDidMount() {
this.dispatcherRef = dis.register(this.onAction);
MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
this.waitForOwnMember();
UIStore.instance.trackElementDimensions("MessageComposer", this.ref.current);
UIStore.instance.on("MessageComposer", this.onResize);
}

private onResize = (type: UI_EVENTS, entry: ResizeObserverEntry) => {
if (type === UI_EVENTS.Resize) {
const narrowMode = entry.contentRect.width <= NARROW_MODE_BREAKPOINT;
this.setState({
narrowMode,
isMenuOpen: !narrowMode ? false : this.state.isMenuOpen,
showStickers: false,
});
}
};

private onAction = (payload: ActionPayload) => {
if (payload.action === 'reply_to_event') {
// add a timeout for the reply preview to be rendered, so
Expand Down Expand Up @@ -291,8 +263,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
}
VoiceRecordingStore.instance.off(UPDATE_EVENT, this.onVoiceStoreUpdate);
dis.unregister(this.dispatcherRef);
UIStore.instance.stopTrackingElementDimensions("MessageComposer");
UIStore.instance.removeListener("MessageComposer", this.onResize);
}

private onRoomStateEvents = (ev, state) => {
Expand Down Expand Up @@ -399,96 +369,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
}
};

private shouldShowStickerPicker = (): boolean => {
return SettingsStore.getValue(UIFeature.Widgets)
&& SettingsStore.getValue("MessageComposerInput.showStickersButton")
&& !this.state.haveRecording;
};

private showStickers = (showStickers: boolean) => {
this.setState({ showStickers });
};

private toggleButtonMenu = (): void => {
this.setState({
isMenuOpen: !this.state.isMenuOpen,
});
};

private renderButtons(menuPosition): JSX.Element | JSX.Element[] {
const buttons = new Map<string, JSX.Element>();
if (!this.state.haveRecording) {
buttons.set(
_t("Send File"),
<UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
);
buttons.set(
_t("Show Emojis"),
<EmojiButton key="emoji_button" addEmoji={this.addEmoji} menuPosition={menuPosition} />,
);
}
if (this.shouldShowStickerPicker()) {
buttons.set(
_t("Show Stickers"),
<AccessibleTooltipButton
id='stickersButton'
key="controls_stickers"
className="mx_MessageComposer_button mx_MessageComposer_stickers"
onClick={() => this.showStickers(!this.state.showStickers)}
title={this.state.showStickers ? _t("Hide Stickers") : _t("Show Stickers")}
/>,
);
}
if (!this.state.haveRecording && !this.state.narrowMode) {
buttons.set(
_t("Send voice message"),
<AccessibleTooltipButton
className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
onClick={() => this.voiceRecordingButton?.onRecordStartEndClick()}
title={_t("Send voice message")}
/>,
);
}

if (!this.state.narrowMode) {
return Array.from(buttons.values());
} else {
const classnames = classNames({
mx_MessageComposer_button: true,
mx_MessageComposer_buttonMenu: true,
mx_MessageComposer_closeButtonMenu: this.state.isMenuOpen,
});

return <>
{ buttons[0] }
<AccessibleTooltipButton
className={classnames}
onClick={this.toggleButtonMenu}
title={_t("Composer menu")}
tooltip={false}
/>
{ this.state.isMenuOpen && (
<ContextMenu
onFinished={this.toggleButtonMenu}
{...menuPosition}
menuPaddingRight={10}
menuPaddingTop={5}
menuPaddingBottom={5}
menuWidth={150}
wrapperClassName="mx_MessageComposer_Menu"
>
{ Array.from(buttons).slice(1).map(([label, button]) => (
<MenuItem className="mx_CallContextMenu_item" key={label} onClick={this.toggleButtonMenu}>
{ button }
{ label }
</MenuItem>
)) }
</ContextMenu>
) }
</>;
}
}

render() {
const controls = [
this.state.me && !this.props.compact ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
Expand All @@ -497,12 +377,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
null,
];

let menuPosition;
if (this.ref.current) {
const contentRect = this.ref.current.getBoundingClientRect();
menuPosition = aboveLeftOf(contentRect);
}

if (!this.state.tombstone && this.state.canSendMessages) {
controls.push(
<SendMessageComposer
Expand All @@ -518,10 +392,33 @@ export default class MessageComposer extends React.Component<IProps, IState> {
/>,
);

if (!this.state.haveRecording) {
controls.push(
<UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
<EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
);
}

if (SettingsStore.getValue(UIFeature.Widgets) &&
SettingsStore.getValue("MessageComposerInput.showStickersButton") &&
!this.state.haveRecording) {
controls.push(<Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />);
}

controls.push(<VoiceRecordComposerTile
key="controls_voice_record"
ref={c => this.voiceRecordingButton = c}
room={this.props.room} />);

if (!this.state.isComposerEmpty || this.state.haveRecording) {
controls.push(
<SendButton
key="controls_send"
onClick={this.sendMessage}
title={this.state.haveRecording ? _t("Send voice message") : undefined}
/>,
);
}
} else if (this.state.tombstone) {
const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];

Expand Down Expand Up @@ -562,15 +459,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
yOffset={-50}
/>;
}
controls.push(
<Stickerpicker
room={this.props.room}
showStickers={this.state.showStickers}
setShowStickers={this.showStickers}
menuPosition={menuPosition} />,
);

const showSendButton = !this.state.isComposerEmpty || this.state.haveRecording;

const classes = classNames({
"mx_MessageComposer": true,
Expand All @@ -579,22 +467,14 @@ export default class MessageComposer extends React.Component<IProps, IState> {
});

return (
<div className={classes} ref={this.ref}>
<div className={classes}>
{ recordingTooltip }
<div className="mx_MessageComposer_wrapper">
{ this.props.showReplyPreview && (
<ReplyPreview permalinkCreator={this.props.permalinkCreator} />
) }
<div className="mx_MessageComposer_row">
{ controls }
{ this.renderButtons(menuPosition) }
{ showSendButton && (
<SendButton
key="controls_send"
onClick={this.sendMessage}
title={this.state.haveRecording ? _t("Send voice message") : undefined}
/>
) }
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit eb6fa45

Please sign in to comment.