user groups: Improve styling of user groups in admin view.

frontend_tests/node_tests/settings_user_groups.js

@@ -63,8 +63,8 @@ run_test('can_edit', () => {
 });
 
 var user_group_selector = "#user-groups #1";
-var cancel_selector = "#user-groups #1 .cancel";
-var saved_selector = "#user-groups #1 .saved";
+var cancel_selector = "#user-groups #1 .save-status.btn-danger";
+var saved_selector = "#user-groups #1 .save-status.sea-green";
 var name_selector = "#user-groups #1 .name";
 var description_selector = "#user-groups #1 .description";
 var instructions_selector = "#user-groups #1 .save-instructions";
@@ -649,7 +649,7 @@ run_test('on_events', () => {
             };
             api_endpoint_called = false;
             fake_this.closest = function (class_name) {
-                if (class_name === ".cancel" || class_name === user_group_selector) {
+                if (class_name === ".save-status.btn-danger" || class_name === user_group_selector) {
                     return [1];
                 }
                 return [];
@@ -734,6 +734,7 @@ run_test('on_events', () => {
         };
         $(saved_selector).fadeTo = function () {
             saved_fade_to_called = true;
+            return $(saved_selector);
         };
 
         channel.patch = function (opts) {
@@ -806,6 +807,7 @@ run_test('on_events', () => {
         };
         $(saved_selector).fadeTo = function () {
             saved_fade_to_called = true;
+            return $(saved_selector);
         };
 
         var api_endpoint_called = false;

frontend_tests/zjsunit/zjquery.js

@@ -166,6 +166,9 @@ exports.make_new_elem = function (selector, opts) {
             return self;
         },
         data: noop,
+        delay: function () {
+            return self;
+        },
         debug: function () {
             return {
                 value: value,

static/js/settings_user_groups.js

@@ -98,8 +98,8 @@ exports.populate_user_groups = function () {
             if (!exports.can_edit(data.id)) {
                 return;
             }
-            var cancel_button = $('#user-groups #' + data.id + ' .cancel');
-            var saved_button = $('#user-groups #' + data.id + ' .saved');
+            var cancel_button = $('#user-groups #' + data.id + ' .save-status.btn-danger');
+            var saved_button = $('#user-groups #' + data.id + ' .save-status.sea-green');
             var save_instructions = $('#user-groups #' + data.id + ' .save-instructions');
 
             if (is_user_group_changed() &&
@@ -115,13 +115,13 @@ exports.populate_user_groups = function () {
         }
 
         function show_saved_button() {
-            var cancel_button = $('#user-groups #' + data.id + ' .cancel');
-            var saved_button = $('#user-groups #' + data.id + ' .saved');
+            var cancel_button = $('#user-groups #' + data.id + ' .save-status.btn-danger');
+            var saved_button = $('#user-groups #' + data.id + ' .save-status.sea-green');
             var save_instructions = $('#user-groups #' + data.id + ' .save-instructions');
             if (!saved_button.is(':visible')) {
                 cancel_button.fadeOut(0);
                 save_instructions.fadeOut(0);
-                saved_button.css({display: 'inline-block', opacity: 0}).fadeTo(400, 1);
+                saved_button.css({display: 'inline-block', opacity: 0}).fadeTo(400, 1).delay(2000).fadeTo(400, 0);
             }
         }
 
@@ -142,7 +142,7 @@ exports.populate_user_groups = function () {
                     delete: JSON.stringify(removed),
                 },
                 success: function () {
-                    show_saved_button();
+                    setTimeout(show_saved_button, 200);
                 },
             });
         }
@@ -163,7 +163,7 @@ exports.populate_user_groups = function () {
                     description: description,
                 },
                 success: function () {
-                    setTimeout(show_saved_button, 100);
+                    setTimeout(show_saved_button, 200);
                 },
             });
         }
@@ -193,7 +193,7 @@ exports.populate_user_groups = function () {
                 return;
             }
             if ($(event.relatedTarget).closest('#user-groups #' + data.id) &&
-                $(event.relatedTarget).closest('.cancel').length) {
+                $(event.relatedTarget).closest('.save-status.btn-danger').length) {
                 settings_user_groups.reload();
                 return;
             }

static/styles/settings.scss

@@ -1062,14 +1062,21 @@ input[type=checkbox].inline-block {
 #user-groups .user-group h4 {
     font-weight: normal;
     margin: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: left;
 }
 
-#user-groups .user-group p {
-    font-weight: bold;
+#user-groups p {
     line-height: 2;
-    margin: 0px;
+    margin: 0;
 }
 
+#user-groups .spacer {
+    margin: 0 2px;
+}
+
+#user-groups .subscribers,
 #user-groups .user-group h4 > .name {
     font-weight: bold;
 }
@@ -1101,10 +1108,6 @@ input[type=checkbox].inline-block {
     opacity: 0.5;
 }
 
-#user-groups .user-group h4 > .button {
-    vertical-align: 1px;
-}
-
 #user-groups .ntm h4 > .button {
     cursor: not-allowed;
     display: none;
@@ -1115,35 +1118,22 @@ input[type=checkbox].inline-block {
 }
 
 #user-groups .save-status {
-    vertical-align: middle;
-    height: auto;
-    width: auto;
-    background: transparent;
+    background-color: transparent;
     padding: 2px 5px;
     border-radius: 4px;
     margin-left: 10px;
-}
-
-#user-groups .save-status.saved {
+    border-style: solid;
+    border-width: 1px;
     display: none;
     opacity: 0;
-    border: 1px solid hsl(178, 100%, 40%);
-    color: hsl(178, 100%, 40%);
-}
-
-#user-groups .save-status.cancel {
-    display: none;
-    opacity: 0;
-    border: 1px solid #333;
-    color: #333;
 }
 
 #user-groups .checkmark {
-    width: 13px;
+    height: 12px;
 }
 
 #user-groups .delete {
-    float: right;
+    margin-left: auto;
 }
 
 #user-groups .save-instructions {

static/templates/admin_user_group_list.handlebars

@@ -2,27 +2,25 @@
 <div class="user-group white-box" id="{{id}}">
     <h4>
         <span class="name" data-placeholder="{{t 'Name' }}" contenteditable="true" spellcheck="false">{{name}}</span>
-        —
+        <span class="spacer">—</span>
         <span class="description" data-placeholder="{{t 'Description' }}" contenteditable="true">{{description}}</span>
-        <button class="save-status saved">
+        <button class="button save-status sea-green small">
             <img class="checkmark" src="/static/images/checkbox-green.svg" />
             {{t 'Saved' }}
         </button>
-        <button class="save-status cancel">
+        <button class="button save-status btn-danger small">
             {{t 'Discard changes' }}
         </button>
         <button class="button rounded small delete btn-danger">
             {{t 'Delete' }}
         </button>
     </h4>
-    <p>
-        {{t 'Subscribers' }}
+    <p class="subscribers">{{t 'Subscribers' }}</p>
     <div class="pill-container" data-group-pills="{{id}}">
         <div class="input" contenteditable="true" data-placeholder="{{t 'Add member...' }}"></div>
     </div>
-        <div class="save-instructions">
+    <p class="save-instructions">
         {{t 'Click outside the input box to save. We\'ll automatically notify anyone that was added or removed.'}}
-        </div>
     </p>
 </div>
 {{/with}}

static/templates/non_editable_user_group.handlebars

@@ -5,9 +5,7 @@
         —
         <span class="description" data-placeholder="{{t 'Description' }}">{{description}}</span>
     </h4>
-    <p>
-        {{t 'Subscribers' }}
+    <p class="subscribers">{{t 'Subscribers' }}</p>
     <div class="pill-container notmem" data-group-pills="{{id}}"></div>
-    </p>
 </div>
 {{/with}}

static/templates/user-groups-admin.handlebars

@@ -25,5 +25,5 @@
     {{/unless}}
 
     <p>{{#tr this}}Add members of your organization to mentionable user groups.{{/tr}}</p>
-    <div id="user-groups"></div>
+    <div id="user-groups" class="new-style"></div>
 </div>