design-settings.php at 3.6.4 · WP Chat App

wp-whatsapp / views / design-settings.php

design-settings.php

182 lines 11.1 KB

Raw Download Zip

1	<table class="form-table" id="app-design">
2	<p><?php echo esc_html__( 'Setting text and style for the floating widget.', 'wp-whatsapp' ); ?></p>
3	<tbody>
4	<tr>
5	<th scope="row"><label for="title"><?php echo esc_html__( 'Widget Text', 'wp-whatsapp' ); ?></label></th>
6	<td><input name="title" placeholder="Start a Conversation" type="text" id="title" value="<?php echo esc_attr( $option['title'] ); ?>" class="regular-text"></td>
7	</tr>
8
9	<tr>
10	<th scope="row"><label for="isShowBtnLabel"><?php echo esc_html__( 'Show Widget Label', 'wp-whatsapp' ); ?></label></th>
11	<td>
12	<div class="nta-wa-switch-control" style="margin-top: 5px;">
13	<input type="checkbox" id="isShowBtnLabel" name="isShowBtnLabel" <?php checked( $option['isShowBtnLabel'], 'ON' ); ?>>
14	<label for="isShowBtnLabel" class="green"></label>
15	</div>
16	</td>
17	</tr>
18
19	<tr class="<?php echo esc_attr( 'ON' === $option['isShowBtnLabel'] ? '' : 'hidden' ); ?>">
20	<th scope="row"><label for="btnLabel"><?php echo esc_html__( 'Widget Label Text', 'wp-whatsapp' ); ?></label></th>
21	<td><input name="btnLabel" placeholder="Need Help? <strong>Chat with us</strong>" type="text" id="btnLabel" value="<?php echo esc_attr( $option['btnLabel'] ); ?>" class="regular-text"></td>
22	</tr>
23
24	<tr class="<?php echo esc_attr( 'ON' === $option['isShowBtnLabel'] ? '' : 'hidden' ); ?>">
25	<th scope="row"><label for="btnLabelWidth"><?php echo esc_html__( 'Widget Label Width(px)', 'wp-whatsapp' ); ?></label></th>
26	<td>
27	<div class="range" style='--min:0; --max:500; --value:<?php echo esc_attr( $option['btnLabelWidth'] ); ?>; --text-value:"<?php echo esc_attr( $option['btnLabelWidth'] ); ?>";'>
28	<input id="btnLabelWidth" name="btnLabelWidth" type="range" min="0" max="500" value="<?php echo esc_attr( $option['btnLabelWidth'] ); ?>" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))">
29	<output></output>
30	<div class='range__progress'></div>
31	</div>
32	</td>
33	</tr>
34
35	<tr>
36	<th scope="row"><label for="textColor"><?php echo esc_html__( 'Widget Text Color', 'wp-whatsapp' ); ?></label></th>
37	<td><input type="text" id="textColor" name="textColor" value="<?php echo esc_attr( $option['textColor'] ); ?>" class="textColor" data-default-color="#fff" /></td>
38	</tr>
39
40	<tr class="setting font-size">
41	<th scope="row"><label for=""><?php echo esc_html__( 'Widget Font Size', 'wp-whatsapp' ); ?></label></th>
42	<td>
43	<div id="title-range-slider">
44	<p><?php echo esc_html__( 'Title', 'wp-whatsapp' ); ?></p>
45	<div class="range title-size" style='--min:10; --max:20; --value:<?php echo esc_attr( $option['titleSize'] ); ?>; --text-value:"<?php echo esc_attr( $option['titleSize'] ); ?>"'>
46	<input type="range" name="titleSize" min="10" max="20" value="<?php echo esc_attr( $option['titleSize'] ); ?>" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))">
47	<output></output>
48	<div class='range__progress'></div>
49	</div>
50	</div>
51	<div id="description-range-slider">
52	<p><?php echo esc_html__( 'Description', 'wp-whatsapp' ); ?></p>
53	<div class="range description-size" style='--min:10; --max:20; --value:<?php echo esc_attr( $option['descriptionTextSize'] ); ?>; --text-value:"<?php echo esc_attr( $option['descriptionTextSize'] ); ?>"'>
54	<input type="range" name="descriptionTextSize" min="10" max="20" value="<?php echo esc_attr( $option['descriptionTextSize'] ); ?>" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))"/>
55	<output></output>
56	<div class='range__progress'></div>
57	</div>
58	</div>
59	<div id="account-name-range-slider">
60	<p><?php echo esc_html__( 'Account Name', 'wp-whatsapp' ); ?></p>
61	<div class="range account-name-size" style='--min:10; --max:20; --value:<?php echo esc_attr( $option['accountNameSize'] ); ?>; --text-value:"<?php echo esc_attr( $option['accountNameSize'] ); ?>"'>
62	<input type="range" name="accountNameSize" min="10" max="20" value="<?php echo esc_attr( $option['accountNameSize'] ); ?>" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))" />
63	<output></output>
64	<div class='range__progress'></div>
65	</div>
66	</div>
67	<div id="regular-text-range-slider">
68	<p><?php echo esc_html__( 'Regular Text', 'wp-whatsapp' ); ?></p>
69	<div class="range regular-text-size" style='--min:10; --max:20; --value:<?php echo esc_attr( $option['regularTextSize'] ); ?>; --text-value:"<?php echo esc_attr( $option['regularTextSize'] ); ?>"'>
70	<input type="range" name="regularTextSize" min="10" max="20" value="<?php echo esc_attr( $option['regularTextSize'] ); ?>" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))"/>
71	<output></output>
72	<div class='range__progress'></div>
73	</div>
74	</div>
75	</td>
76	</tr>
77
78	<tr>
79	<th scope="row"><label for="backgroundColor"><?php echo esc_html__( 'Widget Background Color', 'wp-whatsapp' ); ?></label></th>
80	<td><input id="backgroundColor" type="text" name="backgroundColor" value="<?php echo esc_attr( $option['backgroundColor'] ); ?>" class="backgroundColor" data-default-color="#2db742" /></td>
81	</tr>
82	<tr>
83	<th scope="row"><label for=""><?php echo esc_html__( 'Widget Position', 'wp-whatsapp' ); ?></label></th>
84	<td>
85	<div class="setting align">
86	<div class="button-group button-large" data-setting="align">
87	<button class="button btn-left disabled njt-wa-pro-tooltip <?php echo esc_attr( 'left' === $option['btnPosition'] ? 'active' : '' ); ?>" value="left" type="button">
88	<?php echo esc_html__( 'Left', 'wp-whatsapp' ); ?>
89	</button>
90	<button class="button btn-right <?php echo esc_attr( 'right' === $option['btnPosition'] ? 'active' : '' ); ?>" value="right" type="button">
91	<?php echo esc_html__( 'Right', 'wp-whatsapp' ); ?>
92	</button>
93	</div>
94	<input name="btnPosition" id="btnPosition" class="hidden" value="<?php echo esc_attr( $option['btnPosition'] ); ?>" />
95	</div>
96	</td>
97	</tr>
98	<tr>
99	<th scope="row"><label for=""><?php echo esc_html__( 'Widget Distance', 'wp-whatsapp' ); ?></label></th>
100	<td>
101	<div id="left-range-slider">
102	<div>Left</div>
103	<div class="range" style='--min:0; --max:500; --value:<?php echo esc_attr( $option['btnLeftDistance'] ); ?>; --text-value:"<?php echo esc_attr( $option['btnLeftDistance'] ); ?>";'>
104	<input id="btnLeftDistance" name="btnLeftDistance" type="range" min="0" max="500" value="<?php echo esc_attr( $option['btnLeftDistance'] ); ?>" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))">
105	<output></output>
106	<div class='range__progress'></div>
107	</div>
108	</div>
109	<div id="right-range-slider">
110	<div>Right</div>
111	<div class="range" style='--min:0; --max:500; --value:<?php echo esc_attr( $option['btnRightDistance'] ); ?>; --text-value:"<?php echo esc_attr( $option['btnRightDistance'] ); ?>";'>
112	<input id="btnRightDistance" name="btnRightDistance" type="range" min="0" max="500" value="<?php echo esc_attr( $option['btnRightDistance'] ); ?>" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))">
113	<output></output>
114	<div class='range__progress'></div>
115	</div>
116	</div>
117	<div>
118	<div>Bottom</div>
119	<div class="range" style='--min:0; --max:500; --value:<?php echo esc_attr( $option['btnBottomDistance'] ); ?>; --text-value:"<?php echo esc_attr( $option['btnBottomDistance'] ); ?>";'>
120	<input id="btnBottomDistance" name="btnBottomDistance" type="range" min="0" max="500" value="<?php echo esc_attr( $option['btnBottomDistance'] ); ?>" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))">
121	<output></output>
122	<div class='range__progress'></div>
123	</div>
124	</div>
125	</td>
126	</tr>
127	<tr>
128	<th scope="row"><label for=""><?php echo esc_html__( 'Widget Scroll Bar (PRO)', 'wp-whatsapp' ); ?><span class="dashicons dashicons-editor-help njt-wa-tooltip"></span></label></th>
129	<td>
130	<div class="nta-wa-switch-control" style="margin-top: 5px;">
131	<input class="njt-wa-pro" type="checkbox" id="isShowScroll" name="isShowScroll" <?php checked( $option['isShowScroll'], 'ON' ); ?>>
132	<label for="isShowScroll" class="green njt-wa-pro-tooltip"></label>
133	</div>
134	</td>
135	</tr>
136	<tr>
137	<th scope="row"><label for=""><?php echo esc_html__( 'Powered-by Label (PRO)', 'wp-whatsapp' ); ?></label></th>
138	<td>
139	<div class="nta-wa-switch-control" style="margin-top: 5px;">
140	<input class="njt-wa-pro" type="checkbox" id="isShowPoweredBy" name="isShowPoweredBy" <?php checked( $option['isShowPoweredBy'], 'ON' ); ?>>
141	<label for="isShowPoweredBy" class="green njt-wa-pro-tooltip"></label>
142	</div>
143	</td>
144	</tr>
145	<tr class="<?php echo esc_attr( 'ON' === $option['isShowScroll'] ? '' : 'hidden' ); ?>">
146	<th scope="row"><label for=""></label></th>
147	<td>
148	<div class="range" style='--min:300; --max:1000; --value:<?php echo esc_attr( $option['scrollHeight'] ); ?>; --text-value:"<?php echo esc_attr( $option['scrollHeight'] ); ?>";'>
149	<input id="scrollHeight" name="scrollHeight" type="range" min="300" max="1000" value="<?php echo esc_attr( $option['scrollHeight'] ); ?>" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))">
150	<output></output>
151	<div class='range__progress'></div>
152	</div>
153	</td>
154	</tr>
155	<tr>
156	<th scope="row"><label for="responseText"><?php echo esc_html__( 'Response Time Text', 'wp-whatsapp' ); ?></label></th>
157	<td>
158	<?php wp_editor( $option['responseText'], 'responseText', $editor_settings ); ?>
159	</td>
160	</tr>
161	<tr>
162	<th scope="row"><label for="wp-description-wrap"><?php echo esc_html__( 'Description', 'wp-whatsapp' ); ?></label></th>
163	<td>
164	<?php wp_editor( $option['description'], 'description', $editor_settings_quicktags ); ?>
165	</td>
166	</tr>
167	<tr>
168	<th scope="row"><label for="gdprContent"><?php echo esc_html__( 'GDPR Notice', 'wp-whatsapp' ); ?></label></th>
169	<td>
170	<div class="nta-wa-switch-control" style="margin-top: 5px;">
171	<input type="checkbox" id="nta-wa-switch-gdpr" name="isShowGDPR" <?php checked( $option['isShowGDPR'], 'ON' ); ?>>
172	<label for="nta-wa-switch-gdpr" class="green"></label>
173	</div>
174	<br />
175	<div id="nta-gdpr-editor" class="<?php echo esc_attr( 'ON' === $option['isShowGDPR'] ? '' : 'hidden' ); ?>">
176	<?php wp_editor( $option['gdprContent'], 'gdprContent', $editor_settings_quicktags ); ?>
177	</div>
178	</td>
179	</tr>
180	</tbody>
181	</table>
182	<button class="button button-large button-primary wa-save"><?php echo esc_html__( 'Save Changes', 'wp-whatsapp' ); ?><span></span></button>