X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FUI.git;a=blobdiff_plain;f=skyquake%2Fplugins%2Fcomposer%2Fsrc%2Fsrc%2Fcomponents%2FCanvasPanel.js;h=9eece49094cd14e3056f42fb12bda2d474b2352d;hp=6b04bd918dea34520e9bf9dfbfc5f3982d03a67c;hb=refs%2Fheads%2Fpkg_mgmt;hpb=e29efc315df33d546237e270470916e26df391d6

diff --git a/skyquake/plugins/composer/src/src/components/CanvasPanel.js b/skyquake/plugins/composer/src/src/components/CanvasPanel.js
index 6b04bd918..9eece4909 100644
--- a/skyquake/plugins/composer/src/src/components/CanvasPanel.js
+++ b/skyquake/plugins/composer/src/src/components/CanvasPanel.js
@@ -1,6 +1,6 @@
 
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -35,6 +35,8 @@ import EditForwardingGraphPaths from './EditorForwardingGraph/EditForwardingGrap
 import SelectionManager from '../libraries/SelectionManager'
 import DescriptorModelIconFactory from '../libraries/model/IconFactory'
 
+import FileManager from './filemanager/FileManager.jsx';
+
 import '../styles/CanvasPanel.scss'
 
 const CanvasPanel = React.createClass({
@@ -69,8 +71,26 @@ const CanvasPanel = React.createClass({
 		var req = require.context("../", true, /^\.\/.*\.svg$/);
 		const hasItem = this.props.containers.length !== 0;
 		const isEditingNSD = DescriptorModelFactory.isNetworkService(this.props.containers[0]);
+		const isDescriptorView = (this.props.panelTabShown == 'descriptor');
 		const hasNoCatalogs = this.props.hasNoCatalogs;
 		const bodyComponent = hasItem ? <CatalogItemCanvasEditor zoom={this.props.zoom} isShowingMoreInfo={this.props.showMore} containers={this.props.containers}/> : messages.canvasWelcome();
+		const viewFiles = this.props.panelTabShown == 'assets';
+		const viewButtonTabs =  !hasItem ? null : (
+	           <div className="CanvasPanelTabs">
+	               <div className="CatalogFilter">
+						<button className={isDescriptorView ? '-selected' : ''} onClick={ComposerAppActions.showDescriptor}>
+							Descriptor
+						</button>
+						{
+							this.props.files ?
+								<button className={!isDescriptorView ? '-selected' : ''}  onClick={ComposerAppActions.showAssets}>
+									Assets
+								</button>
+							: null
+						}
+					</div>
+				</div>
+       		)
 		return (
 			<div id="canvasPanelDiv" className="CanvasPanel" style={style} onDragOver={this.onDragOver} onDrop={this.onDrop}>
 				<div onDoubleClick={this.onDblClickOpenFullScreen}  className="CanvasPanelHeader panel-header" data-resizable="limit_bottom">
@@ -79,18 +99,23 @@ const CanvasPanel = React.createClass({
 						<span className="model-name">{this.props.title}</span>
 					</h1>
 				</div>
+				{viewButtonTabs}
 				<div className="CanvasPanelBody panel-body" style={{marginRight: this.props.layout.right, bottom: this.props.layout.bottom}} >
-					{hasNoCatalogs ? null : bodyComponent}
+					{hasNoCatalogs ? null : viewFiles ? <FileManager files={this.props.files} type={this.props.type} item={this.props.item} filesState={this.props.filesState} newPathName={this.props.newPathName} /> : bodyComponent}
 				</div>
-				<CanvasZoom zoom={this.props.zoom} style={{bottom: this.props.layout.bottom + 20}}/>
-				<CanvasPanelTray layout={this.props.layout} show={isEditingNSD}>
+				{
+					isDescriptorView ?
+						<CanvasZoom zoom={this.props.zoom} style={{bottom: this.props.layout.bottom + 20}}/>
+						: null
+				}
+				<CanvasPanelTray layout={this.props.layout} show={isEditingNSD && isDescriptorView}>
 					<EditForwardingGraphPaths containers={this.props.containers} />
 				</CanvasPanelTray>
 			</div>
 		);
 	},
 	onDragOver(event) {
-		const isDraggingFiles = _.contains(event.dataTransfer.types, 'Files');
+		const isDraggingFiles = _.includes(event.dataTransfer.types, 'Files');
 		if (!isDraggingFiles) {
 			event.preventDefault();
 			event.dataTransfer.dropEffect = 'copy';