Skip to content

N
nexpie-grafana-theme
Commit d87653b0 by Torkel Ödegaard
Options

ux: new grid progress

parent 160d8cec
Showing with 32 additions and 52 deletions
public/app/features/dashboard/dashgrid/dashgrid.ts
...@@ -170,15 +170,6 @@ export function dashGridItem($timeout, $rootScope) { ...@@ -170,15 +170,6 @@ export function dashGridItem($timeout, $rootScope) {
'data-gs-no-resize': panel.type === 'row', 'data-gs-no-resize': panel.type === 'row',
}); });
// listen for row moments
scope.$watch("panel.y", function(newModelY) {
let elementY = parseInt(element.attr('data-gs-y'));
console.log('new panel y', newModelY, elementY);
if (_.isNumber(newModelY) && elementY !== newModelY) {
gridCtrl.gridstack.move(element, panel.x, panel.y);
}
});
$rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => { $rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => {
if (panel.id !== payload.panelId) { if (panel.id !== payload.panelId) {
return; return;
......
public/app/features/dashboard/model.ts
...@@ -144,13 +144,10 @@ export class DashboardModel { ...@@ -144,13 +144,10 @@ export class DashboardModel {
} }
getNextPanelId() { getNextPanelId() {
var i, j, row, panel, max = 0; var j, panel, max = 0;
for (i = 0; i < this.rows.length; i++) { for (j = 0; j < this.panels.length; j++) {
row = this.rows[i]; panel = this.panels[j];
for (j = 0; j < row.panels.length; j++) { if (panel.id > max) { max = panel.id; }
panel = row.panels[j];
if (panel.id > max) { max = panel.id; }
}
} }
return max + 1; return max + 1;
} }
...@@ -170,9 +167,9 @@ export class DashboardModel { ...@@ -170,9 +167,9 @@ export class DashboardModel {
return null; return null;
} }
addPanel(panel, row) { addPanel(panel) {
panel.id = this.getNextPanelId(); panel.id = this.getNextPanelId();
row.addPanel(panel); this.panels.push(panel);
} }
removePanel(panel, ask?) { removePanel(panel, ask?) {
......
public/app/features/dashboard/row/add_panel.html
...@@ -17,8 +17,6 @@ ...@@ -17,8 +17,6 @@
ng-repeat="panel in ctrl.panelHits" ng-repeat="panel in ctrl.panelHits"
ng-class="{active: $index === ctrl.activeIndex}" ng-class="{active: $index === ctrl.activeIndex}"
ng-click="ctrl.addPanel(panel)" ng-click="ctrl.addPanel(panel)"
ui-draggable="true"
drag="panel.id"
title="{{panel.name}}"> title="{{panel.name}}">
<img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img> <img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
<div class="add-panel-item-name">{{panel.name}}</div> <div class="add-panel-item-name">{{panel.name}}</div>
......
public/app/features/dashboard/row/add_panel.ts
...@@ -32,7 +32,7 @@ export class AddPanelCtrl { ...@@ -32,7 +32,7 @@ export class AddPanelCtrl {
keyDown(evt) { keyDown(evt) {
if (evt.keyCode === 27) { if (evt.keyCode === 27) {
//this.rowCtrl.dropView = 0; this.dismiss();
return; return;
} }
...@@ -79,6 +79,24 @@ export class AddPanelCtrl { ...@@ -79,6 +79,24 @@ export class AddPanelCtrl {
} }
addPanel(panelPluginInfo) { addPanel(panelPluginInfo) {
let defaultHeight = 6;
let defaultWidth = 6;
if (panelPluginInfo.id === "singlestat") {
defaultWidth = 3;
defaultHeight = 3;
}
this.dashboard.addPanel({
type: panelPluginInfo.id,
x: 0,
y: 0,
width: defaultWidth,
height: defaultHeight,
title: 'New panel',
});
this.dismiss();
} }
} }
......
public/app/features/panel/panel_ctrl.ts
...@@ -18,7 +18,6 @@ import {Emitter} from 'app/core/core'; ...@@ -18,7 +18,6 @@ import {Emitter} from 'app/core/core';
export class PanelCtrl { export class PanelCtrl {
panel: any; panel: any;
error: any; error: any;
row: any;
dashboard: any; dashboard: any;
editorTabIndex: number; editorTabIndex: number;
pluginName: string; pluginName: string;
...@@ -201,21 +200,12 @@ export class PanelCtrl { ...@@ -201,21 +200,12 @@ export class PanelCtrl {
} }
duplicate() { duplicate() {
this.dashboard.duplicatePanel(this.panel, this.row); this.dashboard.duplicatePanel(this.panel);
this.$timeout(() => { this.$timeout(() => {
this.$scope.$root.$broadcast('render'); this.$scope.$root.$broadcast('render');
}); });
} }
updateColumnSpan(span) {
this.panel.span = Math.min(Math.max(Math.floor(this.panel.span + span), 1), 12);
this.row.panelSpanChanged();
this.$timeout(() => {
this.render();
});
}
removePanel() { removePanel() {
this.dashboard.removePanel(this.panel); this.dashboard.removePanel(this.panel);
} }
......
public/app/partials/panelgeneral.html
...@@ -11,33 +11,20 @@ ...@@ -11,33 +11,20 @@
</div> </div>
</div> </div>
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Dimensions</h5> <h5 class="section-heading">Options</h5>
<div class="gf-form"> <gf-form-switch class="gf-form" label-class="width-8" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
<span class="gf-form-label width-7">Span</span>
<select class="gf-form-input width-6" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Height</span>
<input type="text" class="gf-form-input width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
</div>
<gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Templating</h5>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-8">Repeat Panel</span> <span class="gf-form-label width-8">Repeat Panel</span>
<dash-repeat-option model="ctrl.panel"></dash-repeat-option> <dash-repeat-option model="ctrl.panel"></dash-repeat-option>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-8">Min span</span> <span class="gf-form-label width-8">Min width</span>
<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]"> <select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
<option value=""></option> <option value=""></option>
</select> </select>
</div> </div>
</div> </div>
</div>
<panel-links-editor panel="ctrl.panel"></panel-links-editor> <panel-links-editor panel="ctrl.panel"></panel-links-editor>
......
public/sass/components/_navbar.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
display: block; display: block;
overflow: visible; overflow: visible;
position: relative; position: relative;
margin-left: $side-menu-width; padding-left: $side-menu-width;
box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;
z-index: 1; z-index: 1;
} }
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
.sidemenu-open { .sidemenu-open {
.navbar { .navbar {
margin-left: 0; padding-left: 0;
} }
} }
......
public/sass/components/_sidemenu.scss
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
width: $side-menu-width; width: $side-menu-width;
background: $navbarBackground; background: $navbarBackground;
z-index: 10; z-index: 10;
box-shadow: 0 0 20px black;
a:focus { a:focus {
text-decoration: none; text-decoration: none;
......
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