<div class="generic-page-wrapper">
- {{* include the title template for the settings title *}}
- {{include file="section_title.tpl" title=$ptitle }}
+ <h1>{{$ptitle}}</h1>
{{$nickname_block nofilter}}
- <form action="settings" id="settings-form" method="post" autocomplete="off" >
- <input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+ <form action="settings" id="settings-form" method="post" autocomplete="off" enctype="multipart/form-data">
+ <input type="hidden" name="form_security_token" value="{{$form_security_token}}">
{{* We organize the settings in collapsable panel-groups *}}
<div class="panel-group panel-group-settings" id="settings" role="tablist" aria-multiselectable="true">
{{* The password setting section *}}
<div class="panel">
- <div class="section-subtitle-wrapper" role="tab" id="password-settings">
- <h4>
+ <div class="section-subtitle-wrapper panel-heading" role="tab" id="password-settings">
+ <h2>
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#password-settings-collapse" aria-expanded="false" aria-controls="password-settings-collapse">
{{$h_pass}}
</a>
- </h4>
+ </h2>
</div>
<div id="password-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="password-settings">
- <div class="section-content-tools-wrapper">
+ <div class="panel-body">
{{include file="field_password.tpl" field=$password1}}
{{include file="field_password.tpl" field=$password2}}
{{include file="field_password.tpl" field=$password3}}
- {{if $oid_enable}}
+ {{if $oid_enable}}
{{include file="field_input.tpl" field=$openid}}
{{include file="field_checkbox.tpl" field=$delete_openid}}
- {{/if}}
-
- <div class="form-group pull-right settings-submit-wrapper" >
- <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
- </div>
- <div class="clear"></div>
+ {{/if}}
+ </div>
+ <div class="panel-footer">
+ <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
</div>
</div>
</div>
{{* The basic setting section *}}
<div class="panel">
- <div class="section-subtitle-wrapper" role="tab" id="basic-settings">
- <h4>
+ <div class="section-subtitle-wrapper panel-heading" role="tab" id="basic-settings">
+ <h2>
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#basic-settings-collapse" aria-expanded="false" aria-controls="basic-settings-collapse">
{{$h_basic}}
</a>
- </h4>
+ </h2>
</div>
<div id="basic-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="basic-settings">
- <div class="section-content-tools-wrapper">
-
+ <div class="panel-body">
{{include file="field_input.tpl" field=$username}}
{{include file="field_input.tpl" field=$email}}
{{include file="field_password.tpl" field=$password4}}
{{include file="field_select.tpl" field=$language}}
{{include file="field_input.tpl" field=$defloc}}
{{include file="field_checkbox.tpl" field=$allowloc}}
-
- <div class="form-group pull-right settings-submit-wrapper" >
- <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
- </div>
- <div class="clear"></div>
+ </div>
+ <div class="panel-footer">
+ <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
</div>
</div>
</div>
{{* The privacity setting section *}}
<div class="panel">
- <div class="section-subtitle-wrapper" role="tab" id="privacy-settings">
- <h4>
+ <div class="section-subtitle-wrapper panel-heading" role="tab" id="privacy-settings">
+ <h2>
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#privacy-settings-collapse" aria-expanded="false" aria-controls="privacy-settings-collapse">
{{$h_prv}}
</a>
- </h4>
+ </h2>
</div>
<div id="privacy-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="privacy-settings">
- <div class="section-content-tools-wrapper">
+ <div class="panel-body">
<input type="hidden" name="visibility" value="{{$visibility}}" />
{{$profile_in_dir nofilter}}
- {{$profile_in_net_dir nofilter}}
-
- {{$hide_friends nofilter}}
-
- {{$hide_wall nofilter}}
-
- {{$blockwall nofilter}}
-
- {{$blocktags nofilter}}
-
- {{$suggestme nofilter}}
-
- {{$unkmail nofilter}}
-
+ {{include file="field_checkbox.tpl" field=$profile_in_net_dir}}
+ {{include file="field_checkbox.tpl" field=$hide_friends}}
+ {{include file="field_checkbox.tpl" field=$hide_wall}}
+ {{include file="field_checkbox.tpl" field=$unlisted}}
+ {{include file="field_checkbox.tpl" field=$accessiblephotos}}
+ {{include file="field_checkbox.tpl" field=$blockwall}}
+ {{include file="field_checkbox.tpl" field=$blocktags}}
+ {{include file="field_checkbox.tpl" field=$unkmail}}
{{include file="field_input.tpl" field=$cntunkmail}}
- {{include file="field_input.tpl" field=$expire.days}}
-
- <div id="settings-advanced-expire">
- <a id="advanced-expire-menu" title="{{$expire.advanced}}" data-toggle="modal" data-target="#aeModal">{{$expire.label}}</a>
-
- {{* The modal for advanced-expire *}}
- <div class="modal" id="aeModal">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
- <h4 class="modal-title">{{$expire.advanced}}</h4>
- </div>
- <div class="modal-body">
- {{include file="field_yesno.tpl" field=$expire.items}}
- {{include file="field_yesno.tpl" field=$expire.notes}}
- {{include file="field_yesno.tpl" field=$expire.starred}}
- {{include file="field_yesno.tpl" field=$expire.network_only}}
- </div>
- </div>
- </div>
- </div>
- </div>
+ {{$group_select nofilter}}
- {{* Block for setting default permissions *}}
- <div id="settings-default-perms" class="settings-default-perms">
- <a id="settings-default-perms-menu" class="settings-default-perms" data-toggle="modal" data-target="#aclModal">{{$permissions}} {{$permdesc}}</a>
- <div id="settings-default-perms-menu-end"></div>
+ <h3>{{$permissions}}</h3>
- {{* We include the aclModal directly into the template since we cant use frio's default modal *}}
- <div class="modal" id="aclModal">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
- <h4 class="modal-title">{{$permissions}}</h4>
- </div>
- <div class="modal-body">
- {{$aclselect nofilter}}
- </div>
- </div>
- </div>
- </div>
- </div>
- <br/>
- <div class="clear"></div>
+ {{$aclselect nofilter}}
+ </div>
+ <div class="panel-footer">
+ <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
+ </div>
+ </div>
+ </div>
- {{$group_select nofilter}}
+ <div class="panel">
+ <div class="section-subtitle-wrapper panel-heading" role="tab" id="expire-settings">
+ <h2>
+ <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#expire-settings-collapse" aria-expanded="false" aria-controls="expire-settings-collapse">
+ {{$expire.label}}
+ </a>
+ </h2>
+ </div>
+ <div id="expire-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="expire-settings">
+ <div class="panel-body">
+ {{include file="field_input.tpl" field=$expire.days}}
- <div class="form-group pull-right settings-submit-wrapper" >
- <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
- </div>
- <div class="clear"></div>
+ {{include file="field_checkbox.tpl" field=$expire.items}}
+ {{include file="field_checkbox.tpl" field=$expire.notes}}
+ {{include file="field_checkbox.tpl" field=$expire.starred}}
+ {{include file="field_checkbox.tpl" field=$expire.network_only}}
+ </div>
+ <div class="panel-footer">
+ <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
</div>
</div>
</div>
{{* The notification setting section *}}
<div class="panel">
- <div class="section-subtitle-wrapper" role="tab" id="notification-settings">
- <h4>
+ <div class="section-subtitle-wrapper panel-heading" role="tab" id="notification-settings">
+ <h2>
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#notification-settings-collapse" aria-expanded="false" aria-controls="notification-settings-collapse">
{{$h_not}}
</a>
- </h4>
+ </h2>
</div>
<div id="notification-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="notification-settings">
- <div class="section-content-tools-wrapper">
- <div id="settings-notifications">
-
- <div id="settings-notification-desc"><h4>{{$lbl_not}}</h4></div>
-
- <div class="group">
- {{include file="field_intcheckbox.tpl" field=$notify1}}
- {{include file="field_intcheckbox.tpl" field=$notify2}}
- {{include file="field_intcheckbox.tpl" field=$notify3}}
- {{include file="field_intcheckbox.tpl" field=$notify4}}
- {{include file="field_intcheckbox.tpl" field=$notify5}}
- {{include file="field_intcheckbox.tpl" field=$notify6}}
- {{include file="field_intcheckbox.tpl" field=$notify7}}
- {{include file="field_intcheckbox.tpl" field=$notify8}}
- </div>
-
- {{include file="field_checkbox.tpl" field=$email_textonly}}
- {{include file="field_checkbox.tpl" field=$detailed_notif}}
-
- {{* commented out because it was commented out in the original template
- <div class="field">
- <button type="button" onclick="javascript:Notification.requestPermission(function(perm){if(perm === 'granted')alert('{{$desktop_notifications_success_message}}');});">{{$desktop_notifications}}</button>
- <span class="field_help">{{$desktop_notifications_note}}</span>
- </div>
- *}}
-
- {{include file="field_yesno.tpl" field=$desktop_notifications}}
- <script type="text/javascript">
- (function(){
- var elm = $("#id_{{$desktop_notifications.0}}_onoff");
- var ckbox = $("#id_{{$desktop_notifications.0}}");
-
- if (getNotificationPermission() === 'granted') {
- ckbox.val(1);
- elm.find(".off").addClass("hidden");
- elm.find(".on").removeClass("hidden");
- }
- if (getNotificationPermission() === null) {
- elm.parent(".field.yesno").hide();
- }
-
- $("#id_{{$desktop_notifications.0}}_onoff").on("click", function(e){
-
- if (Notification.permission === 'granted') {
- localStorage.setItem('notification-permissions', ckbox.val()==1 ? 'granted' : 'denied');
- } else if (Notification.permission === 'denied') {
- localStorage.setItem('notification-permissions', 'denied');
-
- ckbox.val(0);
- elm.find(".on").addClass("hidden");
- elm.find(".off").removeClass("hidden");
-
- } else if (Notification.permission === 'default') {
- Notification.requestPermission(function(choice) {
- if (choice === 'granted') {
- localStorage.setItem('notification-permissions', ckbox.val()==1 ? 'granted' : 'denied');
+ <div id="settings-notifications" class="panel-body">
+
+ <div id="settings-notification-desc">{{$lbl_not}}</div>
+
+ <div class="group">
+ {{include file="field_intcheckbox.tpl" field=$notify1}}
+ {{include file="field_intcheckbox.tpl" field=$notify2}}
+ {{include file="field_intcheckbox.tpl" field=$notify3}}
+ {{include file="field_intcheckbox.tpl" field=$notify4}}
+ {{include file="field_intcheckbox.tpl" field=$notify5}}
+ {{include file="field_intcheckbox.tpl" field=$notify6}}
+ {{include file="field_intcheckbox.tpl" field=$notify7}}
+ {{include file="field_intcheckbox.tpl" field=$notify8}}
+ </div>
- } else {
- localStorage.setItem('notification-permissions', 'denied');
- ckbox.val(0);
- elm.find(".on").addClass("hidden");
- elm.find(".off").removeClass("hidden");
- }
- });
- }
+ {{include file="field_checkbox.tpl" field=$email_textonly}}
+ {{include file="field_checkbox.tpl" field=$detailed_notif}}
- //console.log(getNotificationPermission());
- })
- })();
- </script>
- </div>
+ {{include file="field_checkbox.tpl" field=$notify_ignored}}
- <div class="form-group pull-right settings-submit-wrapper" >
- <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
+ {{* commented out because it was commented out in the original template
+ <div class="field">
+ <button type="button" onclick="javascript:Notification.requestPermission(function(perm){if(perm === 'granted')alert('{{$desktop_notifications_success_message}}');});">{{$desktop_notifications}}</button>
+ <span class="field_help">{{$desktop_notifications_note}}</span>
</div>
- <div class="clear"></div>
+ *}}
+
+ {{include file="field_checkbox.tpl" field=$desktop_notifications}}
+ <script type="text/javascript">
+ (function(){
+ let $notificationField = $("#div_id_{{$desktop_notifications.0}}");
+ let $notificationCheckbox = $("#id_{{$desktop_notifications.0}}");
+
+ if (getNotificationPermission() === 'granted') {
+ $notificationCheckbox.prop('checked', true);
+ }
+ if (getNotificationPermission() === null) {
+ $notificationField.hide();
+ }
+
+ $notificationCheckbox.on('change', function(e){
+ if (Notification.permission === 'granted') {
+ localStorage.setItem('notification-permissions', $notificationCheckbox.prop('checked') ? 'granted' : 'denied');
+ } else if (Notification.permission === 'denied') {
+ localStorage.setItem('notification-permissions', 'denied');
+
+ $notificationCheckbox.prop('checked', false);
+ } else if (Notification.permission === 'default') {
+ Notification.requestPermission(function(choice) {
+ if (choice === 'granted') {
+ localStorage.setItem('notification-permissions', $notificationCheckbox.prop('checked') ? 'granted' : 'denied');
+ } else {
+ localStorage.setItem('notification-permissions', 'denied');
+ $notificationCheckbox.prop('checked', false);
+ }
+ });
+ }
+ })
+ })();
+ </script>
+ </div>
+ <div class="panel-footer">
+ <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
</div>
</div>
</div>
{{* The additional account setting section *}}
<div class="panel">
- <div class="section-subtitle-wrapper" role="tab" id="additional-account-settings">
- <h4>
+ <div class="section-subtitle-wrapper panel-heading" role="tab" id="additional-account-settings">
+ <h2>
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#additional-account-settings-collapse" aria-expanded="false" aria-controls="additional-account-settings-collapse">
{{$h_advn}}
</a>
- </h4>
+ </h2>
</div>
<div id="additional-account-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="additional-account-settings">
- <div class="section-content-tools-wrapper">
-
+ <div class="panel-body">
<div id="settings-pagetype-desc">{{$h_descadvn}}</div>
{{$pagetype nofilter}}
-
- <div class="form-group pull-right settings-submit-wrapper" >
- <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
- </div>
- <div class="clear"></div>
+ </div>
+ <div class="panel-footer">
+ <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
</div>
</div>
</div>
{{* Import contacts CSV *}}
<div class="panel">
- <div class="section-subtitle-wrapper" role="tab" id="importcontact-settings">
- <h4>
+ <div class="section-subtitle-wrapper panel-heading" role="tab" id="importcontact-settings">
+ <h2>
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#importcontact-settings-collapse" aria-expanded="false" aria-controls="importcontact-settings-collapse">
{{$importcontact}}
</a>
- </h4>
+ </h2>
</div>
<div id="importcontact-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="importcontact-settings">
- <div class="section-content-tools-wrapper">
-
+ <div class="panel-body">
<div id="importcontact-relocate-desc">{{$importcontact_text}}</div>
<input type="hidden" name="MAX_FILE_SIZE" value="{{$importcontact_maxsize}}" />
<input type="file" name="importcontact-filename" />
-
- <br/>
- <div class="form-group pull-right settings-submit-wrapper" >
- <button type="submit" name="importcontact-submit" class="btn btn-primary" value="{{$importcontact_button}}">{{$importcontact_button}}</button>
- </div>
- <div class="clear"></div>
+ </div>
+ <div class="panel-footer">
+ <button type="submit" name="importcontact-submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
</div>
</div>
</div>
{{* The relocate setting section *}}
<div class="panel">
- <div class="section-subtitle-wrapper" role="tab" id="relocate-settings">
- <h4>
+ <div class="section-subtitle-wrapper panel-heading" role="tab" id="relocate-settings">
+ <h2>
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#relocate-settings-collapse" aria-expanded="false" aria-controls="relocate-settings-collapse">
{{$relocate}}
</a>
- </h4>
+ </h2>
</div>
<div id="relocate-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="relocate-settings">
- <div class="section-content-tools-wrapper">
-
+ <div class="panel-body">
<div id="settings-relocate-desc">{{$relocate_text}}</div>
-
- <br/>
- <div class="form-group pull-right settings-submit-wrapper" >
- <button type="submit" name="resend_relocate" class="btn btn-primary" value="{{$relocate_button}}">{{$relocate_button}}</button>
- </div>
- <div class="clear"></div>
+ </div>
+ <div class="panel-footer">
+ <button type="submit" name="resend_relocate" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
</div>
</div>
</div>