Skip to content

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

ux(): updated playlist, other other minor fixes

parent eae4bb74
Showing with 93 additions and 117 deletions
public/app/features/playlist/partials/playlist.html
...@@ -2,124 +2,101 @@ ...@@ -2,124 +2,101 @@
</navbar> </navbar>
<div class="page-container" ng-form="playlistEditForm"> <div class="page-container" ng-form="playlistEditForm">
<div class="page"> <h1 ng-show="ctrl.isNew()">New Playlist</h1>
<h1 ng-show="ctrl.isNew()">New Playlist</h1> <h1 ng-show="!ctrl.isNew()">Edit Playlist</h1>
<h1 ng-show="!ctrl.isNew()">Edit Playlist</h1>
<h3>Name and interval</h3> <h3>Name and interval</h3>
<div style="margin-bottom: 10px;"> <div class="gf-form-group">
<div> <div class="gf-form">
<div class="norm-form"> <span class="gf-form-label gf-size-s">Name</span>
<ul class="norm-form-list"> <input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input gf-form-size-xl">
<li class="norm-form-item" style="width: 100px"> </div>
Name <div class="gf-form">
</li> <span class="gf-form-label gf-size-s">Interval</span>
<li> <input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input gf-form-s">
<input type="text" required ng-model="ctrl.playlist.name" class="input-xlarge norm-form-input"> </div>
</li> </div>
</ul>
<div class="clearfix"></div>
</div>
<div class="norm-form last">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 100px">
Interval
</li>
<li>
<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="input-xlarge norm-form-input">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<br> <div class="row" style="max-width: 400px">
<h5>Add dashboards</h5>
<div style="">
<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
</div>
</div>
</div> <div class="row">
</div> <div class="span5 pull-left" ng-if="ctrl.filteredDashboards.length > 0">
<div class="row">
<div class="span5 pull-left">
<h5>Add dashboards</h5>
<div style="">
<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
</div>
</div>
</div>
<div class="row">
<div class="span5 pull-left" ng-if="ctrl.filteredDashboards.length > 0">
<h5>Search results ({{ctrl.filteredDashboards.length}})</h5> <h5>Search results ({{ctrl.filteredDashboards.length}})</h5>
<table class="grafana-options-table"> <table class="grafana-options-table">
<tr ng-repeat="playlistItem in ctrl.filteredDashboards"> <tr ng-repeat="playlistItem in ctrl.filteredDashboards">
<td style="white-space: nowrap;"> <td style="white-space: nowrap;">
{{playlistItem.title}} {{playlistItem.title}}
</td> </td>
<td style="text-align: center"> <td style="text-align: center">
<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)"> <button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Add to playlist Add to playlist
</button> </button>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0"> <div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0">
<div class="row"> <div class="row">
<div class="span6 offset1"> <div class="span6 offset1">
<div ng-repeat="tag in ctrl.filteredTags" class="pointer" style="width: 180px; float: left;" <div ng-repeat="tag in ctrl.filteredTags" class="pointer" style="width: 180px; float: left;"
ng-class="{'selected': $index === selectedIndex }" ng-class="{'selected': $index === selectedIndex }"
ng-click="ctrl.addTagPlaylistItem(tag, $event)"> ng-click="ctrl.addTagPlaylistItem(tag, $event)">
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term"> <a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
<i class="fa fa-tag"></i> <i class="fa fa-tag"></i>
<span>{{tag.term}} &nbsp;({{tag.count}})</span> <span>{{tag.term}} &nbsp;({{tag.count}})</span>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="span5 pull-left"> <div class="span5 pull-left">
<h5>Added dashboards</h5> <h5>Added dashboards</h5>
<table class="grafana-options-table"> <table class="grafana-options-table">
<tr ng-repeat="playlistItem in ctrl.playlistItems"> <tr ng-repeat="playlistItem in ctrl.playlistItems">
<td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_id'"> <td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_id'">
{{playlistItem.title}} {{playlistItem.title}}
</td> </td>
<td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_tag'"> <td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_tag'">
<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title"> <a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
<i class="fa fa-tag"></i> <i class="fa fa-tag"></i>
<span>{{playlistItem.title}}</span> <span>{{playlistItem.title}}</span>
</a> </a>
</td> </td>
<td style="text-align: right"> <td style="text-align: right">
<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)"> <button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
<i class="fa fa-arrow-up"></i> <i class="fa fa-arrow-up"></i>
</button> </button>
<button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)"> <button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
<i class="fa fa-arrow-down"></i> <i class="fa fa-arrow-down"></i>
</button> </button>
<button class="btn btn-inverse btn-mini" ng-click="ctrl.removePlaylistItem(playlistItem)"> <button class="btn btn-inverse btn-mini" ng-click="ctrl.removePlaylistItem(playlistItem)">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</button> </button>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="pull-left" style="margin-top: 25px;"> <div class="pull-left" style="margin-top: 25px;">
<!-- <div class="norm-form"> --> <!-- <div class="norm-form"> -->
<a <a
class="btn btn-success" class="btn btn-success"
ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a> ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a> <a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>
<!-- </div> --> <!-- </div> -->
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
public/less/overrides.less
...@@ -182,7 +182,7 @@ form input.ng-invalid { ...@@ -182,7 +182,7 @@ form input.ng-invalid {
.row-open { .row-open {
margin-top: 5px; margin-top: 5px;
left:-34px; left:-28px;
position: absolute; position: absolute;
z-index: 100; z-index: 100;
transition: .10s left; transition: .10s left;
......
public/less/playlist.less
...@@ -14,9 +14,9 @@ ...@@ -14,9 +14,9 @@
} }
.playlist-search-switches { .playlist-search-switches {
position: relative; position: absolute;
top: -39px; top: 8px;
left: 260px; right: 11px;
} }
.playlist-search-field-wrapper { .playlist-search-field-wrapper {
...@@ -90,4 +90,4 @@ ...@@ -90,4 +90,4 @@
float: right; float: right;
padding-left: 20px; padding-left: 20px;
} }
} }
\ No newline at end of file
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