yellow team mailing list archive

[Thiago Veronezi <thiago@xxxxxxxxxxxx>]

Thiago Veronezi has proposed merging lp:~tveronezi/juju-gui/filter-buttons into lp:juju-gui.

Requested reviews:
  Juju GUI Hackers (juju-gui)

For more details, see:
https://code.launchpad.net/~tveronezi/juju-gui/filter-buttons/+merge/130832

Filter buttons should match design

The filter buttons should match the design defined by this document:
https://docs.google.com/a/canonical.com/file/d/0BwQq-CeM0Yiod3lacmNqRm43a2s/edit

The filters should use the buttons only. We will not implement the dropdowm version.

https://codereview.appspot.com/6733060/

-- 
https://code.launchpad.net/~tveronezi/juju-gui/filter-buttons/+merge/130832
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~tveronezi/juju-gui/filter-buttons into lp:juju-gui.

=== added file 'app/assets/images/on_left.png'
Binary files app/assets/images/on_left.png	1970-01-01 00:00:00 +0000 and app/assets/images/on_left.png	2012-10-22 15:14:23 +0000 differ
=== added file 'app/assets/images/on_middle.png'
Binary files app/assets/images/on_middle.png	1970-01-01 00:00:00 +0000 and app/assets/images/on_middle.png	2012-10-22 15:14:23 +0000 differ
=== added file 'app/assets/images/on_right.png'
Binary files app/assets/images/on_right.png	1970-01-01 00:00:00 +0000 and app/assets/images/on_right.png	2012-10-22 15:14:23 +0000 differ
=== added file 'app/assets/images/toggles.png'
Binary files app/assets/images/toggles.png	1970-01-01 00:00:00 +0000 and app/assets/images/toggles.png	2012-10-22 15:14:23 +0000 differ
=== modified file 'app/templates/service.handlebars'
--- app/templates/service.handlebars	2012-10-22 11:57:15 +0000
+++ app/templates/service.handlebars	2012-10-22 15:14:23 +0000
@@ -8,16 +8,25 @@
 <div id="destroy-modal-panel"></div>
 </div>
 <div class="service-view">
-  <div class="juju-service-info-container-bottom-menu">
-    {{> service-footer-destroy-service}}
+<div class="juju-service-info-container-bottom-menu">
+  {{> service-footer-destroy-service}}
     <div class="filter-control">
-      <span>Filter</span>
+      <div class="inline"><span>Filter</span></div>
       {{#states}}
-      <a class="state-btn btn {{#if active}}btn-primary{{/if}}" 
-        data-toggle="modal" href="{{link}}">
-        <span class="state-title">{{title}}</span> ({{count}})</a>
+      <div 
+        class="inline {{position}} {{#if active}}active-{{position}}{{/if}}">
+        <a href="{{link}}">
+          <span class="state-title {{#if active}}active{{/if}}">{{title}}
+          </span>
+        </a>
+      </div>
       {{/states}}
+      <div class="inline">
+        <img class="divider" 
+             src="/juju-ui/assets/images/bottom_bar_big_div.png" />
+      </div>
     </div>
-    {{> service-footer-common-controls}}
-  </div> 
-</div>
+  {{> service-footer-common-controls}}
+</div>
+</div>
+

=== modified file 'app/views/service.js'
--- app/views/service.js	2012-10-22 11:57:15 +0000
+++ app/views/service.js	2012-10-22 15:14:23 +0000
@@ -804,15 +804,26 @@
           var units = app.db.units.get_units_for_service(service),
               state_data = [{
                 title: 'All',
+                position: 'left',
                 link: '.',
                 active: !filter_state,
                 count: this.filterUnits(null, units).length
               }];
 
-          Y.each(['Running', 'Pending', 'Error'], function(title) {
-            var lower = title.toLowerCase();
+          Y.each([{
+                    title: 'Running',
+                    position: 'center'
+                  }, {
+                    title: 'Pending',
+                    position: 'center'
+                  }, {
+                    title: 'Error',
+                    position: 'right'
+                  }], function(filterBtn) {
+            var lower = filterBtn.title.toLowerCase();
             state_data.push({
-              title: title,
+              title: filterBtn.title,
+              position: filterBtn.position,
               active: lower === filter_state,
               count: this.filterUnits(lower, units).length,
               link: '?state=' + lower});

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2012-10-22 11:57:15 +0000
+++ lib/views/stylesheet.less	2012-10-22 15:14:23 +0000
@@ -857,7 +857,85 @@
         height: 50px;
         position: relative;
         color: #2d2d2d!important;
-  
+        text-align: center;
+
+        .filter-control {
+            position: absolute;
+            right: 425px;
+            top: 13px;
+            width: 345px;
+            display: inline-block;
+
+            img {
+                padding-top: 0px;
+                height: 30px;
+            }
+
+            div {
+                padding-top: 3px
+            }
+
+            div:nth-child(6) {
+                padding-top: 0px;
+                padding-left: 5px
+            }
+
+            div:first-child {
+                padding-right: 5px
+            }
+
+            span:first-child {
+                padding-right: 5px;
+            }
+
+            .white {
+                a {color: white !important;}
+            }
+
+            a {
+                color: #2D2D2D!important;
+                &:link, &:visited, &:active, &:hover {
+                   text-decoration: none
+                }
+            }
+
+            @width: 70px;
+            @height: 21px;
+
+            .left {
+                width: @width;
+                height: @height;
+                background:url(/juju-ui/assets/images/toggles.png) 0 0px;
+            }
+
+            .active-left {
+                background:url(/juju-ui/assets/images/on_left.png) 0 0;
+                .white; 
+            }
+    
+            .center {
+                width: @width;
+                height: @height;
+                background:url(/juju-ui/assets/images/toggles.png) -70px 0;
+            }
+
+            .active-center {
+                background:url(/juju-ui/assets/images/on_middle.png) 0 0;
+                .white;
+            }
+
+            .right {
+                width: @width;
+                height: @height;
+                background:url(/juju-ui/assets/images/toggles.png) -210px 0;
+            }
+
+            .active-right {
+                background:url(/juju-ui/assets/images/on_right.png) 0 0;
+                .white;
+            }
+        }
+
         .destroy-control {
             position: absolute;
             top: 1px;
@@ -873,16 +951,6 @@
         }
     }
 
-    .filter-control {
-        position: absolute;
-        left: 120px;
-        top: 10px;
-      
-        span:first-child {
-            padding-right: 5px;
-        }
-    }
-
     .service-header-partial {
       .name {
           padding-top: 38px;

=== modified file 'test/test_service_view.js'
--- test/test_service_view.js	2012-10-12 18:27:36 +0000
+++ test/test_service_view.js	2012-10-22 15:14:23 +0000
@@ -408,10 +408,10 @@
           { container: container, model: service, app: app,
             querystring: {}}).render(),
           active_navtabs = [];
-      container.all('.state-btn').each(
+      container.all('.state-title').each(
           function(n) {
-            active_navtabs.push([n.one('.state-title').get('text').trim(),
-                                 n.hasClass('btn-primary')]);
+            active_navtabs.push([n.get('text').trim(),
+                                 n.hasClass('active')]);
           });
       active_navtabs.should.eql(
           [['All', true],
@@ -426,10 +426,10 @@
           { container: container, model: service, app: app,
             querystring: {state: 'running'}}).render(),
           active_navtabs = [];
-      container.all('.state-btn').each(
+      container.all('.state-title').each(
           function(n) {
-            active_navtabs.push([n.one('.state-title').get('text').trim(),
-                                 n.hasClass('btn-primary')]);
+            active_navtabs.push([n.get('text').trim(),
+                                 n.hasClass('active')]);
           });
       active_navtabs.should.eql(
           [['All', false],
@@ -459,10 +459,10 @@
           { container: container, model: service, app: app,
             querystring: {state: 'pending'}}).render(),
           active_navtabs = [];
-      container.all('.state-btn').each(
+      container.all('.state-title').each(
           function(n) {
-            active_navtabs.push([n.one('.state-title').get('text').trim(),
-                                 n.hasClass('btn-primary')]);
+            active_navtabs.push([n.get('text').trim(),
+                                 n.hasClass('active')]);
           });
       active_navtabs.should.eql(
           [['All', false],
@@ -490,10 +490,10 @@
           { container: container, model: service, app: app,
             querystring: {state: 'error'}}).render(),
           active_navtabs = [];
-      container.all('.state-btn').each(
+      container.all('.state-title').each(
           function(n) {
-            active_navtabs.push([n.one('.state-title').get('text').trim(),
-                                 n.hasClass('btn-primary')]);
+            active_navtabs.push([n.get('text').trim(),
+                                 n.hasClass('active')]);
           });
       active_navtabs.should.eql(
           [['All', false],