Fix narrow mode composer buttons for polls labs (#7386)
Michael Telatynski
GitHub
parent
b174cc8963
commit
3c9c82ee0d
|
|
@ -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, { ComponentProps, createRef } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { MatrixEvent, IEventRelation } from "matrix-js-sdk/src/models/event";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
|
|
@ -80,10 +80,22 @@ function SendButton(props: ISendButtonProps) {
|
|||
);
|
||||
}
|
||||
|
||||
interface IEmojiButtonProps {
|
||||
interface ICollapsibleButtonProps extends ComponentProps<typeof AccessibleTooltipButton> {
|
||||
narrowMode: boolean;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const CollapsibleButton = ({ narrowMode, title, ...props }: ICollapsibleButtonProps) => {
|
||||
return <AccessibleTooltipButton
|
||||
{...props}
|
||||
title={narrowMode ? undefined : title}
|
||||
label={narrowMode ? title : undefined}
|
||||
/>;
|
||||
};
|
||||
|
||||
interface IEmojiButtonProps extends Pick<ICollapsibleButtonProps, "narrowMode"> {
|
||||
addEmoji: (unicode: string) => boolean;
|
||||
menuPosition: AboveLeftOf;
|
||||
narrowMode: boolean;
|
||||
}
|
||||
|
||||
const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition, narrowMode }) => {
|
||||
|
|
@ -108,18 +120,18 @@ const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition, narr
|
|||
// TODO: replace ContextMenuTooltipButton with a unified representation of
|
||||
// the header buttons and the right panel buttons
|
||||
return <React.Fragment>
|
||||
<AccessibleTooltipButton
|
||||
<CollapsibleButton
|
||||
className={className}
|
||||
onClick={openMenu}
|
||||
title={!narrowMode && _t('Emoji picker')}
|
||||
label={narrowMode ? _t("Add emoji") : null}
|
||||
narrowMode={narrowMode}
|
||||
title={_t("Add emoji")}
|
||||
/>
|
||||
|
||||
{ contextMenu }
|
||||
</React.Fragment>;
|
||||
};
|
||||
|
||||
interface ILocationButtonProps {
|
||||
interface ILocationButtonProps extends Pick<ICollapsibleButtonProps, "narrowMode"> {
|
||||
room: Room;
|
||||
shareLocation: (uri: string, ts: number, type: LocationShareType, description: string) => boolean;
|
||||
menuPosition: AboveLeftOf;
|
||||
|
|
@ -148,11 +160,11 @@ const LocationButton: React.FC<ILocationButtonProps> = ({ shareLocation, menuPos
|
|||
// TODO: replace ContextMenuTooltipButton with a unified representation of
|
||||
// the header buttons and the right panel buttons
|
||||
return <React.Fragment>
|
||||
<AccessibleTooltipButton
|
||||
<CollapsibleButton
|
||||
className={className}
|
||||
onClick={openMenu}
|
||||
title={!narrowMode && _t('Share location')}
|
||||
label={narrowMode ? _t('Share location') : null}
|
||||
narrowMode={narrowMode}
|
||||
title={_t("Share location")}
|
||||
/>
|
||||
|
||||
{ contextMenu }
|
||||
|
|
@ -233,7 +245,7 @@ class UploadButton extends React.Component<IUploadButtonProps> {
|
|||
}
|
||||
}
|
||||
|
||||
interface IPollButtonProps {
|
||||
interface IPollButtonProps extends Pick<ICollapsibleButtonProps, "narrowMode"> {
|
||||
room: Room;
|
||||
}
|
||||
|
||||
|
|
@ -265,10 +277,11 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<AccessibleTooltipButton
|
||||
<CollapsibleButton
|
||||
className="mx_MessageComposer_button mx_MessageComposer_poll"
|
||||
onClick={this.onCreateClick}
|
||||
title={_t('Create poll')}
|
||||
narrowMode={this.props.narrowMode}
|
||||
title={_t("Create poll")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -567,16 +580,12 @@ export default class MessageComposer extends React.Component<IProps, IState> {
|
|||
if (!this.state.haveRecording) {
|
||||
if (this.state.showPollsButton) {
|
||||
buttons.push(
|
||||
<PollButton key="polls" room={this.props.room} />,
|
||||
<PollButton key="polls" room={this.props.room} narrowMode={this.state.narrowMode} />,
|
||||
);
|
||||
}
|
||||
uploadButtonIndex = buttons.length;
|
||||
buttons.push(
|
||||
<UploadButton
|
||||
key="controls_upload"
|
||||
roomId={this.props.room.roomId}
|
||||
relation={this.props.relation}
|
||||
/>,
|
||||
<UploadButton key="controls_upload" roomId={this.props.room.roomId} relation={this.props.relation} />,
|
||||
);
|
||||
if (SettingsStore.getValue("feature_location_share")) {
|
||||
buttons.push(
|
||||
|
|
@ -610,53 +619,58 @@ export default class MessageComposer extends React.Component<IProps, IState> {
|
|||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
// XXX: the recording UI does not work well in narrow mode, so we hide this button for now
|
||||
if (!this.state.haveRecording && !this.state.narrowMode) {
|
||||
buttons.push(
|
||||
<AccessibleTooltipButton
|
||||
<CollapsibleButton
|
||||
key="voice_message_send"
|
||||
className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
|
||||
onClick={() => this.voiceRecordingButton.current?.onRecordStartEndClick()}
|
||||
title={_t("Send voice message")}
|
||||
narrowMode={this.state.narrowMode}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
if (!this.state.narrowMode) {
|
||||
return buttons;
|
||||
} else {
|
||||
const classnames = classNames({
|
||||
mx_MessageComposer_button: true,
|
||||
mx_MessageComposer_buttonMenu: true,
|
||||
mx_MessageComposer_closeButtonMenu: this.state.isMenuOpen,
|
||||
});
|
||||
|
||||
return <>
|
||||
{ buttons[uploadButtonIndex] }
|
||||
<AccessibleTooltipButton
|
||||
className={classnames}
|
||||
onClick={this.toggleButtonMenu}
|
||||
title={_t("More options")}
|
||||
tooltip={false}
|
||||
/>
|
||||
{ this.state.isMenuOpen && (
|
||||
<ContextMenu
|
||||
onFinished={this.toggleButtonMenu}
|
||||
{...menuPosition}
|
||||
menuPaddingRight={10}
|
||||
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}>
|
||||
{ button }
|
||||
</MenuItem>
|
||||
)) }
|
||||
</ContextMenu>
|
||||
) }
|
||||
</>;
|
||||
}
|
||||
|
||||
const classnames = classNames({
|
||||
mx_MessageComposer_button: true,
|
||||
mx_MessageComposer_buttonMenu: true,
|
||||
mx_MessageComposer_closeButtonMenu: this.state.isMenuOpen,
|
||||
});
|
||||
|
||||
// we render the uploadButton at top level as it is a very common interaction, splice it out of the rest
|
||||
const [uploadButton] = buttons.splice(uploadButtonIndex, 1);
|
||||
return <>
|
||||
{ uploadButton }
|
||||
<AccessibleTooltipButton
|
||||
className={classnames}
|
||||
onClick={this.toggleButtonMenu}
|
||||
title={_t("More options")}
|
||||
tooltip={false}
|
||||
/>
|
||||
{ this.state.isMenuOpen && (
|
||||
<ContextMenu
|
||||
onFinished={this.toggleButtonMenu}
|
||||
{...menuPosition}
|
||||
menuPaddingRight={10}
|
||||
menuPaddingTop={5}
|
||||
menuPaddingBottom={5}
|
||||
menuWidth={150}
|
||||
wrapperClassName="mx_MessageComposer_Menu"
|
||||
>
|
||||
{ buttons.map((button, index) => (
|
||||
<MenuItem className="mx_CallContextMenu_item" key={index} onClick={this.toggleButtonMenu}>
|
||||
{ button }
|
||||
</MenuItem>
|
||||
)) }
|
||||
</ContextMenu>
|
||||
) }
|
||||
</>;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -1649,7 +1649,6 @@
|
|||
"Filter room members": "Filter room members",
|
||||
"%(userName)s (power %(powerLevelNumber)s)": "%(userName)s (power %(powerLevelNumber)s)",
|
||||
"Send message": "Send message",
|
||||
"Emoji picker": "Emoji picker",
|
||||
"Add emoji": "Add emoji",
|
||||
"Share location": "Share location",
|
||||
"Upload file": "Upload file",
|
||||
|
|
|
|||
Loading…
Reference in New Issue