Contact Form 7 Style - Version 2.1

Version Description

New feature - Google fonts preview when edit the style
New feature - List all styles thumbnail preview for predefined templates

Release Info

Developer	mlehelsz
Plugin	Contact Form 7 Style
Version	2.1
Comparing to
See all releases

Code changes from version 2.0.1 to 2.1

Files changed (7) hide show

admin/css/admin.css +67 -0
admin/images/menu-icon.png +0 -0
admin/images/screen-icon.png +0 -0
admin/js/admin.js +15 -28
cf7-style-meta-box.php +10 -4
cf7-style.php +22 -4
readme.txt +4 -0

admin/css/admin.css CHANGED Viewed

@@ -1,4 +1,71 @@
             /* After update admin css */
             .wp-admin .widefat .different-style input {
             	margin: 0 10px 0 0;
             	height: 21px;


1	/* After update admin css */
2	+ .menu-icon-cf7_style .dashicons-twitter {
3	+ position: relative;
4	+ }
5	+ .post-type-cf7_style .wp-list-table tr {
6	+ position: relative;
7	+ }
8	+ .post-type-cf7_style #preview-style {
9	+ width: 200px;
10	+ }
11	+ .post-type-cf7_style .preview-style {
12	+ text-align: center;
13	+ }
14	+ .post-type-cf7_style .thumb-preview {
15	+ width: 50px;
16	+ display: inline-block;
17	+ }
18	+ .post-type-cf7_style .thumb-preview:hover .previewed-img {
19	+ opacity: 1;
20	+ visibility: visible;
21	+ }
22	+ .post-type-cf7_style .thumb-preview img {
23	+ width: 100%;
24	+ }
25	+ .post-type-cf7_style .previewed-img {
26	+ opacity: 0;
27	+ visibility: hidden;
28	+ position: absolute;
29	+ z-index: 100;
30	+ top: -70px;
31	+ left: 30px;
32	+ width: 202px;
33	+ height: auto;
34	+ border: 1px solid #e1e1e1;
35	+ padding: 5px;
36	+ background-color: #fff;
37	+ -webkit-transition: all 300ms ease-in-out;
38	+ -moz-transition: all 300ms ease-in-out;
39	+ -ms-transition: all 300ms ease-in-out;
40	+ -o-transition: all 300ms ease-in-out;
41	+ transition: all 300ms ease-in-out;
42	+ }
43	+ .post-type-cf7_style select[ name='cf7_style_font_selector' ] {
44	+ float: left;
45	+ margin-right: 10px;
46	+ width: 25%;
47	+ margin-bottom: 15px;
48	+ }
49	+ .cf7-style.preview-zone {
50	+ border: 1px solid #e5e5e5;
51	+ padding: 8px 4px;
52	+ width: 70%;
53	+ float: left;
54	+ }
55	+ .cf7-style.preview-zone h4 {
56	+ margin: 5px 0 10px;
57	+ }
58	+ .cf7-style.preview-zone p {
59	+ font-size: 14px;
60	+ }
61	+ .menu-icon-cf7_style .dashicons-twitter:after {
62	+ color: #000;
63	+ content: ".";
64	+ font-size: 10px;
65	+ left: 20px;
66	+ position: absolute;
67	+ top: 0;
68	+ }
69	.wp-admin .widefat .different-style input {
70	margin: 0 10px 0 0;
71	height: 21px;

admin/images/menu-icon.png DELETED Viewed

Binary file

admin/images/screen-icon.png DELETED Viewed

Binary file

admin/js/admin.js CHANGED Viewed

@@ -1,40 +1,27 @@
             /*
             jQuery functions for the Admin area
             */
             jQuery(document).ready( function( $ ) {
-            -
-            -
            	// Select a Contact style
-            -
            	$(".cf7_style_templates li").on( "click", function() {
-            -
-            -
            		var eq = $(this).index();
-            -
-            -
            		$('.cf7_style_templates li').removeClass( 'selected' );
-            -
            		$(this).addClass( 'selected' );
-            -
-            -
            		$('.cf7_style_select select > option:eq('+ eq +')').attr( 'selected', true );
-            -
-            -
            	});
-            -
            	var xmasIndex = $('#cf7_style_templates option:selected').index();
-            -
            	$('.cf7_style_templates li').removeClass( 'selected' ).eq( xmasIndex ).addClass( 'selected' );
-            -
-            -
            	$('.cf7_style_admin .cf7_style_select').first().hide();
-            -
-            -
            	//controlling the custom style panels
-            -
            	$('.generalssetpanel').click(function() {
-            -
            		$('.generals').slideToggle();
-            -
            	});
-            -
            	$('.inputsandlabelspanel').click(function() {
-            -
            		$('.labelsandinputsset').slideToggle();
-            -
            	});
-            -
            	$('.submitbuttonsetpanel').click(function() {
-            -
            		$('.submitbuttonset').slideToggle();
-            -
            	});
-            -
            	/*new update*/
             	$('.cf7-style-color-field').wpColorPicker();
             	$("#select_all").on("click", function(){
             		$(".cf7style_body_select_all input").prop('checked', ( $(this).is(":checked") ) ? true : false );
             	});
             });


1	/*
2	jQuery functions for the Admin area
3	*/
4	+ function changeFont( value ) {
5	+ $(".google-fontos").remove();
6	+ if( "none" != value ) {
7	+ $("head").append('<link class="google-fontos" rel="stylesheet" href="http://fonts.googleapis.com/css?family='+value+':100,200,300,400,500,600,700,800,900&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese" />');
8	+ $(".cf7-style.preview-zone p").css("font-family", "'"+value+"', sans-serif" );
9	+ }
10	+ }
11	jQuery(document).ready( function( $ ) {












12
13	+ var selectVar = $('select[name=cf7_style_font_selector]');














14

15	$('.cf7-style-color-field').wpColorPicker();
16	+
17	$("#select_all").on("click", function(){
18	$(".cf7style_body_select_all input").prop('checked', ( $(this).is(":checked") ) ? true : false );
19	});
20	+
21	+ changeFont( selectVar.val() );
22	+ selectVar.on( "change", function(){
23	+ changeFont( $( this ).val() );
24	+ });
25	+
26	});
27

cf7-style-meta-box.php CHANGED Viewed

	@@ -418,7 +418,7 @@ class cf7_style_meta_boxes {
418	<td>
419	<input type="checkbox" id="<?php echo cf7_style_the_slug(); ?>" name="<?php echo cf7_style_the_slug(); ?>" value="<?php echo get_the_ID(); ?>" <?php if ( $currentpostid == $cf7stylehas ) { echo 'checked'; } ?> />
420	<?php if ( $currentpostid != $cf7stylehas && !empty( $cf7stylehas ) ) {
421	- echo '<p class="description">' . __('Notice: This form allready has a selected style. Checking this one will overwrite the ') . '<a href="' . get_admin_url() . '/post.php?post_type=cf7_style&post=' . $cf7stylehas . '&action=edit">' . __('other one.') . '</a></p>';
422	} ?>
423	</td>
424	</tr>
	@@ -457,7 +457,7 @@ class cf7_style_meta_boxes {
457	public function render_meta_box_image( $post ) {
458	$image = get_post_meta( $post->ID, 'cf7_style_image_preview', true );
459	if ( !empty( $image ) ) {
460	- echo '<img src="' . plugins_url() . '/contact-form-7-style/' . $image . '" alt="' . $post->title . '" />';
461	} else {
462	//here will be the placeholder in case the image is not available
463	$image = 'default_form.jpg';
	@@ -501,11 +501,17 @@ class cf7_style_meta_boxes {
501	$cf7_style_font = get_post_meta( $post->ID, 'cf7_style_font', true );
502	$selected = '';
503	echo '<select name="cf7_style_font_selector">';
504	- echo '<option>None</option>';
505	foreach ($font_obj->items as $font) {
506	echo '<option value="' . $font->family . '"' . ( $cf7_style_font == $font->family ? 'selected="selected"' : '' ) . '>' . $font->family . '</option>';
507	}
508	- echo '</select>';






509	}
510
511	/**


418	<td>
419	<input type="checkbox" id="<?php echo cf7_style_the_slug(); ?>" name="<?php echo cf7_style_the_slug(); ?>" value="<?php echo get_the_ID(); ?>" <?php if ( $currentpostid == $cf7stylehas ) { echo 'checked'; } ?> />
420	<?php if ( $currentpostid != $cf7stylehas && !empty( $cf7stylehas ) ) {
421	+ echo '<p class="description">' . __('Notice: This form allready has a selected style. Checking this one will overwrite the ') . '<a href="' . get_admin_url() . 'post.php?post_type=cf7_style&post=' . $cf7stylehas . '&action=edit">' . __('other one.') . '</a></p>';
422	} ?>
423	</td>
424	</tr>

457	public function render_meta_box_image( $post ) {
458	$image = get_post_meta( $post->ID, 'cf7_style_image_preview', true );
459	if ( !empty( $image ) ) {
460	+ echo '<img src="' . plugins_url() . '/contact-form-7-style' . $image . '" alt="' . $post->title . '" />';
461	} else {
462	//here will be the placeholder in case the image is not available
463	$image = 'default_form.jpg';

501	$cf7_style_font = get_post_meta( $post->ID, 'cf7_style_font', true );
502	$selected = '';
503	echo '<select name="cf7_style_font_selector">';
504	+ echo '<option value="none">None</option>';
505	foreach ($font_obj->items as $font) {
506	echo '<option value="' . $font->family . '"' . ( $cf7_style_font == $font->family ? 'selected="selected"' : '' ) . '>' . $font->family . '</option>';
507	}
508	+ echo '</select>'; ?>
509	+ <div class="cf7-style preview-zone">
510	+ <h4>Preview Selected font:</h4>
511	+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus ultrices neque sit amet consequat. Aenean facilisis massa convallis nisl viverra eleifend. Nam fermentum mauris eu eleifend posuere. Duis at pharetra tellus. Suspendisse viverra tempor tellus, non efficitur nibh posuere nec. Sed vitae pellentesque augue, id efficitur enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eros turpis, hendrerit id condimentum vitae, fermentum ut dolor. Cras quis lobortis ante.</p>
512	+ </div>
513	+ <div class="clear"></div>
514	+ <?php
515	}
516
517	/**

cf7-style.php CHANGED Viewed

	@@ -3,7 +3,7 @@
3	Plugin Name: Contact Form 7 Style
4	Plugin URI: http://wordpress.reea.net/contact-form-7-style/
5	Description: Contact form 7 Style
6	- Version: 2.0.1
7	Author: REEA
8	Author URI: http://www.reea.net/
9	License: GPL2
	@@ -298,7 +298,7 @@ function cf7style_load_elements(){
298	'show_in_menu' => true,
299	'show_in_nav_menus' => true,
300	'show_in_admin_bar' => false,
301	- 'menu_icon' => "dashicons-twitter",
302	'menu_position' => 28.555555,
303	'can_export' => true,
304	'has_archive' => false,
	@@ -370,9 +370,27 @@ function cf7style_load_elements(){
370	add_action( 'admin_init', 'cf7_style_admin_scripts' );
371	add_action( 'init', 'cf7style_load_elements' );
372	add_action( 'restrict_manage_posts', 'cf7_style_add_taxonomy_filters' );
373	- add_action( 'publish_cf7_style', 'cf7_style_set_style_category_on_publish', 10, 2 );
374	add_filter( 'wpcf7_form_class_attr', 'cf7_style_add_class' );
375	-


















376
377	/**
378	* Reset the cf7_style_cookie option


3	Plugin Name: Contact Form 7 Style
4	Plugin URI: http://wordpress.reea.net/contact-form-7-style/
5	Description: Contact form 7 Style
6	+ Version: 2.1
7	Author: REEA
8	Author URI: http://www.reea.net/
9	License: GPL2

298	'show_in_menu' => true,
299	'show_in_nav_menus' => true,
300	'show_in_admin_bar' => false,
301	+ 'menu_icon' => "dashicons-twitter",
302	'menu_position' => 28.555555,
303	'can_export' => true,
304	'has_archive' => false,

370	add_action( 'admin_init', 'cf7_style_admin_scripts' );
371	add_action( 'init', 'cf7style_load_elements' );
372	add_action( 'restrict_manage_posts', 'cf7_style_add_taxonomy_filters' );
373	+ add_action( 'publish_cf7_style', 'cf7_style_set_style_category_on_publish', 10, 2 );
374	add_filter( 'wpcf7_form_class_attr', 'cf7_style_add_class' );
375	+ add_filter('manage_cf7_style_posts_columns', 'cf7_style_event_table_head');
376	+ add_action( 'manage_cf7_style_posts_custom_column', 'cf7_style_event_table_content', 10, 2 );
377	+ function cf7_style_event_table_head( $defaults ) {
378	+ $new = array();
379	+ foreach( $defaults as $key=>$value) {
380	+ if( $key=='title') { // when we find the date column
381	+ $new['preview-style'] = 'Preview Style';
382	+ }
383	+ $new[$key]=$value;
384	+ }
385	+ return $new;
386	+ }
387	+ function cf7_style_event_table_content( $column_name, $post_id ) {
388	+ // cf7_style_image_preview
389	+ if ( $column_name == 'preview-style' ) {
390	+ $img_src = get_post_meta( $post_id, 'cf7_style_image_preview', true );
391	+ echo "<a href='".admin_url() ."post.php?post=".$post_id."&action=edit"."'><span class='thumb-preview'><img src='" . plugins_url() ."/"."contact-form-7-style". ( empty( $img_src ) ? "/images/default_form.jpg" : $img_src ) . "' alt='".get_the_title( $post_id )."' title='".get_the_title( $post_id )."'/><div class='previewed-img'><img src='" . plugins_url() ."/"."contact-form-7-style". ( empty( $img_src ) ? "/images/default_form.jpg" : $img_src ) . "' alt='".get_the_title( $post_id )."' title='Edit ".get_the_title( $post_id )." Style'/></div></span></a>" ;
392	+ }
393	+ }
394
395	/**
396	* Reset the cf7_style_cookie option

readme.txt CHANGED Viewed

	@@ -40,6 +40,10 @@ You will find 'Contact Style' menu in your WordPress admin panel.
40
41	== Changelog ==
42




43	= 2.0.1 =
44	* Admin panel minor adjustments
45


40
41	== Changelog ==
42
43	+ = 2.1 =
44	+ * New feature - Google fonts preview when edit the style
45	+ * New feature - List all styles thumbnail preview for predefined templates
46	+
47	= 2.0.1 =
48	* Admin panel minor adjustments
49