Improve sidebar.

- Add icons
- Prevent scrollbar from being shown

Author: marc92w

app/components/graph/graph.html

@@ -3,53 +3,53 @@
   <div class="row">
 
     <!-- Graph view -->
-
     <div class="col-sm-9 col-md-10 main">
       <div id="graph" node-link-graph margin="10" on-click="onClick(item)">
       </div>
     </div>
 
     <!-- Sidebar for details -->
-
     <div class="col-sm-3 col-md-2 sidebar">
-      <uib-accordion close-others="false">
-
+      <uib-accordion>
         <uib-accordion-group is-open="showSelection">
-
           <uib-accordion-heading>
             <span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span> Selection
           </uib-accordion-heading>
-
           <selection-group></selection-group>
-
         </uib-accordion-group>
+      </uib-accordion>
 
+      <uib-accordion>
         <uib-accordion-group is-open="false">
-
           <uib-accordion-heading>
             <span class="glyphicon glyphicon-filter" aria-hidden="true"></span> Filters
           </uib-accordion-heading>
-
           <filter-group></filter-group>
-
         </uib-accordion-group>
 
-        <uib-accordion-group heading="Graph">
+        <uib-accordion-group>
+          <uib-accordion-heading>
+            <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Graph
+          </uib-accordion-heading>
           <graph-settings-group></graph-settings-group>
         </uib-accordion-group>
 
-        <uib-accordion-group heading="Namespaces">
+        <uib-accordion-group>
+          <uib-accordion-heading>
+            <span class="glyphicon glyphicon-list" aria-hidden="true"></span> Namespaces
+          </uib-accordion-heading>
           <namespace-group></namespace-group>
-        </uib-accordion-group><!-- end of namespace prefix group -->
+        </uib-accordion-group>
+      </uib-accordion>
 
-        <uib-accordion-group heading="Endpoint" is-open="true">
+      <uib-accordion>
+        <uib-accordion-group is-open="true">
+          <uib-accordion-heading>
+            <span class="glyphicon glyphicon-transfer" aria-hidden="true"></span> Endpoint
+          </uib-accordion-heading>
           <endpoint-group></endpoint-group>
         </uib-accordion-group>
-
       </uib-accordion>
-
-      <p class="footer">&copy; 2015 by Marc Weise</p>
-
     </div><!--end of sidebar -->
   </div><!-- end of .row -->
 </div><!-- end of .container-fluid -->

app/components/sidebar/graph-settings-group.html

@@ -10,15 +10,13 @@
     </label>
   </div>
 
-  <p><strong>Distances</strong></p>
-
   <p>
-    <label for="ctEdgeLength">Class to Class: {{ ccEdgeLength }}</label>
+    <label for="ctEdgeLength">Class - Class Distance: {{ ccEdgeLength }}</label>
     <div id="ccEdgeLength" slider class="cdbl-slider" model="ccEdgeLength" min="10" max="100"></div>
   </p>
 
   <p>
-    <label for="ctEdgeLength">Class to Type: {{ ctEdgeLength }}</label>
+    <label for="ctEdgeLength">Class - Type Distance: {{ ctEdgeLength }}</label>
     <div id="ctEdgeLength" slider class="cdbl-slider" model="ctEdgeLength" min="10" max="100"></div>
   </p>
 

app/services/model/properties.srv.js

@@ -169,20 +169,19 @@ module.exports = function ($interval, $log) {
     var nodesToRemove = [];
 
     while (i < self.properties.length) {
-      var currentProp = self.properties[i];
-      if (currentProp.source === classId && currentProp.type === "disjointProperty") {
-        nodesToRemove.push(currentProp.target);
+      var adjacentProp = self.properties[i];
+      if (adjacentProp.source === classId && adjacentProp.type === "disjointProperty") {
+        nodesToRemove.push(adjacentProp.target);
         self.properties.splice(i, 1);
       } else {
         i++;
       }
     }
 
     i = 0;
-
     while (i < self.properties.length) {
-      var currentProp = self.properties[i];
-      if (currentProp.type === "disjointProperty" && nodesToRemove.indexOf(currentProp.target) !== -1) {
+      var otherProp = self.properties[i];
+      if (otherProp.type === "disjointProperty" && nodesToRemove.indexOf(otherProp.target) !== -1) {
         self.properties.splice(i, 1);
       } else {
         i++;

app/styles/main.css

@@ -32,10 +32,14 @@ ul.properties {
 }
 
 div.prop-list {
-  max-height: 300px;
+  max-height: 200px;
   overflow-y: auto;
 }
 
+div.panel-group {
+  margin-bottom: 5px;
+}
+
 .browsehappy {
   margin: 0.2em 0;
   background: #ccc;