L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-54698 message: change preferences to checkboxes

Browse Source
This commit is contained in:
Ryan Wyllie
2016-10-07 16:26:40 +08:00
committed by Mark Nelson
parent 195a683b27
commit e9cce46cf0
5 changed files with 99 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
message/amd/src/preferences_notifications_list_controller.js
+10 -4
View File
@@ -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;
message/classes/output/preferences/notification_list_processor.php
+19 -46
View File
@@ -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;
message/templates/preferences_notifications_list.mustache
+39 -37
View File
@@ -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 @@
]
}
}}
<h2 class="title-case">{{#str}} messagepreferences, message {{/str}}</h2>
<h2 class="title-case">{{#str}} notificationpreferences, message {{/str}}</h2>
<div class="preferences-container {{#disableall}}disabled{{/disableall}}" data-user-id="{{userid}}">
{{#components}}
<table class="table preference-table">
@@ -99,34 +84,51 @@
<tr class="preference-row" data-preference-key="{{preferencekey}}">
<td class="preference-name">
{{displayname}}
{{> core/loading }}
</td>
{{#processors}}
<td data-processor-name="{{name}}">
<td data-processor-name="{{name}}">
{{#locked}}
<div class="dimmed_text">{{lockedmessage}}</div>
{{/locked}}
{{^locked}}
<div class="disabled-message">{{#str}} disabled, question {{/str}}</div>
<form>
{{#states}}
{{#loggedin}}
<label class="preference-state"
data-toggle="tooltip"
title="{{displayname}}"
data-state="{{name}}">
<span class="accesshide">{{displayname}}</span>
<input type="radio"
<input type="checkbox"
tabindex="-1"
class="accesshide"
name="{{radioname}}"
value="option1"
{{#checked}}checked{{/checked}}
{{#disableall}}disabled{{/disableall}} />
<div class="preference-state-image-container">
<img src="{{iconurl}}" role="presentation" />
<div class="preference-state-image-container" tabindex="0">
<img class="state-icon" src="{{iconurl}}" role="presentation" />
{{> core/loading }}
</div>
</label>
{{/states}}
{{/loggedin}}
{{#loggedoff}}
<label class="preference-state"
data-toggle="tooltip"
title="{{displayname}}"
data-state="{{name}}">
<span class="accesshide">{{displayname}}</span>
<input type="checkbox"
tabindex="-1"
class="accesshide"
{{#checked}}checked{{/checked}}
{{#disableall}}disabled{{/disableall}} />
<div class="preference-state-image-container" tabindex="0">
<img class="state-icon" src="{{iconurl}}" role="presentation" />
{{> core/loading }}
</div>
</label>
{{/loggedoff}}
</form>
{{/locked}}
</td>
theme/bootstrapbase/less/moodle/message.less
+18 -29
View File
@@ -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 {
theme/bootstrapbase/style/moodle.css
+13 -17
View File
@@ -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;