admin user list: Replace the buttons with icons.

1. Replaced the deactivate and reactivate buttons with icons.
2. Added (you) near the current user name to denote his/her account in
the entire user list.

Tweaked by tabbott to reuse the (you) formatting from the right
sidebar here for readability and consistency.

Fixes #6313.

frontend_tests/casper_tests/13-user-deactivation.js

@@ -25,7 +25,7 @@ casper.then(function () {
 // Test user deactivation and reactivation
 casper.then(function () {
     casper.waitUntilVisible(user_row('cordelia'), function () {
-        casper.test.assertSelectorHasText(user_row('cordelia'), 'Deactivate');
+        casper.test.assertExists('.fa-user-times', 'Deactivate icon available');
         casper.click(user_row('cordelia') + ' .deactivate');
         casper.test.assertTextExists('Deactivate cordelia@zulip.com', 'Deactivate modal has right user');
         casper.test.assertTextExists('Deactivate now', 'Deactivate now button available');
@@ -35,21 +35,21 @@ casper.then(function () {
 
 casper.then(function () {
     casper.waitUntilVisible(user_row('cordelia') + '.deactivated_user', function () {
-        casper.test.assertSelectorHasText(user_row('cordelia'), 'Reactivate');
+        casper.test.assertExists('.fa-user-plus', 'Reactivate icon available');
         casper.click(user_row('cordelia') + ' .reactivate');
     });
 });
 
 casper.then(function () {
     casper.waitUntilVisible(user_row('cordelia') + ':not(.deactivated_user)', function () {
-        casper.test.assertSelectorHasText(user_row('cordelia'), 'Deactivate');
+        casper.test.assertExists('.fa-user-times', 'Deactivate icon available');
     });
 });
 
 casper.then(function () {
     // Test Deactivated users section of admin page
     casper.waitUntilVisible(user_row('cordelia'), function () {
-        casper.test.assertSelectorHasText(user_row('cordelia'), 'Deactivate');
+        casper.test.assertExists('.fa-user-times', 'Deactivate icon available');
         casper.click(user_row('cordelia') + ' .deactivate');
         casper.test.assertTextExists('Deactivate cordelia@zulip.com', 'Deactivate modal has right user');
         casper.test.assertTextExists('Deactivate now', 'Deactivate now button available');
@@ -66,14 +66,14 @@ casper.then(function () {
 
 
     casper.waitUntilVisible('#admin_deactivated_users_table ' + user_row('cordelia') + ' .reactivate', function () {
-        casper.test.assertSelectorHasText('#admin_deactivated_users_table ' + user_row('cordelia') + '', 'Reactivate');
+        casper.test.assertExists('.fa-user-plus', 'Reactive icon available');
         casper.click('#admin_deactivated_users_table ' + user_row('cordelia') + ' .reactivate');
     });
 });
 
 casper.then(function () {
     casper.waitUntilVisible('#admin_deactivated_users_table ' + user_row('cordelia') + ' button:not(.reactivate)', function () {
-        casper.test.assertSelectorHasText('#admin_deactivated_users_table ' + user_row('cordelia') + '', 'Deactivate');
+        casper.test.assertExists('.fa-user-times', 'Deactivate icon available');
     });
 });
 
@@ -85,21 +85,21 @@ casper.then(function () {
 
 casper.then(function () {
     casper.waitUntilVisible(user_row('default-bot'), function () {
-        casper.test.assertSelectorHasText(user_row('default-bot'), 'Deactivate');
+        casper.test.assertExists('.fa-user-times', 'Deactivate icon available');
         casper.click(user_row('default-bot') + ' .deactivate');
     });
 });
 
 casper.then(function () {
     casper.waitUntilVisible(user_row('default-bot') + '.deactivated_user', function () {
-        casper.test.assertSelectorHasText(user_row('default-bot'), 'Reactivate');
+        casper.test.assertExists('.fa-user-plus', 'Reactivate icon available');
         casper.click(user_row('default-bot') + ' .reactivate');
     });
 });
 
 casper.then(function () {
     casper.waitUntilVisible(user_row('default-bot') + ':not(.deactivated_user)', function () {
-        casper.test.assertSelectorHasText(user_row('default-bot'), 'Deactivate');
+        casper.test.assertExists('.fa-user-times', 'Deactivate icon available');
     });
 });
 

static/js/settings_users.js

@@ -78,7 +78,8 @@ function update_view_on_deactivate(row) {
     row.find('i.deactivated-user-icon').show();
     button.addClass("btn-warning reactivate");
     button.removeClass("deactivate btn-danger");
-    button.text(i18n.t("Reactivate"));
+    button.html("<i class='fa fa-user-plus' aria-hidden='true'></i>");
+    button.attr('title', 'Reactivate');
     row.addClass("deactivated_user");
 
     if (user_role) {
@@ -95,7 +96,8 @@ function update_view_on_reactivate(row) {
     row.find('i.deactivated-user-icon').hide();
     button.addClass("btn-danger deactivate");
     button.removeClass("btn-warning reactivate");
-    button.text(i18n.t("Deactivate"));
+    button.attr('title', 'Deactivate');
+    button.html('<i class="fa fa-user-plus" aria-hidden="true"></i>');
     row.removeClass("deactivated_user");
 
     if (user_role) {

static/styles/right-sidebar.scss

@@ -120,9 +120,10 @@
 
 .user-presence-link {
     width: calc(100% - 24px);
-    .my_user_status {
+}
-        opacity: 0.5;
+
-    }
+.my_user_status {
+    opacity: 0.5;
 }
 
 .group-pm-link {

static/templates/admin_user_list.hbs

@@ -1,7 +1,7 @@
 {{#with user}}
 <tr class="user_row{{#unless is_active}} deactivated_user{{/unless}}" data-user-id="{{user_id}}">
     <td>
-        <span class="user_name">{{full_name}}</span>
+        <span class="user_name" >{{full_name}} {{#if ../is_current_user}}<span class="my_user_status">({{t 'you' }})</span>{{/if}}</span>
         <i class="fa fa-ban deactivated-user-icon" title="{{t 'User is deactivated' }}" {{#if is_active}}style="display: none;"{{/if}}></i>
     </td>
     {{#if ../display_email}}
@@ -44,12 +44,12 @@
     <td class="actions">
         <span class="user-status-settings">
             {{#if is_active}}
-            <button class="button rounded small deactivate btn-danger" {{#if ../is_current_user}}disabled="disabled"{{/if}}>
+            <button title="{{t 'Deactivate' }}" class="button rounded small deactivate btn-danger" {{#if ../is_current_user}}disabled="disabled"{{/if}}>
-                {{t "Deactivate" }}
+                <i class="fa fa-user-times" aria-hidden="true"></i>
             </button>
             {{else}}
-            <button class="button rounded small reactivate btn-warning">
+            <button title="{{t 'Reactivate' }}" class="button rounded small reactivate btn-warning">
-                {{t "Reactivate" }}
+                <i class="fa fa-user-plus" aria-hidden="true"></i>
             </button>
             {{/if}}
         </span>