UX: Display large numbers with delimiters.

discourse · Jan 9, 2017 · cbc6aee · cbc6aee
1 parent 00bd782
commit cbc6aee
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 23 deletions.
diff --git a/app/assets/javascripts/admin/templates/components/admin-report-counts.hbs b/app/assets/javascripts/admin/templates/components/admin-report-counts.hbs
@@ -4,8 +4,19 @@
   {{/if}}
   <a href="{{report.reportUrl}}">{{report.title}}</a>
 </td>
-<td class="value">{{report.todayCount}}</td>
-<td class="value {{report.yesterdayTrend}}" title={{report.yesterdayCountTitle}}>{{report.yesterdayCount}} {{fa-icon "caret-up" class="up"}} {{fa-icon "caret-down" class="down"}}</td>
-<td class="value {{report.sevenDayTrend}}" title={{report.sevenDayCountTitle}}>{{report.lastSevenDaysCount}} {{fa-icon "caret-up" class="up"}} {{fa-icon "caret-down" class="down"}}</td>
-<td class="value {{report.thirtyDayTrend}}" title={{report.thirtyDayCountTitle}}>{{report.lastThirtyDaysCount}} {{fa-icon "caret-up" class="up"}} {{fa-icon "caret-down" class="down"}}</td>
-<td class="value">{{report.total}}</td>
+
+<td class="value">{{number report.todayCount}}</td>
+
+<td class="value {{report.yesterdayTrend}}" title={{report.yesterdayCountTitle}}>
+  {{number report.yesterdayCount}} {{fa-icon "caret-up" class="up"}} {{fa-icon "caret-down" class="down"}}
+</td>
+
+<td class="value {{report.sevenDayTrend}}" title={{number report.sevenDayCountTitle}}>
+  {{number report.lastSevenDaysCount}} {{fa-icon "caret-up" class="up"}} {{fa-icon "caret-down" class="down"}}
+</td>
+
+<td class="value {{report.thirtyDayTrend}}" title={{number report.thirtyDayCountTitle}}>
+  {{number report.lastThirtyDaysCount}} {{fa-icon "caret-up" class="up"}} {{fa-icon "caret-down" class="down"}}
+</td>
+
+<td class="value">{{number report.total}}</td>
diff --git a/app/assets/javascripts/admin/templates/components/admin-report-trust-level-counts.hbs b/app/assets/javascripts/admin/templates/components/admin-report-trust-level-counts.hbs
@@ -1,6 +1,6 @@
 <td class="title">{{report.title}}</td>
-<td class="value">{{#link-to 'adminUsersList.show' 'newuser'}}{{value-at-tl report.data level="0"}}{{/link-to}}</td>
-<td class="value">{{#link-to 'adminUsersList.show' 'basic'}}{{value-at-tl report.data level="1"}}{{/link-to}}</td>
-<td class="value">{{#link-to 'adminUsersList.show' 'member'}}{{value-at-tl report.data level="2"}}{{/link-to}}</td>
-<td class="value">{{#link-to 'adminUsersList.show' 'regular'}}{{value-at-tl report.data level="3"}}{{/link-to}}</td>
-<td class="value">{{#link-to 'adminUsersList.show' 'leader'}}{{value-at-tl report.data level="4"}}{{/link-to}}</td>
+<td class="value">{{#link-to 'adminUsersList.show' 'newuser'}}{{number (value-at-tl report.data level="0")}}{{/link-to}}</td>
+<td class="value">{{#link-to 'adminUsersList.show' 'basic'}}{{number (value-at-tl report.data level="1")}}{{/link-to}}</td>
+<td class="value">{{#link-to 'adminUsersList.show' 'member'}}{{number (value-at-tl report.data level="2")}}{{/link-to}}</td>
+<td class="value">{{#link-to 'adminUsersList.show' 'regular'}}{{number (value-at-tl report.data level="3")}}{{/link-to}}</td>
+<td class="value">{{#link-to 'adminUsersList.show' 'leader'}}{{number (value-at-tl report.data level="4")}}{{/link-to}}</td>
diff --git a/app/assets/javascripts/admin/templates/dashboard.hbs b/app/assets/javascripts/admin/templates/dashboard.hbs
@@ -228,7 +228,7 @@
                   </div>
                 </div>
               </td>
-              <td class="value">{{data.num_clicks}}</td>
+              <td class="value">{{number data.num_clicks}}</td>
             </tr>
           </tbody>
         {{/each}}
@@ -248,8 +248,8 @@
           <tbody>
             <tr>
               <td class="title">{{s.domain}}</td>
-              <td class="value">{{s.num_clicks}}</td>
-              <td class="value">{{s.num_topics}}</td>
+              <td class="value">{{number s.num_clicks}}</td>
+              <td class="value">{{number s.num_topics}}</td>
             </tr>
           </tbody>
         {{/each}}
@@ -261,16 +261,16 @@
         <thead>
           <tr>
             <th class="title">{{top_referrers.title}} ({{i18n 'admin.dashboard.reports.last_30_days'}})</th>
-            <th>{{top_referrers.ytitles.num_clicks}}</th>
-            <th>{{top_referrers.ytitles.num_topics}}</th>
+            <th>{{number top_referrers.ytitles.num_clicks}}</th>
+            <th>{{number top_referrers.ytitles.num_topics}}</th>
           </tr>
         </thead>
         {{#each top_referrers.data as |r|}}
           <tbody>
             <tr>
               <td class="title">{{#link-to 'adminUser' r.user_id r.username}}{{unbound r.username}}{{/link-to}}</td>
-              <td class="value">{{r.num_clicks}}</td>
-              <td class="value">{{r.num_topics}}</td>
+              <td class="value">{{number r.num_clicks}}</td>
+              <td class="value">{{number r.num_topics}}</td>
             </tr>
           </tbody>
         {{/each}}

diff --git a/app/assets/javascripts/admin/templates/groups-type.hbs b/app/assets/javascripts/admin/templates/groups-type.hbs
@@ -6,7 +6,7 @@
         <li>
           {{#link-to "adminGroup" group.type group.name}}{{group.name}}
             {{#if group.userCountDisplay}}
-              <span class="count">{{group.userCountDisplay}}</span>
+              <span class="count">{{number group.userCountDisplay}}</span>
             {{/if}}
           {{/link-to}}
         </li>

diff --git a/app/assets/javascripts/admin/templates/users-list-show.hbs b/app/assets/javascripts/admin/templates/users-list-show.hbs
@@ -55,8 +55,8 @@
           <td class='email'>{{unbound user.email}}</td>
           <td>{{{unbound user.last_emailed_age}}}</td>
           <td>{{{unbound user.last_seen_age}}}</td>
-          <td>{{{unbound user.topics_entered}}}</td>
-          <td>{{{unbound user.posts_read_count}}}</td>
+          <td>{{number user.topics_entered}}</td>
+          <td>{{number user.posts_read_count}}</td>
           <td>{{{unbound user.time_read}}}</td>
 
           <td>{{{unbound user.created_at_age}}}</td>

diff --git a/app/assets/javascripts/discourse/helpers/application.js.es6 b/app/assets/javascripts/discourse/helpers/application.js.es6
@@ -11,9 +11,9 @@ registerUnbound('number', (orig, params) => {
   orig = parseInt(orig, 10);
   if (isNaN(orig)) { orig = 0; }
 
-  let title = orig;
+  let title = I18n.toNumber(orig, { precision: 0 });
   if (params.numberKey) {
-    title = I18n.t(params.numberKey, { number: orig });
+    title = I18n.t(params.numberKey, { number: title });
   }
 
   let classNames = 'number';

diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
@@ -2081,7 +2081,9 @@ en:
       one: "view"
       other: "views"
     replies: "Replies"
-    views_long: "this topic has been viewed {{number}} times"
+    views_long:
+      one: "this topic has been viewed 1 time"
+      other: "this topic has been viewed {{number}} times"
     activity: "Activity"
     likes: "Likes"
     likes_lowercase: