moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 08:56:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-71403 message: Bootstrap controls for message preferences.

Browse source 
Replicates changes made to notification preferences in e41b3485.
The templates for each are similar enough than one can be used
from the other. Remove redundant styles for previous controls.
This commit is contained in:
Paul Holden 2021-04-23 21:43:11 +01:00
parent fe04d078a4
commit 10d853a891
6 changed files with 14 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

2
message/templates/message_preferences.mustache
View file

@ -101,7 +101,7 @@
<div class="preferences-container {{#disableall}}disabled{{/disableall}}" <div class="preferences-container {{#disableall}}disabled{{/disableall}}"
data-user-id="{{userid}}" data-user-id="{{userid}}"
data-region="preferences-container"> data-region="preferences-container">
<table class="table table-hover preference-table" data-region="preference-table"> <table class="table preference-table" data-region="preference-table">
<tbody> <tbody>
{{#components}} {{#components}}
{{> message/message_preferences_component }} {{> message/message_preferences_component }}

85
message/templates/message_preferences_notification_processor.mustache
View file

@ -20,17 +20,15 @@
The message preferences page The message preferences page
Classes required for JS: Classes required for JS:
* None * disabled
Data attibutes required for JS: Data attributes required for JS:
* All data attributes are required * All data attributes are required
Context variables required for this template: Context variables required for this template:
* displayname The display name of the processor * displayname The notification display name
* name The name of the processor * preferencekey The unique key to identify this preference
* locked Whether the processor is locked * processors The list of processors for this notification
* loggedin The logged in settings
* loggedoff The logged off settings
Example context (json): Example context (json):
{ {
@ -45,83 +43,16 @@
"loggedin": { "loggedin": {
"name": "loggedin", "name": "loggedin",
"displayname": "When I'm logged in", "displayname": "When I'm logged in",
"checked": 0, "checked": 0
"disableall": 0
}, },
"loggedoff": { "loggedoff": {
"name": "loggedoff", "name": "loggedoff",
"displayname": "When I'm offline", "displayname": "When I'm offline",
"checked": 0, "checked": 0
"disableall": 0
} }
} }
] ]
} }
}} }}
<tr class="preference-row" data-region="preference-row" data-preference-key="{{preferencekey}}">
<td class="preference-name">{{displayname}}</td>
<td {{^userconfigured}}class="disabled"{{/userconfigured}} data-processor-name="{{name}}">
{{#locked}}
<div class="dimmed_text">{{lockedmessage}}</div>
{{/locked}}
{{^locked}}
<div class="disabled-message">{{#str}} disabled, question {{/str}}</div>
<form>
<div class="container-fluid">
<div class="row">
<div class="span6 col-6">
{{#loggedin}}
{{< core/hover_tooltip }}
{{$anchor}}
<label class="preference-state"
title="{{displayname}}"
data-state="{{name}}">
<span class="accesshide">{{displayname}}</span> {{> core_message/notification_preferences_component_notification }}
<input type="checkbox"
tabindex="-1"
class="accesshide"
{{#checked}}checked{{/checked}}
{{#disableall}}disabled{{/disableall}} />
<div class="preference-state-status-container" tabindex="0">
<span class="on-text">{{#str}} on, message {{/str}}</span>
<span class="off-text">{{#str}} off, message {{/str}}</span>
{{> core/loading }}
</div>
</label>
{{/anchor}}
{{$tooltip}}{{displayname}}{{/tooltip}}
{{/ core/hover_tooltip }}
{{/loggedin}}
</div>
<div class="span6 col-6">
{{#loggedoff}}
{{< core/hover_tooltip }}
{{$anchor}}
<label class="preference-state"
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-status-container" tabindex="0">
<span class="on-text">{{#str}} on, message {{/str}}</span>
<span class="off-text">{{#str}} off, message {{/str}}</span>
{{> core/loading }}
</div>
</label>
{{/anchor}}
{{$tooltip}}{{displayname}}{{/tooltip}}
{{/ core/hover_tooltip }}
{{/loggedoff}}
</div>
</div>
</div>
</form>
{{/locked}}
</td>
</tr>

11
message/templates/notification_preferences_component_notification.mustache
View file

@ -22,7 +22,7 @@
Classes required for JS: Classes required for JS:
* disabled * disabled
Data attibutes required for JS: Data attributes required for JS:
* All data attributes are required * All data attributes are required
Context variables required for this template: Context variables required for this template:
@ -39,17 +39,16 @@
"displayname": "Popup notification", "displayname": "Popup notification",
"name": "popup", "name": "popup",
"locked": 0, "locked": 0,
"userconfigured": 1,
"loggedin": { "loggedin": {
"name": "loggedin", "name": "loggedin",
"displayname": "When I'm logged in", "displayname": "When I'm logged in",
"checked": 0, "checked": 0
"iconurl": "some url"
}, },
"loggedoff": { "loggedoff": {
"name": "loggedoff", "name": "loggedoff",
"displayname": "When I'm offline", "displayname": "When I'm offline",
"checked": 0, "checked": 0
"iconurl": "some url"
} }
} }
] ]
@ -63,7 +62,7 @@
<div class="dimmed_text">{{lockedmessage}}</div> <div class="dimmed_text">{{lockedmessage}}</div>
{{/locked}} {{/locked}}
{{^locked}} {{^locked}}
<div class="disabled-message">{{#str}} disabled, question {{/str}}</div> <div class="disabled-message">{{#str}} disabled, admin {{/str}}</div>
<form> <form>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">

55
theme/boost/scss/moodle/message.scss
View file

@ -74,61 +74,6 @@
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
.preference-state {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
input[type="checkbox"]:checked + .preference-state-status-container {
background-color: #5cb85c;
.on-text {
display: inline-block;
}
.off-text {
display: none;
}
}
.preference-state-status-container {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
background-color: #d9534f;
color: #fff;
cursor: pointer;
.loading-icon {
display: none;
}
.on-text {
display: none;
}
.off-text {
display: inline-block;
}
}
&.loading {
input[type="checkbox"]:checked + .preference-state-status-container {
.on-text,
.off-text {
display: none;
}
}
.preference-state-status-container {
.on-text,
.off-text {
display: none;
}
.loading-icon {
display: block;
}
}
}
}
&.loading { &.loading {
.preference-name { .preference-name {
.loading-icon { .loading-icon {

34
theme/boost/style/moodle.css
View file

@ -15110,40 +15110,6 @@ a.ygtvspacer:hover {
text-align: center; text-align: center;
height: 30px; height: 30px;
line-height: 30px; } line-height: 30px; }
.preferences-container .preference-table .preference-row .preference-state {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle; }
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container {
background-color: #5cb85c; }
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .on-text {
display: inline-block; }
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .off-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
background-color: #d9534f;
color: #fff;
cursor: pointer; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .loading-icon {
display: none; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .on-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .off-text {
display: inline-block; }
.preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .on-text,
.preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .off-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .on-text,
.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .off-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .loading-icon {
display: block; }
.preferences-container .preference-table .preference-row.loading .preference-name .loading-icon { .preferences-container .preference-table .preference-row.loading .preference-name .loading-icon {
display: block; } display: block; }

34
theme/classic/style/moodle.css
View file

@ -15334,40 +15334,6 @@ a.ygtvspacer:hover {
text-align: center; text-align: center;
height: 30px; height: 30px;
line-height: 30px; } line-height: 30px; }
.preferences-container .preference-table .preference-row .preference-state {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle; }
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container {
background-color: #5cb85c; }
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .on-text {
display: inline-block; }
.preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .off-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
background-color: #d9534f;
color: #fff;
cursor: pointer; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .loading-icon {
display: none; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .on-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .off-text {
display: inline-block; }
.preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .on-text,
.preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .off-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .on-text,
.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .off-text {
display: none; }
.preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .loading-icon {
display: block; }
.preferences-container .preference-table .preference-row.loading .preference-name .loading-icon { .preferences-container .preference-table .preference-row.loading .preference-name .loading-icon {
display: block; } display: block; }