Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

settings: Add save instructions below pill container on changes. 

Fixes #8088.
This commit is contained in:
Shubham Padia 2018-03-15 17:26:31 +05:30 committed by Tim Abbott
parent dd5ce49ce0
commit 4fb1704e6e
4 changed files with 51 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend_tests/node_tests/settings_user_groups.js
View File

@ -29,6 +29,7 @@ var cancel_selector = "#user-groups #1 .cancel";
var saved_selector = "#user-groups #1 .saved";
var name_selector = "#user-groups #1 .name";
var description_selector = "#user-groups #1 .description";
var instructions_selector = "#user-groups #1 .save-instructions";
(function test_populate_user_groups() {
var realm_user_group = {
@ -178,6 +179,7 @@ var description_selector = "#user-groups #1 .description";
var saved_fade_out_called = false;
var cancel_fade_to_called = false;
var instructions_fade_to_called = false;
$(saved_selector).fadeOut = function () {
saved_fade_out_called = true;
};
@ -193,12 +195,25 @@ var description_selector = "#user-groups #1 .description";
$(cancel_selector).fadeTo = function () {
cancel_fade_to_called = true;
};
$(instructions_selector).css = function (data) {
if (typeof(data) === 'string') {
assert.equal(data, 'display');
}
assert.equal(typeof(data), 'object');
assert.equal(data.display, 'block');
assert.equal(data.opacity, '0');
return $(instructions_selector);
};
$(instructions_selector).fadeTo = function () {
instructions_fade_to_called = true;
};
text_cleared = false;
config.updater(alice);
// update_cancel_button is called.
assert(saved_fade_out_called);
assert(cancel_fade_to_called);
assert(instructions_fade_to_called);
assert.equal(text_cleared, true);
}());
input_typeahead_called = true;
@ -458,20 +473,27 @@ var description_selector = "#user-groups #1 .description";
};
var cancel_fade_out_called = false;
var instructions_fade_out_called = false;
$(cancel_selector).show();
$(cancel_selector).fadeOut = function () {
cancel_fade_out_called = true;
};
$(instructions_selector).fadeOut = function () {
instructions_fade_out_called = true;
};
// Cancel button removed if user group if user group has no changes.
var fake_this = $.create('fake-#update_cancel_button');
handler_name.call(fake_this);
assert(cancel_fade_out_called);
assert(instructions_fade_out_called);
// Check for handler_desc to achieve 100% coverage.
cancel_fade_out_called = false;
instructions_fade_out_called = false;
handler_desc.call(fake_this);
assert(cancel_fade_out_called);
assert(instructions_fade_out_called);
}());
(function test_user_groups_save_group_changes_triggered() {
@ -489,6 +511,10 @@ var description_selector = "#user-groups #1 .description";
var api_endpoint_called = false;
var cancel_fade_out_called = false;
var saved_fade_to_called = false;
var instructions_fade_out_called = false;
$(instructions_selector).fadeOut = function () {
instructions_fade_out_called = true;
};
$(cancel_selector).fadeOut = function () {
cancel_fade_out_called = true;
};
@ -516,6 +542,7 @@ var description_selector = "#user-groups #1 .description";
});
opts.success();
assert(cancel_fade_out_called);
assert(instructions_fade_out_called);
assert(saved_fade_to_called);
}());
};
@ -562,6 +589,10 @@ var description_selector = "#user-groups #1 .description";
var cancel_fade_out_called = false;
var saved_fade_to_called = false;
var instructions_fade_out_called = false;
$(instructions_selector).fadeOut = function () {
instructions_fade_out_called = true;
};
$(cancel_selector).fadeOut = function () {
cancel_fade_out_called = true;
};
@ -582,6 +613,7 @@ var description_selector = "#user-groups #1 .description";
(function test_post_success() {
opts.success();
assert(cancel_fade_out_called);
assert(instructions_fade_out_called);
assert(saved_fade_to_called);
}());
};

9
static/js/settings_user_groups.js
View File

@ -51,7 +51,7 @@ exports.populate_user_groups = function () {
});
}
data.members.keys().forEach(function (user_id) {
data.members.keys().forEach(function (user_id) {
var user = people.get_person_from_user_id(user_id);
if (user) {
@ -79,21 +79,28 @@ exports.populate_user_groups = function () {
function update_cancel_button() {
var cancel_button = $('#user-groups #' + data.id + ' .cancel');
var saved_button = $('#user-groups #' + data.id + ' .saved');
var save_instructions = $('#user-groups #' + data.id + ' .save-instructions');
if (is_user_group_changed() &&
!cancel_button.is(':visible')) {
saved_button.fadeOut(0);
cancel_button.css({display: 'inline-block', opacity: 0}).fadeTo(400, 1);
save_instructions.css({display: 'block', opacity: 0}).fadeTo(400, 1);
} else if (!is_user_group_changed() &&
cancel_button.is(':visible')) {
cancel_button.fadeOut();
save_instructions.fadeOut();
}
}
function show_saved_button() {
var cancel_button = $('#user-groups #' + data.id + ' .cancel');
var saved_button = $('#user-groups #' + data.id + ' .saved');
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);
}
}

7
static/styles/settings.css
View File

@ -979,6 +979,13 @@ input[type=checkbox].inline-block {
float: right;
}
#user-groups .save-instructions {
display: none;
opacity: 0;
color: #333;
font-size: 0.9em;
}
/* -- new settings overlay -- */
#settings_page {
height: 95vh;

5
static/templates/admin_user_group_list.handlebars
View File

@ -9,7 +9,7 @@
{{t 'Saved' }}
</button>
<button class="save-status cancel">
{{t 'Cancel' }}
{{t 'Discard changes' }}
</button>
<button class="button rounded small delete btn-danger">
{{t 'Delete' }}
@ -20,6 +20,9 @@
<div class="pill-container" data-group-pills="{{name}}">
<div class="input" contenteditable="true" data-placeholder="{{t 'Add member...' }}"></div>
</div>
<div 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}}