Skip to content
This repository has been archived by the owner on Nov 25, 2020. It is now read-only.

Commit

Permalink
Make LeftNavigation panel more generic
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdujeu
cdujeu committed Mar 7, 2016
1 parent 74cd771 commit 3b10e91
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 52 deletions.
3 changes: 2 additions & 1 deletion core/src/plugins/gui.ajax/res/js/ui/prototype/class.AjxpReactComponent.js
View file
Expand Up @@ -35,7 +35,8 @@ Class.create('AjxpReactComponent', AjxpPane, {
ResourcesManager.loadClassesAndApply(namespacesToLoad, function(){
this.reactComponent = React.render(
React.createElement(window[options.componentNamespace][options.componentName], {
pydio:pydio
pydio:pydio,
pydioId:htmlElement.id
}),
$(htmlElement)
);
Expand Down
156 changes: 105 additions & 51 deletions core/src/plugins/gui.ajax/res/js/ui/reactjs/jsx/LeftNavigation.js
View file
Expand Up @@ -4,7 +4,8 @@
var LeftPanel = React.createClass({

propTypes:{
pydio:React.PropTypes.instanceOf(Pydio).isRequired
pydio:React.PropTypes.instanceOf(Pydio).isRequired,
pydioId:React.PropTypes.string.isRequired
},

childContextTypes: {
Expand All @@ -28,7 +29,7 @@

parseComponentConfigs:function(){
var reg = this.props.pydio.Registry.getXML();
var contentNodes = XMLUtils.XPathSelectNodes(reg, 'client_configs/component_config[@className="AjxpReactComponent::left_navigator"]/additional_content');
var contentNodes = XMLUtils.XPathSelectNodes(reg, 'client_configs/component_config[@className="AjxpReactComponent::'+this.props.pydioId+'"]/additional_content');
return contentNodes.map(function(node){
return {
id:node.getAttribute('id'),
Expand All @@ -39,11 +40,6 @@
});
},

createRepositoryEnabled:function(){
var reg = this.props.pydio.Registry.getXML();
return XMLUtils.XPathSelectSingleNode(reg, 'actions/action[@name="user_create_repository"]') !== null;
},

getInitialState:function(){
return {
statusOpen:true,
Expand Down Expand Up @@ -82,23 +78,7 @@
},

render:function(){
var entries = [], sharedEntries = [];
this.state.workspaces.forEach(function(object, key){
var entry = (
<WorkspaceEntry
{...this.props}
key={key}
workspace={object}
/>
);
if(object.getOwner()){
sharedEntries.push(entry);
}else{
entries.push(entry);
}
}.bind(this));

var messages = this.props.pydio.MessageHash;
const additional = this.state.additionalContents.map(function(paneData){
if(paneData.type == 'ListProvider'){
return (
Expand All @@ -113,41 +93,20 @@
}
}.bind(this));

if(this.createRepositoryEnabled()){
var createClick = function(){
this.props.pydio.Controller.fireAction('user_create_repository');
}.bind(this);
var createAction = (
<div className="workspaces">
<div className="workspace-entry" onClick={createClick} title={messages[418]}>
<span className="workspace-badge">+</span>
<span className="workspace-label">{messages[417]}</span>
</div>
</div>
);
}

return (
<span>
<div id="repo_chooser" onClick={this.openNavigation} onMouseOver={this.openNavigation} className={this.state.statusOpen?"open":""}>
<span className="icon-reorder"/>
</div>
<div className={"left-panel" + (this.state.statusOpen?'':' hidden')} onMouseOver={this.closeMouseover} onMouseOut={this.closeMouseout}>
{additional}
<div>
<div className="section-title" onClick={this.closeNavigation}>{messages[468]}</div>
<div className="workspaces">
{entries}
</div>
<div className="section-title">{messages[469]}</div>
<div className="workspaces">
{sharedEntries}
</div>
</div>
{createAction}
<UserWorkspacesList
pydio={this.props.pydio}
workspaces={this.state.workspaces}
/>
</div>
</span>
)
);
}
});

Expand Down Expand Up @@ -207,13 +166,92 @@

});

var UserWorkspacesList = React.createClass({

propTypes:{
pydio:React.PropTypes.instanceOf(Pydio),
workspaces:React.PropTypes.instanceOf(Map),
onHoverLink:React.PropTypes.func,
onOutLink:React.PropTypes.func
},

createRepositoryEnabled:function(){
var reg = this.props.pydio.Registry.getXML();
return XMLUtils.XPathSelectSingleNode(reg, 'actions/action[@name="user_create_repository"]') !== null;
},

render: function(){
var entries = [], sharedEntries = [], inboxEntry;
this.props.workspaces.forEach(function(object, key){
if(object.getId().indexOf('ajxp_') === 0){
return;
}
if(object.hasContentFilter()){
return;
}
var entry = (
<WorkspaceEntry
{...this.props}
key={key}
workspace={object}
/>
);
if(object.getAccessType() == "inbox"){
inboxEntry = entry;
}else if(object.getOwner()){
sharedEntries.push(entry);
}else{
entries.push(entry);
}
}.bind(this));
if(inboxEntry){
sharedEntries.unshift(inboxEntry);
}

var messages = this.props.pydio.MessageHash;

if(this.createRepositoryEnabled()){
var createClick = function(){
this.props.pydio.Controller.fireAction('user_create_repository');
}.bind(this);
var createAction = (
<div className="workspaces">
<div className="workspace-entry" onClick={createClick} title={messages[418]}>
<span className="workspace-badge">+</span>
<span className="workspace-label">{messages[417]}</span>
</div>
</div>
);
}

return (
<div>
<div className="section-title">{messages[468]}</div>
<div className="workspaces">
{entries}
</div>
<div className="section-title">{messages[469]}</div>
<div className="workspaces">
{sharedEntries}
</div>
<div className="section-title"></div>
{createAction}
</div>
);

}

});

var WorkspaceEntry = React.createClass({

mixins:[ReactPydio.MessagesConsumerMixin],

propTypes:{
pydio:React.PropTypes.instanceOf(Pydio).isRequired,
workspace:React.PropTypes.instanceOf(Repository).isRequired
workspace:React.PropTypes.instanceOf(Repository).isRequired,
onHoverLink:React.PropTypes.func,
onOutLink:React.PropTypes.func
},
getLetterBadge:function(){
return {__html:this.props.workspace.getHtmlBadge(true)};
Expand All @@ -227,10 +265,25 @@
if(current == this.props.workspace.getId()){
currentClass +=" workspace-current";
}
if(this.props.onHoverLink){
var onHover = function(event){
this.props.onHoverLink(event, this.props.workspace)
}.bind(this);
}
if(this.props.onOutLink){
var onOut = function(event){this.props.onOutLink(event, this.props.ws)}.bind(this);
}
return (
<div className={currentClass} onClick={this.onClick} title={this.props.workspace.getDescription()}>
<div
className={currentClass}
onClick={this.onClick}
title={this.props.workspace.getDescription()}
onMouseOver={onHover}
onMouseOut={onOut}
>
<span className="workspace-badge" dangerouslySetInnerHTML={this.getLetterBadge()}/>
<span className="workspace-label">{this.props.workspace.getLabel()}</span>
<span className="workspace-description">{this.props.workspace.getDescription()}</span>
</div>
);
}
Expand All @@ -243,6 +296,7 @@
}else{
ns.Panel = LeftPanel;
}
ns.UserWorkspacesList = UserWorkspacesList;
global.LeftNavigation=ns;

})(window);
3 changes: 3 additions & 0 deletions core/src/plugins/gui.ajax/res/themes/orbit/css/components/leftpanel.less
View file
Expand Up @@ -85,6 +85,9 @@
.workspace-label{
.nav-list-entry-label();
}
.workspace-description{
display: none;
}
&.workspace-current{
opacity: 0.4;
}
Expand Down
3 changes: 3 additions & 0 deletions core/src/plugins/gui.ajax/res/themes/orbit/css/pydio.css
View file
Expand Up @@ -4129,6 +4129,9 @@ div.menu.rootDirChooser span.rootDirTitle {
overflow: hidden;
text-overflow: ellipsis;
}
.left-panel .workspaces .workspace-entry .workspace-description {
display: none;
}
.left-panel .workspaces .workspace-entry.workspace-current {
opacity: 0.4;
}
Expand Down

0 comments on commit 3b10e91

Please sign in to comment.