apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux(): progress on row ux

Browse Source
pull/6695/head
Torkel Ödegaard 9 years ago
parent 517ebfaf6d
commit f1a44ad090
5 changed files with 80 additions and 92 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 45
      public/app/features/dashboard/row/add_panel.html
  2. 67
      public/app/features/dashboard/row/options.html
  3. 19
      public/app/features/dashboard/row/row.ts
  4. 6
      public/app/partials/dashboard.html
  5. 35
      public/sass/pages/_dashboard.scss

45
public/app/features/dashboard/row/add_panel.html
Unescape View File

@ -1,9 +1,9 @@
<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>

67
public/app/features/dashboard/row/options.html
Unescape View File

@ -1,39 +1,38 @@
<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>

19
public/app/features/dashboard/row/row.ts
Unescape View File

@ -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();
});
};
});

6
public/app/partials/dashboard.html
Unescape View File

@ -1,8 +1,7 @@
<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">

35
public/sass/pages/_dashboard.scss
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save