-
@@ -144,7 +142,7 @@ export class PathElementWrapper extends React.Component {
render(){
let style = {
cursor: this.props.isLast ? '' : 'pointer',
- background: this.state.hover && this.props.isLast !== true? theme.effects.hover : 'inherit',
+ background: this.state.hover && this.props.isLast !== true? '#f5f5f5' : 'inherit',
borderRadius: '1px',
fontSize: '18px',
display: 'inline-block',
@@ -152,8 +150,8 @@ export class PathElementWrapper extends React.Component {
fontWeight: this.props.isLast ? '100': ''
};
if(this.props.highlight === true){
- style.background = theme.effects.selected;
- style.border = '2px solid '+theme.colors.primary;
+ style.background = '#c5e2f1';
+ style.border = '2px solid #9AD1ED';
style.borderRadius = '2px';
style.padding = '2px 20px';
}
@@ -175,7 +173,7 @@ export class PathElement extends PathElementWrapper {
render(highlight = false){
return (
-
+
+ );
+}
diff --git a/client/utilities/icon.scss b/client/components/icon.scss
similarity index 100%
rename from client/utilities/icon.scss
rename to client/components/icon.scss
diff --git a/client/components/index.js b/client/components/index.js
index 3db3a3ef..81e71be8 100644
--- a/client/components/index.js
+++ b/client/components/index.js
@@ -1,5 +1,21 @@
-export { BreadCrumb } from './breadcrumb';
-export { FileSystem } from './filesystem';
-export { Connect } from './connect';
+export { EventEmitter, EventReceiver } from './events';
+export { BreadCrumb, PathElement } from './breadcrumb';
+export { Input } from './input';
+export { Textarea } from './textarea';
+export { Button } from './button';
+export { Container } from './container';
+export { NgIf } from './ngif';
+export { Card } from './card';
+export { Loader } from './loader';
+export { Error } from './error';
+export { Fab } from './fab';
+export { Icon } from './icon';
+export { Notification } from './notification';
+export { Uploader } from './uploader';
+export { Bundle } from './bundle';
+export { Modal } from './modal';
+export { Prompt } from './prompt';
+export { Alert } from './alert';
+//export { Connect } from './connect';
// Those are commented because they will delivered as a separate chunk
// export { Editor } from './editor';
diff --git a/client/utilities/input.js b/client/components/input.js
similarity index 100%
rename from client/utilities/input.js
rename to client/components/input.js
diff --git a/client/utilities/input.scss b/client/components/input.scss
similarity index 100%
rename from client/utilities/input.scss
rename to client/components/input.scss
diff --git a/client/utilities/loader.js b/client/components/loader.js
similarity index 100%
rename from client/utilities/loader.js
rename to client/components/loader.js
diff --git a/client/utilities/loader.scss b/client/components/loader.scss
similarity index 100%
rename from client/utilities/loader.scss
rename to client/components/loader.scss
diff --git a/client/utilities/modal.js b/client/components/modal.js
similarity index 92%
rename from client/utilities/modal.js
rename to client/components/modal.js
index 6384b19c..3e9c6a3c 100644
--- a/client/utilities/modal.js
+++ b/client/components/modal.js
@@ -1,11 +1,9 @@
import React from 'react';
-import PropTypes from 'prop-types';
-import { theme } from './theme';
-import { Input } from './input';
-import { Button } from './button';
-import { NgIf } from './ngif';
-import './modal.scss';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import PropTypes from 'prop-types';
+
+import { Input, Button, NgIf } from './';
+import './modal.scss';
export class Modal extends React.Component {
constructor(props){
diff --git a/client/utilities/modal.scss b/client/components/modal.scss
similarity index 100%
rename from client/utilities/modal.scss
rename to client/components/modal.scss
diff --git a/client/utilities/ngif.js b/client/components/ngif.js
similarity index 92%
rename from client/utilities/ngif.js
rename to client/components/ngif.js
index 220ef3be..87d1d10b 100644
--- a/client/utilities/ngif.js
+++ b/client/components/ngif.js
@@ -19,5 +19,5 @@ export class NgIf extends React.Component {
}
NgIf.propTypes = {
- cond: PropTypes.bool
+ cond: PropTypes.bool.isRequired
};
diff --git a/client/utilities/notification.js b/client/components/notification.js
similarity index 98%
rename from client/utilities/notification.js
rename to client/components/notification.js
index f2503971..ee44a9b8 100644
--- a/client/utilities/notification.js
+++ b/client/components/notification.js
@@ -1,8 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { NgIf } from './';
-import { theme } from './theme';
+import { NgIf } from './';
import './notification.scss';
export class Notification extends React.Component {
diff --git a/client/utilities/notification.scss b/client/components/notification.scss
similarity index 100%
rename from client/utilities/notification.scss
rename to client/components/notification.scss
diff --git a/client/components/prompt.js b/client/components/prompt.js
new file mode 100644
index 00000000..59fe0988
--- /dev/null
+++ b/client/components/prompt.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Input, Button, Modal, NgIf } from './';
+import './prompt.scss';
+
+export class Prompt extends React.Component {
+ constructor(props){
+ super(props);
+ this.state = {
+ modal_appear: false,
+ error: ''
+ };
+ }
+
+ componentWillReceiveProps(props){
+ if(props.error !== this.state.error){
+ this.setState({error: props.error});
+ }
+ }
+
+ onCancel(should_clear){
+ this.setState({modal_appear: false});
+ }
+
+ onSubmit(e){
+ }
+
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+Prompt.propTypes = {
+ type: PropTypes.string,
+ message: PropTypes.string.isRequired,
+ onCancel: PropTypes.func,
+ onConfirm: PropTypes.func
+};
diff --git a/client/components/prompt.scss b/client/components/prompt.scss
new file mode 100644
index 00000000..d9b14cd6
--- /dev/null
+++ b/client/components/prompt.scss
@@ -0,0 +1,5 @@
+.component_prompt{
+ .message{
+ text-align: center;
+ }
+}
diff --git a/client/utilities/textarea.js b/client/components/textarea.js
similarity index 93%
rename from client/utilities/textarea.js
rename to client/components/textarea.js
index 77056271..8040df82 100644
--- a/client/utilities/textarea.js
+++ b/client/components/textarea.js
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { theme } from './theme';
import './textarea.scss';
diff --git a/client/utilities/textarea.scss b/client/components/textarea.scss
similarity index 100%
rename from client/utilities/textarea.scss
rename to client/components/textarea.scss
diff --git a/client/utilities/uploader.js b/client/components/uploader.js
similarity index 100%
rename from client/utilities/uploader.js
rename to client/components/uploader.js
diff --git a/client/utilities/uploader.scss b/client/components/uploader.scss
similarity index 100%
rename from client/utilities/uploader.scss
rename to client/components/uploader.scss
diff --git a/client/data/index.js b/client/data/index.js
deleted file mode 100644
index 8b381f97..00000000
--- a/client/data/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { Files } from './api';
-export { Session } from './api';
-export { invalidate } from './tools';
-export { opener } from './mimetype';
-export { EventEmitter, EventReceiver } from './events';
diff --git a/client/data/tools.js b/client/helpers/ajax.js
similarity index 99%
rename from client/data/tools.js
rename to client/helpers/ajax.js
index 562a4250..6df79d94 100644
--- a/client/data/tools.js
+++ b/client/helpers/ajax.js
@@ -25,6 +25,7 @@ export function invalidate(url){
throw 'invalidation error';
}
}
+
export function http_get(url, cache_expire = 0, type = 'json'){
if(cache_expire > 0 && cache[url] && cache[url].date > new Date().getTime()){
return new Promise((done) => done(cache[url].data));
diff --git a/client/helpers/backpressure.js b/client/helpers/backpressure.js
new file mode 100644
index 00000000..d2108b9a
--- /dev/null
+++ b/client/helpers/backpressure.js
@@ -0,0 +1,46 @@
+export function debounce(func, wait, immediate) {
+ var timeout;
+ return function() {
+ var context = this, args = arguments;
+ var later = function() {
+ timeout = null;
+ if (!immediate) func.apply(context, args);
+ };
+ var callNow = immediate && !timeout;
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ if (callNow) func.apply(context, args);
+ };
+};
+
+export function throttle(func, wait, options) {
+ var context, args, result;
+ var timeout = null;
+ var previous = 0;
+ if (!options) options = {};
+ var later = function() {
+ previous = options.leading === false ? 0 : Date.now();
+ timeout = null;
+ result = func.apply(context, args);
+ if (!timeout) context = args = null;
+ };
+ return function() {
+ var now = Date.now();
+ if (!previous && options.leading === false) previous = now;
+ var remaining = wait - (now - previous);
+ context = this;
+ args = arguments;
+ if (remaining <= 0 || remaining > wait) {
+ if (timeout) {
+ clearTimeout(timeout);
+ timeout = null;
+ }
+ previous = now;
+ result = func.apply(context, args);
+ if (!timeout) context = args = null;
+ } else if (!timeout && options.trailing !== false) {
+ timeout = setTimeout(later, remaining);
+ }
+ return result;
+ };
+};
diff --git a/client/utilities/crypto.js b/client/helpers/crypto.js
similarity index 100%
rename from client/utilities/crypto.js
rename to client/helpers/crypto.js
diff --git a/client/helpers/index.js b/client/helpers/index.js
new file mode 100644
index 00000000..1e8829cb
--- /dev/null
+++ b/client/helpers/index.js
@@ -0,0 +1,8 @@
+export { URL_HOME, goToHome, URL_FILES, goToFiles, URL_VIEWER, goToViewer, URL_LOGIN, goToLogin, URL_LOGOUT, goToLogout } from './navigate';
+export { opener } from './mimetype';
+export { debounce, throttle } from './backpressure';
+export { encrypt, decrypt } from './crypto'
+export { pathBuilder } from './path';
+export { memory } from './memory';
+export { prepare } from './navigate';
+export { invalidate, http_get, http_post, http_delete } from './ajax';
diff --git a/client/utilities/memory.js b/client/helpers/memory.js
similarity index 100%
rename from client/utilities/memory.js
rename to client/helpers/memory.js
diff --git a/client/data/mimetype.js b/client/helpers/mimetype.js
similarity index 99%
rename from client/data/mimetype.js
rename to client/helpers/mimetype.js
index 3bf58840..c108a68f 100644
--- a/client/data/mimetype.js
+++ b/client/helpers/mimetype.js
@@ -29,8 +29,6 @@ export function opener(file){
}
}
-
-
const db = {
'pdf': 'application/pdf',
'csv': 'text/csv',
diff --git a/client/utilities/navigate.js b/client/helpers/navigate.js
similarity index 96%
rename from client/utilities/navigate.js
rename to client/helpers/navigate.js
index 40483aea..5b364f78 100644
--- a/client/utilities/navigate.js
+++ b/client/helpers/navigate.js
@@ -1,5 +1,3 @@
-//import { history } from '../history';
-
export const URL_HOME = '/';
export function goToHome(history){
history.push(URL_HOME);
diff --git a/client/utilities/path.js b/client/helpers/path.js
similarity index 100%
rename from client/utilities/path.js
rename to client/helpers/path.js
diff --git a/client/index.html b/client/index.html
index bd0dd5bf..a4b1b21b 100644
--- a/client/index.html
+++ b/client/index.html
@@ -30,13 +30,8 @@
-
-
-
-
-
- CONNECT
-
- );
- }
-}
diff --git a/client/utilities/container.js b/client/components/container.js
similarity index 100%
rename from client/utilities/container.js
rename to client/components/container.js
diff --git a/client/utilities/container.scss b/client/components/container.scss
similarity index 100%
rename from client/utilities/container.scss
rename to client/components/container.scss
diff --git a/client/utilities/error.js b/client/components/error.js
similarity index 100%
rename from client/utilities/error.js
rename to client/components/error.js
diff --git a/client/data/events.js b/client/components/events.js
similarity index 97%
rename from client/data/events.js
rename to client/components/events.js
index 9bdd2243..ad40e2c2 100644
--- a/client/data/events.js
+++ b/client/components/events.js
@@ -34,10 +34,9 @@ function emit(event, payload){
}
}
-
export function EventReceiver(WrappedComponent){
let id = Math.random().toString();
-
+
return class extends React.Component {
subscribe(event, callback){
subscribe(id, event, callback)
@@ -53,15 +52,13 @@ export function EventReceiver(WrappedComponent){
}
}
-
-
export function EventEmitter(WrappedComponent) {
return class extends React.Component {
emit(){
// reconstruct arguments
let args = Array.prototype.slice.call(arguments);
let event = args.shift();
- let payload = args;
+ let payload = args;
let res = emit(event, payload);
if(res.then){
diff --git a/client/utilities/fab.js b/client/components/fab.js
similarity index 100%
rename from client/utilities/fab.js
rename to client/components/fab.js
diff --git a/client/utilities/fab.scss b/client/components/fab.scss
similarity index 100%
rename from client/utilities/fab.scss
rename to client/components/fab.scss
diff --git a/client/components/icon.js b/client/components/icon.js
new file mode 100644
index 00000000..d42d117c
--- /dev/null
+++ b/client/components/icon.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import './icon.scss';
+
+import img_folder from "../assets/img/folder.svg";
+import img_file from "../assets/img/file.svg";
+import img_loader from "../assets/img/loader.svg";
+import img_save from "../assets/img/save.svg";
+import img_power from "../assets/img/power.svg";
+import img_edit from "../assets/img/edit.svg";
+import img_delete from "../assets/img/delete.svg";
+import img_bucket from "../assets/img/bucket.svg";
+import img_link from "../assets/img/link.svg";
+import img_loading from "../assets/img/loader.svg";
+import img_download from "../assets/img/download.svg";
+import img_play from "../assets/img/play.svg";
+import img_pause from "../assets/img/pause.svg";
+import img_error from "../assets/img/error.svg";
+import img_loading_white from "../assets/img/loader_white.svg";
+
+export const Icon = (props) => {
+ let img;
+ if(props.name === 'directory'){
+ img = img_folder;
+ }else if(props.name === 'file'){
+ img = img_file;
+ }else if(props.name === 'loader'){
+ img = img_loader;
+ }else if(props.name === 'save'){
+ img = img_save;
+ }else if(props.name === 'power'){
+ img = img_power;
+ }else if(props.name === 'edit'){
+ img = img_edit;
+ }else if(props.name === 'delete'){
+ img = img_delete;
+ }else if(props.name === 'bucket'){
+ img = img_bucket;
+ }else if(props.name === 'link'){
+ img = img_link;
+ }else if(props.name === 'loading'){
+ img = img_loader;
+ }else if(props.name === 'download'){
+ img = img_download;
+ }else if(props.name === 'play'){
+ img = img_play;
+ }else if(props.name === 'pause'){
+ img = img_pause;
+ }else if(props.name === 'error'){
+ img = img_error;
+ }else if(props.name === 'loading_white'){
+ img = img_loading_white;
+ }else{
+ throw('unknown icon');
+ }
+
+ return (
+
+
+ + {this.props.message} +
+ +