mirror of
https://github.com/moodle/moodle.git
synced 2025-03-14 20:50:21 +01:00
MDL-71403 message: Bootstrap controls for message preferences.
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
parent
146a38dc45
commit
ad7092d281
@ -101,7 +101,7 @@
|
||||
<div class="preferences-container {{#disableall}}disabled{{/disableall}}"
|
||||
data-user-id="{{userid}}"
|
||||
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>
|
||||
{{#components}}
|
||||
{{> message/message_preferences_component }}
|
||||
|
||||
@ -20,17 +20,15 @@
|
||||
The message preferences page
|
||||
|
||||
Classes required for JS:
|
||||
* None
|
||||
* disabled
|
||||
|
||||
Data attibutes required for JS:
|
||||
Data attributes required for JS:
|
||||
* All data attributes are required
|
||||
|
||||
Context variables required for this template:
|
||||
* displayname The display name of the processor
|
||||
* name The name of the processor
|
||||
* locked Whether the processor is locked
|
||||
* loggedin The logged in settings
|
||||
* loggedoff The logged off settings
|
||||
* displayname The notification display name
|
||||
* preferencekey The unique key to identify this preference
|
||||
* processors The list of processors for this notification
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
@ -45,83 +43,16 @@
|
||||
"loggedin": {
|
||||
"name": "loggedin",
|
||||
"displayname": "When I'm logged in",
|
||||
"checked": 0,
|
||||
"disableall": 0
|
||||
"checked": 0
|
||||
},
|
||||
"loggedoff": {
|
||||
"name": "loggedoff",
|
||||
"displayname": "When I'm offline",
|
||||
"checked": 0,
|
||||
"disableall": 0
|
||||
"checked": 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>
|
||||
<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>
|
||||
{{> core_message/notification_preferences_component_notification }}
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
Classes required for JS:
|
||||
* disabled
|
||||
|
||||
Data attibutes required for JS:
|
||||
Data attributes required for JS:
|
||||
* All data attributes are required
|
||||
|
||||
Context variables required for this template:
|
||||
@ -39,17 +39,16 @@
|
||||
"displayname": "Popup notification",
|
||||
"name": "popup",
|
||||
"locked": 0,
|
||||
"userconfigured": 1,
|
||||
"loggedin": {
|
||||
"name": "loggedin",
|
||||
"displayname": "When I'm logged in",
|
||||
"checked": 0,
|
||||
"iconurl": "some url"
|
||||
"checked": 0
|
||||
},
|
||||
"loggedoff": {
|
||||
"name": "loggedoff",
|
||||
"displayname": "When I'm offline",
|
||||
"checked": 0,
|
||||
"iconurl": "some url"
|
||||
"checked": 0
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -63,7 +62,7 @@
|
||||
<div class="dimmed_text">{{lockedmessage}}</div>
|
||||
{{/locked}}
|
||||
{{^locked}}
|
||||
<div class="disabled-message">{{#str}} disabled, question {{/str}}</div>
|
||||
<div class="disabled-message">{{#str}} disabled, admin {{/str}}</div>
|
||||
<form>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
|
||||
@ -74,61 +74,6 @@
|
||||
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 {
|
||||
.preference-name {
|
||||
.loading-icon {
|
||||
|
||||
@ -15110,40 +15110,6 @@ a.ygtvspacer:hover {
|
||||
text-align: center;
|
||||
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 {
|
||||
display: block; }
|
||||
|
||||
|
||||
@ -15334,40 +15334,6 @@ a.ygtvspacer:hover {
|
||||
text-align: center;
|
||||
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 {
|
||||
display: block; }
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user