juju-gui

Merge lp:~rharding/juju-gui/design-updates into lp:juju-gui/experimental

  1. design-updates
  2. Merge into trunk
Proposed by Richard Harding
Status: Needs review
Proposed branch: lp:~rharding/juju-gui/design-updates
Merge into: lp:juju-gui/experimental
Diff against target: 151 lines (+56/-19)
3 files modified
app/subapps/browser/templates/browser_charm.handlebars (+9/-19)
app/views/utils.js (+15/-0)
test/test_utils.js (+32/-0)
To merge this branch: bzr merge lp:~rharding/juju-gui/design-updates
Reviewer Review Type Date Requested Status
Juju GUI Hackers Pending
Review via email: mp+158363@code.launchpad.net

Description of the change

Adjust design per review, add truncate helper

- Per UX reviews adjust some of the design of the browser
- Add a truncate handlebars helper to aid in fitting content nicely

https://codereview.appspot.com/8662043/

To post a comment you must log in.
Revision history for this message
Richard Harding (rharding) wrote :
Download full text (7.3 KiB)

Reviewers: mp+158363_code.launchpad.net,

Message:
Please take a look.

Description:
Adjust design per review, add truncate helper

- Per UX reviews adjust some of the design of the browser
- Add a truncate handlebars helper to aid in fitting content nicely

https://code.launchpad.net/~rharding/juju-gui/design-updates/+merge/158363

(do not edit description out of merge proposal)

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

Affected files:
   A [revision details]
   D app/assets/images/charm_commits_icon.jpg
   D app/assets/images/charm_downloads_icon.jpg
   M app/subapps/browser/templates/browser_charm.handlebars
   M app/views/utils.js
   M test/test_utils.js

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: test/test_utils.js
=== modified file 'test/test_utils.js'
--- test/test_utils.js 2013-04-10 21:17:18 +0000
+++ test/test_utils.js 2013-04-11 13:11:02 +0000
@@ -599,6 +599,38 @@
        assert.equal('fooi', html);
      });

+ it('truncates a string', function() {
+ var source = '{{ truncate text 30 }}',
+ template = Y.Handlebars.compile(source),
+ context = {text: 'Lorem ipsum dolor sit amet consectetur'},
+ html = template(context);
+ assert.equal('Lorem ipsum dolor sit amet con...', html);
+ });
+
+ it('truncates a string with a trailing space', function() {
+ var source = '{{ truncate text 30 }}',
+ template = Y.Handlebars.compile(source),
+ context = {text: 'Lorem ipsum dolor sit ametuco sectetur'},
+ html = template(context);
+ assert.equal('Lorem ipsum dolor sit ametuco...', html);
+ });
+
+ it('does not truncate a shorter string', function() {
+ var source = '{{ truncate text 30 }}',
+ template = Y.Handlebars.compile(source),
+ context = {text: 'Lorem ipsum dolor sit amet'},
+ html = template(context);
+ assert.equal('Lorem ipsum dolor sit amet', html);
+ });
+
+ it('truncate handles an undefined value', function() {
+ var source = '{{ truncate text 30 }}is empty',
+ template = Y.Handlebars.compile(source),
+ context = {text: undefined},
+ html = template(context);
+ assert.equal('is empty', html);
+ });
+
      describe('showStatus', function() {
        var html, obj, template;

Index: app/views/utils.js
=== modified file 'app/views/utils.js'
--- app/views/utils.js 2013-04-10 21:17:18 +0000
+++ app/views/utils.js 2013-04-11 12:47:10 +0000
@@ -1250,6 +1250,21 @@
          }
        });

+ /**
+ * Truncate helper to keep text sizes to a specified limit.
+ *
+ * {{truncate field 100}}
+ *
+ */
+ Y.Handlebars.registerHelper('truncate', function(string, length) {
+ if (string && string.length > length) {
+ return Y.Lang.trimRight(string.substring(0, length)) + '...';
+ }
+ else {
+ return string;
+ }
+ });
+
  }, '0.1.0', {
    re...

Read more...

Reply
Revision history for this message
Richard Harding (rharding) wrote :

LGTM

https://codereview.appspot.com/8662043/

Reply
Revision history for this message
j.c.sackett (jcsackett) wrote :

LGTM.

https://codereview.appspot.com/8662043/

Reply
Revision history for this message
Richard Harding (rharding) wrote :

*** Submitted:

Adjust design per review, add truncate helper

- Per UX reviews adjust some of the design of the browser
- Add a truncate handlebars helper to aid in fitting content nicely

R=j.c.sackett
CC=
https://codereview.appspot.com/8662043

https://codereview.appspot.com/8662043/

Reply
Revision history for this message
Richard Harding (rharding) wrote :

Please take a look.

https://codereview.appspot.com/8662043/

Reply
Revision history for this message
Richard Harding (rharding) wrote :

Please take a look.

https://codereview.appspot.com/8662043/

Reply
Revision history for this message
Richard Harding (rharding) wrote :

Please take a look.

https://codereview.appspot.com/8662043/

Reply

Unmerged revisions

598. By Richard Harding

Pull in huws changes

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== removed file 'app/assets/images/charm_commits_icon.jpg'
0Binary files app/assets/images/charm_commits_icon.jpg 2013-04-03 06:23:33 +0000 and app/assets/images/charm_commits_icon.jpg 1970-01-01 00:00:00 +0000 differ0Binary files app/assets/images/charm_commits_icon.jpg 2013-04-03 06:23:33 +0000 and app/assets/images/charm_commits_icon.jpg 1970-01-01 00:00:00 +0000 differ
=== removed file 'app/assets/images/charm_downloads_icon.jpg'
1Binary files app/assets/images/charm_downloads_icon.jpg 2013-04-03 06:23:33 +0000 and app/assets/images/charm_downloads_icon.jpg 1970-01-01 00:00:00 +0000 differ1Binary files app/assets/images/charm_downloads_icon.jpg 2013-04-03 06:23:33 +0000 and app/assets/images/charm_downloads_icon.jpg 1970-01-01 00:00:00 +0000 differ
=== modified file 'app/subapps/browser/templates/browser_charm.handlebars'
--- app/subapps/browser/templates/browser_charm.handlebars 2013-04-10 18:10:06 +0000
+++ app/subapps/browser/templates/browser_charm.handlebars 2013-04-11 13:15:25 +0000
@@ -29,12 +29,10 @@
29 <dl>29 <dl>
30 <dt>Recent activity</dt>30 <dt>Recent activity</dt>
31 <dd>31 <dd>
32 <img src="/juju-ui/assets/images/charm_downloads_icon.jpg"
33 alt="Minimize" />
34 {{ recent_download_count }}32 {{ recent_download_count }}
35 <img src="/juju-ui/assets/images/charm_commits_icon.jpg"33 {{pluralize 'download' recent_download_count}},
36 alt="Minimize" />
37 {{ recent_commit_count }}34 {{ recent_commit_count }}
35 {{pluralize 'commit' recent_commit_count}}
38 </dd>36 </dd>
39 <dt>Ubuntu series</dt>37 <dt>Ubuntu series</dt>
40 <dd>{{ distro_series }}</dd>38 <dd>{{ distro_series }}</dd>
@@ -53,7 +51,11 @@
53 <h2>Summary</h2>51 <h2>Summary</h2>
54 {{ summary }}52 {{ summary }}
55 <h2>Description</h2>53 <h2>Description</h2>
56 {{ description }}54 {{#if isFullscreen}}
55 {{ description }}
56 {{else}}
57 {{ truncate description 300 }}
58 {{/if}}
57 </div>59 </div>
5860
59 <div class="changelog">61 <div class="changelog">
@@ -101,12 +103,9 @@
101 other charms.103 other charms.
102 </p>104 </p>
103 <div class="yui3-g">105 <div class="yui3-g">
104 <div class="interfaces-heading yui3-u-1-3">106 <div class="interfaces-heading yui3-u-1">
105 <h3>Requires</h3>107 <h3>Requires</h3>
106 </div>108 </div>
107 <div class="interfaces-heading yui3-u-2-3">
108 <h3>Related Charms</h3>
109 </div>
110 </div>109 </div>
111 {{#if requires}}110 {{#if requires}}
112 <ul class="interface-list">111 <ul class="interface-list">
@@ -116,9 +115,6 @@
116 <h4>{{value.interface}}</h4>115 <h4>{{value.interface}}</h4>
117 <div>{{key}}</div>116 <div>{{key}}</div>
118 </div>117 </div>
119 <div class="related yui3-u-2-3">
120 &hellip;no related charms yet
121 </div>
122 </li>118 </li>
123 {{/arrayObject}}119 {{/arrayObject}}
124 </ul>120 </ul>
@@ -126,12 +122,9 @@
126 <p>This charm does not require any interfaces.</p>122 <p>This charm does not require any interfaces.</p>
127 {{/if}}123 {{/if}}
128 <div class="yui3-g">124 <div class="yui3-g">
129 <div class="interfaces-heading yui3-u-1-3">125 <div class="interfaces-heading yui3-u-1">
130 <h3>Provides</h3>126 <h3>Provides</h3>
131 </div>127 </div>
132 <div class="interfaces-heading yui3-u-2-3">
133 <h3>Related Charms</h3>
134 </div>
135 </div>128 </div>
136 {{#if provides}}129 {{#if provides}}
137 <ul class="interface-list">130 <ul class="interface-list">
@@ -141,9 +134,6 @@
141 <h4>{{value.interface}}</h4>134 <h4>{{value.interface}}</h4>
142 <div>{{key}}</div>135 <div>{{key}}</div>
143 </div>136 </div>
144 <div class="related yui3-u-2-3">
145 &hellip;no related charms yet
146 </div>
147 </li>137 </li>
148 {{/arrayObject}}138 {{/arrayObject}}
149 </ul>139 </ul>
150140
=== modified file 'app/views/utils.js'
--- app/views/utils.js 2013-04-10 21:17:18 +0000
+++ app/views/utils.js 2013-04-11 13:15:25 +0000
@@ -1250,6 +1250,21 @@
1250 }1250 }
1251 });1251 });
12521252
1253 /**
1254 * Truncate helper to keep text sizes to a specified limit.
1255 *
1256 * {{truncate field 100}}
1257 *
1258 */
1259 Y.Handlebars.registerHelper('truncate', function(string, length) {
1260 if (string && string.length > length) {
1261 return Y.Lang.trimRight(string.substring(0, length)) + '...';
1262 }
1263 else {
1264 return string;
1265 }
1266 });
1267
1253}, '0.1.0', {1268}, '0.1.0', {
1254 requires: ['base-build',1269 requires: ['base-build',
1255 'handlebars',1270 'handlebars',
12561271
=== modified file 'test/test_utils.js'
--- test/test_utils.js 2013-04-10 21:17:18 +0000
+++ test/test_utils.js 2013-04-11 13:15:25 +0000
@@ -599,6 +599,38 @@
599 assert.equal('fooi', html);599 assert.equal('fooi', html);
600 });600 });
601601
602 it('truncates a string', function() {
603 var source = '{{ truncate text 30 }}',
604 template = Y.Handlebars.compile(source),
605 context = {text: 'Lorem ipsum dolor sit amet consectetur'},
606 html = template(context);
607 assert.equal('Lorem ipsum dolor sit amet con...', html);
608 });
609
610 it('truncates a string with a trailing space', function() {
611 var source = '{{ truncate text 30 }}',
612 template = Y.Handlebars.compile(source),
613 context = {text: 'Lorem ipsum dolor sit ametuco sectetur'},
614 html = template(context);
615 assert.equal('Lorem ipsum dolor sit ametuco...', html);
616 });
617
618 it('does not truncate a shorter string', function() {
619 var source = '{{ truncate text 30 }}',
620 template = Y.Handlebars.compile(source),
621 context = {text: 'Lorem ipsum dolor sit amet'},
622 html = template(context);
623 assert.equal('Lorem ipsum dolor sit amet', html);
624 });
625
626 it('truncate handles an undefined value', function() {
627 var source = '{{ truncate text 30 }}is empty',
628 template = Y.Handlebars.compile(source),
629 context = {text: undefined},
630 html = template(context);
631 assert.equal('is empty', html);
632 });
633
602 describe('showStatus', function() {634 describe('showStatus', function() {
603 var html, obj, template;635 var html, obj, template;
604636

Subscribers

People subscribed via source and target branches