| @@ -222,8 +222,9 @@ | ||
| 222 | 222 | } |
| 223 | 223 | // Added by Ash/Upwork |
| 224 | 224 | echo $this->custom_css; |
| 225 | 225 | echo '<div id="visualizer-types" class="visualizer-clearfix">'; |
| 226 | + echo '<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="list-icon" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM7.385 12.66H6.045L2.805 8.12L4.146 6.87L6.715 9.27L11.856 3.339L13.196 4.279L7.385 12.66Z"/></symbol></svg>'; | |
| 226 | 227 | $this->getDisplayForm(); |
| 227 | 228 | echo '</div>'; |
| 228 | 229 | echo '<div id="visualizer-content-wrapper">'; |
| 229 | 230 | if ( ! empty( $this->charts ) ) { |
| @@ -229,12 +230,15 @@ | ||
| 229 | 230 | if ( ! empty( $this->charts ) ) { |
| 230 | 231 | echo '<div id="visualizer-library" class="visualizer-clearfix">'; |
| 231 | 232 | $count = 0; |
| 232 | 233 | foreach ( $this->charts as $placeholder_id => $chart ) { |
| 233 | - $this->_renderChartBox( $placeholder_id, $chart['id'] ); | |
| 234 | 234 | // show the sidebar after the first 3 charts. |
| 235 | - if ( $count++ === 2 ) { | |
| 235 | + $count++; | |
| 236 | + if ( 3 === $count ) { | |
| 236 | 237 | $this->_renderSidebar(); |
| 238 | + $this->_renderChartBox( $placeholder_id, $chart['id'] ); | |
| 239 | + } else { | |
| 240 | + $this->_renderChartBox( $placeholder_id, $chart['id'] ); | |
| 237 | 241 | } |
| 238 | 242 | } |
| 239 | 243 | // show the sidebar if there are less than 3 charts. |
| 240 | 244 | if ( $count < 3 ) { |
| @@ -242,9 +246,9 @@ | ||
| 242 | 246 | } |
| 243 | 247 | echo '</div>'; |
| 244 | 248 | } else { |
| 245 | 249 | echo '<div id="visualizer-library" class="visualizer-clearfix">'; |
| 246 | - echo '<div class="visualizer-chart">'; | |
| 250 | + echo '<div class="items"><div class="visualizer-chart">'; | |
| 247 | 251 | echo '<div class="visualizer-chart-canvas visualizer-nochart-canvas">'; |
| 248 | 252 | echo '<div class="visualizer-notfound">', esc_html__( 'No charts found', 'visualizer' ), '<p><h2><a href="javascript:;" class="add-new-h2 add-new-chart">', esc_html__( 'Add New', 'visualizer' ), '</a></h2></p></div>'; |
| 249 | 253 | echo '</div>'; |
| 250 | 254 | echo '<div class="visualizer-chart-footer visualizer-clearfix">'; |
| @@ -253,9 +257,9 @@ | ||
| 253 | 257 | echo '<span class="visualizer-chart-action visualizer-nochart-edit"></span>'; |
| 254 | 258 | echo '<span class="visualizer-chart-action visualizer-nochart-export"></span>'; |
| 255 | 259 | echo '<span class="visualizer-chart-action visualizer-nochart-shortcode"></span>'; |
| 256 | 260 | echo '</div>'; |
| 257 | - echo '</div>'; | |
| 261 | + echo '</div></div>'; | |
| 258 | 262 | $this->_renderSidebar(); |
| 259 | 263 | echo '</div>'; |
| 260 | 264 | } |
| 261 | 265 | echo '</div>'; |
| @@ -324,9 +328,9 @@ | ||
| 324 | 328 | $chart_status['icon'] = 'error dashicons-dismiss'; |
| 325 | 329 | $chart_status['title'] = __( 'Click to view the error', 'visualizer' ); |
| 326 | 330 | } |
| 327 | 331 | $shortcode = sprintf( '[visualizer id="%s" lazy="no" class=""]', $chart_id ); |
| 328 | - echo '<div class="visualizer-chart"><div class="visualizer-chart-title">', esc_html( $title ), '</div>'; | |
| 332 | + echo '<div class="items"><div class="visualizer-chart"><div class="visualizer-chart-title">', esc_html( $title ), '</div>'; | |
| 329 | 333 | echo '<div id="', $placeholder_id, '" class="visualizer-chart-canvas">'; |
| 330 | 334 | echo '<img src="', VISUALIZER_ABSURL, 'images/ajax-loader.gif" class="loader">'; |
| 331 | 335 | echo '</div>'; |
| 332 | 336 | echo '<div class="visualizer-chart-footer visualizer-clearfix">'; |
| @@ -340,38 +344,40 @@ | ||
| 340 | 344 | echo '<a class="visualizer-chart-action visualizer-chart-shortcode" href="javascript:;" title="', esc_attr__( 'Click to copy shortcode', 'visualizer' ), '" data-clipboard-text="', esc_attr( $shortcode ), '"></a>'; |
| 341 | 345 | echo '<span> </span>'; |
| 342 | 346 | echo '<hr><div class="visualizer-chart-status"><span title="' . __( 'Chart ID', 'visualizer' ) . '">(' . $chart_id . '):</span> <span class="visualizer-date" title="' . __( 'Last Updated', 'visualizer' ) . '">' . $chart_status['date'] . '</span><span class="visualizer-error"><i class="dashicons ' . $chart_status['icon'] . '" data-viz-error="' . esc_attr( str_replace( '"', "'", $chart_status['error'] ) ) . '" title="' . esc_attr( $chart_status['title'] ) . '"></i></span></div>'; |
| 343 | 347 | echo '</div>'; |
| 344 | - echo '</div>'; | |
| 348 | + echo '</div></div>'; | |
| 345 | 349 | } |
| 346 | 350 | |
| 347 | 351 | /** |
| 348 | - * Render sidebar. | |
| 352 | + * Render 2-col sidebar | |
| 349 | 353 | */ |
| 350 | 354 | private function _renderSidebar() { |
| 351 | 355 | if ( ! Visualizer_Module::is_pro() ) { |
| 352 | - echo '<div id="visualizer-sidebar">'; | |
| 356 | + echo '<div class="items">'; | |
| 357 | + echo '<div class="viz-pro">'; | |
| 358 | + echo '<div id="visualizer-sidebar" class="one-columns">'; | |
| 353 | 359 | echo '<div class="visualizer-sidebar-box">'; |
| 354 | 360 | echo '<h3>' . __( 'Discover the power of PRO!', 'visualizer' ) . '</h3><ul>'; |
| 355 | - echo '<li>' . __( 'Spreadsheet like editor', 'visualizer' ) . '</li>'; | |
| 356 | - echo '<li>' . __( 'Import from other charts', 'visualizer' ) . '</li>'; | |
| 357 | - echo '<li>' . __( 'Use database query to create charts', 'visualizer' ) . '</li>'; | |
| 358 | - echo '<li>' . __( 'Create charts from WordPress tables', 'visualizer' ) . '</li>'; | |
| 359 | - echo '<li>' . __( 'Frontend editor', 'visualizer' ) . '</li>'; | |
| 360 | - echo '<li>' . __( 'Private charts', 'visualizer' ) . '</li>'; | |
| 361 | - echo '<li>' . __( 'Auto-sync with online files', 'visualizer' ) . '</li>'; | |
| 362 | 361 | if ( Visualizer_Module_Admin::proFeaturesLocked() ) { |
| 363 | - echo '<li>' . __( '6 more chart types', 'visualizer' ) . '</ul>'; | |
| 362 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '6 more chart types', 'visualizer' ) . '</ul>'; | |
| 364 | 363 | } else { |
| 365 | - echo '<li>' . __( '11 more chart types', 'visualizer' ) . '</li>'; | |
| 366 | - echo '<li>' . __( 'Manual Data Editor', 'visualizer' ) . '</li>'; | |
| 367 | - echo '<li>' . __( 'ChartJS Charts', 'visualizer' ) . '</li>'; | |
| 368 | - echo '<li>' . __( 'Table Google chart', 'visualizer' ) . '</li>'; | |
| 369 | - echo '<li>' . __( 'Frontend Actions(Print Chart, Export to CSV, Export to Excel, Copy, Download Chart Image)', 'visualizer' ) . '</li></ul>'; | |
| 364 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '11 more chart types', 'visualizer' ) . '</li>'; | |
| 365 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Manual Data Editor', 'visualizer' ) . '</li>'; | |
| 366 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'ChartJS Charts', 'visualizer' ) . '</li>'; | |
| 367 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Table Google chart', 'visualizer' ) . '</li>'; | |
| 368 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend Actions(Print, Export, Copy, Download)', 'visualizer' ) . '</li>'; | |
| 370 | 369 | } |
| 371 | - echo '<p><a href="' . Visualizer_Plugin::PRO_TEASER_URL . '" target="_blank" class="button button-primary">' . __( 'View more features', 'visualizer' ) . '</a></p>'; | |
| 372 | - echo '<p style="background-color: #0073aac7; color: #ffffff; padding: 2px; font-weight: bold;">' . __( 'We offer a 30-day no-questions-asked money back guarantee!', 'visualizer' ) . '</p>'; | |
| 373 | - echo '<p><a href="' . VISUALIZER_SURVEY . '" target="_blank" class="">' . __( 'Don\'t see the features you need? Help us improve!', 'visualizer' ) . '</a></p>'; | |
| 370 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Spreadsheet like editor', 'visualizer' ) . '</li>'; | |
| 371 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Import from other charts', 'visualizer' ) . '</li>'; | |
| 372 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Use database query to create charts', 'visualizer' ) . '</li>'; | |
| 373 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Create charts from WordPress tables', 'visualizer' ) . '</li>'; | |
| 374 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend editor', 'visualizer' ) . '</li>'; | |
| 375 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Private charts', 'visualizer' ) . '</li>'; | |
| 376 | + echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Auto-sync with online files', 'visualizer' ) . '</li></ul>'; | |
| 377 | + echo '<p><a href="' . str_replace( '#pricing', '#features', Visualizer_Plugin::PRO_TEASER_URL ) . '" target="_blank" class="button button-primary">' . __( 'View more features', 'visualizer' ) . '</a></p>'; | |
| 378 | + echo '</div>'; | |
| 379 | + echo '</div>'; | |
| 374 | 380 | echo '</div>'; |
| 375 | 381 | echo '</div>'; |
| 376 | 382 | } |
| 377 | 383 | } |
