Skip to content

N
nexpie-grafana-theme
Commit 26c50292 by Torkel Ödegaard
Options

ux(): new dashboard tabs view

parent 590da0ca
Showing with 90 additions and 25 deletions
public/app/core/directives/dash_edit_link.js
...@@ -45,6 +45,7 @@ function ($, coreModule) { ...@@ -45,6 +45,7 @@ function ($, coreModule) {
if (editview) { if (editview) {
scope.contextSrv.editview = editViewMap[editview]; scope.contextSrv.editview = editViewMap[editview];
payload.src = scope.contextSrv.editview.src; payload.src = scope.contextSrv.editview.src;
payload.cssClass = "tabbed-view";
} }
if (lastEditor === payload.src) { if (lastEditor === payload.src) {
......
public/app/features/dashboard/partials/settings.html
<div class="gf-box-header"> <div class="tabbed-view-header">
<div class="gf-box-title"> <h2 class="tabbed-view-title">
<i class="fa fa-cogs"></i>
Settings Settings
</div> </h2>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <ul class="gf-tabs">
<div ng-repeat="tab in ['General', 'Rows', 'Links', 'Time picker', 'Metadata']" data-title="{{tab}}"> <li class="gf-tabs-item" ng-repeat="tab in ::['General', 'Rows', 'Links', 'Time picker', 'Metadata']">
</div> <a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
</div> {{::tab}}
</a>
</li>
</ul>
<button class="gf-box-header-close-btn" ng-click="dismiss();"> <button class="tabbed-view-close-btn" ng-click="dismiss();">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</button> </button>
</div> </div>
<div class="gf-box-body" style="padding-bottom: 50px;"> <div class="tabbed-view-body" style="padding-bottom: 50px;">
<div ng-if="editor.index == 0"> <div ng-if="editor.index == 0">
<div class="editor-row"> <div class="editor-row">
<div class="tight-form-section"> <div class="tight-form-section">
...@@ -139,7 +141,7 @@ ...@@ -139,7 +141,7 @@
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 120px"> <li class="tight-form-item" style="width: 120px">
......
public/app/features/dashboard/timepicker/settings.html
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
<div> <div>
<!-- <div class="tight&#45;form"> -->
<!-- <ul class="tight&#45;form&#45;list"> -->
<!-- <li class="tight&#45;form&#45;item" style="width: 118px"> -->
<!-- Relative times -->
<!-- </li> -->
<!-- <li> -->
<!-- <input type="text" class="input&#45;xlarge tight&#45;form&#45;input last" style="width: 450px" ng&#45;model="ctrl.panel.time_options" array&#45;join> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 118px"> <li class="tight-form-item" style="width: 118px">
......
public/app/partials/bootstrap/tabset.html
<div> <div>
<ul class="nav nav-{{type || 'tabs'}} nav-tabs-alt" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul> <ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude>
</ul>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane" <div class="tab-pane"
ng-repeat="tab in tabs" ng-repeat="tab in tabs"
......
public/sass/_grafana.scss
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
@import "components/shortcuts"; @import "components/shortcuts";
@import "components/drop"; @import "components/drop";
@import "components/query_editor"; @import "components/query_editor";
@import "components/tabbed_view";
// PAGES // PAGES
@import "pages/login"; @import "pages/login";
......
public/sass/components/_tabbed_view.scss 0 → 100644
.tabbed-view {
background-color: $page-bg;
background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
margin: -($spacer/2);
padding: $spacer*2;
}
.tabbed-view-header {
@include clearfix();
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid transparent;
}
.tabbed-view-close-btn {
float: right;
padding: 0;
margin: 0;
background-color: transparent;
border: none;
padding: 8px;
i {
font-size: 120%;
}
color: $text-color;
&:hover {
color: $white;
}
}
.tabbed-view-body {
padding: 20px;
min-height: 150px;
}
public/sass/components/_tabs.scss
.nav-tabs-alt { .nav-tabs-alt {
& > li > a { & > li > a {
color: darken($link-color, 20%); color: darken($link-color, 20%);
} }
...@@ -34,4 +32,39 @@ ...@@ -34,4 +32,39 @@
} }
} }
.gf-tabs {
@include clearfix();
float: left;
margin: 0.5rem 0 0 2rem;
}
.gf-tabs-item {
float: left;
list-style: none;
}
.gf-tabs-link {
padding: ($spacer * 0.75) $spacer;
margin-right: $spacer/2;
line-height: $line-height-base;
border: 1px solid transparent;
@include border-radius(4px 4px 0 0);
&:hover,
&:focus {
border-color: $divider-border-color;
color: $link-color;
}
&.active,
&.active:hover,
&.active:focus {
@include border-radius(3px);
border: 1px solid $divider-border-color;
background-color: transparent;
border-bottom: 1px solid $panel-bg;
color: $link-color;
position: relative;
top: 1px;
}
}
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