juju-gui

Merge lp:~makyo/juju-gui/charm-panel-border into lp:juju-gui/experimental

  1. charm-panel-border
  2. Merge into trunk
Proposed by Madison Scott-Clary
Status: Merged
Approved by: Brad Crittenden
Approved revision: 237
Merged at revision: 240
Proposed branch: lp:~makyo/juju-gui/charm-panel-border
Merge into: lp:juju-gui/experimental
Diff against target: 82 lines (+20/-4)
1 file modified
lib/views/stylesheet.less (+20/-4)
To merge this branch: bzr merge lp:~makyo/juju-gui/charm-panel-border
Reviewer Review Type Date Requested Status
Brad Crittenden (community) code Approve
Review via email: mp+133963@code.launchpad.net

Description of the change

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/

To post a comment you must log in.
Revision history for this message
Madison Scott-Clary (makyo) wrote :
Download full text (3.5 KiB)

Reviewers: mp+133963_code.launchpad.net,

Message:
Please take a look.

Description:
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://code.launchpad.net/~makyo/juju-gui/charm-panel-border/+merge/133963

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/6812107/

Affected files:
   A [revision details]
   M lib/views/stylesheet.less

Index: [revision details]
=== added file '[revision details]'
--- [revision details] 2012-01-01 00:00:00 +0000
+++ [revision details] 2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision: <email address hidden>
+New revision: <email address hidden>

Index: lib/views/stylesheet.less
=== 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:37:25 +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;...

Read more...

Revision history for this message
Francesco Banconi (frankban) wrote :

Thanks Matthew, the inset border looks good, tests pass.
+1 on landing this branch after fixing box shadows: see below.

https://codereview.appspot.com/6812107/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6812107/diff/1/lib/views/stylesheet.less#newcode126
lib/views/stylesheet.less:126: -moz-box-shadow: inset 1px 0 0 lightgray;
Here you can use the .create-box-shadow mixin. You can find it at the
beginning of the file. It lets you create box shadows using a single
rule and without repetitions.

https://codereview.appspot.com/6812107/diff/1/lib/views/stylesheet.less#newcode801
lib/views/stylesheet.less:801: -webkit-box-shadow: inset 1px 0 0
lightgray;
Same as above.

https://codereview.appspot.com/6812107/diff/1/lib/views/stylesheet.less#newcode846
lib/views/stylesheet.less:846: width: @charm-panel-width -
@charm-panel-padding-left - 1px;
Really nice.

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

Revision history for this message
Brad Crittenden (bac) wrote :

Looks great Matt.

https://codereview.appspot.com/6812107/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6812107/diff/1/lib/views/stylesheet.less#newcode846
lib/views/stylesheet.less:846: width: @charm-panel-width -
@charm-panel-padding-left - 1px;
On 2012/11/13 10:24:27, francesco.banconi wrote:
> Really nice.

LESS is great, isn't it?

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

Revision history for this message
Brad Crittenden (bac) wrote :

a-ok

review: Approve (code)
Revision history for this message
Madison Scott-Clary (makyo) wrote :

Awesome, thanks!

https://codereview.appspot.com/6812107/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6812107/diff/1/lib/views/stylesheet.less#newcode126
lib/views/stylesheet.less:126: -moz-box-shadow: inset 1px 0 0 lightgray;
On 2012/11/13 10:24:27, francesco.banconi wrote:
> Here you can use the .create-box-shadow mixin. You can find it at the
 beginning
> of the file. It lets you create box shadows using a single rule and
 without
> repetitions.

Done.

https://codereview.appspot.com/6812107/diff/1/lib/views/stylesheet.less#newcode801
lib/views/stylesheet.less:801: -webkit-box-shadow: inset 1px 0 0
lightgray;
On 2012/11/13 10:24:27, francesco.banconi wrote:
> Same as above.

Done.

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

Revision history for this message
Madison Scott-Clary (makyo) wrote :

*** Submitted:

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.

R=francesco.banconi, bac
CC=
https://codereview.appspot.com/6812107

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

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== 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 @@
18@charm-panel-border-color: #BEBEBE;18@charm-panel-border-color: #BEBEBE;
19@charm-paneel-border-top-color: #E0DEDE;19@charm-paneel-border-top-color: #E0DEDE;
20@charm-panel-padding-left: 10px;20@charm-panel-padding-left: 10px;
21@charm-panel-width: 292px;
21@navbar-color: #2D2D2D!important;22@navbar-color: #2D2D2D!important;
2223
23body {24body {
@@ -117,11 +118,14 @@
117 margin: 2px 0 0 0;118 margin: 2px 0 0 0;
118 padding: 20px 0 4px;119 padding: 20px 0 4px;
119 &#charm-search-trigger-container {120 &#charm-search-trigger-container {
120 width: 292px;121 width: @charm-panel-width;
121 white-space: nowrap;122 white-space: nowrap;
122 border-left: 1px solid transparent;123 border-left: 1px solid transparent;
123 &.active-border {124 &.active-border {
124 border-left-color: lightgray;125 border-left-color: darkgray;
126 -moz-box-shadow: inset 1px 0 0 lightgray;
127 -webkit-box-shadow: inset 1px 0 0 lightgray;
128 box-shadow: inset 1px 0 0 lightgray;
125 }129 }
126 }130 }
127 .nav-section {131 .nav-section {
@@ -790,9 +794,12 @@
790 top: 70px;794 top: 70px;
791 height: 100px;795 height: 100px;
792 position: absolute;796 position: absolute;
793 width: 292px;797 width: @charm-panel-width;
794 background-color: white;798 background-color: white;
795 border-left: lightgray solid 1px;799 border-left: darkgray solid 1px;
800 -moz-box-shadow: inset 1px 0 0 lightgray;
801 -webkit-box-shadow: inset 1px 0 0 lightgray;
802 box-shadow: inset 1px 0 0 lightgray;
796803
797 .charm-panel-configure .btn {804 .charm-panel-configure .btn {
798 float: right;805 float: right;
@@ -836,6 +843,8 @@
836 background-color: #FFFFFF;843 background-color: #FFFFFF;
837 border-bottom: 1px solid @charm-panel-border-color;844 border-bottom: 1px solid @charm-panel-border-color;
838 height: 52px;845 height: 52px;
846 width: @charm-panel-width - @charm-panel-padding-left - 1px;
847 float: right;
839 padding-left: @charm-panel-padding-left;848 padding-left: @charm-panel-padding-left;
840 .btn {849 .btn {
841 margin-top: 12px;850 margin-top: 12px;
@@ -857,6 +866,8 @@
857 .charm-panel {866 .charm-panel {
858 background-color: @charm-panel-background-color;867 background-color: @charm-panel-background-color;
859 height: 432px;868 height: 432px;
869 width: @charm-panel-width - 1px;
870 float: right;
860 overflow-y: auto;871 overflow-y: auto;
861 overflow-x: hidden;872 overflow-x: hidden;
862 h3 {873 h3 {
@@ -1016,6 +1027,8 @@
1016 overflow-y:auto;1027 overflow-y:auto;
1017 overflow-x:hidden;1028 overflow-x:hidden;
1018 background-color: #EEEEEE;1029 background-color: #EEEEEE;
1030 width: @charm-panel-width - 1px;
1031 float: right;
1019 .series-charms {1032 .series-charms {
1020 h3 {1033 h3 {
1021 font-weight: normal;1034 font-weight: normal;
@@ -1297,8 +1310,11 @@
1297 background-repeat: no-repeat;1310 background-repeat: no-repeat;
1298 background-position: 230px 38px;1311 background-position: 230px 38px;
1299 border-top: 2px solid #dd4814;1312 border-top: 2px solid #dd4814;
1313 border-left: 1px solid #2f2a27 + #333;
1300 background-color: #2F2A27;1314 background-color: #2F2A27;
1301 height: 90px;1315 height: 90px;
1316 width: @charm-panel-width - @charm-panel-padding-left - 1px;
1317 float: right;
1302 padding-left: @charm-panel-padding-left;1318 padding-left: @charm-panel-padding-left;
1303 .title {1319 .title {
1304 font-weight: lighter;1320 font-weight: lighter;

Subscribers

People subscribed via source and target branches