Make drop-down menus use a single button on touch screens

[birtles]

The little drop down button is hard to press on small devices. The idea is to use the pointer: coarse media query (perhaps combined with a screen size check) and when set substitute in a single button which toggles color, or, on long-press does the drop-down.

I started working on this but stopped because setting the button up proved difficult because we possibly want a larger button which will take some special handling.

[birtles]

For my own reference, here is the code I started with:

diff --git a/src/components/FormatToolbar.tsx b/src/components/FormatToolbar.tsx
index 3870491..ecde387 100644
--- a/src/components/FormatToolbar.tsx
+++ b/src/components/FormatToolbar.tsx
@@ -67,6 +67,7 @@ export class FormatToolbar extends React.Component<Props, State> {
   colorDropDownRef: React.RefObject<HTMLButtonElement>;
   colorPickerRef: React.RefObject<ColorPicker>;
   previousFocus?: HTMLElement;
+  pointerMediaQuery?: MediaQueryList;
   state: State;
 
   constructor(props: Props) {
@@ -92,6 +93,7 @@ export class FormatToolbar extends React.Component<Props, State> {
     this.toggleColorDropDown = this.toggleColorDropDown.bind(this);
     this.handleColorSelect = this.handleColorSelect.bind(this);
     this.handleDropDownKey = this.handleDropDownKey.bind(this);
+    this.coarsePointerTypeChanged = this.coarsePointerTypeChanged.bind(this);
   }
 
   handleClick(evt: React.MouseEvent<HTMLButtonElement>) {
@@ -181,6 +183,17 @@ export class FormatToolbar extends React.Component<Props, State> {
     this.toggleColorDropDown();
   }
 
+  componentDidMount() {
+    this.pointerMediaQuery = window.matchMedia('(pointer: coarse)');
+    this.pointerMediaQuery.addListener(this.coarsePointerTypeChanged);
+    this.toggleDropDownType(this.pointerMediaQuery.matches);
+  }
+
+  componentWillUnmount() {
+    this.pointerMediaQuery!.removeListener(this.coarsePointerTypeChanged);
+    this.pointerMediaQuery = undefined;
+  }
+
   componentDidUpdate(prevProps: Props, prevState: State) {
     // Update the focus when opening/closing the color drop-down
     if (
@@ -205,6 +218,16 @@ export class FormatToolbar extends React.Component<Props, State> {
     }
   }
 
+  coarsePointerTypeChanged(e: MediaQueryList) {
+    if (e.matches) {
+    } else {
+    }
+  }
+
+  toggleDropDownType(coarse: boolean) {
+    console.log(`toggleDropDownType: ${coarse}`);
+  }
+
   render() {
     let className = 'format-toolbar';
     if (this.props.className) {