Support narrow mode

This commit is contained in:
Half-Shot 2026-05-12 13:31:45 +01:00
parent c569e8914a
commit 6637ad2cfe

View File

@ -23,7 +23,7 @@ import {
StickerIcon,
TextFormattingIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import { UploadButton } from "@element-hq/web-shared-components";
import { UploadButton, useViewModel } from "@element-hq/web-shared-components";
import { _t } from "../../../languageHandler";
import { CollapsibleButton } from "./CollapsibleButton";
@ -34,7 +34,10 @@ import Modal from "../../../Modal";
import PollCreateDialog from "../elements/PollCreateDialog";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import IconizedContextMenu, { IconizedContextMenuOptionList } from "../context_menus/IconizedContextMenu";
import IconizedContextMenu, {
IconizedContextMenuOption,
IconizedContextMenuOptionList,
} from "../context_menus/IconizedContextMenu";
import { EmojiButton } from "./EmojiButton";
import { filterBoolean } from "../../../utils/arrays";
import { useSettingValue } from "../../../hooks/useSettings";
@ -88,7 +91,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
),
];
moreButtons = [
<UploadButton key="upload" vm={roomUploadVM} />,
narrowUploadButtons(),
showStickersButton(props),
voiceRecordingButton(props, narrow),
props.showPollsButton ? pollButton(room, props.relation) : null,
@ -277,4 +280,20 @@ function ComposerModeButton({ isRichTextEnabled, onClick }: WysiwygToggleButtonP
);
}
function narrowUploadButtons(): JSX.Element[] {
const vm = useRoomUploadViewModel();
const snapshot = useViewModel(vm);
if (!snapshot.mayUpload) {
return [];
}
return snapshot.options.map(({ type, icon: Icon, label }) => (
<IconizedContextMenuOption
onClick={() => vm.onUploadOptionSelected(type)}
icon={Icon && <Icon />}
label={label}
key={type}
/>
));
}
export default MessageComposerButtons;