opensource/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2025-11-03 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

improvement (code): code refactoring

Browse Source
This commit is contained in:
Mickael KERJEAN
2018-04-05 04:33:47 +10:00
parent aff57c9c16
commit c9c4ee1639
11 changed files with 182 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
client/assets/css/reset.scss
View File

@ -15,8 +15,6 @@
--success: #63d9b1;
}
// --super-light: #ecf1f6;
html {
font-family:"San Francisco","Roboto","Arial",sans-serif;
-webkit-text-size-adjust:100%;
@ -28,6 +26,7 @@ body, html{
height: 100%;
margin: 0;
}
#main{height: 100%;}
a{color: inherit; text-decoration: none;}
select{-moz-appearance: none;}
@ -47,6 +46,7 @@ button::-moz-focus-inner {
input, textarea{
transition: border 0.2s;
outline: none;
}
input[type="checkbox"]{position: relative; top: 1px; margin: 0; padding: 0;}
@ -61,6 +61,23 @@ input[type="checkbox"]{position: relative; top: 1px; margin: 0; padding: 0;}
button:focus,
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
outline: none !important;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
@ -85,3 +102,30 @@ input[type="checkbox"]{position: relative; top: 1px; margin: 0; padding: 0;}
.login-form button.active{
box-shadow: 0px 1px 5px rgba(0,0,0,0.20);
}
::-webkit-scrollbar{
height:6px;
width:6px
}
::-webkit-scrollbar-track{
background:rgba(0,0,0,.1)
}
::-webkit-scrollbar-thumb{
-webkit-border-radius:3px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
background:rgba(0,0,0,.2)
}
.scroll-y{
scrollbar-3dlight-color:#7d7e94;
scrollbar-arrow-color:#c1c1d1;
scrollbar-darkshadow-color:#2d2c4d;
scrollbar-face-color:rgba(0,0,0,.1);
scrollbar-highlight-color:#7d7e94;
scrollbar-shadow-color:#2d2c4d;
scrollbar-track-color:rgba(0,0,0,.1);
}

43
client/components/breadcrumb.js
View File

@ -41,14 +41,11 @@ export class BreadCrumb extends React.Component {
<div className="component_breadcrumb">
<BreadCrumbContainer className={this.props.className+' no-select'}>
<Logout />
<ReactCSSTransitionGroup transitionName="breadcrumb" transitionLeave={true} transitionEnter={true} transitionLeaveTimeout={500} transitionEnterTimeout={500} transitionAppear={false}>
<ReactCSSTransitionGroup transitionName="breadcrumb" transitionLeave={true} transitionEnter={true} transitionLeaveTimeout={150} transitionEnterTimeout={200} transitionAppear={false}>
{
this.state.path.map((path, index) => {
return (
<span key={"breadcrumb_"+index}>
<Path path={path} isLast={this.state.path.length === index + 1} needSaving={this.props.needSaving} />
<Separator isLast={this.state.path.length === index + 1} />
</span>
<Path key={"breadcrumb_"+index} path={path} isLast={this.state.path.length === index + 1} needSaving={this.props.needSaving} />
);
})
}
@ -85,22 +82,18 @@ const Logout = (props) => {
}
const Saving = (props) => {
if(props.needSaving){
return (
<NgIf className="component_saving" cond={props.needSaving === true && props.isLast === true}>
<NgIf className="component_saving" cond={props.needSaving === true}>
*
</NgIf>
);
}else{
return null;
}
}
const Separator = (props) => {
return (
<NgIf cond={props.isLast === false} className="component_separator">
<div className="component_separator">
<img width="16" height="16" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAA30lEQVQ4T63T7Q2CMBAG4OuVPdQNcAPdBCYwDdclCAQ3ACfRDXQDZQMHgNRcAoYApfWjv0jIPX3b3gn4wxJjI03TUAhRBkGwV0o9ffaYIEVRrJumuQHA3ReaILxzl+bCkNZ660ozi/QQIl4BoCKieAmyIlyU53lkjCld0CIyhIwxSmt9nEvkRLgoyzIuPggh4iRJqjHkhXTQAwBWUsqNUoq/38sL+TlJf7lf38ngdU5EFNme2adPFgGGrR2LiGcAqIko/LhjeXbatuVOraWUO58hnJ1iRKx8AetxXPHH/1+y62USursaSgAAAABJRU5ErkJggg=="/>
</NgIf>
</div>
);
}
@ -109,19 +102,6 @@ const Separator = (props) => {
export class PathElementWrapper extends React.Component {
constructor(props){
super(props);
this.state = {hover: false};
}
onClick(){
if(this.props.isLast === false){
this.props.emit('file.select', this.props.path.full, 'directory');
}
}
toggleHover(shouldHover){
if(('ontouchstart' in window) === false){
this.setState({hover: shouldHover});
}
}
limitSize(str){
@ -133,12 +113,19 @@ export class PathElementWrapper extends React.Component {
render(){
let className = "component_path-element-wrapper";
if(this.state.hover){ className += " hover"; }
if(this.props.highlight) { className += " highlight";}
return (
<li className={className} onClick={this.onClick.bind(this)} onMouseEnter={this.toggleHover.bind(this, true)} onMouseLeave={this.toggleHover.bind(this, false)}>
<li className={className}>
<NgIf cond={this.props.isLast === false}>
<Link to={"/files" + this.props.path.full || "/"} className="label">
{this.limitSize(this.props.path.label)}
<Saving isLast={this.props.isLast} needSaving={this.props.needSaving} isSaving={false} />
</Link>
<Separator/>
</NgIf>
<NgIf cond={this.props.isLast === true} className="label">
{this.limitSize(this.props.path.label)}
<Saving needSaving={this.props.needSaving} />
</NgIf>
</li>
);
}

81
client/components/breadcrumb.scss
View File

@ -2,9 +2,9 @@
.breadcrumb{
background: white;
margin: 0 0 0px 0;
padding: 8px 0;
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
z-index: 1000;
padding: 1px 0;
position: relative;
ul{
@ -13,62 +13,77 @@
width: 95%;
max-width: 800px;
padding: 0;
span, div, li{display: inline-block;}
span{display: block; padding: 7px 0;}
div, li{
display: inline-block;
}
}
}
.component_logout{
float: right;
display: inline-block;
margin: 0 0px;
padding: 3px 0;
margin: 0 0px 0 5px;
line-height: 25px;
padding: 7px 0;
a{display: block; vertical-align: middle;}
.component_icon{
height: 20px;
vertical-align: middle;
}
}
.component_saving{
display: inline;
padding: 0 3px;
}
.component_separator{
position: relative;
top: 3px;
display: inline;
}
.component_path-element{
display: inline-block;
color: var(--light);
cursor: pointer;
&.is-last{
cursor: inherit;
color: var(--color);
font-weight: inherit;
.component_path-element-wrapper.hover{
cursor: inherit;
background: inherit!important;
}
}
.label{color: var(--color);padding: 2px 5px;}
a.label{color: var(--light);}
.component_path-element-wrapper{
font-size: 18px;
display: inline-block;
padding: 2px 5px;
border-radius: 2px;
&.hover{
background: var(--super-light);
}
&.highlight{
a{border-radius: 2px;}
&.highlight a{
background: var(--emphasis-primary);
border: 2px solid var(--primary);
padding: 0px 20px;
box-sizing: border-box;
}
}
}
.component_separator img{
vertical-align: middle;
}
}
body.touch-no{
.component_path-element-wrapper:hover a{
background: var(--super-light);
}
}
// mobile user have a scrollable breadcrumb
body.touch-yes{
ul span{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
box-sizing:border-box;
-moz-box-sizing:border-box;
white-space: nowrap;
&::-webkit-scrollbar {
height: 3px;
}
&::-webkit-scrollbar-track {
background: var(--super-light);
}
&::-webkit-scrollbar-thumb {
background: #d2d2d2;
border-radius: 1px;
}
}
}
/* ANIMATION */
.component_breadcrumb{

6
client/helpers/cache.js
View File

@ -20,7 +20,9 @@ Data.prototype._init = function(){
request.onsuccess = (e) => {
done(e.target.result);
}
request.onerror = err;
request.onerror = (e) => {
err(e);
};
});
}
@ -29,12 +31,10 @@ Data.prototype._setup = function(db){
if(!db.objectStoreNames.contains(this.FILE_PATH)){
store = db.createObjectStore(this.FILE_PATH, {keyPath: "path"});
}
//store.createIndex("stale", ["last_access"])
if(!db.objectStoreNames.contains(this.FILE_CONTENT)){
store = db.createObjectStore(this.FILE_CONTENT, {keyPath: "path"});
}
//store.createIndex("stale", ["last_access"])
}
Data.prototype._vacuum = function(){

5
client/index.js
View File

@ -15,3 +15,8 @@ window.onload = () => {
};
window.log = function(){console.log.apply(this, arguments)};
window.addEventListener("DOMContentLoaded", () => {
const className = 'ontouchstart' in window ? 'touch-yes' : 'touch-no';
document.body.classList.add(className);
});

2
client/pages/filespage.js
View File

@ -189,7 +189,7 @@ export class FilesPage extends React.Component {
resetHeight(){
this.setState({
height: document.body.clientHeight - document.querySelector('.breadcrumb').offsetHeight
height: screenHeight()
});
}

5
client/pages/filespage.scss
View File

@ -4,13 +4,12 @@
}
.container{
padding: 5px 0 20px 0;
height: 100%;
boxSizing: border-box;
box-sizing: border-box;
}
}
.scroll-y{
overflow-y: auto!important;
overflow-y: scroll!important;
overflow-x: hidden!important;
-webkit-overflow-scrolling: touch;
}

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

@ -251,7 +251,7 @@ const DateTime = (props) => {
<span>{displayTime(props.timestamp)}</span>
</NgIf>
);
}
};
const FileSize = (props) => {
function displaySize(bytes){
@ -275,11 +275,12 @@ const FileSize = (props) => {
<span>{displaySize(props.size)}</span>
</NgIf>
);
}
};
const Message = (props) => {
return (
<NgIf cond={props.message !== null} className="component_message" type="inline">
- {props.message}
</NgIf>
);
}
};

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

@ -1,3 +1,4 @@
// Menu for new file and directory
.menubar{
font-size: 15px;
line-height: 15px;
@ -17,31 +18,61 @@
font-size: 12px;
}
}
.component_thing{
&:hover .box{
background: var(--super-light);
.component_datetime{display: none;}
.component_action{display: block;}
}
.component_action{display: none;}
.file-is-hover{
background: var(--emphasis-primary);
}
.mouse-is-hover{
background: var(--super-light);
}
.file-is-dragging{
opacity: 0.15;
}
.file-details{
padding: 0 5px;
line-height: 22px;
white-space: nowrap;
}
form{
display: inline;
}
.component_icon{
width: 25px;
height: 25px;
}
form{
display: inline;
input{
outline: none;
.component_filesize{
span{
color: var(--light);
font-size: 0.85em;
}
}
.component_updater{
.action{
.component_message{
color: var(--light);
font-size: 0.9em;
padding-left: 10px;
}
.component_datetime{
float: right;
color: var(--light);
line-height: 25px;
margin: 0 -10px;
padding: 0 10px;
position: relative;
}
.component_action{
float: right;
color: #6f6f6f;
line-height: 25px;
@ -53,30 +84,5 @@
box-sizing: border-box;
}
}
}
.component_datetime{
float: right;
color: var(--light);
line-height: 25px;
margin: 0 -10px;
padding: 0 10px;
position: relative;
}
.component_filesize{
span{
color: var(--light);
font-size: 0.85em;
}
}
.component_message{
color: var(--light);
font-size: 0.9em;
padding-left: 10px;
}
.file-details{
padding: 0 5px;
line-height: 22px;
white-space: nowrap;
}
}

12
client/pages/viewerpage/editor.js
View File

@ -5,24 +5,22 @@ import { NgIf, Loader } from '../../components/';
import CodeMirror from 'codemirror/lib/codemirror';
import 'codemirror/lib/codemirror.css';
import './editor.scss';
window.CodeMirror = CodeMirror;
// keybinding
import 'codemirror/keymap/emacs.js';
// search
import 'codemirror/addon/search/searchcursor.js';
import 'codemirror/addon/search/search.js';
import 'codemirror/addon/edit/matchbrackets.js';
import 'codemirror/addon/comment/comment.js';
import 'codemirror/addon/dialog/dialog.js';
// code folding
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/foldgutter.css';
import './editor.scss';
export class Editor extends React.Component {
constructor(props){
super(props);
@ -78,7 +76,11 @@ export class Editor extends React.Component {
CodeMirror.commands.save = () => {
let elt = editor.getWrapperElement();
elt.style.background = "rgba(0,0,0,0.1)";
window.setTimeout(function() { elt.style.background = ""; }, 300);
elt.style.transition = "";
window.setTimeout(function() {
elt.style.transition = "background 0.5s ease-out";
elt.style.background = "";
}, 200);
this.props.onSave && this.props.onSave();
};
}

11
client/pages/viewerpage/editor.scss
View File

@ -1,6 +1,7 @@
.CodeMirror {
height: 100%;
color: #333333;
background: var(--bg-color);
}
.CodeMirror-scroll { -webkit-overflow-scrolling: touch; }
@ -52,15 +53,13 @@
.cm-s-default .cm-string, .cm-s-default .cm-string-2{ color: #c41a16; }
.cm-s-default .cm-def { color: rgb(68, 85, 136); }
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-foldmarker{
padding-left: 5px;
color: #6f6f6f;
text-shadow: none;
color: var(--color);
text-shadow: 1px 1px 10px var(--color);
}
span.CodeMirror-matchingbracket {color: #0f0;}
span.CodeMirror-nonmatchingbracket {color: #f22;}
/* BUGFIX */
// https://github.com/codemirror/CodeMirror/issues/5056