Special characters in XMI file, small layout changes in navigation bar

Added support for special characters in XMI file. Spaces in navigation bar were narrowed.

Issue-ID: AAI-2441
Signed-off-by: Igor Dysko <igor1.dysko@orange.com>
Change-Id: Icd0c6d398beb71b7e8a367d301a40dd6c1105e0f

4 files changed, 56 insertions, 45 deletions

diff --git a/graphgraph-fe/src/graph_settings.css b/graphgraph-fe/src/graph_settings.css
index c30cda9..2cb08e5 100644
--- a/graphgraph-fe/src/graph_settings.css
+++ b/graphgraph-fe/src/graph_settings.css
@@ -6,31 +6,31 @@
 }
 
 .schemas-dropdown{
-    width: 100px;
+    width: 60px;
 }
 
-.node-dropdown{
+.node-dropdown {
     width: 200px;
 }
 
-.source-dropdown-div{
-    margin-left: 20px;
-    margin-right: 20px;
+.source-dropdown-div {
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 3px;
 }
 
-.startendnode-dropdown{
+.startendnode-dropdown {
     display: flex;
 }
 
-.graph-menu
-{
+.graph-menu {
     display: flex;
     width: 80px !important;
 }
 
 
-.modal-button
-{
+.modal-button {
     padding-top: 20px;
-    margin: 0;
+    margin-left: 5px;
+    margin-right: 5px;
 }
diff --git a/graphgraph-fe/src/graph_settings.js b/graphgraph-fe/src/graph_settings.js
index c8f03f1..5311582 100644
--- a/graphgraph-fe/src/graph_settings.js
+++ b/graphgraph-fe/src/graph_settings.js
@@ -216,39 +216,47 @@ class GraphSettings extends React.Component {
                 <MenuItem key='Parents' eventKey='Parents'>Parent-child (OXM structure)</MenuItem>,
         ];
         return (
-                <div>
+            <div>
                 <div className="graph-menu">
-                <div className="startendnode-dropdown">
-                <div>
-                <Label>Schemas</Label>
-                <DropdownButton className="schemas-dropdown" onSelect={this.selectSchema} id="schemas" title={this.state.selectedSchema}>{schemas}</DropdownButton>
-                </div>
-                <div className="source-dropdown-div">
-                <Label>Source Node</Label>
-                <DropdownButton className="node-dropdown" onSelect={this.onChangeStartNode} id="namesFrom" title={this.state.fromNode}>{fromItems}</DropdownButton>
-                </div>
-                <div>
-                <Label>Destination Node</Label>
-                <DropdownButton disabled={!this.state.enableDestinationNode} className="node-dropdown" onSelect={this.onChangeToNode} id="namesTo" title={this.state.toNode}>{items}</DropdownButton>
-                </div>
-                <div className="source-dropdown-div">
-                <Label>Edge filter</Label>
-                <DropdownButton className="node-dropdown" onSelect={this.changeEdgeFilter} id="filterEdge" title={this.state.edgeFilter}>{edgeFilterItems}</DropdownButton>
-                </div>
-                <div className="source-dropdown-div">
-                <Label>Selected Node</Label>
-                <DropdownButton className="node-dropdown" onSelect={this.onSelectNode} id="selectedNode" title={this.props.selectedNode}>{currentNodeNames}</DropdownButton>
-                </div>
-                <Popup isDisabled={!this.state.showHops} edgeFilter={this.state.edgeFilter} parentHops={this.state.hops.parents} childHops={this.state.hops.child} cousinHops={this.state.hops.cousin} updateHops={this.updateHops}/>
-                <div className="modal-button">
-                <ValidationModal schemaProblems={this.state.schemaProblems}/>
-                </div>
-                <div className="modal-button">
-                <DownloadExport schemaVersion={this.state.selectedSchema}/>
-                </div>
-                </div>
-                </div>
+                    <div className="startendnode-dropdown">
+                        <div>
+                            <Label>Schemas</Label>
+                            <DropdownButton className="schemas-dropdown" onSelect={this.selectSchema} id="schemas"
+                                            title={this.state.selectedSchema}>{schemas}</DropdownButton>
+                        </div>
+                        <div className="source-dropdown-div">
+                            <Label>Source Node</Label>
+                            <DropdownButton className="node-dropdown" onSelect={this.onChangeStartNode} id="namesFrom"
+                                            title={this.state.fromNode}>{fromItems}</DropdownButton>
+                        </div>
+                        <div>
+                            <Label>Destination Node</Label>
+                            <DropdownButton disabled={!this.state.enableDestinationNode} className="node-dropdown"
+                                            onSelect={this.onChangeToNode} id="namesTo"
+                                            title={this.state.toNode}>{items}</DropdownButton>
+                        </div>
+                        <div className="source-dropdown-div">
+                            <Label>Edge filter</Label>
+                            <DropdownButton className="node-dropdown" onSelect={this.changeEdgeFilter} id="filterEdge"
+                                            title={this.state.edgeFilter}>{edgeFilterItems}</DropdownButton>
+                        </div>
+                        <div>
+                            <Label>Selected Node</Label>
+                            <DropdownButton className="node-dropdown" onSelect={this.onSelectNode} id="selectedNode"
+                                            title={this.props.selectedNode}>{currentNodeNames}</DropdownButton>
+                        </div>
+                        <Popup isDisabled={!this.state.showHops} edgeFilter={this.state.edgeFilter}
+                               parentHops={this.state.hops.parents} childHops={this.state.hops.child}
+                               cousinHops={this.state.hops.cousin} updateHops={this.updateHops}/>
+                        <div className="modal-button">
+                            <ValidationModal schemaProblems={this.state.schemaProblems}/>
+                        </div>
+                        <div className="modal-button">
+                            <DownloadExport schemaVersion={this.state.selectedSchema}/>
+                        </div>
+                    </div>
                 </div>
+            </div>
         );
     }
 }
diff --git a/graphgraph-fe/src/graph_settings_menu.css b/graphgraph-fe/src/graph_settings_menu.css
index 718dfa0..5ade64e 100644
--- a/graphgraph-fe/src/graph_settings_menu.css
+++ b/graphgraph-fe/src/graph_settings_menu.css
@@ -7,5 +7,6 @@
 }
 
 .navbar-adjust .container .navbar-header {
-    margin-right: 250px;
+    margin-right: 80px;
+    margin-top: 3px;
 }
diff --git a/graphgraph-fe/src/popup_settings.css b/graphgraph-fe/src/popup_settings.css
index 2a548af..c37c750 100644
--- a/graphgraph-fe/src/popup_settings.css
+++ b/graphgraph-fe/src/popup_settings.css
@@ -1,6 +1,8 @@
 .settings-button {
-    margin-top: 18px;
-    margin-left: 15px;
+    margin-top: 20px;
+    margin-left: 25px;
+    margin-right: 5px;
+    margin-bottom: 3px;
 }
 
 .close.link-button {