From 70f0019905f8c44ed875379a9af65988e536b4f4 Mon Sep 17 00:00:00 2001 From: Stefan Parviainen Date: Thu, 1 Jan 2015 10:08:20 +0100 Subject: Checkboxify yesno-fields, but use CSS to show them as switches in Redbasic --- mod/profiles.php | 13 +++---- mod/settings.php | 20 +++++++--- view/css/bootstrap-red.css | 4 ++ view/css/mod_connect.css | 5 ++- view/css/mod_group.css | 3 +- view/css/mod_settings.css | 8 ++-- view/css/mod_thing.css | 6 +-- view/theme/redbasic/css/style.css | 81 ++++++++++++++++++++++++++++++++++++--- view/tpl/field_checkbox.tpl | 3 +- view/tpl/field_intcheckbox.tpl | 3 +- view/tpl/profile_hide_friends.tpl | 5 ++- view/tpl/settings.tpl | 2 +- view/tpl/settings_features.tpl | 2 +- 13 files changed, 120 insertions(+), 35 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 = ''; } 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..da1265c52 100644 --- a/view/css/mod_connect.css +++ b/view/css/mod_connect.css @@ -6,6 +6,7 @@ margin-top: 25px; } -#sellpage-edit label{ +/* first-of-type needed to style switches */ +#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..cd6b7acc7 100644 --- a/view/css/mod_group.css +++ b/view/css/mod_group.css @@ -3,7 +3,8 @@ margin-top: 30px; } -#group-edit-form label { +/* first-of-type needed to style switches */ +#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..7b0c8e7ed 100644 --- a/view/css/mod_settings.css +++ b/view/css/mod_settings.css @@ -28,7 +28,8 @@ 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:first-of-type { width: 350px; } @@ -41,7 +42,8 @@ ul#settings-privacy-macros { margin-bottom: 45px; } -#settings-notifications label { +/* first-of-type needed to be able to style switches */ +#settings-notifications .field label:first-of-type { margin-left: 20px; width: 330px; } @@ -63,4 +65,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..9c1eb2b21 100644 --- a/view/css/mod_thing.css +++ b/view/css/mod_thing.css @@ -4,8 +4,8 @@ margin-left: 0; } - -.thing-label, .field label, .thing-verb-label, .thing-profile-label{ +/* first-of-type needed to style switches */ +.thing-label, .field label:first-of-type, .thing-verb-label, .thing-profile-label{ float: left; width: 350px; } @@ -18,4 +18,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..f88febf4d 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -301,14 +301,13 @@ 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:first-of-type { margin-bottom: 0; float: left; width: 100px; @@ -373,13 +372,15 @@ 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:first-of-type { width: 175px; } #profile-edit-wrapper .field input[type="text"] { - margin-top: 20px; width: 220px; } @@ -1242,7 +1243,8 @@ footer { width: 100% } -.field label { +/* first-of-type needed to style switches */ +.field label:first-of-type { float: left; width: 350px; } @@ -1296,6 +1298,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 +2354,68 @@ 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: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: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_checkbox.tpl b/view/tpl/field_checkbox.tpl index 51d56f69c..7e4f00a2d 100755 --- a/view/tpl/field_checkbox.tpl +++ b/view/tpl/field_checkbox.tpl @@ -1,5 +1,4 @@
- - {{$field.3}} + {{$field.3}}
diff --git a/view/tpl/field_intcheckbox.tpl b/view/tpl/field_intcheckbox.tpl index d9a8d7289..41ee46822 100755 --- a/view/tpl/field_intcheckbox.tpl +++ b/view/tpl/field_intcheckbox.tpl @@ -1,5 +1,4 @@
- - {{$field.4}} + {{$field.4}}
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"}} + +{{*

{{$desc}}

@@ -14,4 +17,4 @@
- +*}} 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 @@

{{$f.0}}

{{foreach $f.1 as $fcat}} - {{include file="{{$field_yesno}}" field=$fcat}} + {{include file="field_checkbox.tpl" field=$fcat}} {{/foreach}} {{/foreach}} -- cgit v1.2.3