MDL-54698 message: consolidate preference page checkbox styling

This commit is contained in:
Ryan Wyllie 2016-08-17 04:59:52 +00:00 committed by Mark Nelson
parent 065ff1b0f2
commit b7e68d1059
4 changed files with 105 additions and 126 deletions

View File

@ -75,9 +75,9 @@
]
}
}}
<div class="preferences-container">
<div class="preferences-page-container">
<h2>{{#str}} messagepreferences, message {{/str}}</h2>
<div class="block-non-contacts-container">
<div class="block-non-contacts-container checkbox-container">
<input id="block-non-contacts"
type="checkbox"
data-user-id="{{userid}}"

View File

@ -75,9 +75,9 @@
]
}
}}
<h2>{{#str}} notificationpreferences, message {{/str}}</h2>
<div class="preferences-container {{#disableall}}disabled{{/disableall}}" data-user-id="{{userid}}">
<div class="disable-notification-container">
<div class="preferences-page-container">
<h2>{{#str}} notificationpreferences, message {{/str}}</h2>
<div class="disable-notification-container checkbox-container">
<input id="disable-notifications"
type="checkbox"
data-disable-notifications
@ -85,91 +85,70 @@
<label for="disable-notifications">{{#str}} disableall, message {{/str}}</label>
{{> core/loading }}
</div>
<table class="table table-hover preference-table">
<thead>
<tr>
<th>{{displayname}}</th>
{{#processors}}
<th {{^userconfigured}}class="unconfigured"{{/userconfigured}} data-processor-name="{{name}}">
{{#hassettings}}
<a href="#"
data-processor-setting
data-user-id="{{userid}}"
data-context-id="{{contextid}}"
data-name="{{name}}">
<span class="config-warning" data-toggle="tooltip" title="{{#str}} requiresconfiguration, message {{/str}}">
{{#pix}} i/risk_xss, core {{/pix}}
</span>
{{displayname}} {{#pix}} i/settings {{/pix}}
</a>
{{/hassettings}}
{{^hassettings}}
{{displayname}}
{{/hassettings}}
</th>
{{/processors}}
</tr>
</thead>
<tbody>
{{#components}}
<div class="preferences-container {{#disableall}}disabled{{/disableall}}" data-user-id="{{userid}}">
<table class="table table-hover preference-table">
<thead>
<tr>
<th><h4>{{displayname}}</h4></th>
<th>{{displayname}}</th>
{{#processors}}
<td class="align-bottom">
<div class="container-fluid">
<div class="row-fluid">
{{#ispopup}}
<div class="span12">{{#str}} online, message {{/str}}</div>
{{/ispopup}}
{{^ispopup}}
<div class="span6">{{#str}} online, message {{/str}}</div>
<div class="span6">{{#str}} offline, message {{/str}}</div>
{{/ispopup}}
</div>
</div>
</td>
<th {{^userconfigured}}class="unconfigured"{{/userconfigured}} data-processor-name="{{name}}">
{{#hassettings}}
<a href="#"
data-processor-setting
data-user-id="{{userid}}"
data-context-id="{{contextid}}"
data-name="{{name}}">
<span class="config-warning" data-toggle="tooltip" title="{{#str}} requiresconfiguration, message {{/str}}">
{{#pix}} i/risk_xss, core {{/pix}}
</span>
{{displayname}} {{#pix}} i/settings {{/pix}}
</a>
{{/hassettings}}
{{^hassettings}}
{{displayname}}
{{/hassettings}}
</th>
{{/processors}}
</tr>
{{#notifications}}
<tr class="preference-row" data-preference-key="{{preferencekey}}">
<td class="preference-name">
{{displayname}}
</td>
</thead>
<tbody>
{{#components}}
<tr>
<th><h4>{{displayname}}</h4></th>
{{#processors}}
<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-fluid">
<div {{#ispopup}}class="span12"{{/ispopup}}{{^ispopup}}class="span6"{{/ispopup}}>
{{#loggedin}}
<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-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>
{{/loggedin}}
</div>
{{^ispopup}}
<div class="span6">
{{#loggedoff}}
<td class="align-bottom">
<div class="container-fluid">
<div class="row-fluid">
{{#ispopup}}
<div class="span12">{{#str}} online, message {{/str}}</div>
{{/ispopup}}
{{^ispopup}}
<div class="span6">{{#str}} online, message {{/str}}</div>
<div class="span6">{{#str}} offline, message {{/str}}</div>
{{/ispopup}}
</div>
</div>
</td>
{{/processors}}
</tr>
{{#notifications}}
<tr class="preference-row" data-preference-key="{{preferencekey}}">
<td class="preference-name">
{{displayname}}
</td>
{{#processors}}
<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-fluid">
<div {{#ispopup}}class="span12"{{/ispopup}}{{^ispopup}}class="span6"{{/ispopup}}>
{{#loggedin}}
<label class="preference-state"
data-toggle="tooltip"
title="{{displayname}}"
@ -187,20 +166,43 @@
{{> core/loading }}
</div>
</label>
{{/loggedoff}}
{{/loggedin}}
</div>
{{/ispopup}}
{{^ispopup}}
<div class="span6">
{{#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-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>
{{/loggedoff}}
</div>
{{/ispopup}}
</div>
</div>
</div>
</form>
{{/locked}}
</td>
{{/processors}}
</tr>
{{/notifications}}
{{/components}}
</tbody>
</table>
</form>
{{/locked}}
</td>
{{/processors}}
</tr>
{{/notifications}}
{{/components}}
</tbody>
</table>
</div>
</div>
{{#js}}
require(['jquery', 'theme_bootstrapbase/bootstrap', 'core_message/preferences_notifications_list_controller'],

View File

@ -774,9 +774,8 @@
}
}
.preferences-container {
.container() {
.preferences-page-container {
.checkbox-container {
margin: 30px 5px;
line-height: 20px;
@ -795,12 +794,4 @@
}
}
}
.block-non-contacts-container {
.container();
}
.disable-notification-container {
.container();
}
}

View File

@ -6392,32 +6392,18 @@ a.ygtvspacer:hover {
.processor-container.loading .loading-container {
display: block;
}
.preferences-container .block-non-contacts-container {
.preferences-page-container .checkbox-container {
margin: 30px 5px;
line-height: 20px;
}
.preferences-container .block-non-contacts-container input {
.preferences-page-container .checkbox-container input {
line-height: 20px;
margin: 0;
}
.preferences-container .block-non-contacts-container .loading-icon {
.preferences-page-container .checkbox-container .loading-icon {
display: none;
}
.preferences-container .block-non-contacts-container.loading .loading-icon {
display: inline-block;
}
.preferences-container .disable-notification-container {
margin: 30px 5px;
line-height: 20px;
}
.preferences-container .disable-notification-container input {
line-height: 20px;
margin: 0;
}
.preferences-container .disable-notification-container .loading-icon {
display: none;
}
.preferences-container .disable-notification-container.loading .loading-icon {
.preferences-page-container .checkbox-container.loading .loading-icon {
display: inline-block;
}
/* Question */