diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx index 3d2542d63c8..b56e2bef39f 100644 --- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx @@ -85,7 +85,6 @@ export class DashboardPanel extends React.Component { if (pluginExports.PanelComponent) { return ( { renderVizTab() { return (
-
+
+
Visualization Type
-
+
Options
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index 628f09349d3..73e06877472 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -38,6 +38,8 @@ export class DashNavCtrl { } else if (search.fullscreen) { delete search.fullscreen; delete search.edit; + delete search.tab; + delete search.panelId; } this.$location.search(search); } diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index afc869f8b15..0c758abf9e0 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -92,6 +92,7 @@ @import 'components/form_select_box'; @import 'components/user-picker'; @import 'components/description-picker'; +@import 'components/viz_editor'; // PAGES @import 'pages/login'; diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss new file mode 100644 index 00000000000..0dc368b4ed0 --- /dev/null +++ b/public/sass/components/_viz_editor.scss @@ -0,0 +1,50 @@ +.viz-editor { + display: flex; +} + +.viz-editor-col1 { + width: 150px; + background: $panel-bg; +} + +.viz-editor-col2 { + flex-grow: 1; +} + +.viz-picker { + padding: 3px 8px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + overflow: auto; + height: 100%; +} + +.viz-picker__item { + background: $card-background; + box-shadow: $card-shadow; + + border-radius: 3px; + padding: $spacer/3 $spacer; + width: 31%; + height: 60px; + text-align: center; + margin: $gf-form-margin; + cursor: pointer; + + &.active, + &:hover { + background: $card-background-hover; + } +} + +.viz-picker__item-name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-size: $font-size-sm; +} + +.viz-picker__item-img { + height: calc(100% - 15px); +}