yellow team mailing list archive

[Matthew Scott <matthew.scott@xxxxxxxxxxxxx>]

Matthew Scott has proposed merging lp:~makyo/juju-gui/charm-panel-border into lp:juju-gui.

Requested reviews:
  Juju GUI Hackers (juju-gui)

For more details, see:
https://code.launchpad.net/~makyo/juju-gui/charm-panel-border/+merge/133963

Charm panel border to 2px (bug #1077006)

Charm panel's left border should match the UX design and be 2px wide with an inset shadow look.

https://codereview.appspot.com/6812107/

-- 
https://code.launchpad.net/~makyo/juju-gui/charm-panel-border/+merge/133963
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~makyo/juju-gui/charm-panel-border into lp:juju-gui.

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2012-11-09 14:30:56 +0000
+++ lib/views/stylesheet.less	2012-11-12 17:40:38 +0000
@@ -18,6 +18,7 @@
 @charm-panel-border-color: #BEBEBE;
 @charm-paneel-border-top-color: #E0DEDE;
 @charm-panel-padding-left: 10px;
+@charm-panel-width: 292px;
 @navbar-color: #2D2D2D!important;
 
 body {
@@ -117,11 +118,14 @@
             margin: 2px 0 0 0;
             padding: 20px 0 4px;
             &#charm-search-trigger-container {
-                width: 292px;
+                width: @charm-panel-width;
                 white-space: nowrap;
                 border-left: 1px solid transparent;
                 &.active-border {
-                    border-left-color: lightgray;
+                    border-left-color: darkgray;
+                    -moz-box-shadow: inset 1px 0 0 lightgray;
+                    -webkit-box-shadow: inset 1px 0 0 lightgray;
+                    box-shadow: inset 1px 0 0 lightgray;
                 }
             }
             .nav-section {
@@ -790,9 +794,12 @@
     top: 70px;
     height: 100px;
     position: absolute;
-    width: 292px;
+    width: @charm-panel-width;
     background-color: white;
-    border-left: lightgray solid 1px;
+    border-left: darkgray solid 1px;
+    -moz-box-shadow: inset 1px 0 0 lightgray;
+    -webkit-box-shadow: inset 1px 0 0 lightgray;
+    box-shadow: inset 1px 0 0 lightgray;
 
     .charm-panel-configure .btn {
         float: right;
@@ -836,6 +843,8 @@
       background-color: #FFFFFF;
       border-bottom: 1px solid @charm-panel-border-color;
       height: 52px;
+      width: @charm-panel-width - @charm-panel-padding-left - 1px;
+      float: right;
       padding-left: @charm-panel-padding-left;
       .btn {
           margin-top: 12px;
@@ -857,6 +866,8 @@
     .charm-panel {
         background-color: @charm-panel-background-color;
         height: 432px;
+        width: @charm-panel-width - 1px;
+        float: right;
         overflow-y: auto;
         overflow-x: hidden;
         h3 {
@@ -1016,6 +1027,8 @@
         overflow-y:auto;
         overflow-x:hidden;
         background-color: #EEEEEE;
+        width: @charm-panel-width - 1px;
+        float: right;
         .series-charms {
             h3 {
                 font-weight: normal;
@@ -1297,8 +1310,11 @@
   background-repeat: no-repeat;
   background-position: 230px 38px;
   border-top: 2px solid #dd4814;
+  border-left: 1px solid #2f2a27 + #333;
   background-color: #2F2A27;
   height: 90px;
+  width: @charm-panel-width - @charm-panel-padding-left - 1px;
+  float: right;
   padding-left: @charm-panel-padding-left;
   .title {
     font-weight: lighter;