move visualisation actions to navbar

app/components/architecture-visualisation-cytoscape/component.js

@@ -2,7 +2,6 @@ import Ember from 'ember';
 import cytoscape from 'npm:cytoscape';
 import cycola from 'npm:cytoscape-cola';
 import cytoscapeStyle from './style';
-// import cola from 'npm:webcola';
 import _ from 'npm:lodash';
 import coseBilkent from 'npm:cytoscape-cose-bilkent';
 
@@ -46,7 +45,7 @@ export default Component.extend({
           boxSelectionEnabled: false,
           autounselectify: true,
 
-          style: cytoscapeStyle(this.get('visualisationSettings.theme')),
+          style: cytoscapeStyle(this.get('visualisationSettings.themeStyle')),
 
           elements: _.cloneDeep(this.get('graph')),
 

app/components/visualisation-settings.js

@@ -11,13 +11,15 @@ const { Component, inject } = Ember;
  */
 export default Component.extend({
     visualisationSettings: inject.service(),
+    classNames: ['dropdown'],
+    tagName: 'div',
     actions: {
         selectLayoutAlgorithm(value) {
             this.debug('value', value);
             this.set('visualisationSettings.layoutAlgorithm', value);
         },
         selectTheme(theme) {
-            this.get('visualisationSettings').setThemeByName(theme);
+            this.set('visualisationSettings.theme', theme);
         }
     }
 });

app/services/visualisation-settings.js

 import Ember from 'ember';
-import Themes from '../components/architecture-visualisation-cytoscape/themes';
+import Themes from '../utils/visualisation-themes';
 
-const { Service } = Ember;
+const { Service, computed } = Ember;
 
 /**
  * Stores the settings for visualisations for a user.
@@ -41,8 +41,17 @@ export default Service.extend({ // TODO: load and save to localstorage
      * @property theme
      * @type {String}
      */
-    theme: Themes[Object.keys(Themes)[0]], // first theme // TODO use a "default: true" flag, order is not fixed for browsers
+    theme: 'iObserve',
 
+    /**
+     * Computed property that returns the CSS style object of the current theme.
+     * @property themeStyle
+     * @type {Object | CytoscapeCSS}
+     * @readOnly
+     */
+    themeStyle: computed('theme', function() {
+        return Themes[this.get('theme')];
+    }),
     /**
      * List of available themes.
      *
@@ -50,8 +59,5 @@ export default Service.extend({ // TODO: load and save to localstorage
      * @type {Array|String}
      * @readOnly
      */
-    themes: Object.keys(Themes),
-    setThemeByName(name) {
-        this.set('theme', Themes[name]);
-    }
+    themes: Object.keys(Themes)
 });
\ No newline at end of file

app/styles/_custom_bootstrap.scss

@@ -24,7 +24,7 @@
 
 // Components
 // @import "bootstrap/component-animations";
-// @import "bootstrap/dropdowns";
+@import "bootstrap/dropdowns";
 // @import "bootstrap/button-groups";
 // @import "bootstrap/input-groups";
 @import "bootstrap/navs";
@@ -36,7 +36,7 @@
 // @import "bootstrap/badges";
 // @import "bootstrap/jumbotron";
 // @import "bootstrap/thumbnails";
-@import "bootstrap/alerts";
+// @import "bootstrap/alerts";
 // @import "bootstrap/progress-bars";
 // @import "bootstrap/media";
 // @import "bootstrap/list-group";

app/styles/app.scss

@@ -7,3 +7,7 @@ $light-orange: #ff8c00;
 $navbar-default-color: $light-orange;
 
 @import "custom_bootstrap";
+
+.globalActions > li {
+    margin: 15px 3px; // 15 from $nav-link-padding
+}
\ No newline at end of file

app/styles/components/_architecture.scss

@@ -28,7 +28,3 @@ button.minimizeSidebar {
         display: inline-block;
     }
 }
-
-.renderingSettings {
-    margin-top: 20px;
-}

app/templates/application.hbs

@@ -21,9 +21,9 @@
         {{/link-to}}
       </ul>
 
-      <div class="nav navbar-nav navbar-right globalActions">
+      <ul class="nav navbar-nav navbar-right globalActions">
         {{outlet 'globalActions'}}
-      </div>
+      </ul>
     </div><!--/.nav-collapse -->
   </div>
 </nav>

app/templates/components/visualisation-settings.hbs

-<div class="renderingSettings">
-    <div class="form-group">
-      <label for="layoutAlgorithm">Layout:</label>
-      <select class="form-control" id="layoutAlgorithm" onchange={{action "selectLayoutAlgorithm" value="target.value"}}>
-        {{#each visualisationSettings.layoutAlgorithms as |algorithm|}}
-            <option>{{algorithm}}</option>
+<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <i class="glyphicon glyphicon-cog"></i>
+<span class="caret"></span>
+</button>
+<ul class="dropdown-menu">
+
+    <li class="dropdown-header">Layouts</li>
+    {{#each visualisationSettings.layoutAlgorithms as | layout | }}
+        <li>
+            <a href="javascript:void;" {{action "selectLayoutAlgorithm" layout}}> {{!-- href for pointer cursor --}}
+                {{layout}}
+
+                {{#if (eq visualisationSettings.layoutAlgorithm layout)}}
+                    <i class="glyphicon glyphicon-ok"></i>
+                {{/if}}
+            </a>
+        </li>
     {{/each}}
-      </select>
-    </div>
-    <div class="form-group">
-      <label for="layoutTheme">Theme:</label>
-      <select class="form-control" id="layoutTheme" onchange={{action "selectTheme" value="target.value"}}>
+    <li role="separator" class="divider"></li>
+    <li class="dropdown-header">Themes</li>
     {{#each visualisationSettings.themes as | theme | }}
-            <option>{{theme}}</option>
+        <li>
+            <a href="javascript:void;"  {{action "selectTheme" theme}}>
+                {{theme}}
+
+                {{#if (eq visualisationSettings.theme theme)}}
+                    <i class="glyphicon glyphicon-ok"></i>
+                {{/if}}
+            </a>
+        </li>
     {{/each}}
-      </select>
-    </div>
-</div>
\ No newline at end of file
+</ul>

app/templates/deployments/global-actions.hbs

 
 {{!-- sidebar will be closed since both views do not contain the same elements --}}
+<li>
     {{#if (eq model.mode 'architectures')}}
-    {{#link-to 'deployments.single' model.systemId tagName='button' class='btn btn-default'}}
+        {{#link-to 'deployments.single' model.systemId class='btn btn-default btn-navbar' tagName='button'}}
             Deployments
         {{/link-to}}
     {{else}}
-    {{#link-to 'architectures.single' model.systemId tagName='button' class='btn btn-default'}}
+        {{#link-to 'architectures.single' model.systemId class='btn btn-default btn-navbar' tagName='button'}}
             Architecture
         {{/link-to}}
     {{/if}}
+</li>
 
-<button {{action 'applyQueueUpdates'}} type="button" class="btn {{if changelogQueue.empty 'btn-default' 'btn-warning'}}" disabled={{ changelogQueue.empty }} title="Updates are possible when the deployment changed and new information is ready to get visualized!">
+<li>
+    <button {{action 'applyQueueUpdates'}} class="btn {{if changelogQueue.empty 'btn-default' 'btn-warning'}} btn-navbar" disabled={{ changelogQueue.empty }} title="Updates are possible when the deployment changed and new information is ready to get visualized!">
         <i class="glyphicon glyphicon-refresh"></i> Apply Updates {{#if changelogQueue.available}}({{ changelogQueue.size }}){{/if}}
     </button>
+</li>
 
-{{visualisation-settings}}
+{{visualisation-settings tagName='li'}}
 
 {{outlet}} {{!-- for component nested --}}
\ No newline at end of file

app/components/architecture-visualisation-cytoscape/themes.js → app/utils/visualisation-themes.js

@@ -41,7 +41,7 @@ export default {
         arrowColor : '#002A4A',
         arrowLabelColor: '#FFFEED'
     },
-    'forrest' :{
+    'forest' :{
         nodeGroupTextColor : '#36231B',
         nodeGroupColor : 'white',
         nodeGroupBorderColor : '#60311F',

ember-cli-build.js

@@ -9,7 +9,7 @@ module.exports = function(defaults) {
       enabled: false
     },
     'ember-cli-bootstrap-sassy': {
-        'js': []
+        'js': ['dropdown'] // dropdown used by visualisation-settings
     }
   });