From 8d9b554e79cf22eae532b56ef966a28b4749e573 Mon Sep 17 00:00:00 2001
From: Mickael KERJEAN <mickael.kerjean@gmail.com>
Date: Mon, 9 Apr 2018 17:52:13 +1000
Subject: [PATCH] improvement (UI): display of file element in UI, better look
 and feel

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

cache version to reflect project version
---
 client/helpers/cache.js                  |  2 +-
 client/pages/filespage/thing-existing.js | 10 +++++++---
 client/pages/filespage/thing-new.js      |  2 +-
 client/pages/filespage/thing.scss        |  8 ++++++--
 server/public/cache.js                   |  2 +-
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/client/helpers/cache.js b/client/helpers/cache.js
index 9c2ccbab..996744d4 100644
--- a/client/helpers/cache.js
+++ b/client/helpers/cache.js
@@ -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();
diff --git a/client/pages/filespage/thing-existing.js b/client/pages/filespage/thing-existing.js
index 11dfcf68..5d743b37 100644
--- a/client/pages/filespage/thing-existing.js
+++ b/client/pages/filespage/thing-existing.js
@@ -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 />
diff --git a/client/pages/filespage/thing-new.js b/client/pages/filespage/thing-new.js
index 829e309c..01714fe5 100644
--- a/client/pages/filespage/thing-new.js
+++ b/client/pages/filespage/thing-new.js
@@ -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)}>
diff --git a/client/pages/filespage/thing.scss b/client/pages/filespage/thing.scss
index 6d87b9a8..633a7966 100644
--- a/client/pages/filespage/thing.scss
+++ b/client/pages/filespage/thing.scss
@@ -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);
         }
     }
 
diff --git a/server/public/cache.js b/server/public/cache.js
index b8a8b4d3..c4005916 100644
--- a/server/public/cache.js
+++ b/server/public/cache.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = 'v1.1';
+const CACHE_NAME = 'v1.0';
 const DELAY_BEFORE_SENDING_CACHE = 2000;
 
 /*