From 9ea4de05777f322aac3f165b325fe7ccd24712e1 Mon Sep 17 00:00:00 2001 From: Hardeep Asrani Date: Thu, 26 Mar 2026 03:55:03 +0530 Subject: [PATCH] feat: improve chart creation interface --- classes/Visualizer/Render/Page/Types.php | 2 +- css/frame.css | 208 +++++++++++++++-------- 2 files changed, 142 insertions(+), 68 deletions(-) diff --git a/classes/Visualizer/Render/Page/Types.php b/classes/Visualizer/Render/Page/Types.php index e58b3e55..15c53c87 100644 --- a/classes/Visualizer/Render/Page/Types.php +++ b/classes/Visualizer/Render/Page/Types.php @@ -52,8 +52,8 @@ protected function _toHTML() { * @access protected */ protected function _renderContent() { - echo '
'; echo '
' . $this->render_chart_selection() . '
'; + echo '
'; foreach ( $this->types as $type => $array ) { // add classes to each box that identifies the libraries this chart type supports. $lib_classes = ''; diff --git a/css/frame.css b/css/frame.css index 8b8d9fcd..d204eaab 100644 --- a/css/frame.css +++ b/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,59 +552,66 @@ 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 { @@ -546,14 +619,15 @@ div.viz-group-content .viz-group-description { 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-box-area .type-label { @@ -1221,7 +1295,7 @@ button#editor-chart-button { } span.viz-section-error { - color: #ff000; + color: #ff0000; } #visualizer-error-manual {