Replace compose context menu with IconizedContextMenu (#22046)

Signed-off-by: Michael Weimann <michaelw@matrix.org>

res/css/views/rooms/_MessageComposer.scss

@@ -178,12 +178,6 @@ limitations under the License.
     }
 }
 
-.mx_ContextualMenu {
-    .mx_MessageComposer_button {
-        padding-left: calc(var(--size) + 6px);
-    }
-}
-
 .mx_MessageComposer_button {
     --size: 26px;
     position: relative;
@@ -192,20 +186,16 @@ limitations under the License.
     line-height: var(--size);
     width: auto;
     padding-left: var(--size);
+    border-radius: 50%;
+    margin-right: 6px;
 
-    &:not(.mx_CallContextMenu_item) {
+    &:last-child {
-        border-radius: 50%;
+        margin-right: auto;
-        margin-right: 6px;
-
-        &:last-child {
-            margin-right: auto;
-        }
     }
 
     &::before {
         content: '';
         position: absolute;
-
         top: 3px;
         left: 3px;
         height: 20px;
@@ -399,18 +389,3 @@ limitations under the License.
         left: 0;
     }
 }
-
-.mx_MessageComposer_Menu .mx_CallContextMenu_item {
-    display: flex;
-    align-items: center;
-    max-width: unset;
-    margin: 7px 7px 7px 16px; // space out the buttons
-}
-
-.mx_MessageComposer_Menu .mx_ContextualMenu {
-    min-width: 150px;
-    width: max-content;
-    padding: 5px 10px 5px 0;
-    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.25);
-    border-radius: 8px;
-}

src/components/views/location/LocationButton.tsx

@@ -58,7 +58,6 @@ export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition,
 
     const className = classNames(
         "mx_MessageComposer_button",
-        "mx_MessageComposer_location",
         {
             "mx_MessageComposer_button_highlight": menuDisplayed,
         },
@@ -67,6 +66,7 @@ export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition,
     return <React.Fragment>
         <CollapsibleButton
             className={className}
+            iconClassName="mx_MessageComposer_location"
             onClick={openMenu}
             title={_t("Location")}
         />

src/components/views/rooms/CollapsibleButton.tsx

@@ -20,27 +20,27 @@ import classNames from 'classnames';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { MenuItem } from "../../structures/ContextMenu";
 import { OverflowMenuContext } from './MessageComposerButtons';
+import { IconizedContextMenuOption } from '../context_menus/IconizedContextMenu';
 
 interface ICollapsibleButtonProps extends ComponentProps<typeof MenuItem> {
     title: string;
+    iconClassName: string;
 }
 
-export const CollapsibleButton = ({ title, children, className, ...props }: ICollapsibleButtonProps) => {
+export const CollapsibleButton = ({ title, children, className, iconClassName, ...props }: ICollapsibleButtonProps) => {
     const inOverflowMenu = !!useContext(OverflowMenuContext);
     if (inOverflowMenu) {
-        return <MenuItem
+        return <IconizedContextMenuOption
             {...props}
-            className={classNames("mx_CallContextMenu_item", className)}
+            iconClassName={iconClassName}
-        >
+            label={title}
-            { title }
+        />;
-            { children }
-        </MenuItem>;
     }
 
     return <AccessibleTooltipButton
         {...props}
         title={title}
-        className={className}
+        className={classNames(className, iconClassName)}
     >
         { children }
     </AccessibleTooltipButton>;

src/components/views/rooms/MessageComposerButtons.tsx

@@ -38,6 +38,7 @@ import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import RoomContext from '../../../contexts/RoomContext';
 import { useDispatcher } from "../../../hooks/useDispatcher";
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
+import IconizedContextMenu, { IconizedContextMenuOptionList } from '../context_menus/IconizedContextMenu';
 
 interface IProps {
     addEmoji: (emoji: string) => boolean;
@@ -108,15 +109,18 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
             title={_t("More options")}
         /> }
         { props.isMenuOpen && (
-            <ContextMenu
+            <IconizedContextMenu
                 onFinished={props.toggleButtonMenu}
                 {...props.menuPosition}
                 wrapperClassName="mx_MessageComposer_Menu"
+                compact={true}
             >
                 <OverflowMenuContext.Provider value={props.toggleButtonMenu}>
-                    { moreButtons }
+                    <IconizedContextMenuOptionList>
+                        { moreButtons }
+                    </IconizedContextMenuOptionList>
                 </OverflowMenuContext.Provider>
-            </ContextMenu>
+            </IconizedContextMenu>
         ) }
     </UploadButtonContextProvider>;
 };
@@ -158,7 +162,6 @@ const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition }) =>
 
     const className = classNames(
         "mx_MessageComposer_button",
-        "mx_MessageComposer_emoji",
         {
             "mx_MessageComposer_button_highlight": menuDisplayed,
         },
@@ -169,6 +172,7 @@ const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition }) =>
     return <React.Fragment>
         <CollapsibleButton
             className={className}
+            iconClassName="mx_MessageComposer_emoji"
             onClick={openMenu}
             title={_t("Emoji")}
         />
@@ -254,7 +258,8 @@ const UploadButton = () => {
     };
 
     return <CollapsibleButton
-        className="mx_MessageComposer_button mx_MessageComposer_upload"
+        className="mx_MessageComposer_button"
+        iconClassName="mx_MessageComposer_upload"
         onClick={onClick}
         title={_t('Attachment')}
     />;
@@ -266,7 +271,8 @@ function showStickersButton(props: IProps): ReactElement {
             ? <CollapsibleButton
                 id='stickersButton'
                 key="controls_stickers"
-                className="mx_MessageComposer_button mx_MessageComposer_stickers"
+                className="mx_MessageComposer_button"
+                iconClassName="mx_MessageComposer_stickers"
                 onClick={() => props.setStickerPickerOpen(!props.isStickerPickerOpen)}
                 title={props.isStickerPickerOpen ? _t("Hide stickers") : _t("Sticker")}
             />
@@ -281,7 +287,8 @@ function voiceRecordingButton(props: IProps, narrow: boolean): ReactElement {
             ? null
             : <CollapsibleButton
                 key="voice_message_send"
-                className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
+                className="mx_MessageComposer_button"
+                iconClassName="mx_MessageComposer_voiceMessage"
                 onClick={props.onRecordStartEndClick}
                 title={_t("Voice Message")}
             />
@@ -345,7 +352,8 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
 
         return (
             <CollapsibleButton
-                className="mx_MessageComposer_button mx_MessageComposer_poll"
+                className="mx_MessageComposer_button"
+                iconClassName="mx_MessageComposer_poll"
                 onClick={this.onCreateClick}
                 title={_t("Poll")}
             />