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

settings: Move full name setting UI into modal.

Browse Source 
This makes this UI widget more consistent with its neighbors.

tabbott: This introduces a bug with how the `full_name_field` HTML is
managed; it should be done via the `server_events.js` handler.
This commit is contained in:
YJDave
2018-01-30 13:26:15 +05:30
committed by Tim Abbott
parent 8582e757cd
commit 7e8da54209
3 changed files with 63 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
static/js/settings_account.js
View File

@@ -86,6 +86,12 @@ exports.set_up = function () {
clear_password_change();
$("#change_full_name").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
overlays.open_modal('change_full_name_modal');
});
$('#change_password').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
@@ -166,14 +172,30 @@ exports.set_up = function () {
common.password_quality(field.val(), $('#pw_strength .bar'), field);
});
$("form.your-account-settings").ajaxForm({
dataType: 'json', // This seems to be ignored. We still get back an xhr.
success: function () {
settings_change_success(i18n.t("Updated settings!"));
},
error: function (xhr) {
settings_change_error(i18n.t("Error changing settings"), xhr);
},
$("#change_full_name_button").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
var change_full_name_info = $('#change_full_name_modal').find(".change_full_name_info").expectOne();
var data = {};
var full_name_field = $("#change_full_name button #full_name_value").expectOne();
data.full_name = $('.full_name_change_container').find("input[name='full_name']").val();
channel.patch({
url: '/json/settings',
data: data,
success: function (data) {
if ('full_name' in data) {
settings_change_success(i18n.t("Updated settings!"));
full_name_field.html(data.full_name);
} else {
settings_change_success(i18n.t("No changes made."));
}
overlays.close_modal('change_full_name_modal');
},
error: function (xhr) {
ui_report.error(i18n.t("Failed"), xhr, change_full_name_info);
},
});
});
$('#change_email_button').on('click', function (e) {

6
static/styles/settings.css
View File

@@ -109,7 +109,8 @@ label {
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
}
#change_email_modal {
#change_email_modal,
#change_full_name_modal {
width: 460px;
}
@@ -1097,7 +1098,8 @@ input[type=checkbox].inline-block {
}
#settings_page #change_password_modal .change_password_info,
#settings_page #change_email_modal .change_email_info {
#settings_page #change_email_modal .change_email_info,
#settings_page #change_full_name_modal .change_full_name_info {
margin: 10px;
}

43
static/templates/settings/account-settings.handlebars
View File

@@ -85,24 +85,39 @@
</div>
</form>
<form class="form-horizontal your-account-settings" action="/json/settings" method="patch">
<form class="form-horizontal full-name-change-form">
<div class="inline-block grid user-name-parent">
<div class="user-name-section inline-block">
<div class="input-group" id="name_change_container">
<label for="full_name" class="inline-block title">{{t "Full name" }}</label>
<input type="text" name="full_name" id="full_name" class="w-200 inline-block" value="{{ page_params.full_name }}" {{#if page_params.realm_name_changes_disabled}}disabled="disabled" {{/if}}/>
<i class="icon-vector-question-sign change_name_tooltip" data-toggle="tooltip"
{{#unless page_params.realm_name_changes_disabled}}style="display:none" {{/unless}}
title="{{t 'Changing your name has been disabled by your Zulip organization administrators. Contact an administrator for help.' }}"/>
<div class="warning"></div>
</div>
<div class="input-group no-border">
<label for="" class="inline-block"></label>
<button type="submit" class="button rounded w-200 sea-green input-size" name="change_settings">
{{t 'Save changes'}}
<label for="full_name" class="inline-block title">{{t "Full name" }}</label>
<a id="change_full_name" {{#if page_params.realm_name_changes_disabled}}href="#change_name" {{/if}}>
<button type="button" class="button small white rounded inline-block" id="full_name"{{#if page_params.realm_name_changes_disabled}} disabled="disabled"{{/if}}>
<span id="full_name_value">{{page_params.full_name}}</span>
<i class="fa fa-pencil"></i>
</button>
</a>
<i class="icon-vector-question-sign change_name_tooltip" data-toggle="tooltip"
{{#unless page_params.realm_name_changes_disabled}}style="display:none" {{/unless}}
title="{{t 'Changing your name has been disabled by your Zulip organization administrators. Contact an administrator for help.' }}"/>
</div>
<div id="change_full_name_modal" class="modal hide" tabindex="-1" role="dialog"
aria-labelledby="change_full_name_modal_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
<h3 id="change_full_name_modal_label">{{t "Change full name" }}</h3>
</div>
<div class="modal-body">
<div class="input-group full_name_change_container">
<label for="email">{{t "New full name" }}</label>
<input type="text" name="full_name" value="{{ page_params.full_name }}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
</div>
</div>
<div class="alert change_full_name_info"></div>
<div class="modal-footer">
<button class="button white rounded" type="button" data-dismiss="modal">{{t "Cancel" }}</button>
<button id='change_full_name_button' class="button rounded sea-green" data-dismiss="modal">{{t "Change" }}</button>
</div>
</div>
<div class="input-group">
<div class="input-group">
<label for="" class="inline-block"></label>
<button type="submit" class="button rounded w-200 btn-danger input-size" id="user_deactivate_account_button">