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
1=== modified file 'lib/views/stylesheet.less'
2--- lib/views/stylesheet.less 2012-11-09 14:30:56 +0000
3+++ lib/views/stylesheet.less 2012-11-12 17:40:38 +0000
4@@ -18,6 +18,7 @@
5 @charm-panel-border-color: #BEBEBE;
6 @charm-paneel-border-top-color: #E0DEDE;
7 @charm-panel-padding-left: 10px;
8+@charm-panel-width: 292px;
9 @navbar-color: #2D2D2D!important;
10
11 body {
12@@ -117,11 +118,14 @@
13 margin: 2px 0 0 0;
14 padding: 20px 0 4px;
15 &#charm-search-trigger-container {
16- width: 292px;
17+ width: @charm-panel-width;
18 white-space: nowrap;
19 border-left: 1px solid transparent;
20 &.active-border {
21- border-left-color: lightgray;
22+ border-left-color: darkgray;
23+ -moz-box-shadow: inset 1px 0 0 lightgray;
24+ -webkit-box-shadow: inset 1px 0 0 lightgray;
25+ box-shadow: inset 1px 0 0 lightgray;
26 }
27 }
28 .nav-section {
29@@ -790,9 +794,12 @@
30 top: 70px;
31 height: 100px;
32 position: absolute;
33- width: 292px;
34+ width: @charm-panel-width;
35 background-color: white;
36- border-left: lightgray solid 1px;
37+ border-left: darkgray solid 1px;
38+ -moz-box-shadow: inset 1px 0 0 lightgray;
39+ -webkit-box-shadow: inset 1px 0 0 lightgray;
40+ box-shadow: inset 1px 0 0 lightgray;
41
42 .charm-panel-configure .btn {
43 float: right;
44@@ -836,6 +843,8 @@
45 background-color: #FFFFFF;
46 border-bottom: 1px solid @charm-panel-border-color;
47 height: 52px;
48+ width: @charm-panel-width - @charm-panel-padding-left - 1px;
49+ float: right;
50 padding-left: @charm-panel-padding-left;
51 .btn {
52 margin-top: 12px;
53@@ -857,6 +866,8 @@
54 .charm-panel {
55 background-color: @charm-panel-background-color;
56 height: 432px;
57+ width: @charm-panel-width - 1px;
58+ float: right;
59 overflow-y: auto;
60 overflow-x: hidden;
61 h3 {
62@@ -1016,6 +1027,8 @@
63 overflow-y:auto;
64 overflow-x:hidden;
65 background-color: #EEEEEE;
66+ width: @charm-panel-width - 1px;
67+ float: right;
68 .series-charms {
69 h3 {
70 font-weight: normal;
71@@ -1297,8 +1310,11 @@
72 background-repeat: no-repeat;
73 background-position: 230px 38px;
74 border-top: 2px solid #dd4814;
75+ border-left: 1px solid #2f2a27 + #333;
76 background-color: #2F2A27;
77 height: 90px;
78+ width: @charm-panel-width - @charm-panel-padding-left - 1px;
79+ float: right;
80 padding-left: @charm-panel-padding-left;
81 .title {
82 font-weight: lighter;

Subscribers

People subscribed via source and target branches