yellow team mailing list archive

[Brad Crittenden <bac@xxxxxxxxxxxxx>]

Brad Crittenden has proposed merging lp:~bac/juju-gui/css-buttons into lp:juju-gui.

Requested reviews:
  Juju GUI Hackers (juju-gui)

For more details, see:
https://code.launchpad.net/~bac/juju-gui/css-buttons/+merge/132365

CSS styling for buttons

* Apply CSS styling to buttons to get them closer to the visual design
  assets.

* Add a top-level rule to specify font-family which is needed to
  override the bootstrap setting rule.

* Drive-by: remove redundant 'font-family' rules.

* Drive-by: fix lint-yuidoc.

https://codereview.appspot.com/6811062/

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

=== modified file 'bin/lint-yuidoc'
--- bin/lint-yuidoc	2012-10-29 11:20:31 +0000
+++ bin/lint-yuidoc	2012-10-31 16:15:26 +0000
@@ -28,7 +28,7 @@
     # then there is none.
     in_comment = False
     for current_line_number in range(line_number-1, boundry, -1):
-        source_line = source[current_line_number] 
+        source_line = source[current_line_number]
         if source_line.strip().startswith('*/'):
             in_comment = True
         elif source_line.strip().startswith('/*'):
@@ -90,6 +90,7 @@
         dirs[:] = remove('assets', dirs)
         # Ignore the template.js file.
         files[:] = remove('templates.js', files)
+        files = filter(lambda x: x.endswith('.js'), files)
 
         with open('undocumented') as f:
             undocumented = [tuple(line.split()) for line in f.readlines()]

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2012-10-31 08:30:13 +0000
+++ lib/views/stylesheet.less	2012-10-31 16:15:26 +0000
@@ -7,7 +7,11 @@
 @charm-panel-configure-title-color: #eee7d5;
 @charm-panel-configure-name-color: #8f8f88;
 @charm-panel-deploy-button-color: #dd4814;
+@charm-panel-deploy-button-bottom-gradient: #e65c19;
+@charm-panel-deploy-button-shadow: #8a2d0c;
 @charm-panel-cancel-button-color: #b8b8b8;
+@charm-panel-cancel-button-bottom-gradient: #a3a39f;
+@charm-panel-cancel-button-shadow: #515050;
 @charm-panel-separator-color: #aeaeae;
 @charm-panel-background-color: #eeeeee;
 
@@ -17,6 +21,10 @@
     font-family: @font-family;
 }
 
+input, button, select, textarea {
+    font-family: @font-family;
+}
+
 i.sprite {
     display: inline-block;
     vertical-align: middle;
@@ -93,7 +101,6 @@
                     margin: 0 10px;
                     padding: 3px 3px 3px 26px;
                     font-style: italic;
-                    font-family: @font-family;
                     font-size: 0.9em;
                     &:focus {
                         background: white;
@@ -371,6 +378,7 @@
     stroke-width: 2px;
     fill: none;
 }
+
 g.service {
     fill: none;
     stroke: none;
@@ -380,12 +388,10 @@
     }
 
     .charm-label {
-        font-family: @font-family;
         font-style: italic;
         fill: #4c4c4c;
     }
     .name {
-        font-family: @font-family;
         fill: #4c4c4c;
     }
 
@@ -394,7 +400,6 @@
         text-anchor: middle;
         dominant-baseline: central;
         fill: rgba(0,0,0,0);
-        font-family: @font-family;
 
         &.show-count {
             fill: rgba(0,0,0,1);}
@@ -406,7 +411,6 @@
         text-anchor: middle;
         dominant_baseline: central;
         fill: #4f4f4f;
-        font-family: @font-family;
         font-size: 1.2em;
     }
 
@@ -449,8 +453,8 @@
 
 g.unit {
     stroke-width: 0; font-weight: bold;
-    font-family: @font-family; font-size: 1.2em; fill: #1626cf;
-
+    font-size: 1.2em;
+    fill: #1626cf;
     .address {
     fill: #ffffff; font-size: 0.8em;}
     .unit-border {
@@ -736,9 +740,11 @@
         float: right;
     }
 
-    .button-colors(@color) {
-        @gradient-start: lighten(@color, 5%);
-        @gradient-end: darken(@color, 5%);
+    .button-colors(@top-color, @bottom-color, @shadow-color, @v-pos) {
+    	//@shadow-color: blue;
+        @blur: 2px;
+        @gradient-start: @top-color;
+	@gradient-end: @bottom-color;
         background-image: -ms-linear-gradient(top, @gradient-start, @gradient-end);
         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@gradient-start), to(@gradient-end));
         background-image: -webkit-linear-gradient(top, @gradient-start, @gradient-end);
@@ -746,32 +752,42 @@
         background-image: -moz-linear-gradient(top, @gradient-start, @gradient-end);
         background-image: linear-gradient(top, @gradient-start, @gradient-end);
         background-repeat: repeat-x;
-        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+	-moz-box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset, 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px @shadow-color inset;
+	-webkit-box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset, 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px @shadow-color inset;
+	box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset, 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px @shadow-color inset;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+	border: none;
     }
+
     .btn.deploy {
         margin-top: 5px;
         margin-left: 5px;
         vertical-align: middle;
         background-position: 0 0;     /* Needed to defeat bootstrap btn:hover 0 -15px*/
-        .button-colors(@charm-panel-deploy-button-color);
-        &, &:hover, &:active, &.active, &.disabled, &[disabled] {
-          background-color: @charm-panel-deploy-button-color;
-        }
+	.button-colors(@charm-panel-deploy-button-color, @charm-panel-deploy-button-bottom-gradient, @charm-panel-deploy-button-shadow, 0px);
+        &:active {
+   	    .button-colors(@charm-panel-deploy-button-color, @charm-panel-deploy-button-color, #8a2d0c, 1px);
+	}
     }
+
     .charm-description btn.deploy {
        float: right;
     }
     .btn.cancel {
+	color: white;
+	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
         margin-top: 5px;
         background-repeat: no-repeat;
         background-color: transparent;
         vertical-align: middle;
         background-position: 0 0;     /* Needed to defeat bootstrap btn:hover 0 -15px*/
         background-image: url(/juju-ui/assets/images/cancel-button.png);
-        .button-colors(@charm-panel-cancel-button-color);
-        &, &:hover, &:active, &.active, &.disabled, &[disabled] {
-          background-color: @charm-panel-cancel-button-color;
-        }
+	.button-colors(@charm-panel-cancel-button-color, @charm-panel-cancel-button-bottom-gradient, @charm-panel-cancel-button-shadow, 0px);
+        &:active {
+  	  .button-colors(@charm-panel-cancel-button-color, @charm-panel-cancel-button-color, @charm-panel-cancel-button-shadow, 1px);
+	}
     }
     .charm-panel-configure-buttons {
       border-bottom: 1px solid @charm-panel-separator-color;