← All changes | includes/elementor-widgets/property-actions.php +158 -29 1.4.60 → 2.4.0 View file →

		@@ -14,9 +14,9 @@
14	14	return __( 'Actions', 'propertyhive' );
15	15	}
16	16
17	17	public function get_icon() {
18		- return 'fa fa-hand-pointer';
	18	+ return 'eicon-button';
19	19	}
20	20
21	21	public function get_categories() {
22	22	return [ 'property-hive' ];
		@@ -25,9 +25,9 @@
25	25	public function get_keywords() {
26	26	return [ 'property hive', 'propertyhive', 'property', 'actions', 'buttons', 'enquiry' ];
27	27	}
28	28
29		- protected function _register_controls() {
	29	+ protected function register_controls() {
30	30
31	31	$this->start_controls_section(
32	32	'style_section',
33	33	[
		@@ -38,18 +38,18 @@
38	38
39	39	$this->add_control(
40	40	'display',
41	41	[
42		- 'label' => __( 'Display As', 'plugin-domain' ),
	42	+ 'label' => __( 'Display As', 'propertyhive' ),
43	43	'type' => \Elementor\Controls_Manager::CHOOSE,
44	44	'options' => [
45	45	'list' => [
46		- 'title' => __( 'List', 'plugin-domain' ),
47		- 'icon' => 'fa fa-list',
	46	+ 'title' => __( 'List', 'propertyhive' ),
	47	+ 'icon' => 'eicon-editor-list-ul',
48	48	],
49	49	'buttons' => [
50		- 'title' => __( 'Buttons', 'plugin-domain' ),
51		- 'icon' => 'fa fa-ellipsis-h',
	50	+ 'title' => __( 'Buttons', 'propertyhive' ),
	51	+ 'icon' => 'eicon-button',
52	52	],
53	53	],
54	54	'default' => 'list',
55	55	'toggle' => false,
		@@ -55,44 +55,121 @@
55	55	'toggle' => false,
56	56	]
57	57	);
58	58
	59	+ $this->add_responsive_control(
	60	+ 'button_layout',
	61	+ [
	62	+ 'label' => __( 'Button Layout', 'propertyhive' ),
	63	+ 'type' => \Elementor\Controls_Manager::SELECT,
	64	+ 'options' => [
	65	+ 'inline' => __( 'Inline', 'propertyhive' ),
	66	+ 'equal' => __( 'Equal Width', 'propertyhive' ),
	67	+ 'fixed' => __( 'Fixed Width', 'propertyhive' ),
	68	+ ],
	69	+ 'default' => 'inline',
	70	+ 'toggle' => false,
	71	+ 'condition' => [
	72	+ 'display' => 'buttons',
	73	+ ],
	74	+ ]
	75	+ );
	76	+
	77	+ $this->add_responsive_control(
	78	+ 'fixed_button_width',
	79	+ [
	80	+ 'label' => __( 'Button Width', 'propertyhive' ),
	81	+ 'type' => \Elementor\Controls_Manager::SLIDER,
	82	+ 'size_units' => [ 'px', '%' ],
	83	+ 'range' => [
	84	+ 'px' => [
	85	+ 'min' => 40,
	86	+ 'max' => 600,
	87	+ ],
	88	+ '%' => [
	89	+ 'min' => 5,
	90	+ 'max' => 100,
	91	+ ],
	92	+ ],
	93	+ 'condition' => [
	94	+ 'display' => 'buttons',
	95	+ 'button_layout' => 'fixed',
	96	+ ],
	97	+ ]
	98	+ );
	99	+
	100	+ $this->start_controls_tabs( 'button_style_tabs' );
	101	+
	102	+ // Normal tab
	103	+ $this->start_controls_tab(
	104	+ 'button_style_normal',
	105	+ [
	106	+ 'label' => __( 'Normal', 'propertyhive' ),
	107	+ 'condition' => [
	108	+ 'display' => 'buttons',
	109	+ ],
	110	+ ]
	111	+ );
	112	+
59	113	$this->add_control(
60	114	'button_background_color',
61	115	[
62		- 'label' => __( 'Button Background Colour', 'propertyhive' ),
63		- 'type' => \Elementor\Controls_Manager::COLOR,
64		- 'scheme' => [
65		- 'type' => \Elementor\Scheme_Color::get_type(),
66		- 'value' => \Elementor\Scheme_Color::COLOR_1,
	116	+ 'label' => __( 'Background Colour', 'propertyhive' ),
	117	+ 'type' => \Elementor\Controls_Manager::COLOR,
	118	+ 'selectors' => [
	119	+ '{{WRAPPER}} .property_actions ul li a' => 'background-color: {{VALUE}};',
67	120	],
	121	+ ]
	122	+ );
	123	+
	124	+ $this->add_control(
	125	+ 'button_text_color',
	126	+ [
	127	+ 'label' => __( 'Text Colour', 'propertyhive' ),
	128	+ 'type' => \Elementor\Controls_Manager::COLOR,
68	129	'selectors' => [
69		- '{{WRAPPER}} .property_actions ul li a' => 'background: {{VALUE}}',
	130	+ '{{WRAPPER}} .property_actions ul li a' => 'color: {{VALUE}};',
70	131	],
	132	+ ]
	133	+ );
	134	+
	135	+ $this->end_controls_tab();
	136	+
	137	+ // Hover tab
	138	+ $this->start_controls_tab(
	139	+ 'button_style_hover',
	140	+ [
	141	+ 'label' => __( 'Hover', 'propertyhive' ),
71	142	'condition' => [
72		- 'display' => 'buttons'
73		- ],
	143	+ 'display' => 'buttons',
	144	+ ],
74	145	]
75	146	);
76	147
77	148	$this->add_control(
78		- 'button_text_color',
	149	+ 'button_background_hover_color',
79	150	[
80		- 'label' => __( 'Button Text Colour', 'propertyhive' ),
81		- 'type' => \Elementor\Controls_Manager::COLOR,
82		- 'scheme' => [
83		- 'type' => \Elementor\Scheme_Color::get_type(),
84		- 'value' => \Elementor\Scheme_Color::COLOR_1,
	151	+ 'label' => __( 'Background Colour', 'propertyhive' ),
	152	+ 'type' => \Elementor\Controls_Manager::COLOR,
	153	+ 'selectors' => [
	154	+ '{{WRAPPER}} .property_actions ul li a:hover' => 'background-color: {{VALUE}};',
85	155	],
	156	+ ]
	157	+ );
	158	+
	159	+ $this->add_control(
	160	+ 'button_text_hover_color',
	161	+ [
	162	+ 'label' => __( 'Text Colour', 'propertyhive' ),
	163	+ 'type' => \Elementor\Controls_Manager::COLOR,
86	164	'selectors' => [
87		- '{{WRAPPER}} .property_actions ul li a' => 'color: {{VALUE}}',
	165	+ '{{WRAPPER}} .property_actions ul li a:hover' => 'color: {{VALUE}};',
88	166	],
89		- 'condition' => [
90		- 'display' => 'buttons'
91		- ],
92	167	]
93	168	);
94	169
	170	+ $this->end_controls_tab();
	171	+
95	172	$this->add_control(
96	173	'button_padding',
97	174	[
98	175	'label' => __( 'Button Padding', 'propertyhive' ),
		@@ -149,17 +226,69 @@
149	226	if ( !isset($property->id) ) {
150	227	return;
151	228	}
152	229
153		- if ( isset($settings['display']) && $settings['display'] == 'buttons' )
	230	+ if ( isset( $settings['display'] ) && 'buttons' === $settings['display'] )
154	231	{
	232	+ $breakpoints = \Elementor\Plugin::$instance->breakpoints->get_active_breakpoints();
	233	+
	234	+ $tablet_breakpoint = isset($breakpoints['tablet']) ? $breakpoints['tablet']->get_value() : 1024;
	235	+ $mobile_breakpoint = isset($breakpoints['mobile']) ? $breakpoints['mobile']->get_value() : 767;
	236	+
155	237	echo '<style type="text/css">';
156		- echo '.property_actions ul { list-style-type:none; margin:0; padding:0; }';
157		- echo '.property_actions ul li { display:inline-block; }';
158		- echo '.property_actions ul li a { display:block; }';
	238	+ echo '.property_actions ul { display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; }';
	239	+ echo '.property_actions ul li { float:none }';
	240	+ echo '.property_actions ul li a { display:block; width:100%; box-sizing:border-box; text-align:center; }';
	241	+
	242	+ // Desktop
	243	+ $this->output_layout_css( $settings, '' );
	244	+
	245	+ // Tablet
	246	+ echo '@media (max-width: ' . (int) $tablet_breakpoint . 'px) {';
	247	+ $this->output_layout_css( $settings, '_tablet' );
	248	+ echo '}';
	249	+
	250	+ // Mobile
	251	+ echo '@media (max-width: ' . (int) $mobile_breakpoint . 'px) {';
	252	+ $this->output_layout_css( $settings, '_mobile' );
	253	+ echo '}';
159	254	echo '</style>';
160	255	}
161	256
162	257	propertyhive_template_single_actions();
163	258
	259	+ }
	260	+
	261	+ protected function output_layout_css( $settings, $suffix = '' ) {
	262	+
	263	+ $layout_key = 'button_layout' . $suffix;
	264	+ $width_key = 'fixed_button_width' . $suffix;
	265	+
	266	+ $layout = isset( $settings[ $layout_key ] ) ? $settings[ $layout_key ] : '';
	267	+
	268	+ if ( ! $layout && '' !== $suffix && isset( $settings['button_layout'] ) ) {
	269	+ $layout = $settings['button_layout'];
	270	+ }
	271	+
	272	+ switch ( $layout ) {
	273	+ case 'equal':
	274	+ echo '.property_actions ul li { flex:1 1 0; }';
	275	+ break;
	276	+
	277	+ case 'fixed':
	278	+ $size = isset( $settings[ $width_key ]['size'] ) ? $settings[ $width_key ]['size'] : '';
	279	+ $unit = isset( $settings[ $width_key ]['unit'] ) ? $settings[ $width_key ]['unit'] : 'px';
	280	+
	281	+ if ( $size ) {
	282	+ echo '.property_actions ul li { flex:0 0 ' . esc_attr( $size . $unit ) . '; max-width:' . esc_attr( $size . $unit ) . '; }';
	283	+ } else {
	284	+ echo '.property_actions ul li { flex:0 0 auto; }';
	285	+ }
	286	+ break;
	287	+
	288	+ case 'inline':
	289	+ default:
	290	+ echo '.property_actions ul li { flex:0 0 auto; }';
	291	+ break;
	292	+ }
164	293	}
165	294	}