mirror of https://github.com/vector-im/riot-web
Implement new narrow mode UI
parent
6d80976eae
commit
997f43cb82
|
@ -238,11 +238,11 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MessageComposer_buttonMenu::before {
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
mask-image: url('$(res)/img/image-view/more.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_closeButtonMenu::before {
|
||||
transform: rotate(180deg);
|
||||
transform: rotate(90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
|
@ -365,3 +365,8 @@ limitations under the License.
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_Menu .mx_CallContextMenu_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
@ -33,6 +33,7 @@ import {
|
|||
ContextMenuTooltipButton,
|
||||
useContextMenu,
|
||||
MenuItem,
|
||||
ChevronFace,
|
||||
} from "../../structures/ContextMenu";
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
import ReplyPreview from "./ReplyPreview";
|
||||
|
@ -416,25 +417,32 @@ export default class MessageComposer extends React.Component<IProps, IState> {
|
|||
};
|
||||
|
||||
private renderButtons(menuPosition): JSX.Element | JSX.Element[] {
|
||||
const buttons = [];
|
||||
|
||||
const buttons = new Map<string, JSX.Element>();
|
||||
if (!this.state.haveRecording) {
|
||||
buttons.push(
|
||||
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.push(<AccessibleTooltipButton
|
||||
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.push(
|
||||
buttons.set(
|
||||
_t("Send voice message"),
|
||||
<AccessibleTooltipButton
|
||||
className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
|
||||
onClick={() => this.voiceRecordingButton?.onRecordStartEndClick()}
|
||||
|
@ -444,7 +452,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
|
|||
}
|
||||
|
||||
if (!this.state.narrowMode) {
|
||||
return buttons;
|
||||
return Array.from(buttons.values());
|
||||
} else {
|
||||
const classnames = classNames({
|
||||
mx_MessageComposer_button: true,
|
||||
|
@ -457,19 +465,23 @@ export default class MessageComposer extends React.Component<IProps, IState> {
|
|||
<AccessibleTooltipButton
|
||||
className={classnames}
|
||||
onClick={this.toggleButtonMenu}
|
||||
title={_t("view more options")}
|
||||
title={_t("Composer menu")}
|
||||
tooltip={false}
|
||||
/>
|
||||
{ this.state.isMenuOpen && (
|
||||
<ContextMenu
|
||||
onFinished={this.toggleButtonMenu}
|
||||
{...menuPosition}
|
||||
menuPaddingRight={10}
|
||||
menuPaddingTop={16}
|
||||
menuWidth={50}
|
||||
menuPaddingTop={5}
|
||||
menuPaddingBottom={5}
|
||||
menuWidth={150}
|
||||
wrapperClassName="mx_MessageComposer_Menu"
|
||||
>
|
||||
{ buttons.slice(1).map((button, index) => (
|
||||
<MenuItem className="mx_CallContextMenu_item" key={index} onClick={this.toggleButtonMenu}>
|
||||
{ Array.from(buttons).slice(1).map(([label, button]) => (
|
||||
<MenuItem className="mx_CallContextMenu_item" key={label} onClick={this.toggleButtonMenu}>
|
||||
{ button }
|
||||
{ label }
|
||||
</MenuItem>
|
||||
)) }
|
||||
</ContextMenu>
|
||||
|
@ -568,7 +580,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
|
|||
});
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className={classes} ref={this.ref}>
|
||||
{ recordingTooltip }
|
||||
<div className="mx_MessageComposer_wrapper">
|
||||
{ this.props.showReplyPreview && (
|
||||
|
|
|
@ -1558,8 +1558,10 @@
|
|||
"Send a reply…": "Send a reply…",
|
||||
"Send an encrypted message…": "Send an encrypted message…",
|
||||
"Send a message…": "Send a message…",
|
||||
"Hide Stickers": "Hide Stickers",
|
||||
"Send File": "Send File",
|
||||
"Show Emojis": "Show Emojis",
|
||||
"Show Stickers": "Show Stickers",
|
||||
"Hide Stickers": "Hide Stickers",
|
||||
"Send voice message": "Send voice message",
|
||||
"view more options": "view more options",
|
||||
"The conversation continues here.": "The conversation continues here.",
|
||||
|
|
Loading…
Reference in New Issue