Applied the switcher widget for the settings user notifications

This commit is contained in:
Alex Tselegidis 2020-09-07 14:51:52 +03:00
parent 4a7d6e5d6e
commit 64cdbfb445
3 changed files with 9 additions and 23 deletions

View file

@ -492,10 +492,12 @@
<?= render_timezone_dropdown('id="timezone" class="form-control"') ?> <?= render_timezone_dropdown('id="timezone" class="form-control"') ?>
</div> </div>
<button type="button" id="user-notifications" class="btn btn-light" data-toggle="button"> <div class="custom-control custom-switch">
<i class="far fa-envelope"></i> <input type="checkbox" class="custom-control-input" id="user-notifications">
<?= lang('receive_notifications') ?> <label class="custom-control-label" for="user-notifications">
</button> <?= lang('receive_notifications') ?>
</label>
</div>
</fieldset> </fieldset>
</div> </div>
</form> </form>

View file

@ -123,12 +123,7 @@ window.BackendSettings = window.BackendSettings || {};
$('#username').val(GlobalVariables.settings.user.settings.username); $('#username').val(GlobalVariables.settings.user.settings.username);
$('#password, #retype-password').val(''); $('#password, #retype-password').val('');
$('#calendar-view').val(GlobalVariables.settings.user.settings.calendar_view); $('#calendar-view').val(GlobalVariables.settings.user.settings.calendar_view);
$('#user-notifications').prop('checked', Boolean(Number(GlobalVariables.settings.user.settings.notifications)));
if (GlobalVariables.settings.user.settings.notifications === true) {
$('#user-notifications').addClass('active');
} else {
$('#user-notifications').removeClass('active');
}
// Set default settings helper. // Set default settings helper.
settings = new SystemSettings(); settings = new SystemSettings();
@ -166,11 +161,7 @@ window.BackendSettings = window.BackendSettings || {};
* *
* Change the visible tab contents. * Change the visible tab contents.
*/ */
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) { $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
// Bootstrap has a bug with toggle buttons. Their toggle state is lost when the button is hidden or shown.
// Show before anything else we need to store the toggle and apply it whenever the user tab is clicked.
var areNotificationsActive = $('#user-notifications').hasClass('active');
var href = $(this).attr('href'); var href = $(this).attr('href');
if (href === '#general') { if (href === '#general') {
@ -181,13 +172,6 @@ window.BackendSettings = window.BackendSettings || {};
settings = new SystemSettings(); settings = new SystemSettings();
} else if (href === '#current-user') { } else if (href === '#current-user') {
settings = new UserSettings(); settings = new UserSettings();
// Apply toggle state to user notifications button.
if (areNotificationsActive) {
$('#user-notifications').addClass('active');
} else {
$('#user-notifications').removeClass('active');
}
} }
Backend.placeFooterToBottom(); Backend.placeFooterToBottom();

View file

@ -42,7 +42,7 @@
timezone: $('#timezone').val(), timezone: $('#timezone').val(),
settings: { settings: {
username: $('#username').val(), username: $('#username').val(),
notifications: $('#user-notifications').hasClass('active'), notifications: $('#user-notifications').prop('checked'),
calendar_view: $('#calendar-view').val() calendar_view: $('#calendar-view').val()
} }
}; };