Closes #21 move filesettings one class up
fix issues with the path when opening second browser
This commit is contained in:
controlol
parent
18b20c2c60
commit
c7a4d3413f
6
src/assets/icons/checked.svg
Normal file
6
src/assets/icons/checked.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 457 B |
7
src/assets/icons/unchecked.svg
Normal file
7
src/assets/icons/unchecked.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 484 B |
@ -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()
|
||||
}
|
||||
{
|
||||
this.props.loading ? <LineLoader/> : ""
|
||||
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}>
|
||||
|
||||
@ -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;
|
||||
`
|
||||
@ -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}
|
||||
/>
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`
|
||||
Loading…
x
Reference in New Issue
Block a user