From db15772ab1514e4d6bfa36259aae3ebd5771e331 Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Thu, 24 Mar 2016 13:05:09 -0400 Subject: [PATCH] UX: Make user info rendering more consistent --- .../discourse/components/user-info.js.es6 | 23 ++++++++ .../discourse/components/user-small.js.es6 | 15 ----- .../discourse/controllers/badges/show.js.es6 | 12 +--- .../discourse/helpers/format-date.js.es6 | 2 + .../discourse/helpers/inline-date.js.es6 | 6 ++ .../discourse/models/user-badge.js.es6 | 7 +-- .../discourse/routes/badges-show.js.es6 | 8 +-- .../javascripts/discourse/templates/about.hbs | 8 +-- .../discourse/templates/badges/show.hbs | 37 +++---------- .../{user-small.hbs => user-info.hbs} | 7 +++ .../discourse/templates/group/members.hbs | 2 +- .../discourse/templates/mobile/users.hbs | 2 +- .../javascripts/discourse/templates/users.hbs | 2 +- .../stylesheets/common/base/directory.scss | 4 ++ .../stylesheets/common/base/user-badges.scss | 55 ++----------------- app/assets/stylesheets/common/base/user.scss | 27 ++++++++- app/assets/stylesheets/mobile/user.scss | 2 +- config/locales/client.en.yml | 3 +- test/javascripts/acceptance/about-test.js.es6 | 4 +- 19 files changed, 98 insertions(+), 128 deletions(-) create mode 100644 app/assets/javascripts/discourse/components/user-info.js.es6 delete mode 100644 app/assets/javascripts/discourse/components/user-small.js.es6 create mode 100644 app/assets/javascripts/discourse/helpers/inline-date.js.es6 rename app/assets/javascripts/discourse/templates/components/{user-small.hbs => user-info.hbs} (84%) diff --git a/app/assets/javascripts/discourse/components/user-info.js.es6 b/app/assets/javascripts/discourse/components/user-info.js.es6 new file mode 100644 index 000000000..05dde9fff --- /dev/null +++ b/app/assets/javascripts/discourse/components/user-info.js.es6 @@ -0,0 +1,23 @@ +import { url } from 'discourse/lib/computed'; +import computed from 'ember-addons/ember-computed-decorators'; + +function normalize(name) { + return name.replace(/[\-\_ \.]/g, '').toLowerCase(); +} + +export default Ember.Component.extend({ + classNameBindings: [':user-info', 'size'], + size: 'small', + userPath: url('user.username', '/users/%@'), + + // TODO: In later ember releases `hasBlock` works without this + hasBlock: Ember.computed.alias('template'), + + @computed('user.name', 'user.username') + name(name, username) { + if (name && normalize(username) !== normalize(name)) { + return name; + } + } + +}); diff --git a/app/assets/javascripts/discourse/components/user-small.js.es6 b/app/assets/javascripts/discourse/components/user-small.js.es6 deleted file mode 100644 index 9dc069938..000000000 --- a/app/assets/javascripts/discourse/components/user-small.js.es6 +++ /dev/null @@ -1,15 +0,0 @@ -import { url } from 'discourse/lib/computed'; - -export default Ember.Component.extend({ - classNames: ['user-small'], - - userPath: url('user.username', '/users/%@'), - - name: function() { - const name = this.get('user.name'); - if (name && this.get('user.username') !== name) { - return name; - } - }.property('user.name') - -}); diff --git a/app/assets/javascripts/discourse/controllers/badges/show.js.es6 b/app/assets/javascripts/discourse/controllers/badges/show.js.es6 index ad83dd803..54be27a66 100644 --- a/app/assets/javascripts/discourse/controllers/badges/show.js.es6 +++ b/app/assets/javascripts/discourse/controllers/badges/show.js.es6 @@ -6,7 +6,7 @@ export default Ember.Controller.extend({ userBadges: null, needs: ["application"], - user: function(){ + user: function() { if (this.get("username")) { return this.get('userBadges')[0].get('user'); } @@ -37,16 +37,6 @@ export default Ember.Controller.extend({ } }, - layoutClass: function(){ - var user = this.get("user") ? " single-user" : ""; - var ub = this.get("userBadges"); - if(ub && ub[0] && ub[0].post_id){ - return "user-badge-with-posts" + user; - } else { - return "user-badge-no-posts" + user; - } - }.property("userBadges"), - canLoadMore: function() { if (this.get('noMoreBadges')) { return false; } diff --git a/app/assets/javascripts/discourse/helpers/format-date.js.es6 b/app/assets/javascripts/discourse/helpers/format-date.js.es6 index 7c68a5172..1937c4419 100644 --- a/app/assets/javascripts/discourse/helpers/format-date.js.es6 +++ b/app/assets/javascripts/discourse/helpers/format-date.js.es6 @@ -25,3 +25,5 @@ registerUnbound('format-date', function(val, params) { return new Handlebars.SafeString(autoUpdatingRelativeAge(date, {format: format, title: title, leaveAgo: leaveAgo})); } }); + + diff --git a/app/assets/javascripts/discourse/helpers/inline-date.js.es6 b/app/assets/javascripts/discourse/helpers/inline-date.js.es6 new file mode 100644 index 000000000..874434fd3 --- /dev/null +++ b/app/assets/javascripts/discourse/helpers/inline-date.js.es6 @@ -0,0 +1,6 @@ +import { relativeAge } from 'discourse/lib/formatter'; + +export default function(dt, params) { + dt = params.data.view.getStream(dt).value(); + return relativeAge(new Date(dt)); +} diff --git a/app/assets/javascripts/discourse/models/user-badge.js.es6 b/app/assets/javascripts/discourse/models/user-badge.js.es6 index a99c997d6..bc257aafc 100644 --- a/app/assets/javascripts/discourse/models/user-badge.js.es6 +++ b/app/assets/javascripts/discourse/models/user-badge.js.es6 @@ -6,13 +6,8 @@ const UserBadge = Discourse.Model.extend({ return "/t/-/" + this.get('topic_id') + "/" + this.get('post_number'); } }.property(), // avoid the extra bindings for now - /** - Revoke this badge. - @method revoke - @returns {Promise} a promise that resolves when the badge has been revoked. - **/ - revoke: function() { + revoke() { return Discourse.ajax("/user_badges/" + this.get('id'), { type: "DELETE" }); diff --git a/app/assets/javascripts/discourse/routes/badges-show.js.es6 b/app/assets/javascripts/discourse/routes/badges-show.js.es6 index 74e04c644..544d6cfdd 100644 --- a/app/assets/javascripts/discourse/routes/badges-show.js.es6 +++ b/app/assets/javascripts/discourse/routes/badges-show.js.es6 @@ -15,10 +15,7 @@ export default Discourse.Route.extend({ }, serialize(model) { - return { - id: model.get("id"), - slug: model.get("slug") - }; + return model.getProperties('id', 'slug'); }, model(params) { @@ -29,13 +26,12 @@ export default Discourse.Route.extend({ } }, - afterModel(model,transition) { + afterModel(model, transition) { const username = transition.queryParams && transition.queryParams.username; return UserBadge.findByBadgeId(model.get("id"), {username}).then(userBadges => { this.userBadges = userBadges; }); - }, titleToken() { diff --git a/app/assets/javascripts/discourse/templates/about.hbs b/app/assets/javascripts/discourse/templates/about.hbs index ca3f050ff..3d8f993ba 100644 --- a/app/assets/javascripts/discourse/templates/about.hbs +++ b/app/assets/javascripts/discourse/templates/about.hbs @@ -22,8 +22,8 @@

{{i18n 'about.our_admins'}}

- {{#each a in model.admins}} - {{user-small user=a}} + {{#each model.admins as |a|}} + {{user-info user=a}} {{/each}}
@@ -35,8 +35,8 @@

{{i18n 'about.our_moderators'}}

- {{#each m in model.moderators}} - {{user-small user=m}} + {{#each model.moderators as |m|}} + {{user-info user=m}} {{/each}}
diff --git a/app/assets/javascripts/discourse/templates/badges/show.hbs b/app/assets/javascripts/discourse/templates/badges/show.hbs index 865c76f23..131d52fef 100644 --- a/app/assets/javascripts/discourse/templates/badges/show.hbs +++ b/app/assets/javascripts/discourse/templates/badges/show.hbs @@ -14,57 +14,38 @@
{{#unless user}} -
{{i18n 'badges.granted' count=grantCount}}
+
{{i18n 'badges.granted' count=grantCount}}
{{/unless}}
{{i18n 'badges.allow_title'}} {{{view.allowTitle}}}
{{i18n 'badges.multiple_grant'}} {{{view.multipleGrant}}}
- - {{#if user}} {{/if}} {{#if userBadges}} -
- {{#each ub in userBadges}} -
- {{#if user}} - {{format-date ub.granted_at}} - {{else}} - {{#link-to 'user' ub.user classNames="badge-info"}} - {{avatar ub.user imageSize="large"}} -
- {{ub.user.username}} - {{format-date ub.granted_at}} -
- {{/link-to}} - {{/if}} - +
+ {{#each userBadges as |ub|}} + {{#user-info user=ub.user size="medium" class="badge-info" date=ub.granted_at}} +
{{i18n 'badges.granted_on' date=(inline-date ub.granted_at)}}
{{#if ub.post_number}} {{{ub.topic.fancyTitle}}} {{/if}} -
+ {{/user-info}} {{/each}} {{#unless canLoadMore}} {{#if user}} - {{i18n 'badges.more_with_badge'}} + {{log model}} + {{i18n 'badges.others_count' count=model.grant_count}} {{/if}} {{/unless}} -
{{conditional-loading-spinner condition=canLoadMore}} diff --git a/app/assets/javascripts/discourse/templates/components/user-small.hbs b/app/assets/javascripts/discourse/templates/components/user-info.hbs similarity index 84% rename from app/assets/javascripts/discourse/templates/components/user-small.hbs rename to app/assets/javascripts/discourse/templates/components/user-info.hbs index 83edc9c95..8270000cc 100644 --- a/app/assets/javascripts/discourse/templates/components/user-small.hbs +++ b/app/assets/javascripts/discourse/templates/components/user-info.hbs @@ -8,4 +8,11 @@ {{unbound name}}
{{unbound user.title}}
+ + {{#if hasBlock}} +
+ {{yield}} +
+ {{/if}} + diff --git a/app/assets/javascripts/discourse/templates/group/members.hbs b/app/assets/javascripts/discourse/templates/group/members.hbs index ba4715c0d..2d3c9d80f 100644 --- a/app/assets/javascripts/discourse/templates/group/members.hbs +++ b/app/assets/javascripts/discourse/templates/group/members.hbs @@ -18,7 +18,7 @@ {{#each model.members as |m|}} - {{user-small user=m}} + {{user-info user=m}} {{#if m.owner}}{{i18n "groups.owner"}}{{/if}} diff --git a/app/assets/javascripts/discourse/templates/mobile/users.hbs b/app/assets/javascripts/discourse/templates/mobile/users.hbs index cea25c3a6..cb1c3f6c9 100644 --- a/app/assets/javascripts/discourse/templates/mobile/users.hbs +++ b/app/assets/javascripts/discourse/templates/mobile/users.hbs @@ -13,7 +13,7 @@ {{#each ic in model itemController="directory-item"}}
{{#with ic.model as |it|}} - {{user-small user=it.user}} + {{user-info user=it.user}} {{user-stat value=it.likes_received label="directory.likes_received" icon="heart"}} {{user-stat value=it.likes_given label="directory.likes_given" icon="heart"}} {{user-stat value=it.topic_count label="directory.topic_count"}} diff --git a/app/assets/javascripts/discourse/templates/users.hbs b/app/assets/javascripts/discourse/templates/users.hbs index bca1399a1..71aad9499 100644 --- a/app/assets/javascripts/discourse/templates/users.hbs +++ b/app/assets/javascripts/discourse/templates/users.hbs @@ -28,7 +28,7 @@ {{#each ic in model itemController="directory-item"}} {{#with ic.model as |it|}} - {{user-small user=it.user}} + {{user-info user=it.user}} {{number it.likes_received}} {{number it.likes_given}} {{number it.topic_count}} diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss index ad4004264..6af69033a 100644 --- a/app/assets/stylesheets/common/base/directory.scss +++ b/app/assets/stylesheets/common/base/directory.scss @@ -1,6 +1,10 @@ .directory { margin-bottom: 100px; + .user-info { + margin-bottom: 0; + } + .period-chooser { float: left; } diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss index 04b77bc5a..ddf9ed6e5 100644 --- a/app/assets/stylesheets/common/base/user-badges.scss +++ b/app/assets/stylesheets/common/base/user-badges.scss @@ -135,66 +135,23 @@ } } } +.user-info.medium.badge-info { + min-height: 80px; - -/* /badges/:id/:slug page styling. */ -.show-badge { - .badge-user { - text-align: center; - width: 100px; - padding: 5px 10px; - margin-bottom: 10px; - display: inline-block; - vertical-align: top; - - .details { - margin: 0 10px; - padding-top: 3px; - color: $primary; - } - - .username { - word-wrap: break-word; - } - - .date { - display: block; - color: lighten($primary, 40%); - font-size: 0.714em; - } - } -} - -.show-badge .user-badge-with-posts .badge-user { - width: 45%; - padding: 0 0 0 4%; - margin-bottom: 20px; - - .badge-info { - width: 100px; - display: block; - float: left; + .granted-on { + color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } .post-link { - width: 250px; display: block; - float: left; - margin-left: 18px; - text-align: left; + margin-top: 0.2em; } } .show-badge .badge-user-info { - margin-left: 2%; .earned { - margin-top: 15px; font-size: 1.3em; - } - .username { - margin-top: 5px; - display: block; - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + margin-bottom: 1em; } } diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss index 8ec1047f4..cba098d51 100644 --- a/app/assets/stylesheets/common/base/user.scss +++ b/app/assets/stylesheets/common/base/user.scss @@ -92,10 +92,10 @@ margin-bottom: 15px; } -.user-small { +.user-info { display: inline-block; - width: 333px; clear: both; + margin-bottom: 1em; .user-image { float: left; @@ -128,7 +128,30 @@ margin-top: 3px; color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } + } +} +.user-info.small { + width: 333px; +} + +.user-info.medium { + width: 550px; + min-height: 60px; + + .user-image { + width: 55px; + } + .user-detail { + width: 450px; + } + + .username, .name { + display: block; + } + + .name { + margin-left: 0; } } diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss index 772517243..489730fdb 100644 --- a/app/assets/stylesheets/mobile/user.scss +++ b/app/assets/stylesheets/mobile/user.scss @@ -169,7 +169,7 @@ color: $primary; } } - .user-small { + .user-info { width: 245px; } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 6e118b47f..347efcb6b 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -2855,7 +2855,8 @@ en: earned_n_times: one: "Earned this badge 1 time" other: "Earned this badge %{count} times" - more_with_badge: "Others with this badge" + granted_on: "Granted %{date}" + others_count: "Others with this badge (%{count})" title: Badges allow_title: "can be used as a title" multiple_grant: "can be awarded multiple times" diff --git a/test/javascripts/acceptance/about-test.js.es6 b/test/javascripts/acceptance/about-test.js.es6 index b45675f1a..9819ed8cb 100644 --- a/test/javascripts/acceptance/about-test.js.es6 +++ b/test/javascripts/acceptance/about-test.js.es6 @@ -4,8 +4,8 @@ acceptance("About"); test("viewing", () => { visit("/about"); andThen(() => { - ok(exists('.about.admins .user-small'), 'has admins'); - ok(exists('.about.moderators .user-small'), 'has moderators'); + ok(exists('.about.admins .user-info'), 'has admins'); + ok(exists('.about.moderators .user-info'), 'has moderators'); ok(exists('.about.stats tr td'), 'has stats'); }); });