Checkboxify yesno-fields, but use CSS to show them as switches in Redbasic
This commit is contained in:
		| @@ -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) { | ||||
|   | ||||
| @@ -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" />'; | ||||
| 		} | ||||
|   | ||||
							
								
								
									
										4
									
								
								view/css/bootstrap-red.css
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										4
									
								
								view/css/bootstrap-red.css
									
									
									
									
										vendored
									
									
								
							| @@ -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} | ||||
|   | ||||
| @@ -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; | ||||
| } | ||||
| } | ||||
|   | ||||
| @@ -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; | ||||
| } | ||||
|   | ||||
| @@ -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; | ||||
| } | ||||
| } | ||||
|   | ||||
| @@ -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; | ||||
| } | ||||
| } | ||||
|   | ||||
| @@ -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; | ||||
| } | ||||
|   | ||||
| @@ -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> | ||||
| 		<input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}}><label for='id_{{$field.0}}'></label><span class='field_help'>{{$field.3}}</span> | ||||
| 	</div> | ||||
|   | ||||
| @@ -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> | ||||
| 		<input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.3}}" {{if $field.2}}checked="true"{{/if}}><label for='id_{{$field.0}}'></label><span class='field_help'>{{$field.4}}</span> | ||||
| 	</div> | ||||
|   | ||||
| @@ -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> | ||||
|  | ||||
| *}} | ||||
|   | ||||
| @@ -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}} | ||||
|   | ||||
| @@ -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}} | ||||
|  | ||||
|   | ||||
		Reference in New Issue
	
	Block a user