Merge pull request #14423 from grafana/14378-develop-table-options-ux

Removed side menu for column styles
This commit is contained in:
Torkel Ödegaard 2018-12-13 09:12:05 +01:00 committed by GitHub
commit 1d325cf66f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 165 additions and 171 deletions

View File

@ -1,19 +1,5 @@
<div class="edit-tab-with-sidemenu"> <div class="edit-tab-content" ng-repeat="style in editor.panel.styles">
<aside class="edit-sidemenu-aside"> <p class="column-styles-heading">{{style.pattern || 'New rule'}}</p>
<ul class="edit-sidemenu">
<li ng-repeat="style in editor.panel.styles" ng-class="{active: editor.activeStyleIndex === $index}">
<a ng-click="editor.activeStyleIndex = $index">{{style.pattern || 'New rule'}}</a>
</li>
<li>
<a class="pointer" ng-click="editor.addColumnStyle()">
<i class="fa fa-plus"></i>&nbsp;Add
</a>
</li>
</ul>
</aside>
<div class="edit-tab-content" ng-repeat="style in editor.panel.styles" ng-if="editor.activeStyleIndex === $index">
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Options</h5> <h5 class="section-heading">Options</h5>
<div class="gf-form-inline"> <div class="gf-form-inline">
@ -182,7 +168,8 @@
<span> <span>
This title appears when user hovers pointer over the cell with link. Use the same variables as for URL. This title appears when user hovers pointer over the cell with link. Use the same variables as for URL.
</span> </span>
</info-popover></label> </info-popover>
</label>
<input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur <input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur
data-placement="right"> data-placement="right">
</div> </div>
@ -190,11 +177,14 @@
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="gf-form-group">
<button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)"> <button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
<i class="fa fa-trash"></i> Remove Rule <i class="fa fa-trash"></i> Remove Rule
</button> </button>
<br /> </div>
<br /> </div>
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
<i class="fa fa-plus"></i>&nbsp;Add column style
</button>
</div> </div>

View File

@ -28,6 +28,10 @@
} }
} }
.column-styles-heading {
border-bottom: 1px solid $gray-1;
}
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
.edit-tab-with-sidemenu { .edit-tab-with-sidemenu {
flex-direction: column; flex-direction: column;