IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): new dashboard tabs view

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-23 13:20:59 +01:00
parent 590da0cab3
commit 26c5029256
7 changed files with 90 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/directives/dash_edit_link.js
View File

@ -45,6 +45,7 @@ function ($, coreModule) {
if (editview) {
scope.contextSrv.editview = editViewMap[editview];
payload.src = scope.contextSrv.editview.src;
payload.cssClass = "tabbed-view";
}
if (lastEditor === payload.src) {

24
public/app/features/dashboard/partials/settings.html
View File

@ -1,20 +1,22 @@
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-cogs"></i>
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
Settings
</div>
</h2>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['General', 'Rows', 'Links', 'Time picker', 'Metadata']" data-title="{{tab}}">
</div>
</div>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in ::['General', 'Rows', 'Links', 'Time picker', 'Metadata']">
<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
{{::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>
</button>
</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 class="editor-row">
<div class="tight-form-section">
@ -139,7 +141,7 @@
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 120px">

11
public/app/features/dashboard/timepicker/settings.html
View File

@ -1,17 +1,6 @@
<div class="editor-row">
<div class="section">
<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">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 118px">

3
public/app/partials/bootstrap/tabset.html
View File

@ -1,5 +1,6 @@
<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-pane"
ng-repeat="tab in tabs"

1
public/sass/_grafana.scss
View File

@ -65,6 +65,7 @@
@import "components/shortcuts";
@import "components/drop";
@import "components/query_editor";
@import "components/tabbed_view";
// PAGES
@import "pages/login";

38
public/sass/components/_tabbed_view.scss Normal file
View File

@ -0,0 +1,38 @@
.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;
}

37
public/sass/components/_tabs.scss
View File

@ -1,6 +1,4 @@
.nav-tabs-alt {
& > li > a {
color: darken($link-color, 20%);
}
@ -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;
}
}