From e9cce46cf0df1aa62b9c0ba169a647c7d06e4c8a Mon Sep 17 00:00:00 2001 From: Ryan Wyllie Date: Fri, 22 Jul 2016 03:02:42 +0000 Subject: [PATCH] MDL-54698 message: change preferences to checkboxes --- ...eferences_notifications_list_controller.js | 14 +++- .../notification_list_processor.php | 65 +++++----------- .../preferences_notifications_list.mustache | 76 ++++++++++--------- theme/bootstrapbase/less/moodle/message.less | 47 +++++------- theme/bootstrapbase/style/moodle.css | 30 ++++---- 5 files changed, 99 insertions(+), 133 deletions(-) diff --git a/message/amd/src/preferences_notifications_list_controller.js b/message/amd/src/preferences_notifications_list_controller.js index 7de542f6fc2..21063b12207 100644 --- a/message/amd/src/preferences_notifications_list_controller.js +++ b/message/amd/src/preferences_notifications_list_controller.js @@ -26,8 +26,9 @@ */ define(['jquery', 'core_message/notification_preference'], function($, NotificationPreference) { var SELECTORS = { + PREFERENCE: '[data-state]', PREFERENCE_ROW: '.preference-row', - STATE_INPUTS: '[data-state] input', + PREFERENCE_INPUT: '[data-state] input', }; /** @@ -42,9 +43,14 @@ define(['jquery', 'core_message/notification_preference'], function($, Notificat this.root.on('change', function(e) { if (!this.isDisabled()) { + var preferenceElement = $(e.target).closest(SELECTORS.PREFERENCE); var preferenceRow = $(e.target).closest(SELECTORS.PREFERENCE_ROW); var preference = new NotificationPreference(preferenceRow, this.userId); - preference.save(); + + preferenceElement.addClass('loading'); + preference.save().always(function() { + preferenceElement.removeClass('loading'); + }); } }.bind(this)); @@ -74,7 +80,7 @@ define(['jquery', 'core_message/notification_preference'], function($, Notificat */ PreferencesController.prototype.setDisabled = function() { this.root.addClass('disabled'); - this.root.find(SELECTORS.STATE_INPUTS).prop('disabled', true); + this.root.find(SELECTORS.PREFERENCE_INPUT).prop('disabled', true); }; /** @@ -84,7 +90,7 @@ define(['jquery', 'core_message/notification_preference'], function($, Notificat */ PreferencesController.prototype.setEnabled = function() { this.root.removeClass('disabled'); - this.root.find(SELECTORS.STATE_INPUTS).prop('disabled', false); + this.root.find(SELECTORS.PREFERENCE_INPUT).prop('disabled', false); }; return PreferencesController; diff --git a/message/classes/output/preferences/notification_list_processor.php b/message/classes/output/preferences/notification_list_processor.php index 6c4df64b4fb..afca0875e09 100644 --- a/message/classes/output/preferences/notification_list_processor.php +++ b/message/classes/output/preferences/notification_list_processor.php @@ -110,19 +110,29 @@ class notification_list_processor implements templatable, renderable { $processor = $this->processor; $provider = $this->provider; $preferences = $this->preferences; - - $context = [ - 'displayname' => get_string('pluginname', 'message_'.$processor->name), - 'name' => $processor->name, - 'locked' => false, - 'radioname' => strtolower(str_replace(" ", "-", $processor->name)), - 'states' => [] - ]; - // determine the default setting $preferencebase = $this->get_preference_base($provider); $permitted = MESSAGE_DEFAULT_PERMITTED; $defaultpreferences = get_message_output_default_preferences(); $defaultpreference = $processor->name.'_provider_'.$preferencebase.'_permitted'; + $context = [ + 'displayname' => get_string('pluginname', 'message_'.$processor->name), + 'name' => $processor->name, + 'locked' => false, + 'loggedin' => [ + 'name' => 'loggedin', + 'displayname' => get_string('loggedindescription', 'message'), + 'checked' => $this->is_preference_enabled($preferencebase.'_loggedin', $processor, $preferences), + 'iconurl' => $output->pix_url('i/marked')->out(), + ], + 'loggedoff' => [ + 'name' => 'loggedoff', + 'displayname' => get_string('loggedoffdescription', 'message'), + 'checked' => $this->is_preference_enabled($preferencebase.'_loggedoff', $processor, $preferences), + 'iconurl' => $output->pix_url('i/marker')->out(), + ], + ]; + + // determine the default setting if (isset($defaultpreferences->{$defaultpreference})) { $permitted = $defaultpreferences->{$defaultpreference}; } @@ -134,43 +144,6 @@ class notification_list_processor implements templatable, renderable { } else if ($permitted == 'forced') { $context['locked'] = true; $context['lockedmessage'] = get_string('forced', 'message'); - } else { - $statescontext = [ - 'loggedin' => [ - 'name' => 'loggedin', - 'displayname' => get_string('loggedindescription', 'message'), - 'checked' => $this->is_preference_enabled($preferencebase.'_loggedin', $processor, $preferences), - 'iconurl' => $output->pix_url('i/completion-auto-y')->out(), - ], - 'loggedoff' => [ - 'name' => 'loggedoff', - 'displayname' => get_string('loggedoffdescription', 'message'), - 'checked' => $this->is_preference_enabled($preferencebase.'_loggedoff', $processor, $preferences), - 'iconurl' => $output->pix_url('i/completion-auto-n')->out(), - ], - 'both' => [ - 'name' => 'both', - 'displayname' => get_string('always'), - 'checked' => false, - 'iconurl' => $output->pix_url('i/completion-auto-pass')->out(), - ], - 'none' => [ - 'name' => 'none', - 'displayname' => get_string('never'), - 'checked' => false, - 'iconurl' => $output->pix_url('i/completion-auto-fail')->out(), - ], - ]; - - if ($statescontext['loggedin']['checked'] && $statescontext['loggedoff']['checked']) { - $statescontext['both']['checked'] = true; - $statescontext['loggedin']['checked'] = false; - $statescontext['loggedoff']['checked'] = false; - } else if (!$statescontext['loggedin']['checked'] && !$statescontext['loggedoff']['checked']) { - $statescontext['none']['checked'] = true; - } - - $context['states'] = array_values($statescontext); } return $context; diff --git a/message/templates/preferences_notifications_list.mustache b/message/templates/preferences_notifications_list.mustache index 1e897134132..28399e5d0b1 100644 --- a/message/templates/preferences_notifications_list.mustache +++ b/message/templates/preferences_notifications_list.mustache @@ -47,33 +47,18 @@ "displayname": "Popup notification", "name": "popup", "locked": 0, - "radioname": "popup", - "states": [ - { - "name": "loggedin", - "displayname": "When I'm logged in", - "checked": 0, - "iconurl": "some url" - }, - { - "name": "loggedoff", - "displayname": "When I'm offline", - "checked": 0, - "iconurl": "some url" - }, - { - "name": "both", - "displayname": "Always", - "checked": 1, - "iconurl": "some url" - }, - { - "name": "none", - "displayname": "Never", - "checked": 0, - "iconurl": "some url" - } - ] + "loggedin": { + "name": "loggedin", + "displayname": "When I'm logged in", + "checked": 0, + "iconurl": "some url" + }, + "loggedoff": { + "name": "loggedoff", + "displayname": "When I'm offline", + "checked": 0, + "iconurl": "some url" + }, } ] } @@ -82,7 +67,7 @@ ] } }} -

{{#str}} messagepreferences, message {{/str}}

+

{{#str}} notificationpreferences, message {{/str}}

{{#components}} @@ -99,34 +84,51 @@ {{#processors}} - diff --git a/theme/bootstrapbase/less/moodle/message.less b/theme/bootstrapbase/less/moodle/message.less index a5a0db73368..d29dd597bc3 100644 --- a/theme/bootstrapbase/less/moodle/message.less +++ b/theme/bootstrapbase/less/moodle/message.less @@ -275,17 +275,6 @@ float: left; } } - .preferences-container { - .preference-table { - .preference-row { - .preference-name { - .loading-icon { - float: left; - } - } - } - } - } } .preferences-container { @@ -309,15 +298,6 @@ .preference-row { .preference-name { vertical-align: middle; - - .loading-icon { - display: none; - float: right; - - img { - vertical-align: middle; - } - } } .disabled-message { display: none; @@ -331,21 +311,30 @@ display: inline-block; vertical-align: middle; - &:hover { - .preference-state-image-container { - background-color: #e5e5e5; - border-radius: 4px; - } - } - input[type="radio"]:checked + .preference-state-image-container { - background-color: #424242; - border-radius: 4px; + input[type="checkbox"]:checked + .preference-state-image-container { + border: 1px solid #5cb85c; } .preference-state-image-container { width: 30px; height: 30px; line-height: 30px; text-align: center; + border-radius: 4px; + border: 1px solid #d9534f; + + .loading-icon { + display: none; + } + } + &.loading { + .preference-state-image-container { + .state-icon { + display: none; + } + .loading-icon { + display: block; + } + } } } &.loading { diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css index b21bf65e4f2..536bbba5c21 100644 --- a/theme/bootstrapbase/style/moodle.css +++ b/theme/bootstrapbase/style/moodle.css @@ -5995,9 +5995,6 @@ a.ygtvspacer:hover { .dir-rtl .core_message-messenger-sendmessage .message-send { float: left; } -.dir-rtl .preferences-container .preference-table .preference-row .preference-name .loading-icon { - float: left; -} .preferences-container .preference-table { border: 1px solid #ddd; } @@ -6014,13 +6011,6 @@ a.ygtvspacer:hover { .preferences-container .preference-table .preference-row .preference-name { vertical-align: middle; } -.preferences-container .preference-table .preference-row .preference-name .loading-icon { - display: none; - float: right; -} -.preferences-container .preference-table .preference-row .preference-name .loading-icon img { - vertical-align: middle; -} .preferences-container .preference-table .preference-row .disabled-message { display: none; text-align: center; @@ -6033,19 +6023,25 @@ a.ygtvspacer:hover { display: inline-block; vertical-align: middle; } -.preferences-container .preference-table .preference-row .preference-state:hover .preference-state-image-container { - background-color: #e5e5e5; - border-radius: 4px; -} -.preferences-container .preference-table .preference-row .preference-state input[type="radio"]:checked + .preference-state-image-container { - background-color: #424242; - border-radius: 4px; +.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-image-container { + border: 1px solid #5cb85c; } .preferences-container .preference-table .preference-row .preference-state .preference-state-image-container { width: 30px; height: 30px; line-height: 30px; text-align: center; + border-radius: 4px; + border: 1px solid #d9534f; +} +.preferences-container .preference-table .preference-row .preference-state .preference-state-image-container .loading-icon { + display: none; +} +.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-image-container .state-icon { + display: none; +} +.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-image-container .loading-icon { + display: block; } .preferences-container .preference-table .preference-row.loading .preference-name .loading-icon { display: block;
{{displayname}} - {{> core/loading }} + {{#locked}}
{{lockedmessage}}
{{/locked}} {{^locked}}
{{#str}} disabled, question {{/str}}
- {{#states}} + {{#loggedin}}