yellow team mailing list archive

[Francesco Banconi <francesco.banconi@xxxxxxxxxxxxx>]

Francesco Banconi has proposed merging lp:~frankban/juju-gui/bug-1074297-charm-panel-description into lp:juju-gui.

Requested reviews:
  Juju GUI Hackers (juju-gui)
Related bugs:
  Bug #1074297 in juju-ui: "charm panel description should match visual design"
  https://bugs.launchpad.net/juju-gui/+bug/1074297

For more details, see:
https://code.launchpad.net/~frankban/juju-gui/bug-1074297-charm-panel-description/+merge/133097

Charm panel description design.

This branch fixes the charm panel discription view
so that now it matches the visual design here:
https://docs.google.com/a/canonical.com/file/d/0B6l8lFdCRvtqQk93MnZEWDlkU3c/edit
The change includes a `customize-scrollbar` Less mixin: the
Ubuntu-style scrollbar is now present in all the charm
panel views.
This branch does not include the icons (I have made
another card to replace bootstrap icons with customized ones,
and to revert the direction of chevron-[up|down].
The css changes also involve the charm configuration view,
slightly changed here to make it more similar to what can be seen in
https://docs.google.com/a/canonical.com/file/d/0B6l8lFdCRvtqQXRDOUprMHNwTlk/edit.
However, consider that changing the config view is not a goal
of this branch.

https://codereview.appspot.com/6819098/

-- 
https://code.launchpad.net/~frankban/juju-gui/bug-1074297-charm-panel-description/+merge/133097
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~frankban/juju-gui/bug-1074297-charm-panel-description into lp:juju-gui.

=== modified file 'app/templates/charm-description.handlebars'
--- app/templates/charm-description.handlebars	2012-11-01 13:12:28 +0000
+++ app/templates/charm-description.handlebars	2012-11-06 16:40:26 +0000
@@ -1,10 +1,16 @@
 <div>
-  <div class="charm-nav-back"><i class="icon-arrow-left icon-white"></i> Back</div>
+  <div class="charm-nav-back"><i class="icon-chevron-left"></i> Back</div>
 
   <div class="charm-description charm-panel">
-    <button class="btn btn-primary deploy"
-            data-url="{{id}}">Deploy</button>
-    <h3>{{package_name}}</h3>
+    <div id="charm-panel-head">
+      <h3>{{package_name}}</h3>
+      {{id}}
+    </div>
+
+    <div class="charm-panel-configure-buttons">
+      <button class="btn btn-primary deploy" data-url="{{id}}">Deploy</button>
+    </div>
+
     <div class="charm-section">
       <h4><i class="icon-chevron-down"></i> Description</h4>
       <div class="collapsible">
@@ -14,14 +20,17 @@
         <p>{{series}}</p>
         <h5>Description</h5>
         <div>{{description}}</div>
+        {{#if owner}}
         <h5>Owner</h5>
         <p>{{owner}}</p>
+        {{/if}}
         {{#if store_revision}}
         <h5>Store Revision</h5>
         <p>{{store_revision}}</p>
         {{/if}}
       </div>
     </div>
+
     {{#any requires provides}}
     <div class="charm-section">
       <h4><i class="icon-chevron-up"></i> Interfaces</h4>
@@ -45,11 +54,13 @@
       </div>
     </div>
     {{/any}}
+
     {{#if last_change}}
     <div class="charm-section">
-      <h4><i class="icon-chevron-up"></i> Last Change</h4>
+      <h4><i class="icon-chevron-up"></i> Change Log</h4>
       <div class="collapsible">
         {{#with last_change}}
+        <h5>Last Change</h5>
         <div>{{dateformat created "%F"}}</div>
         <div>{{committer}}</div>
         <div class="commitmessage">{{message}}</div>
@@ -57,5 +68,6 @@
       </div>
     </div>
     {{/if}}
+
   </div>
 </div>

=== modified file 'app/templates/charm-pre-configuration.handlebars'
--- app/templates/charm-pre-configuration.handlebars	2012-10-26 10:44:21 +0000
+++ app/templates/charm-pre-configuration.handlebars	2012-11-06 16:40:26 +0000
@@ -40,23 +40,24 @@
       </div>
       {{/with}}
 
+      <div class="config-file-upload control-group">
+        <input class="config-file-upload-widget" type="file">
+        <div>
+          <span class="config-file-upload-overlay">Use configuration file</span>
+          <span class="config-file-name"></span>
+        </div>
+      </div>
+
       {{#if settings}}
       <!-- Service configuration form -->
       <div class="charm-section">
         <h4>Service Settings<i class="icon-chevron-down"></i></h4>
-        <div class="config-file-upload control-group">
-          <input class="config-file-upload-widget" type="file">
-          <div>
-            <span class="config-file-upload-overlay">Use configuration file</span>
-            <span class="config-file-name"></span>
-          </div>
-        </div>
         <div class="charm-settings">
-        <form>
-          <div id="service-config" class="collapsible">
-            {{> service-config}}
-          </div>
-        </form>
+          <form>
+            <div id="service-config" class="collapsible">
+              {{> service-config}}
+            </div>
+          </form>
         </div>
       </div>
       {{/if}}

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2012-11-06 13:38:17 +0000
+++ lib/views/stylesheet.less	2012-11-06 16:40:26 +0000
@@ -772,7 +772,20 @@
     }
 }
 
+.customize-scrollbar {
+    ::-webkit-scrollbar {
+        width: 4px;
+    }
+    ::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 1px 0 3px #989A9C;
+    }
+    ::-webkit-scrollbar-thumb {
+        -webkit-box-shadow: inset 4px 0 3px #D74613;
+    }
+}
+
 #juju-search-charm-panel {
+    .customize-scrollbar;
     display: block;
     z-index: 999;
     padding: 0;
@@ -820,6 +833,7 @@
         }
     }
     .charm-panel-configure-buttons {
+      background-color: #FFFFFF;
       border-bottom: 1px solid @charm-panel-separator-color;
       height: 52px;
       padding-left: 8px;
@@ -832,43 +846,53 @@
         height: 500px;
     }
     .charm-nav-back {
-        background-color: black;
-        text-transform: uppercase;
-        color: white;
-        font-weight: bold;
+        border-top: 1px solid #DEDEDE;
+        border-bottom: 1px solid #C2C2C2;
+        color: @charm-panel-deploy-button-color;
         cursor: pointer;
+        font-size: 14px;
+        padding: 10px 5px;
     }
     .charm-panel {
+        background-color: @charm-panel-background-color;
+        height: 432px;
+        overflow-y: auto;
+        overflow-x: hidden;
         h3 {
-            text-transform: capitalize;
-            color: blue;
-            font-weight: bold;
-            margin-top: 1ex;
-            margin-bottom: 1ex;
+            color: @label-color;
+            font-size: 22px;
+            font-weight: normal;
+            padding: 5px 0px 2px 0px;
         }
         h4 {
-            border-bottom: 1px solid @label-color;
+            padding: 12px 12px;
             cursor: pointer;
-            margin-top: 1ex;
-            margin-bottom: 1ex;
+            border-top: 1px solid #FFFFFF;
+            border-bottom: 1px solid #C2C2C2;
             i {
                 float: right;
             }
         }
         h5 {
-            margin-top: 1ex;
-            &:first-child {
-                margin-top: 0;
-            }
-        }
-        height: 432px;
-        overflow-y: auto;
-        overflow-x: hidden;
+            margin-top: 11px;
+        }
+        #charm-panel-head {
+            border-top: 1px solid #FFFFFF;
+            border-bottom: 2px solid #C2C2C2;
+            padding: 1ex 12px 10px 12px;
+        }
         .collapsible {
+            background-color: #E7E7E7;
+            line-height: 17px;
             overflow: hidden;
+            padding: 0px 12px;
+            :last-child {
+                margin-bottom: 11px;
+            }
         }
         &.charm-description {
-            padding: 1ex 1em;
+            color: #58595B;
+            font-size: 12px;
             .charm-section {
                 .commitmessage {
                     padding: 0.8ex 0 1ex 1em;
@@ -878,14 +902,13 @@
             }
         }
         &.config-variant {
-            padding: 1ex 1em;
-            background-color: @charm-panel-background-color;
             font-size: 14px;
+
             .control-group {
                 width: auto;
                 margin-bottom: 0;
                 margin-top: 1ex;
-                padding-bottom: 0;
+                padding: 0px 12px;
                 clear: both;
             }
             .control-description {

=== modified file 'test/test_charm_panel.js'
--- test/test_charm_panel.js	2012-11-01 13:21:53 +0000
+++ test/test_charm_panel.js	2012-11-06 16:40:26 +0000
@@ -115,7 +115,7 @@
     field.set('value', 'aaa');
     field.simulate('keydown', { keyCode: ENTER });
     node.one('a.charm-detail').simulate('click');
-    node.one('.charm-description > h3').get('text').trim()
+    node.one('.charm-description h3').get('text').trim()
       .should.equal('membase');
   });
 
@@ -210,13 +210,10 @@
     var view = new views.CharmDescriptionView(
         { container: container, app: app, model: charm }).render(),
         html = container.one('.charm-description'),
-        description_div = html.one('.charm-section div'),
-        interface_div = html.one('div.charm-section:nth-of-type(2)'),
-        last_change_div = html.one('div.charm-section:nth-of-type(3)');
+        description_div = html.one('.charm-section div');
     html.one('h3').get('text').trim().should.equal('mysql');
     description_div.getStyle('height').should.not.equal('0px');
-    var _ = expect(interface_div).to.not.exist;
-    _ = expect(last_change_div).to.not.exist;
+    html.all('div.charm-section').size().should.equal(1);
   });
 
   it('can render fuller charm', function() {
@@ -230,9 +227,10 @@
     var view = new views.CharmDescriptionView(
         { container: container, app: app, model: charm }).render(),
         html = container.one('.charm-description'),
-        description_div = html.one('.charm-section div'),
-        interface_div = html.one('div.charm-section:nth-of-type(2) div'),
-        last_change_div = html.one('div.charm-section:nth-of-type(3) div');
+        sections = html.all('.charm-section'),
+        description_div = sections.item(0).one('div'),
+        interface_div = sections.item(1).one('div'),
+        last_change_div = sections.item(2).one('div');
     description_div.get('text').should.contain('A DB');
     interface_div.getStyle('height').should.equal('0px');
     interface_div.get('text').should.contain('munin');
@@ -252,7 +250,7 @@
     var view = new views.CharmDescriptionView(
         { container: container, app: app, model: charm }).render(),
         html = container.one('.charm-description'),
-        section_container = html.one('div.charm-section:nth-of-type(3)');
+        section_container = html.one('div.charm-section:last-child');
     section_container.one('div').getStyle('height').should.equal('0px');
     assert(section_container.one('h4 i').hasClass('icon-chevron-up'));
     section_container.one('h4').simulate('click');