Skip to content

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

ux(): progress on row ux

parent 517ebfaf
Showing with 80 additions and 92 deletions
public/app/features/dashboard/row/add_panel.html
<div class="dash-row-options">
<div class="dash-row-add-panel">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label">Panel search</span>
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()"></input>
<!-- <span class="gf&#45;form&#45;label">Panel search</span> -->
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input>
</div>
</div>
......@@ -17,42 +17,3 @@
</div>
</div>
<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 1">
<div class="gf-form-group">
<h5 class="section-heading">Options</h5>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Title</span>
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.title'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">Size</label>
<div class="gf-form-select-wrapper">
<select class="input-small gf-form-input" ng-model="ctrl.row.titleSize" ng-options="f for f in ctrl.fontSizes"></select>
</div>
</div>
<gf-form-switch class="gf-form" label="Show" checked="ctrl.row.showTitle">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Height</span>
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.height'></input>
</div>
</div>
</div>
<h5 class="section-heading">Row Templating</h5>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">Repeat Row</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<option value=""></option>
</div>
</div>
</div>
</div>
public/app/features/dashboard/row/options.html
<div class="dash-row-options">
<div class="gf-form-group section">
<h5 class="section-heading">Options</h5>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Title</span>
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.title'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">Size</label>
<div class="gf-form-select-wrapper">
<select class="input-small gf-form-input" ng-model="ctrl.row.titleSize" ng-options="f for f in ctrl.fontSizes"></select>
</div>
</div>
<gf-form-switch class="gf-form" label="Show" checked="ctrl.row.showTitle">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Height</span>
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.height'></input>
</div>
</div>
</div>
<div class="gf-form-group">
<h5 class="section-heading">Options</h5>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Title</span>
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.title'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">Size</label>
<div class="gf-form-select-wrapper">
<select class="input-small gf-form-input" ng-model="ctrl.row.titleSize" ng-options="f for f in ctrl.fontSizes"></select>
</div>
</div>
<gf-form-switch class="gf-form" label="Show" checked="ctrl.row.showTitle">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Height</span>
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.height'></input>
</div>
</div>
</div>
<div class="gf-form-group section">
<h5 class="section-heading">Row Templating</h5>
<h5 class="section-heading">Row Templating</h5>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">Repeat Row</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<option value=""></option>
</div>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label">Repeat Row</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<option value=""></option>
</div>
</div>
</div>
</div>
public/app/features/dashboard/row/row.ts
......@@ -183,3 +183,22 @@ coreModule.directive('panelDropZone', function($timeout) {
});
};
});
coreModule.directive('rowHeight', function() {
return function(scope, element) {
scope.$watchGroup(['row.collapse', 'row.height'], function() {
element.css({ minHeight: scope.row.collapse ? '5px' : scope.row.height });
});
scope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
var hasPanel = _.find(scope.row.panels, {id: info.panelId});
if (!hasPanel) {
element.hide();
}
});
scope.onAppEvent('panel-fullscreen-exit', function() {
element.show();
});
};
});
public/app/partials/dashboard.html
<div dash-class ng-if="dashboard">
<div dash-class ng-if="dashboard" >
<dashnav></dashnav>
<div class="dashboard-container">
<div dash-editor-view></div>
<dashboard-search></dashboard-search>
<div class="clearfix"></div>
......@@ -11,9 +10,8 @@
<div class="clearfix"></div>
<dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard">
<dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard" row-height>
</dash-row>
</div>
<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen">
......
public/sass/pages/_dashboard.scss
......@@ -206,7 +206,8 @@ div.flot-text {
//
.dash-row {
border-left: 1px solid $dark-2;
border-left: 1px solid $dark-4;
display: block;
}
.dash-row-header {
......@@ -214,7 +215,7 @@ div.flot-text {
display: flex;
flex-direction: row;
margin-right: $panel-margin;
margin-left: $gf-form-margin;
margin-left: 0;
border-bottom: 1px solid $dark-4;
&:hover {
......@@ -225,13 +226,16 @@ div.flot-text {
}
.dash-row-header-title {
border-top: 1px solid $dark-4;
padding: 0.6rem;
.dash-row-collapse-toggle {
font-size: $font-size-sm;
padding: 0 2px;
font-size: $font-size-xs;
color: $text-muted;
position: relative;
left: -5px;
left: -3px;
top: -1px;
}
&:hover {
......@@ -272,7 +276,6 @@ div.flot-text {
flex: 50;
}
.dash-edit-mode {
.dash-row {
}
......@@ -281,12 +284,6 @@ div.flot-text {
}
}
.dash-row-options {
background: $panel-bg;
margin: 0 $panel-margin*2 0 $panel-margin;
padding: $spacer*1.5;
}
.dash-row-options-close-btn {
float: right;
padding: 0;
......@@ -303,6 +300,19 @@ div.flot-text {
}
}
.dash-row-options {
background: $panel-bg;
margin: 0 0 $panel-margin 0;
padding: $spacer*1.5;
}
.dash-row-add-panel {
margin: 0;
padding: $panel-margin;
display: flex;
align-items: flex-start;
}
.add-panel-panels-scroll {
width: 100%;
overflow: hidden;
......@@ -314,7 +324,8 @@ div.flot-text {
}
.add-panel-item {
background: $input-label-bg;
background: $panel-bg;
border: $panel-border;
padding: $spacer;
min-width: 9rem;
max-width: 9rem;
......
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