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

Fix narrow mode composer buttons for polls labs #7386

Merged
merged 3 commits into from
Dec 15, 2021
Merged

Fix narrow mode composer buttons for polls labs #7386

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6e471e5
Fix narrow mode composer buttons
t3chguy Dec 15, 2021
25e2175
i18n
t3chguy Dec 15, 2021
30ec221
Make react less upset at me for sending a `label=false`
t3chguy Dec 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 67 additions & 53 deletions src/components/views/rooms/MessageComposer.tsx
View file
Open in desktop
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, { 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";
Expand Down Expand Up @@ -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 }) => {
Expand All @@ -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;
Expand Down Expand Up @@ -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 }
Expand Down Expand Up @@ -233,7 +245,7 @@ class UploadButton extends React.Component<IUploadButtonProps> {
}
}

interface IPollButtonProps {
interface IPollButtonProps extends Pick<ICollapsibleButtonProps, "narrowMode"> {
room: Room;
}

Expand Down Expand Up @@ -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")}
/>
);
}
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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() {
Expand Down
1 change: 0 additions & 1 deletion src/i18n/strings/en_EN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down