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

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...

LGTM

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

LGTM.

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

*** 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/

Please take a look.

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

Please take a look.

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

Please take a look.

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