Closes #20 add filebrowser settings menu

this removes old media queries to automatically show and hide columns

src/assets/icons/settings-cog.svg

@@ -0,0 +1,3 @@
+<svg id="Flat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256.00098 256.00098" fill="#c47529">
+  <path d="M128.001,68.00049a60,60,0,1,0,60,60A60.06811,60.06811,0,0,0,128.001,68.00049Zm0,112a52,52,0,1,1,52-52A52.05895,52.05895,0,0,1,128.001,180.00049Zm92-45.21045V121.21191l9.63525-14.45263a12.25263,12.25263,0,0,0,1.56982-10.25049,107.48238,107.48238,0,0,0-7.94873-19.2251,12.06942,12.06942,0,0,0-8.35107-6.12646L197.856,67.74707,188.25488,58.146l-3.41015-17.05127a12.06909,12.06909,0,0,0-6.12647-8.35108,107.50453,107.50453,0,0,0-19.22607-7.94775,12.25915,12.25915,0,0,0-10.25049,1.56982L134.79,36H121.21191l-14.45117-9.63428a12.25671,12.25671,0,0,0-10.251-1.56982,107.50644,107.50644,0,0,0-19.22559,7.94775,12.066,12.066,0,0,0-6.127,8.352L67.74805,58.145,58.146,67.74658,41.0957,71.15625a12.06842,12.06842,0,0,0-8.35107,6.12646A107.47763,107.47763,0,0,0,24.7959,96.50879a12.2545,12.2545,0,0,0,1.56933,10.25049L36,121.21094v13.57812l-9.63477,14.45166a12.256,12.256,0,0,0-1.56933,10.25049,107.48684,107.48684,0,0,0,7.94775,19.22608,12.06841,12.06841,0,0,0,8.35108,6.12646L58.146,188.25391l9.60107,9.60107,3.40918,17.05127a12.06856,12.06856,0,0,0,6.12646,8.35156,107.51667,107.51667,0,0,0,19.2251,7.94776,12.25644,12.25644,0,0,0,10.25049-1.56983l14.45264-9.63476h13.57812l14.45264,9.63525a12.395,12.395,0,0,0,6.84375,2.06982,11.70364,11.70364,0,0,0,3.40674-.50048,107.41894,107.41894,0,0,0,19.22461-7.94727,12.06629,12.06629,0,0,0,6.12695-8.35107l3.41016-17.05127,9.60107-9.60157,17.05127-3.40966a12.06838,12.06838,0,0,0,8.35107-6.12647,107.48207,107.48207,0,0,0,7.94873-19.2251,12.2526,12.2526,0,0,0-1.56982-10.25048Zm3.55127,22.375a99.49716,99.49716,0,0,1-7.355,17.7915A4.15674,4.15674,0,0,1,213.33691,177l-18.23828,3.647a4.00051,4.00051,0,0,0-2.04443,1.09424l-11.31348,11.31445a4.00049,4.00049,0,0,0-1.09375,2.04346l-3.648,18.23877a4.15224,4.15224,0,0,1-2.04345,2.85986,99.42219,99.42219,0,0,1-17.791,7.354,4.17194,4.17194,0,0,1-3.48535-.57178l-15.46045-10.30713A4.00111,4.00111,0,0,0,136,212.001H120a4.00111,4.00111,0,0,0-2.21875.67187L102.3208,222.97949a4.16884,4.16884,0,0,1-3.48486.57178,99.44022,99.44022,0,0,1-17.791-7.354A4.15533,4.15533,0,0,1,79.001,213.3374l-3.647-18.23877a4.00319,4.00319,0,0,0-1.09375-2.04443l-11.314-11.31348a4.00045,4.00045,0,0,0-2.04346-1.09375l-18.23877-3.648a4.15564,4.15564,0,0,1-2.86035-2.04345,99.50156,99.50156,0,0,1-7.354-17.79248,4.17807,4.17807,0,0,1,.57226-3.48487l10.30615-15.45947A4.00112,4.00112,0,0,0,44,136V120a4.00112,4.00112,0,0,0-.67188-2.21875L33.022,102.32178a4.17807,4.17807,0,0,1-.57226-3.48487,99.45812,99.45812,0,0,1,7.35547-17.79248A4.15469,4.15469,0,0,1,42.665,79.001l18.2373-3.647a3.99983,3.99983,0,0,0,2.04395-1.09375L74.26123,62.9458A4.00319,4.00319,0,0,0,75.355,60.90137l3.647-18.23731a4.15392,4.15392,0,0,1,2.044-2.85986,99.422,99.422,0,0,1,17.7915-7.354,4.17513,4.17513,0,0,1,3.48535.57177l15.45948,10.30615A4.0011,4.0011,0,0,0,120.001,44h16a4.00112,4.00112,0,0,0,2.21875-.67188l15.46-10.30615a4.17378,4.17378,0,0,1,3.48486-.57177,99.422,99.422,0,0,1,17.7915,7.354A4.15392,4.15392,0,0,1,177,42.66406l3.648,18.23877a4.00176,4.00176,0,0,0,1.09375,2.04395l11.314,11.31347a4.00034,4.00034,0,0,0,2.04346,1.09375l18.23779,3.64795a4.15477,4.15477,0,0,1,2.85987,2.04346,99.463,99.463,0,0,1,7.35547,17.7915,4.17808,4.17808,0,0,1-.57227,3.48487l-10.30713,15.46045a4.00109,4.00109,0,0,0-.67187,2.21875v16a4.00111,4.00111,0,0,0,.67187,2.21875L222.98,153.68018A4.17805,4.17805,0,0,1,223.55225,157.165Z"/>
+</svg>

src/components/fileBrowser.jsx

@@ -5,6 +5,8 @@ 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'
 import Home from '../assets/fileTypes/home.svg'
@@ -84,22 +86,19 @@ const BrowserWrapper = styled.div`
 
 const GridFileBrowser = styled.div`
   display: grid;
-  grid-template-columns: 1px 1fr 10rem 6rem;
+  grid-template-columns: 1px 1fr ${({shownColumns}) => shownColumns.datetime ? "10rem" : ""} ${({shownColumns}) => shownColumns.date ? "6rem" : ""} ${({shownColumns}) => shownColumns.size ? "6rem" : ""};
   align-items: center;
   gap: .5rem 1.5rem;
   width: 100%;
   transition: transform .3s;
   padding: .5rem;
 
-  /* @media screen and (max-width: 1099px) {
+  p:nth-child(4n+3) {
-    grid-template-columns: 1px 1fr 4em 6em;
+    display: ${({shownColumns}) => shownColumns.datetime || shownColumns.date ? "block" : "none" }
   }
-  @media screen and (max-width: 800px) {
+  p:nth-child(4n+4) {
-    grid-template-columns: 1px 1fr 10em 4em 6em;
+    display: ${({shownColumns}) => shownColumns.size ? "block" : "none" }
   }
-  @media screen and (max-width: 600px) {
-    grid-template-columns: 1px 1fr 6em;
-  } */
 `
 
 const BrowserHeader = styled.div`
@@ -145,25 +144,11 @@ const DirNameP = styled(FilenameP)`
 `
 
 const ModifiedP = styled(EllipsisP)`
-  @media screen and (max-width: 1100px) {
-    display: none;
-  }
 
-  @media screen and (max-width: 800px) {
-    display: initial;
-  }
-  @media screen and (max-width: 600px) {
-    display: none;
-  }
-  @media screen and (min-width: 1100px) {
-    display: initial;
-  }
 `
 
 const SizeP = styled.p`
-  @media screen and (max-width: 600px) {
+
-    display: none;
-  }
 `
 
 const SearchLabel = styled(Label)`
@@ -207,6 +192,28 @@ const SearchInput = styled(Input)`
   } */
 `
 
+const FileSettingsPopup = styled.div`
+  min-width: 20rem;
+  min-height: 20rem;
+  background-color: var(--button-color);
+  position: fixed;
+  top: 10rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 900;
+`
+
+const FileSettingsHeader = styled.h3`
+  text-align: center;
+  padding: 1rem 0;
+`
+
+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 {
@@ -219,7 +226,13 @@ class FileBrowser extends Component {
       files: [],
       prevPath: "",
       transitionFiles: 0,
-      renderMenu: false,
+      showMenu: false,
+      showFileSettings: false,
+      shownColumns: {
+        size: true,
+        date: false,
+        datetime: false
+      },
       cursorX: 0,
       cursorY: 0,
       clicked: "",
@@ -237,6 +250,9 @@ 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)
   }
@@ -264,9 +280,11 @@ class FileBrowser extends Component {
 
   componentWillUnmount = () => {
     window.removeEventListener('click', this.handleWindowClick)
+
+    localStorage.setItem("shownbrowsercolumns", JSON.stringify(this.state.shownColumns))
   }
 
-  handleWindowClick = () => this.setState({ renderMenu: false })
+  handleWindowClick = () => this.setState({ showMenu: false, showFileSettings: false })
 
   // used to filter the files
   handleInputChange({target}) {
@@ -385,18 +403,82 @@ class FileBrowser extends Component {
     this.setState({
       cursorX: e.pageX,
       cursorY: e.pageY,
-      renderMenu: true,
+      showMenu: true,
       clicked: e.target.innerHTML
     })
   }
 
+  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
    */
   renderMenu = () => {
-    if (this.state.renderMenu) return (
+    if (this.state.showMenu) return (
       <div
-        onMouseLeave={() => this.setState({ renderMenu: false })}
+        onMouseLeave={() => this.setState({ showMenu: false })}
         style={{
           position: "fixed",
           top: this.state.cursorY - 3,
@@ -490,7 +572,7 @@ class FileBrowser extends Component {
   )
 
   render() {
-    const { transitionFiles, from, to, orderBy, orderAscending, files } = this.state
+    const { transitionFiles, from, to, orderBy, orderAscending, files, shownColumns } = this.state
     const rows = Math.max(this.props.files.length, files.length)
 
     return (
@@ -499,25 +581,33 @@ class FileBrowser extends Component {
           this.renderMenu()
         }
         {
-          this.props.loading?<LineLoader/>:""
+          this.renderFileSettings()
+        }
+        {
+          this.props.loading ? <LineLoader/> : ""
         }
         <BrowserHeader>
           <div style={{
             // gridColumn: "1 / span 2",
             display: "flex",
             alignItems: "center",
-            gap: "8px"
+            gap: ".5rem"
           }}>
             <BrowseImage src={Back} alt="up directory" width="40px" height="40px" onClick={this.previousDirectory} />
             <BrowseImage src={Home} alt="root directory" width="40px" height="40px" onClick={this.rootDirectory} />
             <p> { this.props.currentPath !== "/" ? this.renderPath() : "/" } </p>
           </div>
-          <div>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '.25rem'
+          }}>
             <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} />
           </div>
 
-          <GridFileBrowser>
+          <GridFileBrowser shownColumns={shownColumns}>
             <span/>
             <FilenameP onClick={() => this.updateOrder("name")} style={{ position: "relative", cursor: "pointer" }}>
               filename
@@ -570,7 +660,7 @@ class FileBrowser extends Component {
         <BrowserWrapper onScroll={this.handleGridScroll}>
           {
             transitionFiles !== 0 &&
-            <GridFileBrowser style={{
+            <GridFileBrowser shownColumns={shownColumns} style={{
               position: "absolute",
               top: 0,
               left: 0,
@@ -592,7 +682,7 @@ class FileBrowser extends Component {
             </GridFileBrowser>
           }
 
-          <GridFileBrowser style={{
+          <GridFileBrowser shownColumns={shownColumns} style={{
             transform:
               transitionFiles === 2 ?
                 "translateX(-100%)" :