doesnm/quickshare
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(client/web): refine list layout (#65)

Browse source
This commit is contained in:
Hexxa 2021-07-24 21:19:23 -05:00 • committed by GitHub
parent 81da97650b
commit df46915147
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 226 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

17
public/static/css/color.css
View file

@ -54,6 +54,10 @@
color: #27ae60; color: #27ae60;
} }
.green2-font {
color: #15cd3d;
}
.white-font { .white-font {
color: #fff; color: #fff;
} }
@ -94,6 +98,11 @@
background-color: #2980b9; background-color: #2980b9;
} }
.blue2-bg {
background-color: #2f45c5;
}
.cyan0-bg { .cyan0-bg {
background-color: #1abc9c; background-color: #1abc9c;
} }
@ -130,6 +139,10 @@
background-color: #e67e22; background-color: #e67e22;
} }
.yellow3-bg {
background-color: #15cd3d;;
}
.yellow3-bg { .yellow3-bg {
background-color: #d35400; background-color: #d35400;
} }
@ -142,6 +155,10 @@
background-color: #27ae60; background-color: #27ae60;
} }
.green2-bg {
background-color: #15cd3d;
}
.white-bg { .white-bg {
background-color: #fff; background-color: #fff;
} }

66
public/static/css/style.css
View file

@ -12,10 +12,48 @@
z-index: 10; z-index: 10;
} }
.flex-list-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
}
.flex-list-item {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-start;
}
.flex-list-item-l {
flex: 50%;
display: flex;
align-items: center;
justify-content: flex-start;
}
.flex-list-item-r {
flex: 50%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.flex-list-container .item-name {
line-height: 3rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: block;
}
.container-center { .container-center {
margin: 2rem auto auto auto; margin: 2rem auto auto auto;
width: 96%; width: 96%;
max-width: 960px; max-width: 800px;
z-index: 9; z-index: 9;
} }
@ -101,6 +139,11 @@
margin-right: 1rem; margin-right: 1rem;
} }
#item-list .vbar {
overflow: hidden;
margin: 1.5rem 1rem;
}
#item-list .item-name-cell { #item-list .item-name-cell {
max-width: 30%; max-width: 30%;
} }
@ -511,6 +554,14 @@ select {
line-height: 3rem; line-height: 3rem;
} }
.vbar {
border-radius: 0.3rem;
height: 6rem;
width: 0.6rem;
display: inline-block;
/* line-height: 4rem; */
}
input.white-square { input.white-square {
border: solid 2px #fff; border: solid 2px #fff;
background: transparent; background: transparent;
@ -570,13 +621,12 @@ div.hr {
display: inline-block; display: inline-block;
} }
div.hr { #tail {
height: 1px;
background-color: #95a5a6;
margin: 1rem auto 1rem auto;
}
.tail {
font-size: 1.2rem; font-size: 1.2rem;
text-align: center; text-align: center;
margin: 4rem auto;
} }
.breadcrumb {
font-size: 1.4rem;
}

262
src/client/web/src/components/browser.tsx
View file

@ -301,8 +301,65 @@ export class Browser extends React.Component<Props, State, {}> {
</span>, </span>,
]; ];
// const ops = (
// <Layouter isHorizontal={false} elements={layoutChildren}></Layouter>
// );
const ops = ( const ops = (
<Layouter isHorizontal={false} elements={layoutChildren}></Layouter> <div>
<div>
<span className="inline-block margin-t-m margin-b-m">
<input
type="text"
onChange={this.onInputChange}
value={this.state.inputValue}
className="black0-font margin-r-m"
placeholder="folder name"
/>
<button
onClick={this.onMkDir}
className="grey1-bg white-font margin-r-m"
>
Create Folder
</button>
</span>
<span className="inline-block margin-t-m margin-b-m">
<button
onClick={this.onClickUpload}
className="green0-bg white-font"
>
Upload Files
</button>
<input
type="file"
onChange={this.addUploads}
multiple={true}
value={this.props.uploadValue}
ref={this.assignInput}
className="black0-font hidden"
/>
</span>
</div>
<div className="hr white0-bg margin-t-m margin-b-m"></div>
<div>
<button
type="button"
onClick={() => this.delete()}
className="red0-bg white-font margin-t-m margin-b-m margin-r-m"
>
Delete Selected
</button>
<button
type="button"
onClick={() => this.moveHere()}
className="grey1-bg white-font margin-t-m margin-b-m"
>
Paste
</button>
</div>
</div>
); );
const itemList = this.props.items.map((item: MetadataResp) => { const itemList = this.props.items.map((item: MetadataResp) => {
@ -313,71 +370,61 @@ export class Browser extends React.Component<Props, State, {}> {
: `${dirPath}/${item.name}`; : `${dirPath}/${item.name}`;
return item.isDir ? ( return item.isDir ? (
<tr <div key={item.name} className="flex-list-container">
key={item.name} <span className="flex-list-item-l">
// className={`${isSelected ? "white0-bg selected" : ""}`} <span className="vbar yellow2-bg"></span>
> <span className={nameCellClass}>
<td> <span className="bold" onClick={() => this.gotoChild(item.name)}>
<span className="dot yellow0-bg"></span> {item.name}
</td> </span>
<td> <div className="grey1-font">
<span <span>{item.modTime.slice(0, item.modTime.indexOf("T"))}</span>
className={nameCellClass} </div>
onClick={() => this.gotoChild(item.name)}
>
{item.name}
</span> </span>
</td> </span>
<td className={sizeCellClass}>--</td> <span className="flex-list-item-r padding-r-m">
<td className={modTimeCellClass}>
{item.modTime.slice(0, item.modTime.indexOf("T"))}
</td>
<td>
<span className="item-op"> <span className="item-op">
<button <button
onClick={() => this.select(item.name)} onClick={() => this.select(item.name)}
className={`white-font ${isSelected ? "blue0-bg" : ""}`} className={`white-font ${isSelected ? "blue0-bg" : "grey1-bg"}`}
style={{ width: "8rem", display: "inline-block" }} style={{ width: "8rem", display: "inline-block" }}
> >
{isSelected ? "Deselect" : "Select"} {isSelected ? "Deselect" : "Select"}
</button> </button>
</span> </span>
</td> </span>
</tr> </div>
) : ( ) : (
<tr <div key={item.name} className="flex-list-container">
key={item.name} <span className="flex-list-item-l">
// className={`${isSelected ? "white0-bg selected" : ""}`} <span className="vbar green2-bg"></span>
> <span className={nameCellClass}>
<td> <a
<span className="dot green0-bg"></span> className="bold"
</td> href={`/v1/fs/files?fp=${itemPath}`}
<td> target="_blank"
<a >
className={nameCellClass} {item.name}
href={`/v1/fs/files?fp=${itemPath}`} </a>
target="_blank" <div className="grey1-font">
> <span>{FileSize(item.size, { round: 0 })}</span>&nbsp;/&nbsp;
{item.name} <span>{item.modTime.slice(0, item.modTime.indexOf("T"))}</span>
</a> </div>
</td> </span>
<td className={sizeCellClass}>{FileSize(item.size, { round: 0 })}</td> </span>
<td className={modTimeCellClass}> <span className="flex-list-item-r padding-r-m">
{item.modTime.slice(0, item.modTime.indexOf("T"))}
</td>
<td>
<span className="item-op"> <span className="item-op">
<button <button
type="button" type="button"
onClick={() => this.select(item.name)} onClick={() => this.select(item.name)}
className={`white-font ${isSelected ? "blue0-bg" : ""}`} className={`white-font ${isSelected ? "blue0-bg" : "grey1-bg"}`}
style={{ width: "8rem", display: "inline-block" }} style={{ width: "8rem", display: "inline-block" }}
> >
{isSelected ? "Deselect" : "Select"} {isSelected ? "Deselect" : "Select"}
</button> </button>
</span> </span>
</td> </span>
</tr> </div>
); );
}); });
@ -386,30 +433,34 @@ export class Browser extends React.Component<Props, State, {}> {
const fileName = pathParts[pathParts.length - 1]; const fileName = pathParts[pathParts.length - 1];
return ( return (
<tr key={fileName}> <div key={fileName} className="flex-list-container">
<td> <span className="flex-list-item-l">
<span className="dot blue0-bg"></span> <span className="vbar blue2-bg"></span>
</td> <div className={nameCellClass}>
<td> <span className="bold">{fileName}</span>
<div className={nameCellClass}>{fileName}</div> <div className="grey1-font">
{FileSize(uploading.uploaded, { round: 0 })}
&nbsp;/&nbsp;{FileSize(uploading.size, { round: 0 })}
</div>
</div>
</span>
<span className="flex-list-item-r padding-r-m">
<div className="item-op"> <div className="item-op">
<button <button
onClick={() => this.stopUploading(uploading.realFilePath)} onClick={() => this.stopUploading(uploading.realFilePath)}
className="white-font margin-r-m" className="grey1-bg white-font margin-r-m"
> >
Stop Stop
</button> </button>
<button <button
onClick={() => this.deleteUpload(uploading.realFilePath)} onClick={() => this.deleteUpload(uploading.realFilePath)}
className="white-font" className="grey1-bg white-font"
> >
Delete Delete
</button> </button>
</div> </div>
</td> </span>
<td>{FileSize(uploading.uploaded, { round: 0 })}</td> </div>
<td>{FileSize(uploading.size, { round: 0 })}</td>
</tr>
); );
}); });
@ -420,66 +471,53 @@ export class Browser extends React.Component<Props, State, {}> {
</div> </div>
<div id="item-list"> <div id="item-list">
<div className="margin-b-l">{breadcrumb}</div> <div className="breadcrumb margin-b-l">
<span
className="white-font margin-r-m"
style={{
backgroundColor: "rgba(0, 0, 0, 0.7)",
padding: "0.8rem 1rem",
fontWeight: "bold",
borderRadius: "0.5rem"
}}
>
Location:
</span>
{breadcrumb}
</div>
{this.props.uploadings.size === 0 ? null : ( {this.props.uploadings.size === 0 ? null : (
<div className="container"> <div className="container">
<table> <div className="flex-list-container bold">
<thead style={{ fontWeight: "bold" }}> <span className="flex-list-item-l">
<tr> <span className="dot black-bg"></span>
<td> <span>Uploading Files</span>
<span className="dot black-bg"></span> </span>
</td> <span className="flex-list-item-r padding-r-m"></span>
<td>Name</td> </div>
<td className={sizeCellClass}>Uploaded</td> {uploadingList}
<td className={modTimeCellClass}>Size</td>
</tr>
</thead>
<tbody>{uploadingList}</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td className={sizeCellClass}></td>
<td className={modTimeCellClass}></td>
</tr>
</tfoot>
</table>
</div> </div>
)} )}
<div className="container"> <div className="container">
<table> <div className="flex-list-container bold">
<thead style={{ fontWeight: "bold" }}> <span className="flex-list-item-l">
<tr> <span className="dot black-bg"></span>
<td> <span>Name</span>
<span className="dot black-bg"></span> {/* <span>File Size</span>
</td> <span>Mod Time</span> */}
<td>Name</td> </span>
<td className={sizeCellClass}>File Size</td> <span className="flex-list-item-r padding-r-m">
<td className={modTimeCellClass}>Mod Time</td> <button
<td> onClick={() => this.selectAll()}
<button className={`grey1-bg white-font`}
onClick={() => this.selectAll()} style={{ width: "8rem", display: "inline-block" }}
className={`white-font`} >
style={{ width: "8rem", display: "inline-block" }} Select All
> </button>
Select All </span>
</button> </div>
</td> {itemList}
</tr>
</thead>
<tbody>{itemList}</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td className={sizeCellClass}></td>
<td className={modTimeCellClass}></td>
<td></td>
</tr>
</tfoot>
</table>
</div> </div>
</div> </div>
</div> </div>

2
src/client/web/src/components/root_frame.tsx
View file

@ -82,7 +82,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
/> />
</div> </div>
<div className="container-center black0-font tail margin-t-xl margin-b-xl"> <div id="tail" className="container-center black0-font">
<a href="https://github.com/ihexxa/quickshare">Quickshare</a> - <a href="https://github.com/ihexxa/quickshare">Quickshare</a> -
sharing in simple way. sharing in simple way.
</div> </div>