feat: improve chart creation interface (#1292)

Author: HardeepAsrani

classes/Visualizer/Render/Page/Types.php

@@ -52,8 +52,8 @@ protected function _toHTML() {
 	 * @access protected
 	 */
 	protected function _renderContent() {
-		echo '<div id="type-picker">';
 		echo '<div id="chart-select">' . $this->render_chart_selection() . '</div>';
+		echo '<div id="type-picker">';
 		foreach ( $this->types as $type => $array ) {
 			// add classes to each box that identifies the libraries this chart type supports.
 			$lib_classes = '';

css/frame.css

@@ -61,8 +61,8 @@
 	right: 0;
 	bottom: 60px;
 	width: 350px;
-	border-left: 1px solid #dfdfdf;
-	background: whitesmoke;
+	border-left: 1px solid #ddd;
+	background: #f8f9fa;
 	overscroll-behavior: contain;
 }
 
@@ -83,11 +83,11 @@
 }
 
 .viz-group-wrapper ul .viz-group-title {
-	border-top: 1px solid #ddd;
+	border-top: 1px solid #e5e5e5;
 }
 
 .viz-group-wrapper ul li {
-	border-top: 1px solid #ddd;
+	border-top: 1px solid #e5e5e5;
 }
 
 .viz-group-wrapper ul ul li.viz-subsection {
@@ -98,17 +98,17 @@
 .viz-group-wrapper .viz-group .viz-group .viz-group-title {
 	position: relative;
 	margin: 0;
-	padding: 10px 10px 11px 14px;
+	padding: 12px 36px 12px 16px;
 	border-top: none;
 	border-bottom: none;
-	border-left: 4px solid #fff;
+	border-left: 4px solid transparent;
 	color: #555d66;
 	background-color: #fff;
-	font-size: 14px;
+	font-size: 13px;
 	font-weight: 600;
-	line-height: 21px;
+	line-height: 1.4;
 	cursor: pointer;
-	transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
+	transition: 0.15s color ease-in-out, 0.15s background-color ease-in-out, 0.15s border-color ease-in-out;
 }
 
 .viz-title-small {
@@ -125,11 +125,13 @@
 .viz-group-wrapper .viz-group .viz-group .viz-group-title:after {
 	position: absolute;
 	z-index: 1;
-	top: 11px;
-	right: 10px;
-	color: #a0a5aa;
-	font: 400 20px/1 dashicons;
+	top: 50%;
+	right: 12px;
+	transform: translateY(-50%);
+	color: inherit;
+	font: 400 18px/1 dashicons;
 	content: "\f345";
+	opacity: 0.6;
 }
 
 .viz-group-wrapper .viz-group .viz-group.open .viz-group-title:after {
@@ -200,7 +202,7 @@
 	display: none;
 	margin: 0;
 	padding: 0;
-	background-color: #fdfdfd;
+	background-color: #fff;
 }
 
 div.viz-group-content {
@@ -235,37 +237,44 @@ div.viz-group-content .viz-group-description {
 .viz-section-title {
 	display: block;
 	position: relative;
-	margin-bottom: 5px;
-	padding: 4px 20px;
-	border-top: 1px solid #eee;
-	border-bottom: 1px solid #eee;
-	background-color: rgba(0, 0, 0, 0.02);
-	box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
-	font-weight: bold;
+	margin-bottom: 0;
+	padding: 10px 36px 10px 16px;
+	border-top: 1px solid #e5e5e5;
+	border-left: 3px solid transparent;
+	background-color: #f8f9fa;
+	font-size: 12px;
+	font-weight: 600;
+	color: #555d66;
+	text-transform: uppercase;
+	letter-spacing: 0.4px;
 	cursor: pointer;
+	transition: border-left-color 0.15s ease-in-out, color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+
+.viz-section-title:hover,
+.viz-section-title.open {
+	border-left-color: #0073aa;
+	color: #0073aa;
+	background-color: #f0f6fb;
 }
 
 .viz-group-wrapper ul ul li .viz-section-title {
-	margin-bottom: 0;
-	border: none;
-	box-shadow: none;
+	border-left: 3px solid transparent;
 }
 
 .viz-section-title::after {
 	position: absolute;
-	z-index: 1;
-	top: 13px;
-	right: 20px;
-	width: 0;
-	height: 0;
-	border-width: 4px 4px 0;
-	border-style: solid;
-	border-color: #ccc transparent;
-	content: "";
+	top: 50%;
+	right: 10px;
+	transform: translateY(-50%);
+	color: inherit;
+	font: 400 16px/1 dashicons;
+	content: "\f345";
+	opacity: 0.6;
 }
 
 .viz-section-title.open::after {
-	border-width: 0 4px 4px;
+	content: "\f347";
 }
 
 .section-items,
@@ -313,7 +322,7 @@ div.viz-group-content .viz-group-description {
 .section-delimiter,
 .viz-section-delimiter {
 	margin: 15px 0;
-	border-top: 1px dashed #ccc;
+	border-top: 1px solid #e5e5e5;
 }
 
 .viz-section-table-column {
@@ -353,7 +362,7 @@ div.viz-group-content .viz-group-description {
 #rate-the-plugin {
 	margin-top: 40px;
 	padding: 20px;
-	border-top: 1px dashed #ddd;
+	border-top: 1px solid #e5e5e5;
 	text-align: center;
 }
 
@@ -395,14 +404,71 @@ div.viz-group-content .viz-group-description {
 }
 
 #viz-tabs .wp-color-picker {
-  width: 4rem !important;
+	width: 4rem !important;
+}
+
+/* Modern flat tab nav */
+#viz-tabs .ui-tabs-nav {
+	display: flex;
+	padding: 0;
+	margin: 0;
+	background: #fff;
+	border: none;
+	border-bottom: 2px solid #e5e5e5;
+	border-radius: 0;
+	box-shadow: none;
+}
+
+#viz-tabs .ui-tabs-nav li {
+	flex: 1;
+	margin: 0;
+	border: none;
+	border-bottom: 2px solid transparent;
+	border-radius: 0;
+	background: transparent;
+	top: 2px;
+	transition: border-color 0.15s ease-in-out;
+}
+
+#viz-tabs .ui-tabs-nav li a {
+	display: block;
+	width: 100%;
+	padding: 10px 0;
+	color: #555d66;
+	font-size: 13px;
+	font-weight: 500;
+	text-align: center;
+	box-sizing: border-box;
+}
+
+#viz-tabs .ui-tabs-nav li:hover a {
+	color: #0073aa;
+}
+
+#viz-tabs .ui-tabs-nav .ui-state-active {
+	border-bottom-color: #0073aa;
+	background: transparent;
+}
+
+#viz-tabs .ui-tabs-nav .ui-state-active a {
+	color: #0073aa;
+	font-weight: 600;
+}
+
+#viz-tabs .ui-tabs-nav li a:focus,
+#viz-tabs .ui-tabs-nav li.ui-state-focus a {
+	outline: none;
+	box-shadow: none;
+	border-radius: 2px;
 }
 
 .viz-info-panel {
 	display: flex;
 	flex-direction: column;
-	padding: 10px;
-	gap: 10px;
+	padding: 16px;
+	gap: 14px;
+	background: #fff;
+	border-bottom: 1px solid #e5e5e5;
 }
 
 .viz-info-panel label {
@@ -486,74 +552,82 @@ div.viz-group-content .viz-group-description {
 	display: block;
 	position: absolute;
 	right: 0;
-	bottom: -6px;
+	bottom: 0;
 	width: 100%;
-	padding: 4px 0;
-	border-top: 1px dashed #ddd;
-	border-bottom: 1px dashed #ddd;
-	background: #e0e0e0;
-	background-color: #efefef;
-	box-shadow: 0 0 8px #ddd;
-	font-weight: bold;
+	padding: 6px 0;
+	border-top: 1px solid #e5e5e5;
+	background-color: #fff;
+	font-weight: 600;
+	font-size: 12px;
 	text-align: center;
+	color: #555d66;
 }
 
 .type-box .pro-upsell {
-	color: #c55555;
+	color: #d63638;
 }
 
 #type-picker {
-	width: 954px;
-	margin: 50px auto;
+	max-width: 960px;
+	margin: 30px auto;
+	padding: 0 16px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16px;
 }
 
 .type-box {
-	float: left;
 	position: relative;
-	margin: 0 20px 20px 0;
-	border: 1px dashed #ddd;
-	background-color: #efefef;
-	box-shadow: 0 0 8px #ddd;
+	border: 1px solid #ddd;
+	border-left: 3px solid transparent;
+	background-color: #fff;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+	border-radius: 2px;
+	overflow: hidden;
+	transition: border-left-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
-.type-box.viz-hidden {
-	display: none;
+.type-box:hover,
+.type-box:has(.type-label-selected) {
+	border-left-color: #0073aa;
+	box-shadow: 0 2px 6px rgba(0,114,170,0.15);
 }
 
 .type-box.viz-hidden {
 	display: none;
 }
 
-.type-box:nth-child(3n+1) {
-	margin-right: 0;
-}
-
 .type-box .pro-upsell .visualizder-pro-label {
 	display: inline;
 	position: absolute;
 	top: 0;
 	width: 74px;
-	height: 10px;
 	height: 17px;
 	border: none;
 	color: #fff;
 	z-index: 4;
-	background: #c55555;
+	background: #d63638;
+	font-size: 10px;
+	font-weight: 600;
+	letter-spacing: 0.5px;
+	line-height: 17px;
+	text-align: center;
 }
 
 .type-label {
 	display: block;
 	width: 270px;
 	height: 205px;
 	padding: 15px;
-	border: 1px solid #e0e0e0;
-	background-color: white;
+	border: none;
+	background-color: #f9f9f9;
 	background-image: url(../images/chart_types_v395.png);
 	background-repeat: no-repeat;
 	background-position: center center;
 	background-size: 900px 1150px;
 	filter: grayscale(100%);
 	cursor: pointer;
+	transition: filter 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
 
 #type-picker.lib-ChartJS .type-label {
@@ -566,8 +640,8 @@ div.viz-group-content .viz-group-description {
 
 .type-label-selected,
 .type-box .type-label:hover {
-/*	background-image: url(../images/chart_types_v340.png);*/
 	filter: grayscale(0);
+	background-color: #f0f7fb;
 }
 
 .type-label:focus,
@@ -1228,7 +1302,7 @@ button#editor-chart-button {
 }
 
 span.viz-section-error {
-	color: #ff000;
+	color: #ff0000;
 }
 
 #visualizer-error-manual {