From: Laurence Maultsby <laurence.maultsby@riftio.com>
Date: Tue, 17 Jan 2017 19:19:51 +0000 (-0500)
Subject: Config parameter map styling, 3
X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FUI.git;a=commitdiff_plain;h=refs%2Fchanges%2F73%2F973%2F1

Config parameter map styling, 3

Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
---

diff --git a/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js b/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js
index 848f0b4e3..dd371d3b1 100644
--- a/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js
+++ b/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js
@@ -62,87 +62,6 @@ function configParameterMapMap(ap, i) {
 
         </div>
     )
-    /*
-        // const colors = fg.colors;
-        // const stylePrimary = {borderColor: colors.primary};
-        // const styleSecondary = {borderColor: colors.secondary};
-
-        // context.stylePrimary = stylePrimary;
-        // context.styleSecondary = styleSecondary;
-
-        // const rspMap = fg.rsp.reduce((map, rsp) => {
-        //     map[rsp.id] = rsp;
-        //     rsp.classifier = [];
-        //     return map;
-        // }, {});
-
-        // fg.classifier.forEach(classifier => {
-        //     const rsp = rspMap[classifier.model['rsp-id-ref']];
-        //     if (rsp) {
-        //         rsp.classifier.push(classifier);
-        //     }
-        // });
-
-        // function onClickRemoveForwardingGraph(fg, event) {
-        //     event.preventDefault();
-        //     const root = fg.getRoot();
-        //     fg.remove();
-        //     CatalogItemsActions.catalogItemDescriptorChanged(root);
-        // }
-
-        // function onClickAddClassifier(context, fg, event) {
-        //     event.preventDefault();
-        //     fg.createClassifier();
-        //     CatalogItemsActions.catalogItemDescriptorChanged(fg.getRoot());
-        // }
-
-        // function onClickToggleShowAllFGPaths(fg, event) {
-        //     //event.preventDefault();
-        //     event.stopPropagation();
-        //     fg.uiState.showPaths = event.target.checked;
-        //     fg.rsp.forEach(rsp => rsp.uiState.showPath = event.target.checked);
-        //     CatalogItemsActions.catalogItemMetaDataChanged(fg.getRoot().model);
-        // }
-
-        // if (!fg.uiState.hasOwnProperty('showPaths')) {
-        //     fg.uiState.showPaths = true;
-        //     fg.rsp.forEach(d => d.uiState.showPath = true);
-        // }
-
-        // const toggleSelectAllPaths = (
-        //     <input type="checkbox" name={'show-path' + fg.uid} checked={fg.uiState.showPaths} onChange={() => {}} onClick={onClickToggleShowAllFGPaths.bind(null, fg)} />
-        // );
-
-        // const srpFactory = DescriptorModelFactory.newRecordServicePathFactory({}, fg);
-        // srpFactory.uid = fg.uid + i;
-
-        // const hasServiceFunctionVNFDs = context.containers.filter(d => DescriptorModelFactory.isConstituentVnfdWithServiceChain(d, 'SF')).length > 0;
-
-        // return (
-        //     <div key={i} className={fg.className} data-uid={fg.uid} data-offset-width="true" onClick={onClickSelectAndShowInDetailsPanel.bind(null, fg)} onCut={onCutDelegateToRemove.bind(null, fg)}>
-        //         <div key="outline-indicator" data-outline-indicator="true"></div>
-        //         <div className="header-actions">
-        //             <Button className="remove-forwarding-graph" title="Remove" onClick={onClickRemoveForwardingGraph.bind(null, fg)} src={imgRemove}/>
-        //         </div>
-        //         <LayoutRow primaryActionColumn={toggleSelectAllPaths} secondaryActionColumn={<img className="fg-icon" src={imgFG} width="20px" />}>
-        //             <small>{fg.title}</small>
-        //         </LayoutRow>
-        //         <div>
-        //             <h4>Rendered Service Paths</h4>
-        //             {hasServiceFunctionVNFDs ? fg.recordServicePaths.concat(srpFactory).map(mapRecordServicePath.bind(null, context)) : <small className="no-service-function-chain-msg hint">A VNFD with the chain SF is required to build Rendered Service Paths.</small>}
-        //         </div>
-        //         <div>
-        //             <h4>Classifiers</h4>
-        //             {fg.classifier.map(mapClassifier.bind(null, context))}
-        //             <div className="footer-actions">
-        //                 <div className="row-action-column">
-        //                     <Button className="create-new-classifier" src={imgAdd} width="20px" onClick={onClickAddClassifier.bind(null, context, fg)} label="Add Classifier" />
-        //                 </div>
-        //             </div>
-        //         </div>
-        //     </div>
-        // );
-    */
 
 }
 
@@ -211,22 +130,26 @@ const ConfigPrimitiveParameters = React.createClass({
         }
         return (
                 <div className="ConfigParameterMap">
-                    {
-                        containers.map(function(c, i) {
-                            if(c.className == 'ConfigParameterMap') {
-                                return <EditConfigParameterMap key={i} container={c} width={self.props.width} />
-                            }
-                        })
-                    }
+                    <div className="config-parameter-map">
+                        <div className="config-parameter-titles">
+                            <div className="config-parameter">
+                                Request
+                            </div>
+                            <div className="config-parameter">
+                                Source
+                            </div>
+                        </div>
+                        {
+                            containers.map(function(c, i) {
+                                if(c.className == 'ConfigParameterMap') {
+                                    return <EditConfigParameterMap key={i} container={c} width={self.props.width} />
+                                }
+                            })
+                        }
+                        <div className="toggle-bottom-spacer" style={{visibility: 'hidden', 'height': '50%', position: 'absolute'}}>We need this so when the user closes the panel it won't shift away and scare the bj out of them!</div>
+                    </div>
                 </div>
         )
-        // return (
-        //     <div className=" -with-transitions" data-offset-parent="true">
-        //         <div key="outline-indicator" data-outline-indicator="true"></div>
-        //         {containers.filter(d => d.type === 'nsd').map(mapNSD.bind(context))}
-        //     </div>
-        // );
-
     }
 });
 
diff --git a/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js b/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js
index bbf771bb2..f89b14a1b 100644
--- a/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js
+++ b/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js
@@ -425,14 +425,8 @@ export default function EditDescriptorModelProperties(props, type) {
 		const hasBasicFields = basicProperties.length > 0;
 		const closeGroup = basicProperties.length > 0;
 		return (
-			<div className="config-parameter-map">
-					<div className="config-parameter">
-						Request
-					</div>
-					<div className="config-parameter">
-						Source
-					</div>
-					{properties.map((property,i) => {
+
+					properties.map((property,i) => {
 						const path = [property.name];
 						const value = container.model[property.name];
 						if(path == 'id') {
@@ -446,18 +440,16 @@ export default function EditDescriptorModelProperties(props, type) {
 							let vnfd = catalogs[1].descriptors.filter((v) => v.id == vnfdIdRef)[0];
 							let primitiveName = vnfd['config-parameter']['config-parameter-request'].filter((p) => p.name == value['config-parameter-request-ref'] )[0].parameter[0]['config-primitive-name-ref'];
 							return (
-								<div className="config-parameter config-parameter-request" key={path + '-' + i}>
-									{`${vnfd['short-name']}(${vnfdIndexRef}) / ${primitiveName} / ${value['config-parameter-request-ref']}`}
+								<div className="config-parameter-request" key={path + '-' + i}>
+									{`${vnfd['short-name']} (${vnfdIndexRef}) / ${primitiveName} / ${value['config-parameter-request-ref']}`}
 								</div>
 							)
 						} else if(path == 'config-parameter-source') {
 							//Builds Source
-							return <div className="config-parameter config-parameter-source"> {build(container, property, path, value, _.assign({toggle: true, width: props.width}, props), value['member-vnf-index-ref'])} </div>
+							return <div className="config-parameter-source"> {build(container, property, path, value, _.assign({toggle: true, width: props.width}, props), value['member-vnf-index-ref'])} </div>
 						}
 
-					})}
-				<div className="toggle-bottom-spacer" style={{visibility: 'hidden', 'height': '50%', position: 'absolute'}}>We need this so when the user closes the panel it won't shift away and scare the bj out of them!</div>
-			</div>
+					})
 		);
 	}
 
@@ -477,7 +469,7 @@ export default function EditDescriptorModelProperties(props, type) {
 	path.push(container);
 
 	return (
-		<div className="EditDescriptorModelProperties -is-tree-view">
+		<div className="EditDescriptorModelProperties -is-tree-view config-parameter config-parameter-group">
 			{buildAdvancedGroup()}
 		</div>
 	);
diff --git a/skyquake/plugins/composer/src/src/styles/CanvasPanelTray.scss b/skyquake/plugins/composer/src/src/styles/CanvasPanelTray.scss
index 899eb8fc5..94f2b4352 100644
--- a/skyquake/plugins/composer/src/src/styles/CanvasPanelTray.scss
+++ b/skyquake/plugins/composer/src/src/styles/CanvasPanelTray.scss
@@ -74,13 +74,9 @@ $tray-head-height: 25px;
 		top:31px;
 	}
 	.ConfigParameterMap {
-
+		padding: 10px 20px;
 		background: $panel-bg-color;
 
-		.EditDescriptorModelProperties {
-		    margin-left: 8px;
-		}
-
 		.toggleable {
 			display:-ms-flexbox;
 			display:flex;
diff --git a/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss b/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss
index ed16003a9..352fa95d7 100644
--- a/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss
+++ b/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss
@@ -17,6 +17,7 @@
  */
 
 @import "main";
+@import "variables";
 @import "ColorGroups";
 
 .config-parameter-map {
@@ -33,13 +34,41 @@
 
 
 
-	width: 600px;
-
+	max-width: 980px;
+	.config-parameter-titles {
+		display: -ms-flexbox;
+		display: flex;
+		-ms-flex: 1 1 100%;
+		    flex: 1 1 100%;
+	    padding-bottom:10px;
+	    color: #AEAEAE;
+	    text-transform:uppercase;
+		    .config-parameter {
+		    	padding-left: 10px;
+		    }
+	}
 	.config-parameter {
+		display:-ms-flexbox;
+		display:flex;
 		-ms-flex: 1 1 50%;
 		    flex: 1 1 50%;
 		    &-source, &-request {
-				border-top:1px solid $vld-primary-color;
+		    	-ms-flex: 1 1 50%;
+		    	flex: 1 1 50%;
+				border-top:1px solid silver;
+				padding: 10px 10px;
+						    }
+		    &-request{
+		    	line-height: 25px;
+		    }
+		    &-group {
+		    	-ms-flex: 1 1 100%;
+		    	    flex: 1 1 100%;
+		    	display:-ms-flexbox;
+		    	display:flex;
+		    	&:nth-child(2) {
+		    		background: $panel-bg-color-contrast;
+		    	}
 		    }
 	}