improve icons
add some styling to visualize the active browser clicking on the browser will set the active browser
This commit is contained in:
controlol
parent
a070bcf32c
commit
714381d24c
@ -1,3 +1,6 @@
|
||||
<svg id="Flat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="#c47529">
|
||||
<path d="M198.71094,57.28906A100.00037,100.00037,0,0,0,57.28906,198.71094,100.00037,100.00037,0,0,0,198.71094,57.28906Zm-5.65723,135.76465A91.99945,91.99945,0,1,1,220,128,91.39744,91.39744,0,0,1,193.05371,193.05371Zm-22.2251-94.2251L141.65674,128l29.17187,29.17139a4.00026,4.00026,0,0,1-5.65722,5.65722l-32-32a4.00058,4.00058,0,0,1,0-5.65722l32-32a4.00026,4.00026,0,0,1,5.65722,5.65722Zm-56,0L85.65674,128l29.17187,29.17139a4.00026,4.00026,0,0,1-5.65722,5.65722l-32-32a4.00058,4.00058,0,0,1,0-5.65722l32-32a4.00026,4.00026,0,0,1,5.65722,5.65722Z"/>
|
||||
<?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="M8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.4 9l1.8 1.8-1.4 1.4-4.2-4.2 4.2-4.2 1.4 1.4-1.8 1.8h6.6v2h-6.6z"></path>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 646 B After Width: | Height: | Size: 471 B |
@ -1,3 +1,6 @@
|
||||
<svg id="Flat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="#c47529">
|
||||
<path d="M128,180a3.98881,3.98881,0,0,1-2.82861-1.17139l-80-80.00024a4.00009,4.00009,0,0,1,5.65722-5.65674L128,170.34326l77.17139-77.17163a4.00009,4.00009,0,0,1,5.65722,5.65674l-80,80.00024A3.98881,3.98881,0,0,1,128,180Z"/>
|
||||
<?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="M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z"></path>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 321 B After Width: | Height: | Size: 398 B |
@ -1,3 +1,7 @@
|
||||
<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"/>
|
||||
<?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="M16 9v-2l-1.7-0.6c-0.2-0.6-0.4-1.2-0.7-1.8l0.8-1.6-1.4-1.4-1.6 0.8c-0.5-0.3-1.1-0.6-1.8-0.7l-0.6-1.7h-2l-0.6 1.7c-0.6 0.2-1.2 0.4-1.7 0.7l-1.6-0.8-1.5 1.5 0.8 1.6c-0.3 0.5-0.5 1.1-0.7 1.7l-1.7 0.6v2l1.7 0.6c0.2 0.6 0.4 1.2 0.7 1.8l-0.8 1.6 1.4 1.4 1.6-0.8c0.5 0.3 1.1 0.6 1.8 0.7l0.6 1.7h2l0.6-1.7c0.6-0.2 1.2-0.4 1.8-0.7l1.6 0.8 1.4-1.4-0.8-1.6c0.3-0.5 0.6-1.1 0.7-1.8l1.7-0.6zM8 12c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
|
||||
<path fill="#71caf2" d="M10.6 7.9c0 1.381-1.119 2.5-2.5 2.5s-2.5-1.119-2.5-2.5c0-1.381 1.119-2.5 2.5-2.5s2.5 1.119 2.5 2.5z"></path>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 917 B |
@ -57,6 +57,8 @@ const FBContainer = styled.div`
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
position: relative;
|
||||
border-radius: .3rem;
|
||||
box-shadow: ${({active}) => active ? "0 0 6px -3px var(--tertiary-color)" : ""};
|
||||
`
|
||||
|
||||
// bunch of styled components
|
||||
@ -67,7 +69,7 @@ const BrowserWrapper = styled.div`
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
background: var(--box-radial-gradient);
|
||||
border-radius: 0 0 .3em .3em;
|
||||
border-radius: 0 0 .3rem .3rem;
|
||||
user-select: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@ -112,6 +114,7 @@ const BrowserHeaderDiv = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0 .25rem;
|
||||
padding-left: .5rem;
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
&:nth-child(1) {
|
||||
@ -169,11 +172,6 @@ const SearchLabel = styled(Label)`
|
||||
|
||||
const BrowseImage = styled.img`
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
`
|
||||
const SearchInput = styled(Input)`
|
||||
width: 15rem;
|
||||
@ -571,7 +569,7 @@ class FileBrowser extends Component {
|
||||
const rows = Math.max(this.props.files.length, files.length)
|
||||
|
||||
return (
|
||||
<FBContainer>
|
||||
<FBContainer active={this.props.active} onClick={this.props.setActive}>
|
||||
{
|
||||
this.renderMenu()
|
||||
}
|
||||
@ -583,8 +581,8 @@ class FileBrowser extends Component {
|
||||
}
|
||||
<BrowserHeader>
|
||||
<BrowserHeaderDiv>
|
||||
<BrowseImage src={Back} alt="up directory" width="35" height="35" onClick={this.previousDirectory} />
|
||||
<BrowseImage src={Home} alt="root directory" width="35" height="35" onClick={this.rootDirectory} />
|
||||
<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>
|
||||
</BrowserHeaderDiv>
|
||||
<BrowserHeaderDiv>
|
||||
@ -600,11 +598,11 @@ class FileBrowser extends Component {
|
||||
{
|
||||
orderBy === "name" &&
|
||||
<img src={CaretDown} alt={orderAscending ? "ascending" : "descending"}
|
||||
height="20" width="20"
|
||||
height="12" width="12"
|
||||
style={{
|
||||
transform: orderAscending ? "rotateZ(180deg)" : undefined,
|
||||
position: "absolute",
|
||||
top: "2px",
|
||||
top: 6,
|
||||
marginLeft: ".5rem"
|
||||
}}
|
||||
/>
|
||||
@ -615,11 +613,11 @@ class FileBrowser extends Component {
|
||||
{
|
||||
orderBy === "modified" &&
|
||||
<img src={CaretDown} alt={orderAscending ? "ascending" : "descending"}
|
||||
height="20" width="20"
|
||||
height="12" width="12"
|
||||
style={{
|
||||
transform: orderAscending ? "rotateZ(180deg)" : undefined,
|
||||
position: "absolute",
|
||||
top: "2px",
|
||||
top: 6,
|
||||
marginLeft: ".5rem"
|
||||
}}
|
||||
/>
|
||||
@ -630,11 +628,11 @@ class FileBrowser extends Component {
|
||||
{
|
||||
orderBy === "size" &&
|
||||
<img src={CaretDown} alt={orderAscending ? "ascending" : "descending"}
|
||||
height="20" width="20"
|
||||
height="12" width="12"
|
||||
style={{
|
||||
transform: orderAscending ? "rotateZ(180deg)" : undefined,
|
||||
position: "absolute",
|
||||
top: "2px",
|
||||
top: 6,
|
||||
marginLeft: ".5rem"
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import styled from 'styled-components'
|
||||
import { Button } from '../styled'
|
||||
|
||||
export const Input = styled.input`
|
||||
width: 100%;
|
||||
@ -24,18 +25,18 @@ export const Label = styled.label`
|
||||
|
||||
export const FileBrowsersContainer = styled.div`
|
||||
display: flex;
|
||||
gap: 0 1rem;
|
||||
flex-direction: column;
|
||||
gap: .5rem 0;
|
||||
height: calc(94vh - 9rem);
|
||||
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
height: calc(100vh - 9rem);
|
||||
}
|
||||
`
|
||||
`
|
||||
|
||||
export const FileBrowserWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5rem 0;
|
||||
gap: 0 1rem;
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
`
|
||||
@ -44,4 +45,17 @@ export const FileBrowserRemotes = styled.div`
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
justify-content: flex-start;
|
||||
`
|
||||
|
||||
export const FileBrowserSettings = styled.div`
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
`
|
||||
|
||||
export const BrowserSettingButton = styled(Button)`
|
||||
padding: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`
|
||||
Loading…
x
Reference in New Issue
Block a user