diff options
author | RedMatrix <info@friendica.com> | 2015-01-02 12:10:08 +1100 |
---|---|---|
committer | RedMatrix <info@friendica.com> | 2015-01-02 12:10:08 +1100 |
commit | b54235234fdba83bc4505672e65ad94fbdbccb62 (patch) | |
tree | a7e9a9db526d5c25fd58882637fa696a4734960a | |
parent | 93b94704878c1b66ee95987de2b24dc39163763a (diff) | |
parent | ef6680f7adfeacb0e7614c509e8861f08ff066e8 (diff) | |
download | volse-hubzilla-b54235234fdba83bc4505672e65ad94fbdbccb62.tar.gz volse-hubzilla-b54235234fdba83bc4505672e65ad94fbdbccb62.tar.bz2 volse-hubzilla-b54235234fdba83bc4505672e65ad94fbdbccb62.zip |
Merge pull request #803 from pafcu/checkboxes
Checkboxyfy settings, style checkboxes as switches in redbasic
27 files changed, 146 insertions, 51 deletions
diff --git a/mod/profiles.php b/mod/profiles.php index f2695f332..6bdc7f11a 100644 --- a/mod/profiles.php +++ b/mod/profiles.php @@ -596,13 +596,12 @@ function profiles_content(&$a) { $opt_tpl = get_markup_template("profile_hide_friends.tpl"); - $hide_friends = replace_macros($opt_tpl,array( - '$desc' => t('Hide your contact/friend list from viewers of this profile?'), - '$yes_str' => t('Yes'), - '$no_str' => t('No'), - '$yes_selected' => (($r[0]['hide_friends']) ? " checked=\"checked\" " : ""), - '$no_selected' => (($r[0]['hide_friends'] == 0) ? " checked=\"checked\" " : "") - )); + $hide_friends = replace_macros($opt_tpl,array('$field' => array( + 'hide-friends', + t('Hide your contact/friend list from viewers of this profile?'), + $r[0]['hide_friends'], + '', + ))); $q = q("select * from profdef where true"); if($q) { diff --git a/mod/settings.php b/mod/settings.php index be6f2cfb9..bb1ec8cb8 100644 --- a/mod/settings.php +++ b/mod/settings.php @@ -122,10 +122,19 @@ function settings_post(&$a) { if((argc() > 1) && (argv(1) === 'features')) { check_form_security_token_redirectOnErr('/settings/features', 'settings_features'); - foreach($_POST as $k => $v) { - if(strpos($k,'feature_') === 0) { - set_pconfig(local_user(),'feature',substr($k,8),((intval($v)) ? 1 : 0)); - } + + // Build list of features and check which are set + $features = get_features(); + $all_features = array(); + foreach($features as $k => $v) { + foreach($v as $f) + $all_features[] = $f[0]; + } + foreach($all_features as $k) { + if(x($_POST,"feature_$k")) + set_pconfig(local_user(),'feature',$k, 1); + else + set_pconfig(local_user(),'feature',$k, 0); } build_sync_packet(); return; @@ -707,7 +716,6 @@ function settings_content(&$a) { '$title' => t('Additional Features'), '$features' => $arr, '$submit' => t('Submit'), - '$field_yesno' => 'field_yesno.tpl', )); return $o; @@ -938,7 +946,7 @@ function settings_content(&$a) { $timezone = date_default_timezone_get(); - $opt_tpl = get_markup_template("field_yesno.tpl"); + $opt_tpl = get_markup_template("field_checkbox.tpl"); if(get_config('system','publish_all')) { $profile_in_dir = '<input type="hidden" name="profile_in_directory" value="1" />'; } diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css index 12287ba4f..5d9bb6e90 100644 --- a/view/css/bootstrap-red.css +++ b/view/css/bootstrap-red.css @@ -79,3 +79,7 @@ nav .navbar-toggle { code { white-space: normal; } + +/* Bootstrap assumes that checkboxes are on the left of labels, while it's usually the opposite in Red */ +.field.checkbox input[type="checkbox"] { margin-left: 0px; } +.field.checkbox label { padding-left: 0px; font-weight: 700} diff --git a/view/css/mod_connect.css b/view/css/mod_connect.css index d1a46ec48..218b1d2cb 100644 --- a/view/css/mod_connect.css +++ b/view/css/mod_connect.css @@ -6,6 +6,8 @@ margin-top: 25px; } -#sellpage-edit label{ +/* first-of-type needed to style switches */ +#sellpage-edit label.mainlabel, +#sellpage-edit label:first-of-type { width: 300px; -}
\ No newline at end of file +} diff --git a/view/css/mod_group.css b/view/css/mod_group.css index cc5f15843..30a954d2a 100644 --- a/view/css/mod_group.css +++ b/view/css/mod_group.css @@ -3,7 +3,9 @@ margin-top: 30px; } -#group-edit-form label { +/* first-of-type needed to style switches */ +#group-edit-form label.mainlabel, +#group-edit-form label:first-of-type { float: left; width: 300px; } diff --git a/view/css/mod_settings.css b/view/css/mod_settings.css index b03023e21..b066e6059 100644 --- a/view/css/mod_settings.css +++ b/view/css/mod_settings.css @@ -28,7 +28,9 @@ ul#settings-privacy-macros { margin-bottom: 10px; } -#settings-permissions-wrapper .field label{ +/* first-of-type needed to be able to style switches */ +#settings-permissions-wrapper .field label.mainlabel, +#settings-permissions-wrapper .field label:first-of-type { width: 350px; } @@ -41,7 +43,9 @@ ul#settings-privacy-macros { margin-bottom: 45px; } -#settings-notifications label { +/* first-of-type needed to be able to style switches */ +#settings-notifications .field label.mainlabel, +#settings-notifications .field label:first-of-type { margin-left: 20px; width: 330px; } @@ -63,4 +67,4 @@ ul#settings-privacy-macros { #settings-channel-menu-end { clear: both; margin-bottom: 15px; -}
\ No newline at end of file +} diff --git a/view/css/mod_thing.css b/view/css/mod_thing.css index 125230b38..ddb2faa87 100644 --- a/view/css/mod_thing.css +++ b/view/css/mod_thing.css @@ -4,8 +4,9 @@ margin-left: 0; } - -.thing-label, .field label, .thing-verb-label, .thing-profile-label{ +/* first-of-type needed to style switches */ +.field label.mainlabel, +.thing-label, .field label:first-of-type, .thing-verb-label, .thing-profile-label{ float: left; width: 350px; } @@ -18,4 +19,4 @@ .thing-field-end { clear: both; -}
\ No newline at end of file +} diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 60760509d..61acc8ec7 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -301,14 +301,14 @@ footer { #main-login #id_remember { float: left; padding: 0; - margin-top: 15px; margin-bottom: 0; margin-left: 0; width: 20px; } -#main-login .field.checkbox label { - margin-top: 15px; +/* first-of-type needed to style switches */ +#main-login .field.checkbox label.mainlabel, +#main-login .field.checkbox label:first-of-type { margin-bottom: 0; float: left; width: 100px; @@ -373,13 +373,16 @@ footer { font-weight: bold; } -#profile-edit-wrapper .field label { +#profile-edit-wrapper .field { margin-top: 20px; +} +/* first-of-type needed to style switches */ +#profile-edit-wrapper .field label.mainlabel, +#profile-edit-wrapper .field label:first-of-type { width: 175px; } #profile-edit-wrapper .field input[type="text"] { - margin-top: 20px; width: 220px; } @@ -1242,7 +1245,9 @@ footer { width: 100% } -.field label { +/* first-of-type needed to style switches */ +.field label.mainlabel, +.field label:first-of-type { float: left; width: 350px; } @@ -1296,6 +1301,8 @@ footer { .hidden { display: none!important; } .field.radio .field_help { margin-left: 0px; } +.field.checkbox .field_help { display: inline; margin-left: 10px; } + /** * OAuth @@ -2350,3 +2357,70 @@ aside .nav > li > a:hover, aside .nav > li > a:focus { .jothidden .bootstrap-tagsinput:hover, .jothidden .bootstrap-tagsinput:focus { border: 1px solid #cccccc; } + +/* Hide the placeholder label which is used for styling switches */ +/* Many places give a width to all labels, so need to specifically set these to 0 width */ +/* This should probably be moved to core */ +.field.checkbox label.switchlabel, +.field.checkbox label:nth-of-type(2) { + width: 0px; + margin: 0px; + float: none; +} + +/* Turn checkboxes into switches */ +/* Doesn't work with IE<9. */ +.field.checkbox input { + position: absolute; + margin-left: -9999px; + visibility: hidden; +} +.field.checkbox input + label.switchlabel, +.field.checkbox input + label:nth-of-type(2) { + display: block; + position: relative; + cursor: pointer; + outline: none; + user-select: none; + + padding: 2px; + width: 60px; + height: 24px; + background-color: #dddddd; + border-radius: 60px; + transition: background 0.4s; + + float:left; +} + +.field.checkbox input + label:before, +.field.checkbox input + label:after { + display: block; + position: absolute; + content: ""; +} +.field.checkbox input + label:before { + top: 2px; + left: 2px; + bottom: 2px; + right: 2px; + background-color: #fff; + border-radius: 30px; + transition: background 0.4s; +} +.field.checkbox input + label:after { + top: 4px; + left: 4px; + bottom: 4px; + width: 30px; + background-color: #dddddd; + border-radius: 30px; + transition: margin 0.4s, background 0.4s; +} +.field.checkbox input:checked + label { + background-color: #8ce196; +} +.field.checkbox input:checked + label:after { + margin-left: 22px; + background-color: #8ce196; +} diff --git a/view/tpl/field_acheckbox.tpl b/view/tpl/field_acheckbox.tpl index 89de170b7..816af2a65 100755 --- a/view/tpl/field_acheckbox.tpl +++ b/view/tpl/field_acheckbox.tpl @@ -1,6 +1,6 @@ <tr> <td> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> </td> <td class="abook-them"> <input type="checkbox" name='them_{{$field.0}}' id='them_id_{{$field.0}}' value="1" disabled="disabled" {{if $field.2}}checked="checked"{{/if}} /> diff --git a/view/tpl/field_checkbox.tpl b/view/tpl/field_checkbox.tpl index 51d56f69c..5c7f58ad1 100755 --- a/view/tpl/field_checkbox.tpl +++ b/view/tpl/field_checkbox.tpl @@ -1,5 +1,4 @@ <div class='field checkbox'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> - <input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}}> - <span class='field_help'>{{$field.3}}</span> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> + <input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}}><label class="switchlabel" for='id_{{$field.0}}'></label><span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_colorinput.tpl b/view/tpl/field_colorinput.tpl index a68781698..a1e912186 100644 --- a/view/tpl/field_colorinput.tpl +++ b/view/tpl/field_colorinput.tpl @@ -1,5 +1,5 @@ <div class='field input color'> - <label for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}</label> <input class='color' name='{{$field.0}}' id='id_{{$field.0}}' type="text" value="{{$field.2}}">{{if $field.4}} <span class="required">{{$field.4}}</span> {{/if}} <span id='help_{{$field.0}}' class='field_help'>{{$field.3}}</span> <div id='end_{{$field.0}}' class='field_end'></div> diff --git a/view/tpl/field_combobox.tpl b/view/tpl/field_combobox.tpl index 1f9218954..337c60673 100755 --- a/view/tpl/field_combobox.tpl +++ b/view/tpl/field_combobox.tpl @@ -1,5 +1,5 @@ <div class='field combobox'> - <label for='id_{{$field.0}}' id='id_{{$field.0}}_label'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}' id='id_{{$field.0}}_label'>{{$field.1}}</label> {{* html5 don't work on Chrome, Safari and IE9 see https://github.com/thgreasi/datalist-polyfill <input id="id_{{$field.0}}" type="text" list="data_{{$field.0}}" > <datalist id="data_{{$field.0}}" > diff --git a/view/tpl/field_custom.tpl b/view/tpl/field_custom.tpl index a6b49f6da..754f5b2f4 100755 --- a/view/tpl/field_custom.tpl +++ b/view/tpl/field_custom.tpl @@ -1,5 +1,5 @@ <div class='field custom'> - <label for='{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='{{$field.0}}'>{{$field.1}}</label> {{$field.2}} <span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_input.tpl b/view/tpl/field_input.tpl index a584f95e7..be6e3f047 100755 --- a/view/tpl/field_input.tpl +++ b/view/tpl/field_input.tpl @@ -1,5 +1,5 @@ <div class='field input'> - <label for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}</label> <input name='{{$field.0}}' id='id_{{$field.0}}' type="text" value="{{$field.2}}">{{if $field.4}} <span class="required">{{$field.4}}</span> {{/if}} <span id='help_{{$field.0}}' class='field_help'>{{$field.3}}</span> <div id='end_{{$field.0}}' class='field_end'></div> diff --git a/view/tpl/field_intcheckbox.tpl b/view/tpl/field_intcheckbox.tpl index d9a8d7289..1d0bd9175 100755 --- a/view/tpl/field_intcheckbox.tpl +++ b/view/tpl/field_intcheckbox.tpl @@ -1,5 +1,4 @@ <div class='field checkbox'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> - <input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.3}}" {{if $field.2}}checked="true"{{/if}}> - <span class='field_help'>{{$field.4}}</span> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> + <input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.3}}" {{if $field.2}}checked="true"{{/if}}><label class="switchlabel" for='id_{{$field.0}}'></label><span class='field_help'>{{$field.4}}</span> </div> diff --git a/view/tpl/field_password.tpl b/view/tpl/field_password.tpl index 23058f8a6..38ecf3d07 100755 --- a/view/tpl/field_password.tpl +++ b/view/tpl/field_password.tpl @@ -1,5 +1,5 @@ <div class='field password'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <input type='password' name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2}}"> <span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_radio.tpl b/view/tpl/field_radio.tpl index 147b6b834..a92324cad 100755 --- a/view/tpl/field_radio.tpl +++ b/view/tpl/field_radio.tpl @@ -1,5 +1,5 @@ <div class='field radio'> - <label for='id_{{$field.0}}_{{$field.2}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}_{{$field.2}}'>{{$field.1}}</label> <input type="radio" name='{{$field.0}}' id='id_{{$field.0}}_{{$field.2}}' value="{{$field.2}}" {{if $field.4}}checked="true"{{/if}}> <span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_richtext.tpl b/view/tpl/field_richtext.tpl index c8639cf10..378e02a62 100755 --- a/view/tpl/field_richtext.tpl +++ b/view/tpl/field_richtext.tpl @@ -1,5 +1,5 @@ <div class='field richtext'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <textarea name='{{$field.0}}' id='id_{{$field.0}}' class="fieldRichtext">{{$field.2}}</textarea> <span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_select.tpl b/view/tpl/field_select.tpl index 9aca26e7b..95d1855d6 100755 --- a/view/tpl/field_select.tpl +++ b/view/tpl/field_select.tpl @@ -1,5 +1,5 @@ <div class='field select'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <select name='{{$field.0}}' id='id_{{$field.0}}'> {{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}} </select> diff --git a/view/tpl/field_select_disabled.tpl b/view/tpl/field_select_disabled.tpl index f0090cf98..e241be895 100644 --- a/view/tpl/field_select_disabled.tpl +++ b/view/tpl/field_select_disabled.tpl @@ -1,5 +1,5 @@ <div class='field select'> - <label style="font-weight: normal;" for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" style="font-weight: normal;" for='id_{{$field.0}}'>{{$field.1}}</label> <select disabled="true" name='{{$field.0}}' id='id_{{$field.0}}'> {{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}} </select> diff --git a/view/tpl/field_select_raw.tpl b/view/tpl/field_select_raw.tpl index 861be3201..74d575bd0 100755 --- a/view/tpl/field_select_raw.tpl +++ b/view/tpl/field_select_raw.tpl @@ -1,5 +1,5 @@ <div class='field select'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <select name='{{$field.0}}' id='id_{{$field.0}}'> {{$field.4}} </select> diff --git a/view/tpl/field_textarea.tpl b/view/tpl/field_textarea.tpl index b454045c0..dad89a145 100755 --- a/view/tpl/field_textarea.tpl +++ b/view/tpl/field_textarea.tpl @@ -1,5 +1,5 @@ <div class='field textarea'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <textarea name='{{$field.0}}' id='id_{{$field.0}}' {{if $field.4}}{{$field.4}}{{/if}} >{{$field.2}}</textarea> <span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_themeselect.tpl b/view/tpl/field_themeselect.tpl index a0e454bf5..120727478 100755 --- a/view/tpl/field_themeselect.tpl +++ b/view/tpl/field_themeselect.tpl @@ -1,6 +1,6 @@ <script>$(document).ready(function(){ previewTheme($("#id_{{$field.0}}")[0]); });</script> <div class='field select'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <select name='{{$field.0}}' id='id_{{$field.0}}' {{if $field.5=='preview'}}onchange="previewTheme(this);"{{/if}} > {{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}} </select> diff --git a/view/tpl/field_yesno.tpl b/view/tpl/field_yesno.tpl index e36e775c7..f5a909833 100755 --- a/view/tpl/field_yesno.tpl +++ b/view/tpl/field_yesno.tpl @@ -1,5 +1,5 @@ <div class='field yesno'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <div class='onoff' id="id_{{$field.0}}_onoff"> <input type="hidden" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2}}"> <a href="#" class='off'> diff --git a/view/tpl/profile_hide_friends.tpl b/view/tpl/profile_hide_friends.tpl index 1d748cd4e..4ed6782bb 100644 --- a/view/tpl/profile_hide_friends.tpl +++ b/view/tpl/profile_hide_friends.tpl @@ -1,3 +1,6 @@ +{{include file="field_checkbox.tpl"}} + +{{* <p id="hide-friends-text"> {{$desc}} </p> @@ -14,4 +17,4 @@ <div id="hide-friends-end"></div> </div> - +*}} diff --git a/view/tpl/settings.tpl b/view/tpl/settings.tpl index 47d85d8e4..9e53d4f98 100755 --- a/view/tpl/settings.tpl +++ b/view/tpl/settings.tpl @@ -62,7 +62,7 @@ {{$suggestme}} -{{include file="field_yesno.tpl" field=$blocktags}} +{{include file="field_checkbox.tpl" field=$blocktags}} {{include file="field_input.tpl" field=$expire}} diff --git a/view/tpl/settings_features.tpl b/view/tpl/settings_features.tpl index 3291162fa..3ede4c76d 100755 --- a/view/tpl/settings_features.tpl +++ b/view/tpl/settings_features.tpl @@ -9,7 +9,7 @@ <h3 class="settings-heading">{{$f.0}}</h3> {{foreach $f.1 as $fcat}} - {{include file="{{$field_yesno}}" field=$fcat}} + {{include file="field_checkbox.tpl" field=$fcat}} {{/foreach}} {{/foreach}} |