Closes #21 move filesettings one class up

fix issues with the path when opening second browser

src/assets/icons/checked.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#3f79ad" d="M13 0.9l-1 1.1h-12v14h14v-10.5l1.7-2-2.7-2.6zM6.5 11.7l-4.2-4.2 1.4-1.4 2.7 2.7 6.6-6.6 1.4 1.4-7.9 8.1z"></path>
+</svg>

src/assets/icons/unchecked.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#3f79ad" d="M14 6.2v7.8h-12v-12h10.5l1-1h-12.5v14h14v-9.8z"></path>
+<path fill="#3f79ad" d="M7.9 10.9l-4.2-4.2 1.5-1.4 2.7 2.8 6.7-6.7 1.4 1.4z"></path>
+</svg>

src/components/fileBrowser.jsx

@@ -5,7 +5,6 @@ import { Input, Label } from './fileBrowser.styled.js'
 
 // images for different filetypes
 import Back from '../assets/icons/arrowLeft.svg'
-import SettingsCog from '../assets/icons/settings-cog.svg'
 
 import Other from '../assets/fileTypes/other.svg'
 import Folder from '../assets/fileTypes/folder.svg'
@@ -181,30 +180,6 @@ const SearchInput = styled(Input)`
   }
 `
 
-const FileSettingsPopup = styled.div`
-  min-width: 15rem;
-  background-color: var(--button-color);
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 900;
-  padding: 1rem;
-  border-radius: .3rem;
-  box-shadow: 0 0 .5rem rgba(0,0,0,.3);
-`
-
-const FileSettingsHeader = styled.h3`
-  text-align: center;
-  margin-bottom: 1rem;
-`
-
-const FileColumnSettingsContainer = styled.form`
-  display: flex;
-  flex-direction: column;
-  gap: .5rem 0;
-`
-
 const delay = t => new Promise(resolve => setTimeout(resolve, t))
 
 class FileBrowser extends Component {
@@ -218,12 +193,6 @@ class FileBrowser extends Component {
       prevPath: "",
       transitionFiles: 0,
       showMenu: false,
-      showFileSettings: false,
-      shownColumns: {
-        size: true,
-        date: false,
-        datetime: false
-      },
       cursorX: 0,
       cursorY: 0,
       clicked: "",
@@ -241,9 +210,6 @@ class FileBrowser extends Component {
   componentDidMount = () => {
     this.setState({ prevPath: this.props.currentPath, files: this.props.files })
 
-    const shownColumns = JSON.parse(localStorage.getItem("shownbrowsercolumns"))
-    if (shownColumns !== null) this.setState({ shownColumns })
-
     // add click event listener for closing menu
     window.addEventListener('click', this.handleWindowClick)
   }
@@ -271,11 +237,9 @@ class FileBrowser extends Component {
 
   componentWillUnmount = () => {
     window.removeEventListener('click', this.handleWindowClick)
-
-    localStorage.setItem("shownbrowsercolumns", JSON.stringify(this.state.shownColumns))
   }
 
-  handleWindowClick = () => this.setState({ showMenu: false, showFileSettings: false })
+  handleWindowClick = () => this.setState({ showMenu: false })
 
   // used to filter the files
   handleInputChange({target}) {
@@ -399,70 +363,6 @@ class FileBrowser extends Component {
     })
   }
 
-  handleColumnChange = ({target}) => {
-    const value = target.type === 'checkbox' ? target.checked : target.value
-    const name = target.name
-
-    let { shownColumns } = this.state
-
-    switch (name) {
-      case "size":
-        shownColumns.size = value
-        this.setState({ shownColumns })
-        break;
-      case "datetime":
-        if (value === true) {
-          shownColumns.datetime = true
-          shownColumns.date = false
-        } else {
-          shownColumns.datetime = false
-        }
-        this.setState({ shownColumns })
-        break;
-      case "date":
-        if (value === true) {
-          shownColumns.date = true
-          shownColumns.datetime = false
-        } else {
-          shownColumns.date = false
-        }
-        this.setState({ shownColumns })
-        break;
-      default: break;
-    }
-  }
-
-  openFileSettings = e => {
-    e.stopPropagation()
-    this.setState({ showFileSettings: true })
-  }
-
-  renderFileSettings = () => {
-    const { size, date, datetime } = this.state.shownColumns
-
-    if (this.state.showFileSettings) return (
-      <FileSettingsPopup onClick={e => e.stopPropagation()}>
-        <FileSettingsHeader> Columns </FileSettingsHeader>
-        <FileColumnSettingsContainer>
-          <div>
-            <input type="checkbox" id="datetime" name="datetime" checked={datetime} onChange={this.handleColumnChange} />
-            <label htmlFor="datetime"> Datetime </label>
-          </div>
-
-          <div>
-            <input type="checkbox" id="date" name="date" checked={date} onChange={this.handleColumnChange} />
-            <label htmlFor="date"> Date </label>
-          </div>
-
-          <div>
-            <input type="checkbox" id="size" name="size" checked={size} onChange={this.handleColumnChange} />
-            <label htmlFor="size"> Size </label>
-          </div>
-        </FileColumnSettingsContainer>
-      </FileSettingsPopup>
-    )
-  }
-
   /**
    * Renders a simple menu to perform actions on the clicked file
    */
@@ -495,7 +395,7 @@ class FileBrowser extends Component {
     if (isNext)  files = this.props.files
     else        files = this.state.files
 
-    const { shownColumns } = this.state
+    const { shownColumns } = this.props
 
     files = this.getOrderedItems(files).slice(this.state.from, this.state.to)
 
@@ -565,30 +465,27 @@ class FileBrowser extends Component {
   )
 
   render() {
-    const { transitionFiles, from, to, orderBy, orderAscending, files, shownColumns } = this.state
+    const { transitionFiles, from, to, orderBy, orderAscending, files } = this.state
+    const { shownColumns, loading, active, setActive, currentPath } = this.props
     const rows = Math.max(this.props.files.length, files.length)
 
     return (
-      <FBContainer active={this.props.active} onClick={this.props.setActive}>
+      <FBContainer active={active} onClick={setActive}>
         {
           this.renderMenu()
         }
         {
-          this.renderFileSettings()
+          loading ? <LineLoader/> : ""
-        }
-        {
-          this.props.loading ? <LineLoader/> : ""
         }
         <BrowserHeader>
           <BrowserHeaderDiv>
             <BrowseImage src={Back} alt="up directory" width="25" height="25" onClick={this.previousDirectory} />
             <BrowseImage src={Home} alt="root directory" width="25" height="25" onClick={this.rootDirectory} />
-            <p> { this.props.currentPath !== "/" ? this.renderPath() : "/" } </p>
+            <p> { currentPath !== "/" ? this.renderPath() : "/" } </p>
           </BrowserHeaderDiv>
           <BrowserHeaderDiv>
             <SearchLabel htmlFor="filterFiles" style={{ textAlign: "end" }} > Search </SearchLabel>
             <SearchInput name="filter" id="filterFiles" type="text" placeholder="search" initialValue="" autoComplete="off" onChange={this.handleInputChange} />
-            <img src={SettingsCog} alt="settings" width="25" height="25" onClick={this.openFileSettings} />
           </BrowserHeaderDiv>
 
           <GridFileBrowser shownColumns={shownColumns}>

src/components/fileBrowser.styled.js

@@ -55,7 +55,31 @@ export const FileBrowserSettings = styled.div`
 `
 
 export const BrowserSettingButton = styled(Button)`
-  padding: .5rem;
+  padding: .25rem .45rem;
   display: flex;
   align-items: center;
+`
+
+export const FileSettingsPopup = styled.div`
+  min-width: 15rem;
+  background-color: var(--button-color);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 900;
+  padding: 1rem;
+  border-radius: .3rem;
+  box-shadow: 0 0 .5rem rgba(0,0,0,.3);
+`
+
+export const FileSettingsHeader = styled.h3`
+  text-align: center;
+  margin-bottom: 1rem;
+`
+
+export const FileColumnSettingsContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: .5rem 0;
 `

src/components/fileBrowserMenu.jsx

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
-import { Button, Cross, PopupContainer, PopupTitle } from '../styled'
+import { Button, Checkbox, Cross, PopupContainer, PopupTitle } from '../styled'
 import API from '../utils/API'
 import FileBrowser from './fileBrowser'
-import { BrowserSettingButton, FileBrowserRemotes, FileBrowsersContainer, FileBrowserSettings, FileBrowserWrapper } from './fileBrowser.styled'
+import { BrowserSettingButton, FileBrowserRemotes, FileBrowsersContainer, FileBrowserSettings, FileBrowserWrapper, FileSettingsPopup, FileSettingsHeader, FileColumnSettingsContainer } from './fileBrowser.styled'
 import assert from 'assert'
 
 import BrowserSingle from '../assets/icons/browserSingle.svg'
 import BrowserDual from '../assets/icons/browserDual.svg'
+import SettingsCog from '../assets/icons/settings-cog.svg'
 
 class FileBrowserMenu extends Component {
   constructor() {
@@ -25,18 +26,33 @@ class FileBrowserMenu extends Component {
       loading: [false, false],
       errMessage: "",
       dualBrowser: false,
-      activeBrowser: 0
+      activeBrowser: 0,
+      showFileSettings: false,
+      shownColumns: {
+        size: true,
+        date: false,
+        datetime: false
+      }
     }
   }
 
   componentDidMount = () => {
     const browserFs = JSON.parse(sessionStorage.getItem("browserFs")),
-          currentPath = JSON.parse(sessionStorage.getItem("currentPath"))
+          currentPath = JSON.parse(sessionStorage.getItem("currentPath")),
+          shownColumns = JSON.parse(localStorage.getItem("shownbrowsercolumns"))
 
-    this.setState({ browserFs })
+    if (shownColumns !== null) this.setState({ shownColumns })
+
+    const tempPath = currentPath[0]
+    currentPath[0] = ""
+
+    this.setState({ browserFs, currentPath })
+
+    // add click event listener for closing settings
+    window.addEventListener('click', this.handleWindowClick)
 
     setTimeout(() => {
-      this.getFiles(0, currentPath[0])
+      this.getFiles(0, tempPath)
       .catch(() => {})
     }, 50)
   }
@@ -44,8 +60,14 @@ class FileBrowserMenu extends Component {
   componentWillUnmount = () => {
     sessionStorage.setItem("browserFs", JSON.stringify(this.state.browserFs))
     sessionStorage.setItem("currentPath", JSON.stringify(this.state.currentPath))
+    localStorage.setItem("shownbrowsercolumns", JSON.stringify(this.state.shownColumns))
+
+    window.removeEventListener('click', this.handleWindowClick)
   }
 
+  // stopPropagation does not work because it is a different event cause
+  handleWindowClick = () => this.setState({ showFileSettings: false })
+
   /**
    * 
    * @param {Number} brIndex identify which browser wants new files
@@ -116,9 +138,80 @@ class FileBrowserMenu extends Component {
     })
   }
 
+  handleColumnChange = ({target}) => {
+    const value = target.type === 'checkbox' ? target.checked : target.value
+    const name = target.name
+
+    let { shownColumns } = this.state
+
+    switch (name) {
+      case "size":
+        shownColumns.size = value
+        this.setState({ shownColumns })
+        break;
+      case "datetime":
+        if (value === true) {
+          shownColumns.datetime = true
+          shownColumns.date = false
+        } else {
+          shownColumns.datetime = false
+        }
+        this.setState({ shownColumns })
+        break;
+      case "date":
+        if (value === true) {
+          shownColumns.date = true
+          shownColumns.datetime = false
+        } else {
+          shownColumns.date = false
+        }
+        this.setState({ shownColumns })
+        break;
+      default: break;
+    }
+  }
+
+  openFileSettings = e => {
+    e.stopPropagation()
+    this.setState({ showFileSettings: true })
+  }
+
+  renderFileSettings = () => {
+    const { size, date, datetime } = this.state.shownColumns
+
+    if (this.state.showFileSettings) return (
+      <FileSettingsPopup onClick={e => e.stopPropagation()}>
+        <FileSettingsHeader> Columns </FileSettingsHeader>
+        <FileColumnSettingsContainer>
+          <div>
+            <Checkbox type="checkbox" id="datetime" name="datetime" checked={datetime} onChange={this.handleColumnChange} />
+            <label htmlFor="datetime"> Datetime </label>
+          </div>
+
+          <div>
+            <Checkbox type="checkbox" id="date" name="date" checked={date} onChange={this.handleColumnChange} />
+            <label htmlFor="date"> Date </label>
+          </div>
+
+          <div>
+            <Checkbox type="checkbox" id="size" name="size" checked={size} onChange={this.handleColumnChange} />
+            <label htmlFor="size"> Size </label>
+          </div>
+        </FileColumnSettingsContainer>
+      </FileSettingsPopup>
+    )
+  }
+
   switchBrowserMode = () => {
+    if (this.state.loading[0] || this.state.loading[1]) return;
+
     if (this.state.dualBrowser) return this.setState({ activeBrowser: 0, dualBrowser: false })
-    return this.setState({ activeBrowser: 1, dualBrowser: true })
+    let { currentPath } = this.state
+    const tempPath = currentPath[1]
+    currentPath[1] = ""
+
+    this.setState({ activeBrowser: 1, dualBrowser: true, currentPath })
+    this.getFiles(1, tempPath)
   }
 
   setActiveBrowser = activeBrowser => {
@@ -128,6 +221,7 @@ class FileBrowserMenu extends Component {
   setRemote = remoteName => {
     let { browserFs, currentPath, activeBrowser } = this.state
     browserFs[activeBrowser] = remoteName
+    currentPath[activeBrowser] = ""
 
     this.setState({ browserFs, currentPath })
     setTimeout(() => {
@@ -142,11 +236,15 @@ class FileBrowserMenu extends Component {
   }
 
   render = () => {
-    const { files, currentPath, loading, dualBrowser, activeBrowser } = this.state
+    const { files, currentPath, loading, dualBrowser, activeBrowser, shownColumns } = this.state
 
     return (
       <PopupContainer>
-        <PopupTitle> Browser </PopupTitle>
+        {
+          this.renderFileSettings()
+        }
+
+        <PopupTitle> File Browser </PopupTitle>
         <Cross onClick={this.props.close}> Close </Cross>
 
         <FileBrowsersContainer>
@@ -155,7 +253,10 @@ class FileBrowserMenu extends Component {
 
             <FileBrowserSettings>
               <BrowserSettingButton onClick={this.switchBrowserMode}>
-                <img src={dualBrowser ? BrowserSingle : BrowserDual} alt={dualBrowser ? "single browser" : "dual browser"} width="16" height="16" />
+                <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>
@@ -168,6 +269,7 @@ class FileBrowserMenu extends Component {
               updateFiles={path => this.getFiles(0, path)}
               currentPath={currentPath[0]}
               loading={loading[0]}
+              shownColumns={shownColumns}
               active={activeBrowser === 0}
             />
             {
@@ -179,6 +281,7 @@ class FileBrowserMenu extends Component {
                 updateFiles={path => this.getFiles(1, path)}
                 currentPath={currentPath[1]}
                 loading={loading[1]}
+                shownColumns={shownColumns}
                 active={activeBrowser === 1 && dualBrowser}
               />
             }

src/styled.js

@@ -1,5 +1,7 @@
 import styled from 'styled-components'
 
+import Checked from './assets/icons/checked.svg'
+
 export const Container = styled.div`
   display: flex;
   gap: 0 2rem;
@@ -334,4 +336,32 @@ export const IconWrapper = styled.div`
   justify-content: center;
   align-items: center;
   height: 100%;
+`
+
+export const Checkbox = styled.input`
+  display: none;
+
+  &[type=checkbox] + label {
+    position: relative;
+    margin-left: 1.5rem;
+  }
+
+  &[type=checkbox] + label::after {
+    content: '';
+    position: absolute;
+    top: .35rem;
+    left: -1.45rem;
+    width: .75rem;
+    height: .75rem;
+    outline: .1px solid var(--primary-color);
+  }
+
+  &[type=checkbox]:checked + label::after {
+    background: url(${Checked});
+    top: .15rem;
+    left: -1.5rem;
+    width: 1rem;
+    height: 1rem;
+    outline: unset;
+  }
 `