opensource/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2025-11-01 19:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

improvement (UI): display of file element in UI, better look and feel

Browse Source 
UI (file): edit a file name, UI change

cache version to reflect project version
This commit is contained in:
Mickael KERJEAN
2018-04-09 17:52:13 +10:00
parent c25eb03540
commit 8d9b554e79
5 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/helpers/cache.js
View File

@ -6,7 +6,7 @@
function Data(){
this.FILE_PATH = "file_path";
this.FILE_CONTENT = "file_content";
this.db_version = 'v1.1';
this.db_version = 'v1.0';
this.db = null;
this.intervalId = window.setInterval(this._vacuum.bind(this), 5000);
this._init();

10
client/pages/filespage/thing-existing.js
View File

@ -146,6 +146,9 @@ export class ExistingThing extends React.Component {
if((this.props.fileIsOver && this.props.canDropFile) || (this.props.nativeFileIsOver && this.props.canDropNativeFile)) {
className += "file-is-hover ";
}
if(this.state.is_renaming){
className += "highlight ";
}
className = className.trim();
return connectDragSource(connectDropNativeFile(connectDropFile(
@ -153,8 +156,7 @@ export class ExistingThing extends React.Component {
<Link to={this.props.file.link}>
<Card className={this.state.hover} className={className}>
<Icon name={this.props.file.icon || this.props.file.type} />
<Filename filename={this.props.file.name} onRename={this.onRename.bind(this)} is_renaming={this.state.is_renaming} />
<FileSize type={this.props.file.type} size={this.props.file.size} />
<Filename filename={this.props.file.name} filesize={this.props.file.size} filetype={this.props.file.type} onRename={this.onRename.bind(this)} is_renaming={this.state.is_renaming} />
<Message message={this.state.message} />
<DateTime show={this.state.icon !== 'loading'} timestamp={this.props.file.time} />
<ActionButton onClickRename={this.onRenameRequest.bind(this)} onClickDelete={this.onDeleteRequest.bind(this)} can_move={this.props.file.can_move !== false} can_delete={this.props.file.can_delete !== false} />
@ -195,7 +197,9 @@ class Filename extends React.Component {
return (
<span className="component_filename">
<span className="file-details">
<NgIf cond={this.props.is_renaming === false} type='inline'>{this.state.filename}</NgIf>
<NgIf cond={this.props.is_renaming === false} type='inline'>
{this.state.filename} <FileSize type={this.props.filetype} size={this.props.filesize} />
</NgIf>
<NgIf cond={this.props.is_renaming === true} type='inline'>
<form onClick={this.preventSelect} onSubmit={this.onRename.bind(this)}>
<input value={this.state.filename} onChange={(e) => this.setState({filename: e.target.value})} autoFocus />

2
client/pages/filespage/thing-new.js
View File

@ -54,7 +54,7 @@ export class NewThing extends React.Component {
</select>
</div>
<NgIf cond={this.state.type !== null} className="component_thing">
<Card className="mouse-is-hover">
<Card className="mouse-is-hover highlight">
<Icon className="component_updater--icon" name={this.state.icon} />
<span className="file-details">
<form onSubmit={this.onSave.bind(this)}>

8
client/pages/filespage/thing.scss
View File

@ -20,7 +20,7 @@
}
.component_thing{
&:hover .box{
&:hover .box, .highlight.box{
background: var(--super-light);
.component_datetime{display: none;}
.component_action{display: block;}
@ -40,7 +40,7 @@
padding: 0 5px;
line-height: 22px;
white-space: nowrap;
span{
> span{
display: inline-block;
width: calc(100% - 130px);
white-space: nowrap;
@ -53,8 +53,12 @@
form{
display: inline-block;
input{
font-size: 1em;
border-width: 0px;
padding: 0 2px 0 2px;
background: inherit;
border-bottom: 2px solid var(--emphasis-primary);
color: var(--color);
}
}

2
server/public/cache.js
View File

@ -1,4 +1,4 @@
const CACHE_NAME = 'v1.1';
const CACHE_NAME = 'v1.0';
const DELAY_BEFORE_SENDING_CACHE = 2000;
/*