Merge pull request #78 from abaicus/development

Added images for the new chart types and upsell badge on chart picker

Author: selul

classes/Visualizer/Render/Page/Types.php

@@ -80,8 +80,15 @@ protected function _renderSidebar() {}
 	 *
 	 * @access protected
 	 */
-	protected function _renderToolbar() {
-		echo '<input type="submit" class="button button-primary button-large push-right" value="', esc_attr__( 'Next', Visualizer_Plugin::NAME ), '">';
-	}
-
-}
+	 protected function _renderToolbar() {
+ 		if( defined( 'Visualizer_Pro' ) ){
+ 				global $Visualizer_Pro;
+ 		}else{
+			echo "<a class='pro-upsell' href='https://themeisle.com/plugins/visualizer-charts-and-graphs-pro-addon/' target='_blank'>";
+				echo "<span class='dashicons dashicons-plus-alt'></span>";
+ 					echo esc_html( "Three Additional Chart Types Available in the Pro Version", Visualizer_Plugin::NAME );
+			echo "</a>";
+ 		}
+ 		echo '<input type="submit" class="button button-primary button-large push-right" value="', esc_attr__( 'Next', Visualizer_Plugin::NAME ), '">';
+ 	}
+}

css/frame.css

@@ -402,6 +402,53 @@ div.group-content .group-description {
 	background-position: -600px -225px;
 }
 
+.type-box-table .type-label {
+	background-position: -301px -670px;
+}
+
+.type-box-timeline .type-label {
+	background-position: -2px -670px;
+}
+
+.type-box-combo .type-label {
+	background-position: -597px -670px;
+}
+
+a.pro-upsell {
+	float: left;
+	margin: 0;
+	display: flex;
+	align-items: center;
+	height: 20px;
+	padding:10px 20px;
+	border-radius: 50px;
+	-moz-border-radius: 50px;
+	-webkit-border-radius: 50px;
+	background-color: #4285F4;
+	text-decoration: none;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+	border: 1px solid #2c80d6;
+	transition: all .5s ease-in;
+ }
+
+ a.pro-upsell:hover {
+	background-color: #5a95f5;
+	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+}
+
+ a.pro-upsell span {
+	 color: #fff;
+	 margin-right: 10px;
+	 display:inline-block;
+ }
+
+ a.pro-upsell {
+	 font-weight: bold;
+	 font-size: 13px;
+	 color: #fff;
+	 display: inline;
+ }
+
 /******************************************************************************/
 /********************************  OTHER STYLES  ******************************/
 /******************************************************************************/