Control buttons render in Drawer on small screens, closes #1193. (#1194)

hajkmap · Oct 19, 2022 · d7971bd · d7971bd
1 parent d8801ec
commit d7971bd
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 23 deletions.
diff --git a/new-client/src/plugins/BaseWindowPlugin.js b/new-client/src/plugins/BaseWindowPlugin.js
@@ -212,9 +212,10 @@ class BaseWindowPlugin extends React.PureComponent {
             windowVisible: this.state.windowVisible,
           })}
         </Window>
-        {/* Drawer buttons and Widget buttons should render a Drawer button. */}
-        {(target === "toolbar" || this.pluginIsWidget(target)) &&
-          this.renderDrawerButton()}
+        {/* Always render a Drawer button (it's a backup for plugins 
+              render elsewhere: we hide Widget and Control buttons on 
+              small screens and fall back to Drawer button). */}
+        {this.renderDrawerButton()}
         {/* Widget buttons must also render a Widget */}
         {this.pluginIsWidget(target) &&
           this.renderWidgetButton(`${target}-column`)}
@@ -227,14 +228,19 @@ class BaseWindowPlugin extends React.PureComponent {
   /**
    * This is a bit of a special case. This method will render
    * not only plugins specified as Drawer plugins (target===toolbar),
-   * but it will also render Widget plugins - given some special condition.
+   * but it will also render Widget and Control plugins - given some special condition.
    *
    * Those special conditions are small screens, where there's no screen
    * estate to render the Widget button in Map Overlay.
    */
   renderDrawerButton() {
     return createPortal(
-      <Hidden mdUp={this.pluginIsWidget(this.props.options.target)}>
+      <Hidden
+        mdUp={
+          this.pluginIsWidget(this.props.options.target) ||
+          this.props.options.target === "control"
+        }
+      >
         <ListItem
           button
           divider={true}
@@ -266,12 +272,15 @@ class BaseWindowPlugin extends React.PureComponent {
 
   renderControlButton() {
     return createPortal(
-      <PluginControlButton
-        icon={this.props.custom.icon}
-        onClick={this.handleButtonClick}
-        title={this.title}
-        abstract={this.description}
-      />,
+      // Hide Control button on small screens, see renderDrawerButton too
+      <Hidden mdDown>
+        <PluginControlButton
+          icon={this.props.custom.icon}
+          onClick={this.handleButtonClick}
+          title={this.title}
+          abstract={this.description}
+        />
+      </Hidden>,
       document.getElementById("plugin-control-buttons")
     );
   }

diff --git a/new-client/src/plugins/DialogWindowPlugin.js b/new-client/src/plugins/DialogWindowPlugin.js
@@ -158,14 +158,19 @@ class DialogWindowPlugin extends React.PureComponent {
   /**
    * This is a bit of a special case. This method will render
    * not only plugins specified as Drawer plugins (target===toolbar),
-   * but it will also render Widget plugins - given some special condition.
+   * but it will also render Widget and Control plugins - given some special condition.
    *
    * Those special conditions are small screens, where there's no screen
    * estate to render the Widget button in Map Overlay.
    */
   renderDrawerButton() {
     return createPortal(
-      <Hidden mdUp={this.#pluginIsWidget(this.opts.target)}>
+      <Hidden
+        mdUp={
+          this.#pluginIsWidget(this.opts.target) ||
+          this.opts.target === "control"
+        }
+      >
         <ListItem
           button
           divider={true}
@@ -183,7 +188,7 @@ class DialogWindowPlugin extends React.PureComponent {
   renderWidgetButton(id) {
     return createPortal(
       // Hide Widget button on small screens, see renderDrawerButton too
-      <Hidden smDown>
+      <Hidden mdDown>
         <Card
           icon={this.icon}
           onClick={this.#handleButtonClick}
@@ -197,12 +202,15 @@ class DialogWindowPlugin extends React.PureComponent {
 
   renderControlButton() {
     return createPortal(
-      <PluginControlButton
-        icon={this.icon}
-        onClick={this.#handleButtonClick}
-        title={this.title}
-        abstract={this.description}
-      />,
+      // Hide Control button on small screens, see renderDrawerButton too
+      <Hidden mdDown>
+        <PluginControlButton
+          icon={this.icon}
+          onClick={this.#handleButtonClick}
+          title={this.title}
+          abstract={this.description}
+        />
+      </Hidden>,
       document.getElementById("plugin-control-buttons")
     );
   }
@@ -214,9 +222,10 @@ class DialogWindowPlugin extends React.PureComponent {
       this.props.app.config.mapConfig.map.clean !== true && (
         <>
           {this.renderDialog()}
-          {/* Drawer buttons and Widget buttons should render a Drawer button. */}
-          {(target === "toolbar" || this.#pluginIsWidget(target)) &&
-            this.renderDrawerButton()}
+          {/* Always render a Drawer button (it's a backup for plugins 
+              render elsewhere: we hide Widget and Control buttons on 
+              small screens and fall back to Drawer button). */}
+          {this.renderDrawerButton()}
           {/* Widget buttons must also render a Widget */}
           {this.#pluginIsWidget(target) &&
             this.renderWidgetButton(`${target}-column`)}