UX: admin badge page improvements

app/assets/javascripts/admin/routes/admin-badges-index.js.es6

@@ -0,0 +1,23 @@
+import { emojiUrlFor } from "discourse/lib/text";
+
+const badgeIntroLinks = [
+  {
+    text: "admin.badges.badge_intro.what_are_badges_title",
+    href: "https://meta.discourse.org/t/32540",
+    icon: "book"
+  },
+  {
+    text: "admin.badges.badge_intro.badge_query_examples_title",
+    href: "https://meta.discourse.org/t/18978",
+    icon: "book"
+  }
+];
+
+export default Ember.Route.extend({
+  setupController(controller) {
+    controller.setProperties({
+      badgeIntroLinks,
+      badgeIntroEmoji: emojiUrlFor("woman_student:t4")
+    });
+  }
+});

app/assets/javascripts/admin/templates/badges-index.hbs

@@ -1,9 +1,16 @@
-{{#d-section class="current-badge content-body"}}
+{{#d-section class="current-badges"}}
-  <p>{{i18n 'admin.badges.none_selected'}}</p>
+  <div class="badge-intro">
-
+    <img src={{badgeIntroEmoji}} class="badge-intro-emoji">
-  <div>
+    <div class="content-wrapper">
-    {{#link-to 'adminBadges.show' 'new' class="btn btn-default"}}
+      <h1>{{i18n 'admin.badges.badge_intro.title'}}</h1>
-      {{d-icon "plus"}} {{i18n 'admin.badges.new'}}
+      <div class="external-resources">
-    {{/link-to}}
+        {{#each badgeIntroLinks as |link|}}
+          <a href={{link.href}} class="external-link" target="_blank">
+            {{d-icon link.icon}}
+            <span>{{I18n link.text}}</span>
+          </a>
+        {{/each}}
+      </div>
+    </div>
   </div>
 {{/d-section}}

app/assets/javascripts/admin/templates/badges.hbs

@@ -1,10 +1,17 @@
 <div class="badges">
-
+  <div class="badges-header">
+    <h3 class="badges-heading">{{i18n 'admin.badges.title'}}</h3>
+    <div class="create-new-badge">
+      {{#link-to 'adminBadges.show' 'new' class="btn btn-primary"}}
+        {{d-icon "plus"}}
+        <span>{{i18n 'admin.badges.new'}}</span>
+      {{/link-to}}
+    </div>
+  </div>
   <div class='content-list'>
-    <h3>{{i18n 'admin.badges.title'}}</h3>
+    <ul class="admin-badge-list">
-    <ul>
       {{#each model as |badge|}}
-      <li>
+        <li class="admin-badge-list-item">
           {{#link-to 'adminBadges.show' badge.id}}
             {{badge-button badge=badge}}
             {{#if badge.newBadge}}
@@ -14,12 +21,6 @@
         </li>
       {{/each}}
     </ul>
-    {{#link-to 'adminBadges.show' 'new' class="btn btn-default"}}
-      {{d-icon "plus"}} {{i18n 'admin.badges.new'}}
-    {{/link-to}}
-    <br>
-    <br>
   </div>
-
   {{outlet}}
 </div>

app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs

@@ -1,6 +1,6 @@
-{{#d-modal-body title="admin.badges.badge_groupings.modal_title"}}
+{{#d-modal-body title="admin.badges.badge_groupings.modal_title" class="badge-groupings-modal"}}
-  <div>
+  <div class="badge-groupings">
-    <ul class='badge-groupings'>
+    <ul class='badge-groupings-list'>
       {{#each workingCopy as |wc|}}
         <li class="badge-grouping-item">
           <div class="badge-grouping">
@@ -8,22 +8,22 @@
               {{input value=wc.name class="badge-grouping-name-input"}}
               <button {{action "save" wc}} class="btn no-text">{{d-icon 'check'}}</button>
             {{else}}
-            {{wc.displayName}}
+              <span>{{wc.displayName}}</span>
             {{/if}}
           </div>
           <div class='actions'>
-          <button {{action "edit" wc}} class="btn no-text" disabled={{wc.system}}>{{d-icon "pencil-alt"}}</button>
+            <button {{action "edit" wc}} class="btn no-text" disabled={{wc.system}}>{{d-icon 'pencil-alt'}}</button>
-          <button {{action "up" wc}} class="btn no-text">{{d-icon 'toggle-up'}}</button>
+            <button {{action "up" wc}} class="btn no-text">{{d-icon 'chevron-up'}}</button>
-          <button {{action "down" wc}} class="btn no-text">{{d-icon 'toggle-down'}}</button>
+            <button {{action "down" wc}} class="btn no-text">{{d-icon 'chevron-down'}}</button>
-          <button {{action "delete" wc}} class="btn no-text btn-danger" disabled={{wc.system}}>{{d-icon 'times'}}</button>
+            <button {{action "delete" wc}} class="btn no-text btn-danger"
+             disabled={{wc.system}}>{{d-icon 'times'}}</button>
           </div>
         </li>
       {{/each}}
     </ul>
   </div>
-  <button class='btn' {{action "add"}}>{{i18n 'admin.badges.new'}}</button>
+  <button class='btn new-badge-grouping' {{action "add"}}>{{i18n 'admin.badges.new'}}</button>
 {{/d-modal-body}}
-
 <div class="modal-footer">
   <button class='btn btn-primary' {{action "saveAll"}} disabled={{submitDisabled}}>{{i18n 'admin.badges.save'}}</button>
   {{d-modal-cancel close=(route-action "closeModal")}}

app/assets/stylesheets/common/admin/badges.scss

@@ -1,9 +1,54 @@
 // Styles for admin/badges
-
+.admin-badges {
-// Badges area
+  // flex page layout
   .badges {
-  .content-list ul {
+    display: flex;
-    margin-bottom: 10px;
+    flex-wrap: wrap;
+    .badges-header {
+      display: flex;
+      align-items: center;
+      flex: 1 0 100%;
+      .create-new-badge {
+        margin-left: auto;
+      }
+    }
+    .badge-intro {
+      display: inline-flex;
+      flex: 0 1 50%;
+    }
+    .content-list {
+      flex: 0 0 27%;
+    }
+    .current-badges {
+      display: flex;
+      justify-content: center;
+      flex: 1 1 72%;
+    }
+  }
+  .badges-header {
+    padding: 10px 0;
+    border-top: 1px solid $primary-low;
+    border-bottom: 1px solid $primary-low;
+    .badges-heading {
+      margin: 0;
+      padding: 0 10px;
+    }
+  }
+  .content-list {
+    .admin-badge-list {
+      height: 70vh;
+      overflow-y: scroll;
+      border-right: 1px solid $primary-low;
+      border-left: 1px solid $primary-low;
+      border-bottom: 1px solid $primary-low;
+      .admin-badge-list-item {
+        &:first-child {
+          border-top: none;
+        }
+        &:last-child {
+          border-top: none;
+        }
+      }
       .list-badge {
         float: right;
         font-size: $font-down-1;
@@ -14,18 +59,37 @@
         border-radius: 3px;
       }
     }
+    .user-badge {
+      border: none;
+      background-color: unset;
+    }
+  }
+  .badge-intro {
+    margin-top: 10%;
+    .badge-intro-emoji {
+      // it's an emoji so we want fixed deminsions
+      height: 55px;
+      width: 55px;
+      margin-top: 5px;
+      margin-right: 5px;
+      flex: 0 0 auto; // IE flex fix
+    }
+    .external-link {
+      display: block;
+      margin-bottom: 5px;
+    }
+  }
   .current-badge {
     margin: 20px;
     p.help {
       margin: 0;
-      color: dark-light-choose($primary-medium, $secondary-medium);
+      margin-top: 5px;
+      color: $primary-medium;
       font-size: $font-down-1;
     }
-
     .badge-grouping-control {
       display: flex;
       align-items: center;
-
       .badge-selector {
         margin-right: 5px;
       }
@@ -35,19 +99,12 @@
     .ace-wrapper {
       position: relative;
       height: 270px;
-      margin-bottom: 10px;
       .ace_editor {
         position: absolute;
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
-        border: 1px solid #e9e9e9;
-        border-radius: 3px;
-        .ace_gutter {
-          border-right: 1px solid #e9e9e9;
-          background: #f4f4f4;
-        }
       }
       &[data-disabled="true"] {
         cursor: not-allowed;
@@ -60,10 +117,6 @@
         }
       }
     }
-    .delete-link {
-      margin-left: 15px;
-      margin-top: 5px;
-    }
     textarea {
       height: 200px;
     }
@@ -71,7 +124,7 @@
   .current-badge-actions {
     margin: 10px;
     padding: 10px;
-    border-top: 1px solid dark-light-choose($primary-low, $secondary-high);
+    border-top: 1px solid $primary-low;
   }
   .buttons {
     float: left;
@@ -85,33 +138,40 @@
   }
 }
 
+// badge-grouping modal
+.badge-groupings-modal {
+  .badge-groupings {
+    margin-bottom: 10px;
+  }
+  .badge-groupings-list {
+    list-style: none;
+    margin: 0;
+    .badge-grouping-item {
+      border-bottom: 1px solid $primary-low;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px 0;
+    }
+    .badge-grouping {
+      .badge-grouping-name-input {
+        margin: 0;
+      }
+    }
+  }
+}
+
+// badge preview modal
 .badge-query-preview {
-  .grant-count,
+  .badge-errors,
-  .sample,
-  .error-header {
-    margin-left: 10px;
-  }
-  .badge-errors {
-    font-size: $font-0;
-    line-height: $line-height-medium;
-    padding: 4px;
-    background-color: $primary-low;
-  }
   .badge-query-plan {
-    font-size: $font-down-1;
+    padding: 5px;
-    line-height: $line-height-medium;
-    padding: 4px;
     background-color: $primary-low;
   }
   .count-warning {
-    background-color: dark-light-diff(
+    background-color: $danger-low;
-      rgba($danger, 0.7),
+    margin-bottom: 5px;
-      $secondary,
+    padding: 10px;
-      50%,
-      -60%
-    );
-    margin: 0 0 7px 0;
-    padding: 10px 20px;
     p {
       margin: 0;
     }
@@ -122,28 +182,29 @@
   }
 }
 
-.badge-groupings {
+// mobile specific styles - mostly commmon style overrides
-  list-style: none;
+// TODO move to mobile sheet once mobile view has a seprate template.
-  margin: 0;
+.mobile-view {
-  padding: 10px 3px;
+  .admin-badges {
-
+    .badges {
-  .badge-grouping-item {
+      margin: 0 0.25em;
-    border-bottom: 1px solid #dfdfdf;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     }
-
+    .content-list {
-  .badge-grouping {
+      flex: 0 0 100%;
-    .badge-grouping-name-input {
+      .admin-badge-list {
-      margin: 0;
+        max-height: 40vh;
+        margin-right: 0;
       }
     }
-
+    .badge-intro {
-  .actions {
+      flex: 0 1 75%;
-    float: right;
+    }
-    .btn {
+    .current-badge {
-      padding: 3px 6px;
+      margin: 20px 0;
+      width: 100%;
+    }
+    input[type="text"] {
+      width: 100%;
     }
   }
 }

app/assets/stylesheets/common/base/user-badges.scss

@@ -8,15 +8,16 @@
   align-items: center;
   background-color: $secondary;
   margin: 0 0 3px;
-  .d-icon {
-    margin-right: 0.25em;
-  }
 
   img {
     height: 16px;
     width: 16px;
   }
 
+  .badge-display-name {
+    margin-left: 0.25em;
+  }
+
   &.badge-type-gold .fa {
     color: $gold !important;
   }

config/locales/client.en.yml

@@ -4115,6 +4115,11 @@ en:
             with_post: <span class="username">%{username}</span> for post in %{link}
             with_post_time: <span class="username">%{username}</span> for post in %{link} at <span class="time">%{time}</span>
             with_time: <span class="username">%{username}</span> at <span class="time">%{time}</span>
+        badge_intro:
+          title: 'Select an existing badge or create a new one to get started'
+          what_are_badges_title: 'What are badges?'
+          badge_query_examples_title: 'Badge query examples'
+
 
       emoji:
         title: "Emoji"