From a03a69645c9e76c39d33abf77c264297d739ec02 Mon Sep 17 00:00:00 2001 From: cdujeu Date: Thu, 18 May 2017 16:44:28 +0200 Subject: [PATCH] WS List: Make Root Node droppable - Show a circular progress when loading workspace --- .../gui.ajax/res/js/ui/Components/index.js | 5 +- .../js/ui/Workspaces/wslist/WorkspaceEntry.js | 92 ++++++++++++------- 2 files changed, 64 insertions(+), 33 deletions(-) diff --git a/core/src/plugins/gui.ajax/res/js/ui/Components/index.js b/core/src/plugins/gui.ajax/res/js/ui/Components/index.js index 1c19745af0..cdd457bad5 100644 --- a/core/src/plugins/gui.ajax/res/js/ui/Components/index.js +++ b/core/src/plugins/gui.ajax/res/js/ui/Components/index.js @@ -40,7 +40,7 @@ import Store from './dynamic-grid/Store' import GridItemMixin from './dynamic-grid/GridItemMixin' import asGridItem from './dynamic-grid/asGridItem' -import {DNDActionParameter} from './util/DND' +import {Types, collect, collectDrop, nodeDragSource, nodeDropTarget, DNDActionParameter} from './util/DND' import UserAvatar from './users/avatar/UserAvatar' import UsersCompleter from './users/UsersCompleter' @@ -81,6 +81,9 @@ const PydioComponents = { asGridItem : asGridItem, DynamicGridStore : Store, + DND : { + Types, collect, collectDrop, nodeDragSource, nodeDropTarget, DNDActionParameter + }, DNDActionParameter : DNDActionParameter, UserAvatar : UserAvatar, diff --git a/core/src/plugins/gui.ajax/res/js/ui/Workspaces/wslist/WorkspaceEntry.js b/core/src/plugins/gui.ajax/res/js/ui/Workspaces/wslist/WorkspaceEntry.js index 45e2a59cf9..b98e95c32d 100644 --- a/core/src/plugins/gui.ajax/res/js/ui/Workspaces/wslist/WorkspaceEntry.js +++ b/core/src/plugins/gui.ajax/res/js/ui/Workspaces/wslist/WorkspaceEntry.js @@ -21,13 +21,18 @@ const React = require('react') const {muiThemeable} = require('material-ui/styles') import Color from 'color' +import {CircularProgress} from 'material-ui' +import { DragSource, DropTarget, flow } from 'react-dnd'; const Pydio = require('pydio') const PydioApi = require('pydio/http/api') const Node = require('pydio/model/node') -const {FoldersTree} = Pydio.requireLib('components'); +const {FoldersTree, DND} = Pydio.requireLib('components'); const {withContextMenu} = Pydio.requireLib('hoc'); +const { Types, collect, collectDrop, nodeDragSource, nodeDropTarget } = DND; + + const Confirm = React.createClass({ propTypes:{ @@ -187,6 +192,8 @@ let WorkspaceEntry =React.createClass({ if(this.props.workspace.getId() === this.props.pydio.user.activeRepository && this.props.showFoldersTree){ this.props.pydio.goTo('/'); }else{ + this.props.pydio.observeOnce('repository_list_refreshed', () => {this.setState({loading: false})}); + this.setState({loading: true}); this.props.pydio.triggerRepositoryChange(this.props.workspace.getId()); } }, @@ -215,9 +222,12 @@ let WorkspaceEntry =React.createClass({ }, render:function(){ - let current = (this.props.pydio.user.getActiveRepository() == this.props.workspace.getId()), + + const {workspace, pydio, onHoverLink, onOutLink, showFoldersTree} = this.props; + + let current = (pydio.user.getActiveRepository() == workspace.getId()), currentClass="workspace-entry", - messages = this.props.pydio.MessageHash, + messages = pydio.MessageHash, onHover, onOut, onClick, additionalAction, badge, badgeNum, newWorkspace; @@ -227,74 +237,78 @@ let WorkspaceEntry =React.createClass({ if (current) { currentClass +=" workspace-current"; if(this.state.openFoldersTree){ - style = this.getItemStyle(this.props.pydio.getContextHolder().getRootNode()); + style = this.getItemStyle(pydio.getContextHolder().getRootNode()); }else{ - style = this.getItemStyle(this.props.pydio.getContextHolder().getContextNode()); + style = this.getItemStyle(pydio.getContextHolder().getContextNode()); } } - currentClass += " workspace-access-" + this.props.workspace.getAccessType(); + currentClass += " workspace-access-" + workspace.getAccessType(); - if (this.props.onHoverLink) { + if (onHoverLink) { onHover = function(event){ - this.props.onHoverLink(event, this.props.workspace) + onHoverLink(event, workspace) }.bind(this); } - if (this.props.onOutLink) { + if (onOutLink) { onOut = function(event){ - this.props.onOutLink(event, this.props.ws) + onOutLink(event, workspace) }.bind(this); } onClick = this.onClick; // Icons - if (this.props.workspace.getAccessType() == "inbox") { - const status = this.props.workspace.getAccessStatus(); + if (workspace.getAccessType() == "inbox") { + const status = workspace.getAccessStatus(); if (!isNaN(status) && status > 0) { badgeNum = {status}; } badge = ; - } else if(this.props.workspace.getOwner()){ + } else if(workspace.getOwner()){ let overlay = ; - if(this.props.workspace.getRepositoryType() == "remote"){ + if(workspace.getRepositoryType() == "remote"){ overlay = ; } badge = {overlay}; } else{ - badge = {this.props.workspace.getLettersBadge()}; + badge = {workspace.getLettersBadge()}; } - if (this.props.workspace.getOwner() && !this.props.workspace.getAccessStatus() && !this.props.workspace.getLastConnection()) { + if (workspace.getOwner() && !workspace.getAccessStatus() && !workspace.getLastConnection()) { newWorkspace = NEW; // Dialog for remote shares - if (this.props.workspace.getRepositoryType() == "remote") { + if (workspace.getRepositoryType() == "remote") { onClick = this.handleOpenAlert.bind(this, 'new_share'); } - }else if(this.props.workspace.getRepositoryType() == "remote" && !current){ + }else if(workspace.getRepositoryType() == "remote" && !current){ // Remote share but already accepted, add delete additionalAction = ; - }else if(this.props.workspace.userEditable && !current){ + }else if(workspace.userEditable && !current){ additionalAction = ; } - if(this.props.showFoldersTree){ + if(this.state && this.state.loading){ + additionalAction = + } + + if(showFoldersTree){ let fTCName = this.state.openFoldersTree ? "workspace-additional-action mdi mdi-chevron-up" : "workspace-additional-action mdi mdi-chevron-down"; additionalAction = ; } let menuNode; - if(this.props.workspace.getId() === this.props.pydio.user.activeRepository ){ - menuNode = this.props.pydio.getContextHolder().getRootNode(); + if(workspace.getId() === pydio.user.activeRepository ){ + menuNode = pydio.getContextHolder().getRootNode(); }else{ /* - menuNode = new Node('/', false, this.props.workspace.getLabel()); + menuNode = new Node('/', false, workspace.getLabel()); menuNode.setRoot(true); const metaMap = new Map(); - metaMap.set('repository_id', this.props.workspace.getId()); + metaMap.set('repository_id', workspace.getId()); menuNode.setMetadata(metaMap); */ } @@ -304,27 +318,27 @@ let WorkspaceEntry =React.createClass({ node={menuNode} className={currentClass} onClick={onClick} - title={this.props.workspace.getDescription()} + title={workspace.getDescription()} onMouseOver={onHover} onMouseOut={onOut} style={style} > {badge} - {this.props.workspace.getLabel()}{newWorkspace}{badgeNum} - {this.props.workspace.getDescription()} + {workspace.getLabel()}{newWorkspace}{badgeNum} + {workspace.getDescription()} {additionalAction} ); - if(this.props.showFoldersTree){ + if(showFoldersTree){ return (
{wsBlock} { + + const {canDrop, isOver, connectDropTarget} = props; + let className = props.className || ''; + if(canDrop && isOver){ + className += ' droppable-active'; + } return ( -
+
{ + const node = ReactDOM.findDOMNode(instance) + if (typeof connectDropTarget === 'function') connectDropTarget(node) + }} + /> ) } ContextMenuWrapper = withContextMenu(ContextMenuWrapper) - +ContextMenuWrapper = DropTarget(Types.NODE_PROVIDER, nodeDropTarget, collectDrop)(ContextMenuWrapper); WorkspaceEntry = muiThemeable()(WorkspaceEntry); + export {WorkspaceEntry as default} \ No newline at end of file