Skip to content

N
nexpie-grafana-theme
Commit 94c35e25 by Torkel Ödegaard
Options

testing panel edit ux idea

parent 239dfbc9
Showing with 101 additions and 48 deletions
public/app/core/directives/dash_class.ts
import $ from 'jquery';
import _ from 'lodash'; import _ from 'lodash';
import coreModule from '../core_module'; import coreModule from '../core_module';
...@@ -5,18 +6,20 @@ import coreModule from '../core_module'; ...@@ -5,18 +6,20 @@ import coreModule from '../core_module';
function dashClass($timeout) { function dashClass($timeout) {
return { return {
link: ($scope, elem) => { link: ($scope, elem) => {
const body = $('body');
$scope.ctrl.dashboard.events.on('view-mode-changed', panel => { $scope.ctrl.dashboard.events.on('view-mode-changed', panel => {
console.log('view-mode-changed', panel.fullscreen); console.log('view-mode-changed', panel.fullscreen);
if (panel.fullscreen) { if (panel.fullscreen) {
elem.addClass('panel-in-fullscreen'); body.addClass('panel-in-fullscreen');
} else { } else {
$timeout(() => { $timeout(() => {
elem.removeClass('panel-in-fullscreen'); body.removeClass('panel-in-fullscreen');
}); });
} }
}); });
elem.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true); body.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true);
$scope.$watch('ctrl.dashboardViewState.state.editview', newValue => { $scope.$watch('ctrl.dashboardViewState.state.editview', newValue => {
if (newValue) { if (newValue) {
......
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
...@@ -128,15 +128,13 @@ export class DashboardPanel extends React.Component<Props, State> { ...@@ -128,15 +128,13 @@ export class DashboardPanel extends React.Component<Props, State> {
/> />
</div> </div>
{this.props.panel.isEditing && ( {this.props.panel.isEditing && (
<div className="panel-editor-container__editor"> <PanelEditor
<PanelEditor panel={this.props.panel}
panel={this.props.panel} panelType={this.props.panel.type}
panelType={this.props.panel.type} dashboard={this.props.dashboard}
dashboard={this.props.dashboard} onTypeChanged={this.onPluginTypeChanged}
onTypeChanged={this.onPluginTypeChanged} pluginExports={pluginExports}
pluginExports={pluginExports} />
/>
</div>
)} )}
</div> </div>
); );
......
public/app/features/dashboard/dashgrid/PanelEditor.tsx
...@@ -77,20 +77,24 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> { ...@@ -77,20 +77,24 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
const activeTab = location.query.tab || 'queries'; const activeTab = location.query.tab || 'queries';
return ( return (
<div className="tabbed-view tabbed-view--new"> <div className="panel-editor-container__editor">
<div className="tabbed-view-header"> <div className="panel-editor__aside">
<ul className="gf-tabs"> <h2 className="panel-editor__aside-header">
{this.tabs.map(tab => { <i className="fa fa-cog" />
return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />; Edit Panel
})} </h2>
</ul> {this.tabs.map(tab => {
return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
<button className="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();"> })}
<i className="fa fa-remove" />
</button> <div className="dashboard-settings__aside-actions">
<button className="btn btn-inverse" ng-click="ctrl.exitFullscreen();">
<i className="fa fa-remove" /> Close
</button>
</div>
</div> </div>
<div className="tabbed-view-body"> <div className="panel-editor__content">
{activeTab === 'queries' && this.renderQueriesTab()} {activeTab === 'queries' && this.renderQueriesTab()}
{activeTab === 'visualization' && this.renderVizTab()} {activeTab === 'visualization' && this.renderVizTab()}
</div> </div>
...@@ -107,15 +111,13 @@ interface TabItemParams { ...@@ -107,15 +111,13 @@ interface TabItemParams {
function TabItem({ tab, activeTab, onClick }: TabItemParams) { function TabItem({ tab, activeTab, onClick }: TabItemParams) {
const tabClasses = classNames({ const tabClasses = classNames({
'gf-tabs-link': true, 'dashboard-settings__nav-item': true,
active: activeTab === tab.id, active: activeTab === tab.id,
}); });
return ( return (
<li className="gf-tabs-item" key={tab.id}> <a className={tabClasses} onClick={() => onClick(tab)}>
<a className={tabClasses} onClick={() => onClick(tab)}> <i className={tab.icon} /> {tab.text}
<i className={tab.icon} /> {tab.text} </a>
</a>
</li>
); );
} }
public/app/features/dashboard/submenu/submenu.html
...@@ -23,5 +23,7 @@ ...@@ -23,5 +23,7 @@
<dash-links-container links="ctrl.dashboard.links" class="gf-form-inline"></dash-links-container> <dash-links-container links="ctrl.dashboard.links" class="gf-form-inline"></dash-links-container>
</div> </div>
<gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="ctrl.dashboard.meta.fullscreen"></gf-time-picker>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
public/sass/components/_navbar.scss
...@@ -41,7 +41,8 @@ ...@@ -41,7 +41,8 @@
.panel-in-fullscreen { .panel-in-fullscreen {
.navbar { .navbar {
@include navbar-alt-look(); // @include navbar-alt-look();
display: none;
} }
.navbar-button--add-panel, .navbar-button--add-panel,
...@@ -98,11 +99,11 @@ ...@@ -98,11 +99,11 @@
} }
.navbar-buttons { .navbar-buttons {
height: $navbarHeight; // height: $navbarHeight;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
margin-right: $spacer; // margin-right: $spacer;
&--close { &--close {
display: none; display: none;
......
public/sass/components/_submenu.scss
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
align-items: flex-start; align-items: flex-start;
margin: 0 0 $panel-margin 0; margin: 0 0 $panel-margin 0;
} }
......
public/sass/components/_viz_editor.scss
...@@ -79,3 +79,50 @@ ...@@ -79,3 +79,50 @@
height: 100%; height: 100%;
filter: saturate(30%); filter: saturate(30%);
} }
.panel-editor-container {
display: flex;
flex-direction: column;
height: 100%;
}
.panel-editor-container__panel {
height: 35%;
}
.panel-editor-container__editor {
height: 65%;
margin-top: $panel-margin;
display: flex;
flex-direction: row;
}
.panel-editor__content {
flex-grow: 1;
min-width: 0;
height: 100%;
padding: 20px 0 20px 20px;
max-width: 1100px;
}
.panel-editor__aside {
padding: 18px 0 0 20px;
background: $panel-bg;
display: flex;
flex-direction: column;
}
.panel-editor__aside-header {
color: $text-muted;
font-size: $font-size-h3;
padding-right: 50px;
white-space: nowrap;
margin-bottom: $spacer;
i {
font-size: 25px;
position: relative;
top: 1px;
padding-right: 5px;
}
}
public/sass/pages/_dashboard.scss
...@@ -9,6 +9,21 @@ ...@@ -9,6 +9,21 @@
} }
} }
.panel-in-fullscreen {
.dashboard-container--has-submenu {
height: 100%;
}
.scroll-canvas--dashboard {
height: 100%;
}
.sidemenu {
display: none;
}
.main-view {
background: unset;
}
}
.template-variable { .template-variable {
color: $variable; color: $variable;
} }
...@@ -37,20 +52,6 @@ div.flot-text { ...@@ -37,20 +52,6 @@ div.flot-text {
height: 100%; height: 100%;
} }
.panel-editor-container {
display: flex;
flex-direction: column;
height: 100%;
}
.panel-editor-container__panel {
height: 35%;
}
.panel-editor-container__editor {
height: 65%;
}
.panel-container { .panel-container {
background-color: $panel-bg; background-color: $panel-bg;
border: $panel-border; border: $panel-border;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment