feature (recent): quickly open recent folders - #30

client/assets/css/reset.scss

@@ -106,19 +106,19 @@ select:-moz-focusring {
 
 
 ::-webkit-scrollbar{
-    height:6px;
-    width:6px
+    height:4px;
+    width:4px
 }
 ::-webkit-scrollbar-track{
     background:rgba(0,0,0,.1)
 }
 ::-webkit-scrollbar-thumb{
-    -webkit-border-radius:3px;
+    -webkit-border-radius:2px;
     -moz-border-radius:2px;
     -ms-border-radius:2px;
     -o-border-radius:2px;
     border-radius:2px;
-    background:rgba(0,0,0,.2)
+    background:rgba(0,0,0,.2);
 }
 .scroll-y{
     scrollbar-3dlight-color:#7d7e94;

client/helpers/cache.js

@@ -126,18 +126,19 @@ Data.prototype.remove = function(type, path, exact = true){
 }
 
 Data.prototype.update_path = function(updater_fn){
-    this.db.then((db) => {
+    return this.db.then((db) => {
         const tx = db.transaction(this.FILE_PATH, "readwrite");
         const store = tx.objectStore(this.FILE_PATH);
         const request = store.openCursor();
-        request.onsuccess = function(event) {
-            const cursor = event.target.result;
-            if(cursor){
+
+        return new Promise((done, error) => {
+            request.onsuccess = function(event) {
+                const cursor = event.target.result;
+                if(!cursor) return done();
                 updater_fn(cursor.value, store)
                 cursor.continue();
-            }
-        };
-
+            };
+        });
     });
 }
 Data.prototype.update_content = function(updater_fn){

client/model/files.js

@@ -300,6 +300,22 @@ class FileSystem{
         }
     }
 
+    frequents(){
+        let data = [];
+        return cache.update_path((value) => {
+            if(value.access_count >= 1 && value.path !== "/"){
+                data.push(value);
+            }
+        }).then(() => {
+            return Promise.resolve(
+                data
+                    .sort((a,b) => a.access_count > b.access_count? -1 : 1)
+                    .map((a) => a.path)
+                    .slice(0,6)
+            );
+        });
+    }
+
     _replace(path, icon){
         return cache.get(cache.FILE_PATH, dirname(path), false)
             .then((res) => {

client/pages/filespage.js

@@ -8,7 +8,7 @@ import './filespage.scss';
 import { Files } from '../model/';
 import { NgIf, Loader, Uploader, EventReceiver } from '../components/';
 import { notify, debounce, goToFiles, goToViewer, event, screenHeight } from '../helpers/';
-import { BreadCrumb, FileSystem } from './filespage/';
+import { BreadCrumb, FileSystem, FrequentlyAccess } from './filespage/';
 
 @EventReceiver
 @DragDropContext(('ontouchstart' in window)? HTML5Backend : HTML5Backend)
@@ -18,6 +18,7 @@ export class FilesPage extends React.Component {
         this.state = {
             path: props.match.url.replace('/files', '') || '/',
             files: [],
+            frequents: [],
             loading: true,
             error: false,
             height: null
@@ -91,6 +92,7 @@ export class FilesPage extends React.Component {
         });
         this.observers.push(observer);
         this.setState({error: false});
+        Files.frequents().then((s) => this.setState({frequents: s}));
     }
 
     _cleanupListeners(){
@@ -226,6 +228,9 @@ export class FilesPage extends React.Component {
               <BreadCrumb className="breadcrumb" path={this.state.path} />
               <div style={{height: this.state.height+'px'}} className="scroll-y">
                 <NgIf className="container" cond={this.state.loading === false}>
+                  <NgIf cond={this.state.path === '/'}>
+                    <FrequentlyAccess files={this.state.frequents}/>
+                  </NgIf>
                   <FileSystem path={this.state.path} files={this.state.files} />
                   <Uploader path={this.state.path} />
                 </NgIf>

client/pages/filespage/frequently_access.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Container, Icon } from '../../components/';
+import { Link } from 'react-router-dom';
+import Path from 'path';
+
+import './frequently_access.scss';
+
+export class FrequentlyAccess extends React.Component {
+    constructor(props){
+        super(props);
+    }
+
+    render(){
+        if(this.props.files.length < 4) return null;
+        return (
+            <Container>
+              <div className="component_frequently-access">
+                {
+                    this.props.files.map(function(path, index){
+                        return (
+                            <Link key={path} to={"/files"+path}>
+                              <Icon name={'directory'} />
+                              <div>{Path.basename(path)}</div>
+                            </Link>
+                        );
+                    })
+                }
+              </div>
+            </Container>
+        );
+    }
+}

client/pages/filespage/frequently_access.scss

@@ -0,0 +1,30 @@
+.component_frequently-access{
+    display: flex;
+    a{
+        width: 50%;
+        background: var(--bg-color);
+        box-shadow: rgba(158, 163, 172, 0.3) 0px 19px 60px, rgba(158, 163, 172, 0.22) 0px 15px 20px;
+        overflow: hidden;
+        margin-right: 5px;
+        padding: 5px;
+        cursor: pointer;
+        img{
+            float: left;
+            height: 25px;
+            margin-right: 2px;
+        }
+        line-height: 25px;
+        display: block;
+        div{
+            width: calc(100% - 30px);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    @media (max-width: 800px){ a:nth-child(6){display: none;} }
+    @media (max-width: 750px){ a:nth-child(5){display: none;} }
+    @media (max-width: 650px){ a:nth-child(4){display: none;} }
+    @media (max-width: 450px){ a:nth-child(3){display: none;} }
+
+}

client/pages/filespage/index.js

@@ -1,2 +1,3 @@
 export { FileSystem } from './filesystem.js';
 export { BreadCrumbTargettable as BreadCrumb } from './breadcrumb';
+export { FrequentlyAccess } from './frequently_access';