paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 22:13:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cynthia Lin
2018-08-21 15:31:48 -07:00
committed by Tim Abbott
parent 9e053c74cf
commit 736388b4df
7 changed files with 43 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend_tests/node_tests/settings_user_groups.js
View File

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

3
frontend_tests/zjsunit/zjquery.js
View File

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

16
static/js/settings_user_groups.js
View File

@@ -98,8 +98,8 @@ exports.populate_user_groups = function () {
if (!exports.can_edit(data.id)) { if (!exports.can_edit(data.id)) {
return; return;
} }
var cancel_button = $('#user-groups #' + data.id + ' .cancel'); var cancel_button = $('#user-groups #' + data.id + ' .save-status.btn-danger');
var saved_button = $('#user-groups #' + data.id + ' .saved'); var saved_button = $('#user-groups #' + data.id + ' .save-status.sea-green');
var save_instructions = $('#user-groups #' + data.id + ' .save-instructions'); var save_instructions = $('#user-groups #' + data.id + ' .save-instructions');
if (is_user_group_changed() && if (is_user_group_changed() &&
@@ -115,13 +115,13 @@ exports.populate_user_groups = function () {
} }
function show_saved_button() { function show_saved_button() {
var cancel_button = $('#user-groups #' + data.id + ' .cancel'); var cancel_button = $('#user-groups #' + data.id + ' .save-status.btn-danger');
var saved_button = $('#user-groups #' + data.id + ' .saved'); var saved_button = $('#user-groups #' + data.id + ' .save-status.sea-green');
var save_instructions = $('#user-groups #' + data.id + ' .save-instructions'); var save_instructions = $('#user-groups #' + data.id + ' .save-instructions');
if (!saved_button.is(':visible')) { if (!saved_button.is(':visible')) {
cancel_button.fadeOut(0); cancel_button.fadeOut(0);
save_instructions.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), delete: JSON.stringify(removed),
}, },
success: function () { success: function () {
show_saved_button(); setTimeout(show_saved_button, 200);
}, },
}); });
} }
@@ -163,7 +163,7 @@ exports.populate_user_groups = function () {
description: description, description: description,
}, },
success: function () { success: function () {
setTimeout(show_saved_button, 100); setTimeout(show_saved_button, 200);
}, },
}); });
} }
@@ -193,7 +193,7 @@ exports.populate_user_groups = function () {
return; return;
} }
if ($(event.relatedTarget).closest('#user-groups #' + data.id) && 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(); settings_user_groups.reload();
return; return;
} }

40
static/styles/settings.scss
View File

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

12
static/templates/admin_user_group_list.handlebars
View File

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

4
static/templates/non_editable_user_group.handlebars
View File

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

2
static/templates/user-groups-admin.handlebars
View File

@@ -25,5 +25,5 @@
{{/unless}} {{/unless}}
<p>{{#tr this}}Add members of your organization to mentionable user groups.{{/tr}}</p> <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> </div>