Merge lp:~frankban/juju-gui/bug-1074297-charm-panel-description into lp:juju-gui/experimental
- bug-1074297-charm-panel-description
- Merge into trunk
Status: | Merged |
---|---|
Merged at revision: | 228 |
Proposed branch: | lp:~frankban/juju-gui/bug-1074297-charm-panel-description |
Merge into: | lp:juju-gui/experimental |
Diff against target: |
323 lines (+95/-55) 4 files modified
app/templates/charm-description.handlebars (+19/-10) app/templates/charm-pre-configuration.handlebars (+5/-5) lib/views/stylesheet.less (+61/-27) test/test_charm_panel.js (+10/-13) |
To merge this branch: | bzr merge lp:~frankban/juju-gui/bug-1074297-charm-panel-description |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Juju GUI Hackers | Pending | ||
Review via email: mp+133097@code.launchpad.net |
Commit message
Description of the change
Charm panel description design.
Francesco Banconi (frankban) wrote : | # |
Brad Crittenden (bac) wrote : | # |
Nice branch Francesco. I've made a few comments but nothing serious.
I do think the configuration file stuff needs to be fixed or possibly
deferred to another branch.
https:/
File app/templates/
https:/
app/templates/
class="
Why not use the new asset in this branch?
https:/
File app/templates/
https:/
app/templates/
When selecting a configuration file, the name now overlaps with other
elements. This work probably should be a separate branch.
https:/
File lib/views/
https:/
lib/views/
Where did these colors come from? They don't seem to match the ones in
the assets provided (charm_
etc). They do *look* really good, though.
https:/
lib/views/
It would be nice to abstract these re-used colors, if possible in a
readable manner. I cannot believe we have so many different shades of
gray in this stylesheet, but that's what has been specified.
https:/
File test/test_
https:/
test/test_
description_
Nice simplification.
- 230. By Francesco Banconi
-
Abstract the charm panel border column.
Francesco Banconi (frankban) wrote : | # |
Please take a look.
https:/
File app/templates/
https:/
app/templates/
class="
On 2012/11/06 20:42:44, bac wrote:
> Why not use the new asset in this branch?
We discussed this with Gary and decided to create another card to
replace bootsrap icons with the new assets.
See https:/
https:/
File app/templates/
https:/
app/templates/
On 2012/11/06 20:42:44, bac wrote:
> When selecting a configuration file, the name now overlaps with other
elements.
> This work probably should be a separate branch.
Agreed.
https:/
File lib/views/
https:/
lib/views/
On 2012/11/06 20:42:44, bac wrote:
> Where did these colors come from? They don't seem to match the ones
in the
> assets provided (charm_
etc). They do
> *look* really good, though.
IIRC, I used the color picker to obtain these colors from the wireframe.
https:/
lib/views/
On 2012/11/06 20:42:44, bac wrote:
> It would be nice to abstract these re-used colors, if possible in a
readable
> manner. I cannot believe we have so many different shades of gray in
this
> stylesheet, but that's what has been specified.
Done. The border color is now a variable: @charm-
Nice catch on this repetition, thanks.
Francesco Banconi (frankban) wrote : | # |
Thanks for the review Brad.
We have a card for the charm config panel, and, since it is possible to
reuse some of this work, I will take care of that task once this branch
is landed.
Gary Poster (gary) wrote : | # |
Hey Francesco. This looks very good. Thank you.
I am chatty in the line-by-line comments but I only ask for one or two
things, and you may ignore them if you disagree.
You will almost certainly want to merge trunk by hand before you land
this, since (thanks to your review) I have landed the "related charms"
addition to the description pane, and you'll need to make sure that it
has necessary changes to look good with your improvements.
Thanks again,
Gary
https:/
File app/templates/
https:/
app/templates/
class="
(As we discussed, we have a separate card for converting these to the
desired assets.)
https:/
app/templates/
class="
yay, we actually reused a class name in the charm panel! will wonders
never cease? :-) thank you for being thoughtful with this
https:/
app/templates/
I think I have a similar block that instead draws "[charmers]" for the
owner name. I think I prefer your solution. I don't think we have a
specification for this. If we do, go with that; otherwise, make your
own choice, and I suggest sticking with what you have here.
https:/
app/templates/
class="
I had intentionally diverged from the "Change Log" text because I
thought a single change was not a log. This is what was specified
though, you are right. +1 on this change.
https:/
app/templates/
Oh, I see. That's fine.
https:/
File app/templates/
https:/
app/templates/
class="
Moving this into the service settings was a conscious decision by the
devs who did it, I think, even though the visual design had it here.
The configuration file replaces the configuration form, and IIRC makes
it hide.
In this particular case, I suggest moving it back where it was before,
in the "Service Settings." OTOH, if you disagree for any reason, you
have the visual design on your side, so I'm happy for this change to win
in that case. :-)
It also doesn't look quite right--it needs some left padding--but I'm
figuring you want to hold off on that change for a...
- 231. By Francesco Banconi
-
Merged source and resolved conflicts.
- 232. By Francesco Banconi
-
Restored previous position of file upload control in the charm config panel.
Francesco Banconi (frankban) wrote : | # |
Thanks for the review Gary.
Already merged trunk and resolved some conflicts encountered.
Now I will add fixes per UX review and land this branch.
https:/
File app/templates/
https:/
app/templates/
class="
On 2012/11/07 13:58:59, gary.poster wrote:
> (As we discussed, we have a separate card for converting these to the
desired
> assets.)
Cool.
https:/
app/templates/
class="
On 2012/11/07 13:58:59, gary.poster wrote:
> yay, we actually reused a class name in the charm panel! will wonders
never
> cease? :-) thank you for being thoughtful with this
:-) I have to fix other things per UX review, however this seems to be
fine. \o/
https:/
app/templates/
On 2012/11/07 13:58:59, gary.poster wrote:
> I think I have a similar block that instead draws "[charmers]" for
the owner
> name. I think I prefer your solution. I don't think we have a
specification
> for this. If we do, go with that; otherwise, make your own choice,
and I
> suggest sticking with what you have here.
Done.
https:/
app/templates/
class="
On 2012/11/07 13:58:59, gary.poster wrote:
> I had intentionally diverged from the "Change Log" text because I
thought a
> single change was not a log. This is what was specified though, you
are right.
> +1 on this change.
Thanks, and I agree with you that one change is not a log.
https:/
File app/templates/
https:/
app/templates/
class="
On 2012/11/07 13:58:59, gary.poster wrote:
> Moving this into the service settings was a conscious decision by the
devs who
> did it, I think, even though the visual design had it here. The
configuration
> file replaces the configuration form, and IIRC makes it hide.
> In this particular case, I suggest moving it back where it was before,
in the
> "Service Settings." OTOH, if you disagree for any reason, you have
the visual
> design on your side, so I'm happy for this change to win in that case.
:-)
> It also doesn't look quite right--it needs some left padding--but I'm
figuring
> you want to hold off on that change for another branch.
Restored the previous position, I missed the "config file hides the
form" behavior. This...
- 233. By Francesco Banconi
-
Fixes per UX review
Francesco Banconi (frankban) wrote : | # |
*** Submitted:
Charm panel description design.
R=bac, gary.poster
CC=
https:/
Preview Diff
1 | === modified file 'app/templates/charm-description.handlebars' | |||
2 | --- app/templates/charm-description.handlebars 2012-11-05 21:51:27 +0000 | |||
3 | +++ app/templates/charm-description.handlebars 2012-11-07 18:27:21 +0000 | |||
4 | @@ -1,12 +1,18 @@ | |||
5 | 1 | <div> | 1 | <div> |
7 | 2 | <div class="charm-nav-back"><i class="icon-arrow-left icon-white"></i> Back</div> | 2 | <div class="charm-nav-back"><i class="icon-chevron-left"></i> Back</div> |
8 | 3 | 3 | ||
9 | 4 | <div class="charm-description charm-panel"> | 4 | <div class="charm-description charm-panel"> |
13 | 5 | <button class="btn btn-primary deploy" | 5 | <div id="charm-panel-head"> |
14 | 6 | data-url="{{id}}">Deploy</button> | 6 | <h3>{{package_name}}</h3> |
15 | 7 | <h3>{{package_name}}</h3> | 7 | {{id}} |
16 | 8 | </div> | ||
17 | 9 | |||
18 | 10 | <div class="charm-panel-configure-buttons"> | ||
19 | 11 | <button class="btn btn-primary deploy" data-url="{{id}}">Deploy</button> | ||
20 | 12 | </div> | ||
21 | 13 | |||
22 | 8 | <div class="charm-section"> | 14 | <div class="charm-section"> |
24 | 9 | <h4><i class="icon-chevron-down"></i> Description</h4> | 15 | <h4 class="first"><i class="icon-chevron-down"></i> Description</h4> |
25 | 10 | <div class="collapsible"> | 16 | <div class="collapsible"> |
26 | 11 | <h5>Summary</h5> | 17 | <h5>Summary</h5> |
27 | 12 | <p>{{summary}}</p> | 18 | <p>{{summary}}</p> |
28 | @@ -14,11 +20,9 @@ | |||
29 | 14 | <p>{{series}}</p> | 20 | <p>{{series}}</p> |
30 | 15 | <h5>Description</h5> | 21 | <h5>Description</h5> |
31 | 16 | <div>{{description}}</div> | 22 | <div>{{description}}</div> |
32 | 23 | {{#if owner}} | ||
33 | 17 | <h5>Owner</h5> | 24 | <h5>Owner</h5> |
34 | 18 | {{#if owner}} | ||
35 | 19 | <p>{{owner}}</p> | 25 | <p>{{owner}}</p> |
36 | 20 | {{else}} | ||
37 | 21 | <p>[Official charm]</p> | ||
38 | 22 | {{/if}} | 26 | {{/if}} |
39 | 23 | {{#if store_revision}} | 27 | {{#if store_revision}} |
40 | 24 | <h5>Store Revision</h5> | 28 | <h5>Store Revision</h5> |
41 | @@ -26,6 +30,7 @@ | |||
42 | 26 | {{/if}} | 30 | {{/if}} |
43 | 27 | </div> | 31 | </div> |
44 | 28 | </div> | 32 | </div> |
45 | 33 | |||
46 | 29 | {{#any requires provides}} | 34 | {{#any requires provides}} |
47 | 30 | <div class="charm-section"> | 35 | <div class="charm-section"> |
48 | 31 | <h4><i class="icon-chevron-up"></i> Interfaces</h4> | 36 | <h4><i class="icon-chevron-up"></i> Interfaces</h4> |
49 | @@ -49,11 +54,13 @@ | |||
50 | 49 | </div> | 54 | </div> |
51 | 50 | </div> | 55 | </div> |
52 | 51 | {{/any}} | 56 | {{/any}} |
53 | 57 | |||
54 | 52 | {{#if last_change}} | 58 | {{#if last_change}} |
55 | 53 | <div class="charm-section"> | 59 | <div class="charm-section"> |
57 | 54 | <h4><i class="icon-chevron-up"></i> Last Change</h4> | 60 | <h4><i class="icon-chevron-up"></i> Change Log</h4> |
58 | 55 | <div class="collapsible"> | 61 | <div class="collapsible"> |
59 | 56 | {{#with last_change}} | 62 | {{#with last_change}} |
60 | 63 | <h5>Last Change</h5> | ||
61 | 57 | <div>{{dateformat created "%F"}}</div> | 64 | <div>{{dateformat created "%F"}}</div> |
62 | 58 | <div>{{committer}}</div> | 65 | <div>{{committer}}</div> |
63 | 59 | <div class="commitmessage">{{message}}</div> | 66 | <div class="commitmessage">{{message}}</div> |
64 | @@ -61,13 +68,15 @@ | |||
65 | 61 | </div> | 68 | </div> |
66 | 62 | </div> | 69 | </div> |
67 | 63 | {{/if}} | 70 | {{/if}} |
68 | 71 | |||
69 | 64 | {{#any requires provides}} | 72 | {{#any requires provides}} |
70 | 65 | <div class="charm-section"> | 73 | <div class="charm-section"> |
72 | 66 | <h4><i class="icon-chevron-up"></i>Related Charms</h4> | 74 | <h4><i class="icon-chevron-up"></i> Related Charms</h4> |
73 | 67 | <div class="collapsible" id="related-charms"> | 75 | <div class="collapsible" id="related-charms"> |
74 | 68 | Loading... | 76 | Loading... |
75 | 69 | </div> | 77 | </div> |
76 | 70 | </div> | 78 | </div> |
77 | 71 | {{/any}} | 79 | {{/any}} |
78 | 80 | |||
79 | 72 | </div> | 81 | </div> |
80 | 73 | </div> | 82 | </div> |
81 | 74 | 83 | ||
82 | === modified file 'app/templates/charm-pre-configuration.handlebars' | |||
83 | --- app/templates/charm-pre-configuration.handlebars 2012-10-26 10:44:21 +0000 | |||
84 | +++ app/templates/charm-pre-configuration.handlebars 2012-11-07 18:27:21 +0000 | |||
85 | @@ -52,11 +52,11 @@ | |||
86 | 52 | </div> | 52 | </div> |
87 | 53 | </div> | 53 | </div> |
88 | 54 | <div class="charm-settings"> | 54 | <div class="charm-settings"> |
94 | 55 | <form> | 55 | <form> |
95 | 56 | <div id="service-config" class="collapsible"> | 56 | <div id="service-config" class="collapsible"> |
96 | 57 | {{> service-config}} | 57 | {{> service-config}} |
97 | 58 | </div> | 58 | </div> |
98 | 59 | </form> | 59 | </form> |
99 | 60 | </div> | 60 | </div> |
100 | 61 | </div> | 61 | </div> |
101 | 62 | {{/if}} | 62 | {{/if}} |
102 | 63 | 63 | ||
103 | === modified file 'lib/views/stylesheet.less' | |||
104 | --- lib/views/stylesheet.less 2012-11-07 13:18:31 +0000 | |||
105 | +++ lib/views/stylesheet.less 2012-11-07 18:27:21 +0000 | |||
106 | @@ -1,5 +1,6 @@ | |||
107 | 1 | /* Processed with LESS from lib/views/stylesheet.less */ | 1 | /* Processed with LESS from lib/views/stylesheet.less */ |
108 | 2 | @font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif; | 2 | @font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif; |
109 | 3 | @font-family-medium: 'Ubuntu Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; | ||
110 | 3 | 4 | ||
111 | 4 | /* Define common colors. */ | 5 | /* Define common colors. */ |
112 | 5 | @label-color: #292929; | 6 | @label-color: #292929; |
113 | @@ -12,8 +13,8 @@ | |||
114 | 12 | @charm-panel-cancel-button-color: #b8b8b8; | 13 | @charm-panel-cancel-button-color: #b8b8b8; |
115 | 13 | @charm-panel-cancel-button-bottom-gradient: #a3a39f; | 14 | @charm-panel-cancel-button-bottom-gradient: #a3a39f; |
116 | 14 | @charm-panel-cancel-button-shadow: #515050; | 15 | @charm-panel-cancel-button-shadow: #515050; |
117 | 15 | @charm-panel-separator-color: #aeaeae; | ||
118 | 16 | @charm-panel-background-color: #eeeeee; | 16 | @charm-panel-background-color: #eeeeee; |
119 | 17 | @charm-panel-border-color: #BEBEBE; | ||
120 | 17 | @navbar-color: #2D2D2D!important; | 18 | @navbar-color: #2D2D2D!important; |
121 | 18 | 19 | ||
122 | 19 | body { | 20 | body { |
123 | @@ -127,9 +128,10 @@ | |||
124 | 127 | margin: 0 5px; | 128 | margin: 0 5px; |
125 | 128 | } | 129 | } |
126 | 129 | input { | 130 | input { |
127 | 131 | height: 23px; | ||
128 | 130 | width: 128px; | 132 | width: 128px; |
129 | 131 | background: url(/juju-ui/assets/images/searchbox_icon.png) | 133 | background: url(/juju-ui/assets/images/searchbox_icon.png) |
131 | 132 | no-repeat 2px 1px whiteSmoke; | 134 | no-repeat 4px 4px whiteSmoke; |
132 | 133 | margin: 0 10px; | 135 | margin: 0 10px; |
133 | 134 | padding: 3px 3px 3px 26px; | 136 | padding: 3px 3px 3px 26px; |
134 | 135 | font-style: italic; | 137 | font-style: italic; |
135 | @@ -772,7 +774,20 @@ | |||
136 | 772 | } | 774 | } |
137 | 773 | } | 775 | } |
138 | 774 | 776 | ||
139 | 777 | .customize-scrollbar { | ||
140 | 778 | ::-webkit-scrollbar { | ||
141 | 779 | width: 4px; | ||
142 | 780 | } | ||
143 | 781 | ::-webkit-scrollbar-track { | ||
144 | 782 | -webkit-box-shadow: inset 1px 0 3px #989A9C; | ||
145 | 783 | } | ||
146 | 784 | ::-webkit-scrollbar-thumb { | ||
147 | 785 | -webkit-box-shadow: inset 4px 0 3px #D74613; | ||
148 | 786 | } | ||
149 | 787 | } | ||
150 | 788 | |||
151 | 775 | #juju-search-charm-panel { | 789 | #juju-search-charm-panel { |
152 | 790 | .customize-scrollbar; | ||
153 | 776 | display: block; | 791 | display: block; |
154 | 777 | z-index: 999; | 792 | z-index: 999; |
155 | 778 | padding: 0; | 793 | padding: 0; |
156 | @@ -820,7 +835,8 @@ | |||
157 | 820 | } | 835 | } |
158 | 821 | } | 836 | } |
159 | 822 | .charm-panel-configure-buttons { | 837 | .charm-panel-configure-buttons { |
161 | 823 | border-bottom: 1px solid @charm-panel-separator-color; | 838 | background-color: #FFFFFF; |
162 | 839 | border-bottom: 1px solid @charm-panel-border-color; | ||
163 | 824 | height: 52px; | 840 | height: 52px; |
164 | 825 | padding-left: 8px; | 841 | padding-left: 8px; |
165 | 826 | .btn { | 842 | .btn { |
166 | @@ -832,43 +848,62 @@ | |||
167 | 832 | height: 500px; | 848 | height: 500px; |
168 | 833 | } | 849 | } |
169 | 834 | .charm-nav-back { | 850 | .charm-nav-back { |
174 | 835 | background-color: black; | 851 | border-top: 1px solid #DEDEDE; |
175 | 836 | text-transform: uppercase; | 852 | border-bottom: 1px solid @charm-panel-border-color; |
176 | 837 | color: white; | 853 | color: @charm-panel-deploy-button-color; |
173 | 838 | font-weight: bold; | ||
177 | 839 | cursor: pointer; | 854 | cursor: pointer; |
178 | 855 | font-size: 14px; | ||
179 | 856 | padding: 7px 4px; | ||
180 | 840 | } | 857 | } |
181 | 841 | .charm-panel { | 858 | .charm-panel { |
182 | 859 | background-color: @charm-panel-background-color; | ||
183 | 860 | height: 432px; | ||
184 | 861 | overflow-y: auto; | ||
185 | 862 | overflow-x: hidden; | ||
186 | 842 | h3 { | 863 | h3 { |
192 | 843 | text-transform: capitalize; | 864 | color: @label-color; |
193 | 844 | color: blue; | 865 | font-size: 22px; |
194 | 845 | font-weight: bold; | 866 | font-weight: normal; |
195 | 846 | margin-top: 1ex; | 867 | padding: 5px 0px 2px 0px; |
191 | 847 | margin-bottom: 1ex; | ||
196 | 848 | } | 868 | } |
197 | 849 | h4 { | 869 | h4 { |
199 | 850 | border-bottom: 1px solid @label-color; | 870 | color: @label-color; |
200 | 851 | cursor: pointer; | 871 | cursor: pointer; |
203 | 852 | margin-top: 1ex; | 872 | border-top: 1px solid #FFFFFF; |
204 | 853 | margin-bottom: 1ex; | 873 | border-bottom: 1px solid @charm-panel-border-color; |
205 | 874 | font-family: @font-family-medium; | ||
206 | 875 | font-weight: normal; | ||
207 | 876 | padding: 8px 12px; | ||
208 | 854 | i { | 877 | i { |
209 | 855 | float: right; | 878 | float: right; |
210 | 856 | } | 879 | } |
211 | 880 | &.first { | ||
212 | 881 | border-top: 1px solid #E0DEDE; | ||
213 | 882 | } | ||
214 | 857 | } | 883 | } |
215 | 858 | h5 { | 884 | h5 { |
224 | 859 | margin-top: 1ex; | 885 | color: @label-color; |
225 | 860 | &:first-child { | 886 | font-family: @font-family-medium; |
226 | 861 | margin-top: 0; | 887 | font-weight: normal; |
227 | 862 | } | 888 | margin-top: 11px; |
228 | 863 | } | 889 | } |
229 | 864 | height: 432px; | 890 | #charm-panel-head { |
230 | 865 | overflow-y: auto; | 891 | border-top: 1px solid #FFFFFF; |
231 | 866 | overflow-x: hidden; | 892 | border-bottom: 1px solid @charm-panel-border-color; |
232 | 893 | padding: 1ex 12px 10px 12px; | ||
233 | 894 | } | ||
234 | 867 | .collapsible { | 895 | .collapsible { |
235 | 896 | background-color: #E7E7E7; | ||
236 | 897 | line-height: 16px; | ||
237 | 868 | overflow: hidden; | 898 | overflow: hidden; |
238 | 899 | padding: 0px 12px; | ||
239 | 900 | :last-child { | ||
240 | 901 | margin-bottom: 11px; | ||
241 | 902 | } | ||
242 | 869 | } | 903 | } |
243 | 870 | &.charm-description { | 904 | &.charm-description { |
245 | 871 | padding: 1ex 1em; | 905 | color: #58595B; |
246 | 906 | font-size: 12px; | ||
247 | 872 | .charm-section { | 907 | .charm-section { |
248 | 873 | .commitmessage { | 908 | .commitmessage { |
249 | 874 | padding: 0.8ex 0 1ex 1em; | 909 | padding: 0.8ex 0 1ex 1em; |
250 | @@ -883,14 +918,13 @@ | |||
251 | 883 | } | 918 | } |
252 | 884 | } | 919 | } |
253 | 885 | &.config-variant { | 920 | &.config-variant { |
254 | 886 | padding: 1ex 1em; | ||
255 | 887 | background-color: @charm-panel-background-color; | ||
256 | 888 | font-size: 14px; | 921 | font-size: 14px; |
257 | 922 | |||
258 | 889 | .control-group { | 923 | .control-group { |
259 | 890 | width: auto; | 924 | width: auto; |
260 | 891 | margin-bottom: 0; | 925 | margin-bottom: 0; |
261 | 892 | margin-top: 1ex; | 926 | margin-top: 1ex; |
263 | 893 | padding-bottom: 0; | 927 | padding: 0px 12px; |
264 | 894 | clear: both; | 928 | clear: both; |
265 | 895 | } | 929 | } |
266 | 896 | .control-description { | 930 | .control-description { |
267 | 897 | 931 | ||
268 | === modified file 'test/test_charm_panel.js' | |||
269 | --- test/test_charm_panel.js 2012-11-06 02:07:38 +0000 | |||
270 | +++ test/test_charm_panel.js 2012-11-07 18:27:21 +0000 | |||
271 | @@ -115,7 +115,7 @@ | |||
272 | 115 | field.set('value', 'aaa'); | 115 | field.set('value', 'aaa'); |
273 | 116 | field.simulate('keydown', { keyCode: ENTER }); | 116 | field.simulate('keydown', { keyCode: ENTER }); |
274 | 117 | node.one('a.charm-detail').simulate('click'); | 117 | node.one('a.charm-detail').simulate('click'); |
276 | 118 | node.one('.charm-description > h3').get('text').trim() | 118 | node.one('.charm-description h3').get('text').trim() |
277 | 119 | .should.equal('membase'); | 119 | .should.equal('membase'); |
278 | 120 | }); | 120 | }); |
279 | 121 | 121 | ||
280 | @@ -212,15 +212,10 @@ | |||
281 | 212 | { container: container, app: app, model: charm, | 212 | { container: container, app: app, model: charm, |
282 | 213 | charmStore: charm_store }).render(), | 213 | charmStore: charm_store }).render(), |
283 | 214 | html = container.one('.charm-description'), | 214 | html = container.one('.charm-description'), |
288 | 215 | description_div = html.one('.charm-section div'), | 215 | description_div = html.one('.charm-section div'); |
285 | 216 | interface_div = html.one('div.charm-section:nth-of-type(2)'), | ||
286 | 217 | last_change_div = html.one('div.charm-section:nth-of-type(3)'), | ||
287 | 218 | related_div = html.one('div.charm-section:nth-of-type(4)'); | ||
289 | 219 | html.one('h3').get('text').trim().should.equal('mysql'); | 216 | html.one('h3').get('text').trim().should.equal('mysql'); |
290 | 220 | description_div.getStyle('height').should.not.equal('0px'); | 217 | description_div.getStyle('height').should.not.equal('0px'); |
294 | 221 | var _ = expect(interface_div).to.not.exist; | 218 | html.all('div.charm-section').size().should.equal(1); |
292 | 222 | _ = expect(last_change_div).to.not.exist; | ||
293 | 223 | _ = expect(related_div).to.not.exist; | ||
295 | 224 | }); | 219 | }); |
296 | 225 | 220 | ||
297 | 226 | it('can render fuller charm', function() { | 221 | it('can render fuller charm', function() { |
298 | @@ -240,10 +235,11 @@ | |||
299 | 240 | { container: container, app: app, model: charm, charms: charms, | 235 | { container: container, app: app, model: charm, charms: charms, |
300 | 241 | charmStore: charm_store }).render(), | 236 | charmStore: charm_store }).render(), |
301 | 242 | html = container.one('.charm-description'), | 237 | html = container.one('.charm-description'), |
306 | 243 | description_div = html.one('.charm-section div'), | 238 | sections = html.all('.charm-section'), |
307 | 244 | interface_div = html.one('div.charm-section:nth-of-type(2) div'), | 239 | description_div = sections.item(0).one('div'), |
308 | 245 | last_change_div = html.one('div.charm-section:nth-of-type(3) div'), | 240 | interface_div = sections.item(1).one('div'), |
309 | 246 | related_div = html.one('div.charm-section:nth-of-type(4)'); | 241 | last_change_div = sections.item(2).one('div'), |
310 | 242 | related_div = sections.item(3).one('div'); | ||
311 | 247 | description_div.get('text').should.contain('A DB'); | 243 | description_div.get('text').should.contain('A DB'); |
312 | 248 | interface_div.getStyle('height').should.equal('0px'); | 244 | interface_div.getStyle('height').should.equal('0px'); |
313 | 249 | interface_div.get('text').should.contain('munin'); | 245 | interface_div.get('text').should.contain('munin'); |
314 | @@ -268,7 +264,8 @@ | |||
315 | 268 | charmStore: charm_store }).render(), | 264 | charmStore: charm_store }).render(), |
316 | 269 | html = container.one('.charm-description'), | 265 | html = container.one('.charm-description'), |
317 | 270 | // We use the last change div. | 266 | // We use the last change div. |
319 | 271 | section_container = html.one('div.charm-section:nth-of-type(3)'); | 267 | section_container = html.one('div.charm-section:last-child'); |
320 | 268 | //section_container = html.one('div.charm-section:nth-of-type(3)'); | ||
321 | 272 | section_container.one('div').getStyle('height').should.equal('0px'); | 269 | section_container.one('div').getStyle('height').should.equal('0px'); |
322 | 273 | assert(section_container.one('h4 i').hasClass('icon-chevron-up')); | 270 | assert(section_container.one('h4 i').hasClass('icon-chevron-up')); |
323 | 274 | section_container.one('h4').simulate('click'); | 271 | section_container.one('h4').simulate('click'); |
Reviewers: mp+133097_ code.launchpad. net,
Message:
Please take a look.
Description:
Charm panel description design.
This branch fixes the charm panel discription view /docs.google. com/a/canonical .com/file/ d/0B6l8lFdCRvtq Qk93MnZEWDlkU3c /edit scrollbar` Less mixin: the /docs.google. com/a/canonical .com/file/ d/0B6l8lFdCRvtq QXRDOUprMHNwTlk /edit.
so that now it matches the visual design here:
https:/
The change includes a `customize-
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:/
However, consider that changing the config view is not a goal
of this branch.
https:/ /code.launchpad .net/~frankban/ juju-gui/ bug-1074297- charm-panel- description/ +merge/ 133097
(do not edit description out of merge proposal)
Please review this at https:/ /codereview. appspot. com/6819098/
Affected files: charm-descripti on.handlebars charm-pre- configuration. handlebars stylesheet. less charm_panel. js
A [revision details]
M app/templates/
M app/templates/
M lib/views/
M test/test_