Merge pull request #607 from hatched/added-services-widget

Created added services view button

In order to switch to the added services view from the charmbrowser you need a button. This is such a button.

app/modules-debug.js

@@ -319,6 +319,10 @@ var GlobalConfig = {
           fullpath: '/juju-ui/views/ghost-deployer-extension.js'
         },
 
+        'added-services-button': {
+          fullpath: '/juju-ui/subapps/browser/views/added-services-button.js'
+        },
+
         'juju-views': {
           use: [
             'handlebars',

app/subapps/browser/views/added-services-button.js

@@ -0,0 +1,151 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+/*
+  Added Services button view and extension.
+*/
+YUI.add('added-services-button', function(Y) {
+
+  var views = Y.namespace('juju.views'),
+      templates = views.Templates;
+
+  /**
+    Adds the added services button render method.
+
+    @method AddedServicesButtonExtension
+  */
+  function AddedServicesButtonExtension() {}
+
+  AddedServicesButtonExtension.prototype = {
+    /**
+      Renders the added services button to the element in the parents container
+      with the class 'added-services-button '.'
+
+      @method _renderAddedServicesButton
+    */
+    _renderAddedServicesButton: function(serviceCount, closed) {
+      if (!this._addedServicesButton) {
+        this._addedServicesButton = new views.AddedServicesButton();
+        this._addedServicesButton.addTarget(this);
+      }
+      this._addedServicesButton.setAttrs({
+        serviceCount: serviceCount || 0,
+        closed: closed || false
+      });
+      this.get('container').one('.added-services-button').setHTML(
+          this._addedServicesButton.render().get('container'));
+    }
+  };
+
+  views.AddedServicesButtonExtension = AddedServicesButtonExtension;
+
+  /**
+    Provides the added services switcher button.
+
+    @class views.AddedServicesButton
+    @extends {Y.View}
+  */
+  var AddedServicesButton = Y.Base.create('added-services-button', Y.View, [], {
+
+    template: templates['added-services-button'],
+
+    /**
+      Sets up the added services button.
+
+      @method initializer
+    */
+    initializer: function() {
+      this._clickEvent = this.get('container')
+                             .on('click', this._clickHandler, this);
+    },
+
+    /**
+      Click event handler for the container. Fires a 'toggleAddedServices' event
+      with a payload about whether it should show or hide the Added Services.
+
+      @method _clickHandler
+      @param {Object} e The click event facade.
+    */
+    _clickHandler: function(e) {
+      e.preventDefault();
+      this.fire('changeState', {
+        sectionA: this.get('closed') ? 'services' : 'charmbrowser'
+      });
+    },
+
+    /**
+      Renders the Added Services Button to the views container. Render is
+      idempotent.
+
+      @method render
+      @return {Object} reference to the view.
+    */
+    render: function() {
+      this.get('container').setHTML(this.template({
+        count: this.get('serviceCount'),
+        closed: this.get('closed')
+      }));
+      return this;
+    },
+
+    /**
+      Properly tears down the added services button.
+
+      @method destructor
+    */
+    destructor: function() {
+      this._clickEvent.detach();
+    }
+
+  }, {
+    ATTRS: {
+      /**
+        The number of services the user has in their environment.
+
+        @attribute serviceCount
+        @type {Integer}
+        @default 0
+      */
+      serviceCount: {
+        value: 0
+      },
+      /**
+        Used to indicate weather or not the added services view is shown or not.
+
+        @attribute closed
+        @type {Boolean}
+        @default false
+      */
+      closed: {
+        value: false
+      }
+    }
+  });
+
+  views.AddedServicesButton = AddedServicesButton;
+
+}, '', {
+  requires: [
+    'base-build',
+    'event',
+    'juju-templates',
+    'view'
+  ]
+});

app/subapps/browser/views/charmbrowser.js

@@ -35,7 +35,8 @@ YUI.add('juju-charmbrowser', function(Y) {
     views.utils.apiFailingView,
     Y.Event.EventTracker,
     widgets.browser.IndicatorManager,
-    views.SearchWidgetMgmtExtension
+    views.SearchWidgetMgmtExtension,
+    views.AddedServicesButtonExtension
   ], {
 
     events: {
@@ -50,8 +51,7 @@ YUI.add('juju-charmbrowser', function(Y) {
       'new': 2
     },
 
-    // XXX This template will be moved to an external file soon.
-    template: '<div class="search-widget"></div><div class="charm-list"></div>',
+    template: templates.charmbrowser,
     curatedTemplate: templates.editorial,
     searchResultTemplate: templates.search,
 
@@ -367,10 +367,14 @@ YUI.add('juju-charmbrowser', function(Y) {
       var container = this.get('container'),
           renderType = this.get('renderType');
       this._cleanUp(); // Clear out any existing tokens.
-      container.setHTML(this.template); // XXX
+      container.setHTML(this.template());
       container.appendTo(this.get('parentContainer'));
       // Provided by 'search-widget-mgmt-extension'.
       this._renderSearchWidget();
+      if (window.flags && window.flags.as) {
+        // Provided by 'added-services-button.js'.
+        this._renderAddedServicesButton(this.get('db').services.size(), true);
+      }
 
       this.showIndicator(container.one('.charm-list'));
 
@@ -462,13 +466,14 @@ YUI.add('juju-charmbrowser', function(Y) {
 
 }, '', {
   requires: [
+    'added-services-button',
     'browser-token-container',
     'browser-overlay-indicator',
-    'search-widget-mgmt-extension',
     'event-tracker',
-    'juju-view-utils',
-    'view',
     'juju-models',
-    'querystring'
+    'juju-view-utils',
+    'querystring',
+    'search-widget-mgmt-extension',
+    'view'
   ]
 });

app/templates/added-services-button.handlebars

@@ -0,0 +1,4 @@
+Added Services ({{count}})
+<span class="action-indicator">
+  {{#if closed}}>{{else}}x{{/if}}
+</span>

app/templates/charmbrowser.handlebars

@@ -0,0 +1,3 @@
+<div class="search-widget"></div>
+<div class="added-services-button"></div>
+<div class="charm-list"></div>

lib/views/browser/added-services-button.less

@@ -0,0 +1,17 @@
+.added-services-button {
+  position: absolute;
+  top: 81px;
+  line-height: 58px;
+  padding-left: 20px;
+  width: 270px;
+  cursor: pointer;
+
+  .action-indicator {
+    position: absolute;
+    right: 20px;
+  }
+}
+
+.with-home .added-services-button {
+  top: 145px
+}

lib/views/browser/main.less

@@ -129,6 +129,24 @@
     animation: sidebar-details-slide-in 0.5s;
   }
 }
+.flag-as {
+  #subapp-browser #bws-sidebar .bws-content {
+    .with-home .charm-list {
+      top: 198px;
+    }
+    .charm-list {
+      top: 137px;
+    }
+    .sticky {
+      top: 145px + @navbar-height;
+    }
+    #bws-search {
+      .sticky {
+        top: 206px + @navbar-height;
+      }
+    }
+  }
+}
 #subapp-browser.no-search {
   #bws-sidebar {
     .bws-content {

lib/views/stylesheet.less

@@ -978,6 +978,7 @@ g.unit {
 @import "browser/onboarding.less";
 @import "browser/editorial.less";
 @import "browser/search.less";
+@import "browser/added-services-button.less";
 
 /** Cookies **/
 @import "cookies.less";

test/index.html

@@ -75,6 +75,7 @@
 
   <!-- Tests (Alphabetical) -->
 
+  <script src="test_added_services_button.js"></script>
   <script src="test_app.js"></script>
   <script src="test_app_hotkeys.js"></script>
   <script src="test_application_notifications.js"></script>