Closes #11 Secondary browser is not function for mobile clients

src/components/fileBrowser.styled.js

@@ -45,6 +45,7 @@ export const FileBrowserRemotes = styled.div`
   display: flex;
   gap: .5rem;
   justify-content: flex-start;
+  flex-wrap: wrap;
 `
 
 export const FileBrowserSettings = styled.div`
@@ -52,6 +53,7 @@ export const FileBrowserSettings = styled.div`
   gap: .5rem;
   flex-grow: 1;
   justify-content: flex-end;
+  max-width: 100%;
 `
 
 export const BrowserSettingButton = styled(Button)`
@@ -83,3 +85,12 @@ export const FileColumnSettingsContainer = styled.form`
   flex-direction: column;
   gap: .5rem 0;
 `
+
+export const RemoteButton = styled(Button)`
+  max-width: calc(100% - 2rem);
+  overflow: hidden;
+  direction: rtl;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`

src/components/fileBrowserMenu.jsx

@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
-import { Button, Checkbox, Cross, PopupContainer, PopupTitle } from '../styled'
+import { Checkbox, Cross, PopupContainer, PopupTitle } from '../styled'
 import API from '../utils/API'
 import FileBrowser from './fileBrowser'
-import { BrowserSettingButton, FileBrowserRemotes, FileBrowsersContainer, FileBrowserSettings, FileBrowserWrapper, FileSettingsPopup, FileSettingsHeader, FileColumnSettingsContainer } from './fileBrowser.styled'
+import { BrowserSettingButton, FileBrowserRemotes, FileBrowsersContainer, FileBrowserSettings, FileBrowserWrapper, FileSettingsPopup, FileSettingsHeader, FileColumnSettingsContainer, RemoteButton } from './fileBrowser.styled'
 import assert from 'assert'
 
 import BrowserSingle from '../assets/icons/browserSingle.svg'
@@ -32,7 +32,8 @@ class FileBrowserMenu extends Component {
         size: true,
         date: false,
         datetime: false
-      }
+      },
+      windowWidth: 1920
     }
   }
 
@@ -46,10 +47,11 @@ class FileBrowserMenu extends Component {
     const tempPath = currentPath[0]
     currentPath[0] = ""
 
-    this.setState({ browserFs, currentPath })
+    this.setState({ browserFs, currentPath, windowWidth: window.innerWidth })
 
     // add click event listener for closing settings
     window.addEventListener('click', this.handleWindowClick)
+    window.addEventListener("orientationchange", this.handleOrientationChange)
 
     setTimeout(() => {
       this.getFiles(0, tempPath)
@@ -63,11 +65,14 @@ class FileBrowserMenu extends Component {
     localStorage.setItem("shownbrowsercolumns", JSON.stringify(this.state.shownColumns))
 
     window.removeEventListener('click', this.handleWindowClick)
+    window.removeEventListener("orientationchange", this.handleOrientationChange)
   }
 
   // stopPropagation does not work because it is a different event cause
   handleWindowClick = () => this.setState({ showFileSettings: false })
 
+  handleOrientationChange = () => this.setState({ windowWidth: window.innerWidth })
+
   /**
    * 
    * @param {Number} brIndex identify which browser wants new files
@@ -215,6 +220,7 @@ class FileBrowserMenu extends Component {
   }
 
   setActiveBrowser = activeBrowser => {
+    if (this.state.windowWidth < 1200 && this.state.dualBrowser === false) this.switchBrowserMode()
     if (this.state.dualBrowser) this.setState({ activeBrowser })
   }
 
@@ -231,37 +237,15 @@ class FileBrowserMenu extends Component {
 
   renderRemoteButtons = () => {
     return this.props.remotes.map(v => (
-      <Button key={v.name} onClick={() => this.setRemote(v.name)}> { v.name } </Button>
+      <RemoteButton key={v.name} onClick={() => this.setRemote(v.name)}> { v.name } </RemoteButton>
     ))
   }
 
-  render = () => {
+  renderBrowser = () => {
-    const { files, currentPath, loading, dualBrowser, activeBrowser, shownColumns } = this.state
+    const { files, currentPath, loading, dualBrowser, activeBrowser, shownColumns, windowWidth } = this.state
 
-    return (
+    if (windowWidth >= 1200) return (
-      <PopupContainer>
+      <Fragment>
-        {
-          this.renderFileSettings()
-        }
-
-        <PopupTitle> File Browser </PopupTitle>
-        <Cross onClick={this.props.close}> Close </Cross>
-
-        <FileBrowsersContainer>
-          <FileBrowserRemotes>
-            { this.renderRemoteButtons() }
-
-            <FileBrowserSettings>
-              <BrowserSettingButton onClick={this.switchBrowserMode}>
-                <img src={dualBrowser ? BrowserSingle : BrowserDual} alt={dualBrowser ? "single browser" : "dual browser"} width="20" height="20" />
-              </BrowserSettingButton>
-              <BrowserSettingButton onClick={this.openFileSettings}>
-                <img src={SettingsCog} alt="file settings" width="20" height="20" />
-              </BrowserSettingButton>
-            </FileBrowserSettings>
-          </FileBrowserRemotes>
-
-          <FileBrowserWrapper>
         <FileBrowser
           setActive={() => this.setActiveBrowser(0)}
           action={(a, p) => this.doAction(0, a, p)}
@@ -285,6 +269,63 @@ class FileBrowserMenu extends Component {
             active={activeBrowser === 1 && dualBrowser}
           />
         }
+      </Fragment>
+    )
+
+    return (
+      <FileBrowser
+      setActive={() => this.setActiveBrowser(activeBrowser)}
+        action={(a, p) => this.doAction(activeBrowser, a, p)}
+        files={files[activeBrowser]}
+        updateFiles={path => this.getFiles(activeBrowser, path)}
+        currentPath={currentPath[activeBrowser]}
+        loading={loading[activeBrowser]}
+        shownColumns={shownColumns}
+        active={false}
+      />
+    )
+  }
+
+  renderSwitchBrowser = () => {
+    const { currentPath, dualBrowser, activeBrowser, windowWidth } = this.state
+
+    if (windowWidth < 1200) return (
+      <RemoteButton onClick={() => this.setActiveBrowser(activeBrowser ? 0 : 1)}>
+        { currentPath[activeBrowser ? 0 : 1] }
+      </RemoteButton>
+    )
+
+    return (
+      <BrowserSettingButton onClick={this.switchBrowserMode}>
+        <img src={dualBrowser ? BrowserSingle : BrowserDual} alt={dualBrowser ? "single browser" : "dual browser"} width="20" height="20" />
+      </BrowserSettingButton>
+    )
+  }
+
+  render = () => {
+    return (
+      <PopupContainer>
+        {
+          this.renderFileSettings()
+        }
+
+        <PopupTitle> File Browser </PopupTitle>
+        <Cross onClick={this.props.close}> Close </Cross>
+
+        <FileBrowsersContainer>
+          <FileBrowserRemotes>
+            { this.renderRemoteButtons() }
+
+            <FileBrowserSettings>
+              { this.renderSwitchBrowser() }
+              <BrowserSettingButton onClick={this.openFileSettings}>
+                <img src={SettingsCog} alt="file settings" width="20" height="20" />
+              </BrowserSettingButton>
+            </FileBrowserSettings>
+          </FileBrowserRemotes>
+
+          <FileBrowserWrapper>
+            { this.renderBrowser() }
           </FileBrowserWrapper>
         </FileBrowsersContainer>
       </PopupContainer>