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
1=== removed file 'app/assets/images/charm_commits_icon.jpg'
2Binary 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
3=== removed file 'app/assets/images/charm_downloads_icon.jpg'
4Binary 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
5=== modified file 'app/subapps/browser/templates/browser_charm.handlebars'
6--- app/subapps/browser/templates/browser_charm.handlebars 2013-04-10 18:10:06 +0000
7+++ app/subapps/browser/templates/browser_charm.handlebars 2013-04-11 13:15:25 +0000
8@@ -29,12 +29,10 @@
9 <dl>
10 <dt>Recent activity</dt>
11 <dd>
12- <img src="/juju-ui/assets/images/charm_downloads_icon.jpg"
13- alt="Minimize" />
14 {{ recent_download_count }}
15- <img src="/juju-ui/assets/images/charm_commits_icon.jpg"
16- alt="Minimize" />
17+ {{pluralize 'download' recent_download_count}},
18 {{ recent_commit_count }}
19+ {{pluralize 'commit' recent_commit_count}}
20 </dd>
21 <dt>Ubuntu series</dt>
22 <dd>{{ distro_series }}</dd>
23@@ -53,7 +51,11 @@
24 <h2>Summary</h2>
25 {{ summary }}
26 <h2>Description</h2>
27- {{ description }}
28+ {{#if isFullscreen}}
29+ {{ description }}
30+ {{else}}
31+ {{ truncate description 300 }}
32+ {{/if}}
33 </div>
34
35 <div class="changelog">
36@@ -101,12 +103,9 @@
37 other charms.
38 </p>
39 <div class="yui3-g">
40- <div class="interfaces-heading yui3-u-1-3">
41+ <div class="interfaces-heading yui3-u-1">
42 <h3>Requires</h3>
43 </div>
44- <div class="interfaces-heading yui3-u-2-3">
45- <h3>Related Charms</h3>
46- </div>
47 </div>
48 {{#if requires}}
49 <ul class="interface-list">
50@@ -116,9 +115,6 @@
51 <h4>{{value.interface}}</h4>
52 <div>{{key}}</div>
53 </div>
54- <div class="related yui3-u-2-3">
55- &hellip;no related charms yet
56- </div>
57 </li>
58 {{/arrayObject}}
59 </ul>
60@@ -126,12 +122,9 @@
61 <p>This charm does not require any interfaces.</p>
62 {{/if}}
63 <div class="yui3-g">
64- <div class="interfaces-heading yui3-u-1-3">
65+ <div class="interfaces-heading yui3-u-1">
66 <h3>Provides</h3>
67 </div>
68- <div class="interfaces-heading yui3-u-2-3">
69- <h3>Related Charms</h3>
70- </div>
71 </div>
72 {{#if provides}}
73 <ul class="interface-list">
74@@ -141,9 +134,6 @@
75 <h4>{{value.interface}}</h4>
76 <div>{{key}}</div>
77 </div>
78- <div class="related yui3-u-2-3">
79- &hellip;no related charms yet
80- </div>
81 </li>
82 {{/arrayObject}}
83 </ul>
84
85=== modified file 'app/views/utils.js'
86--- app/views/utils.js 2013-04-10 21:17:18 +0000
87+++ app/views/utils.js 2013-04-11 13:15:25 +0000
88@@ -1250,6 +1250,21 @@
89 }
90 });
91
92+ /**
93+ * Truncate helper to keep text sizes to a specified limit.
94+ *
95+ * {{truncate field 100}}
96+ *
97+ */
98+ Y.Handlebars.registerHelper('truncate', function(string, length) {
99+ if (string && string.length > length) {
100+ return Y.Lang.trimRight(string.substring(0, length)) + '...';
101+ }
102+ else {
103+ return string;
104+ }
105+ });
106+
107 }, '0.1.0', {
108 requires: ['base-build',
109 'handlebars',
110
111=== modified file 'test/test_utils.js'
112--- test/test_utils.js 2013-04-10 21:17:18 +0000
113+++ test/test_utils.js 2013-04-11 13:15:25 +0000
114@@ -599,6 +599,38 @@
115 assert.equal('fooi', html);
116 });
117
118+ it('truncates a string', function() {
119+ var source = '{{ truncate text 30 }}',
120+ template = Y.Handlebars.compile(source),
121+ context = {text: 'Lorem ipsum dolor sit amet consectetur'},
122+ html = template(context);
123+ assert.equal('Lorem ipsum dolor sit amet con...', html);
124+ });
125+
126+ it('truncates a string with a trailing space', function() {
127+ var source = '{{ truncate text 30 }}',
128+ template = Y.Handlebars.compile(source),
129+ context = {text: 'Lorem ipsum dolor sit ametuco sectetur'},
130+ html = template(context);
131+ assert.equal('Lorem ipsum dolor sit ametuco...', html);
132+ });
133+
134+ it('does not truncate a shorter string', function() {
135+ var source = '{{ truncate text 30 }}',
136+ template = Y.Handlebars.compile(source),
137+ context = {text: 'Lorem ipsum dolor sit amet'},
138+ html = template(context);
139+ assert.equal('Lorem ipsum dolor sit amet', html);
140+ });
141+
142+ it('truncate handles an undefined value', function() {
143+ var source = '{{ truncate text 30 }}is empty',
144+ template = Y.Handlebars.compile(source),
145+ context = {text: undefined},
146+ html = template(context);
147+ assert.equal('is empty', html);
148+ });
149+
150 describe('showStatus', function() {
151 var html, obj, template;
152

Subscribers

People subscribed via source and target branches