Closes #20 add filebrowser settings menu
this removes old media queries to automatically show and hide columns
This commit is contained in:
controlol
parent
70492274df
commit
d70cf64e68
3
src/assets/icons/settings-cog.svg
Normal file
3
src/assets/icons/settings-cog.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@ -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) {
|
||||
grid-template-columns: 1px 1fr 4em 6em;
|
||||
p:nth-child(4n+3) {
|
||||
display: ${({shownColumns}) => shownColumns.datetime || shownColumns.date ? "block" : "none" }
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
grid-template-columns: 1px 1fr 10em 4em 6em;
|
||||
p:nth-child(4n+4) {
|
||||
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%)" :
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user