FEATURE: allow admins to prioritize full name vs username in the UI

Use the site setting prioritize_username_in_ux to switch between prioritizing
the full name vs username

app/assets/javascripts/discourse/controllers/user-card.js.es6

@@ -29,6 +29,11 @@ export default Ember.Controller.extend({
   linkWebsite: Em.computed.not('user.isBasic'),
   hasLocationOrWebsite: Em.computed.or('user.location', 'user.website_name'),
 
+  @computed('user.name')
+  nameFirst(name) {
+    return !this.get('siteSettings.prioritize_username_in_ux') && name && name.trim().length > 0;
+  },
+
   @computed('user.user_fields.@each.value')
   publicUserFields() {
     const siteUserFields = this.site.get('user_fields');

app/assets/javascripts/discourse/controllers/user.js.es6

@@ -41,7 +41,12 @@ export default Ember.Controller.extend(CanCheckEmails, {
     return viewingSelf || staff;
   },
 
-  @computed("content.badge_count")
+  @computed('model.user.name')
+  nameFirst(name) {
+    return !this.get('siteSettings.prioritize_username_in_ux') && name && name.trim().length > 0;
+  },
+
+  @computed("model.badge_count")
   showBadges(badgeCount) {
     return Discourse.SiteSettings.enable_badges && badgeCount > 0;
   },

app/assets/javascripts/discourse/templates/user-card.hbs

@@ -5,13 +5,17 @@
 
   <div class="names">
     <span>
-      <h1 class="{{staff}} {{new_user}}">
-        <a href={{user.path}} {{action "showUser"}}>{{username}} {{user-status user currentUser=currentUser}}</a>
+      <h1 class="{{staff}} {{new_user}} {{if nameFirst "full-name" "username"}}">
+        <a href={{user.path}} {{action "showUser"}}>{{if nameFirst user.name username}} {{user-status user currentUser=currentUser}}</a>
       </h1>
 
-      {{#if user.name}}
-        <h2>{{user.name}}</h2>
-      {{/if}}
+      {{#unless nameFirst}}
+        {{#if user.name}}
+          <h2 class='full-name'>{{user.name}}</h2>
+        {{/if}}
+      {{else}}
+        <h2 class='username'>{{username}}</h2>
+      {{/unless}}
 
       {{#if user.title}}
         <h2>{{user.title}}</h2>

app/assets/javascripts/discourse/templates/user/user.hbs

@@ -58,8 +58,8 @@
           </section>
 
           <div class="primary-textual">
-            <h1>{{model.username}} {{user-status model currentUser=currentUser}}</h1>
-            <h2>{{model.name}}</h2>
+            <h1 class="{{if nameFirst "full-name" "username"}}">{{if nameFirst model.user model.username}} {{user-status model currentUser=currentUser}}</h1>
+            <h2 class="{{if nameFirst "username" "full-name"}}">{{#if nameFirst}}{{model.username}}{{else}}{{model.name}}{{/if}}</h2>
             {{#if model.title}}
               <h3>{{model.title}}</h3>
             {{/if}}

app/assets/javascripts/discourse/widgets/poster-name.js.es6

@@ -26,7 +26,9 @@ export default createWidget('poster-name', {
 
   html(attrs) {
     const username = attrs.username;
-    const classNames = ['username'];
+    const name = attrs.name;
+    const nameFirst = !this.siteSettings.prioritize_username_in_ux && name && name.length > 0;
+    const classNames = nameFirst ? ['first','full-name'] : ['first','username'];
 
     if (attrs.staff) { classNames.push('staff'); }
     if (attrs.admin) { classNames.push('admin'); }
@@ -37,14 +39,14 @@ export default createWidget('poster-name', {
     if (primaryGroupName && primaryGroupName.length) {
       classNames.push(primaryGroupName);
     }
-    const nameContents = [ this.userLink(attrs, attrs.username) ];
+    const nameContents = [ this.userLink(attrs, nameFirst ? name : username) ];
     const glyph = this.posterGlyph(attrs);
     if (glyph) { nameContents.push(glyph); }
 
     const contents = [h('span', { className: classNames.join(' ') }, nameContents)];
-    const name = attrs.name;
     if (name && this.siteSettings.display_name_on_posts && sanitizeName(name) !== sanitizeName(username)) {
-      contents.push(h('span.full-name', this.userLink(attrs, name)));
+      contents.push(h('span.second.' + (nameFirst ? "username" : "full-name"),
+            this.userLink(attrs, nameFirst ? username : name)));
     }
     const title = attrs.user_title;
     if (title && title.length) {

app/assets/stylesheets/common/base/topic-post.scss

@@ -16,9 +16,11 @@
 
 .names {
  float: left;
- .username {
+
+ span.first {
    font-weight: bold;
  }
+
  span {
    font-size: 0.929em;
    padding-right: 8px;

config/locales/server.en.yml

@@ -920,6 +920,7 @@ en:
     redirect_users_to_top_page: "Automatically redirect new and long absent users to the top page."
     top_page_default_timeframe: "Default timeframe for the top view page."
     show_email_on_profile: "Show a user's email on their profile (only visible to themselves and staff)"
+    prioritize_username_in_ux: "Show username first on user page, user card and posts (when disabled name is shown first)"
 
     email_token_valid_hours: "Forgot password / activate account tokens are valid for (n) hours."
     email_token_grace_period_hours: "Forgot password / activate account tokens are still valid for a grace period of (n) hours after being redeemed."

config/site_settings.yml

@@ -344,6 +344,9 @@ users:
   show_email_on_profile:
     client: true
     default: false
+  prioritize_username_in_ux:
+    client: true
+    default: true
   email_token_valid_hours:
     default: 24
     min: 1