IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

The beginnings of the build mode and rows

Browse Source
This commit is contained in:
Matt Toback 2016-04-15 19:52:18 -04:00
parent 5f6ecac3f9
commit a7e8e64d78
9 changed files with 61 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/directives/dash_class.js
View File

@ -10,8 +10,6 @@ function (_, $, coreModule) {
return {
link: function($scope, elem) {
var lastHideControlsVal;
$scope.onAppEvent('panel-fullscreen-enter', function() {
elem.toggleClass('panel-in-fullscreen', true);
});

4
public/app/features/dashboard/dashnav/dashnav.html
View File

@ -51,6 +51,10 @@
<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>
</ul>
</li>
<li>
<a ng-click="dashboard.editMode()" ng-show="!dashboard.editMode" bs-tooltip="'Build Mode <br> CTRL+B'" data-placement="bottom"><i class="fa fa-wrench"></i></a>
<a ng-click="!dashboard.editMode()" ng-show="dashboard.editMode" bs-tooltip="'Build Mode <br> CTRL+B'" data-placement="bottom" style="color: #33B5E5;"><i class="fa fa-wrench fa-wrench-close" style="color: #33B5E5;"></i> Leave Build Mode </a>
</li>
</ul>
<ul class="nav dash-playlist-actions" ng-if="playlistSrv">

2
public/app/features/dashboard/keybindings.js
View File

@ -43,7 +43,7 @@ function(angular, $) {
scope.broadcastRefresh();
}, { inputDisabled: true });
keyboardManager.bind('ctrl+e', function() {
keyboardManager.bind('ctrl+b', function() {
scope.dashboard.editMode = !scope.dashboard.editMode;
}, { inputDisabled: true });

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

@ -49,8 +49,8 @@
label-class="width-10">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="Edit Mode"
tooltip="Enable edit mode. Shortcut: CTRL+E"
label="Build Mode"
tooltip="Enable build mode. Shortcut: CTRL+B"
checked="dashboard.editMode"
label-class="width-10">
</gf-form-switch>
@ -125,4 +125,3 @@
</div>
</div>
</div>

5
public/app/features/dashboard/rowCtrl.js
View File

@ -32,6 +32,11 @@ function (angular, _, config) {
row.collapse = row.collapse ? false : true;
};
$scope.settingsHover = function(row) {
// Shows/hides the settings button on hover
return row.hoverSettings = ! row.hoverSettings;
};
$scope.addPanel = function(panel) {
$scope.dashboard.addPanel(panel, $scope.row);
};

9
public/app/partials/dashboard.html
View File

@ -12,10 +12,10 @@
<div class="clearfix"></div>
<div class="dash-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height>
<div class="dash-row-header" ng-if="row.showTitle || dashboard.editMode">
<div class="dash-row-header pointer" ng-click="toggleRow(row)" ng-if="row.showTitle || dashboard.editMode" ng-mouseenter="settingsHover(row)" ng-mouseleave="settingsHover(row)">
<div class="dash-row-header-title" ng-bind="row.title | interpolateTemplateVars:this"></div>
<div class="dash-row-header-settings dropdown">
<a class="pointer dropdown-toggle" data-toggle="dropdown">
<a class="pointer dropdown-toggle" data-toggle="dropdown" ng-show="row.hoverSettings || dashboard.editMode">
<i class="fa fa-cog"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
@ -63,9 +63,10 @@
</li>
</ul>
</div>
<div class="dash-row-header-collapse-toggle">
<div class="dash-row-header-chevron">
<a class="pointer" ng-click="row.collapse = !row.collapse">
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-down" ng-show="!row.collapse"></i>
<i class="fa fa-chevron-right" ng-show="row.collapse"></i>
</a>
</div>
</div>

4
public/sass/_variables.dark.scss
View File

@ -268,3 +268,7 @@ $checkboxImageUrl: '../img/checkbox.png';
$card-background: linear-gradient(135deg, #2f2f2f, #262626);
$card-background-hover: linear-gradient(135deg, #343434, #262626);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
// dash row
$dash-row-background: linear-gradient(135deg, #262626, #292929);
$dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);

4
public/sass/_variables.light.scss
View File

@ -292,3 +292,7 @@ $checkboxImageUrl: '../img/checkbox_white.png';
$card-background: linear-gradient(135deg, $gray-5, $gray-6);
$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
// dash row
$dash-row-background: linear-gradient(135deg, $gray-5, $gray-6);
$dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);

42
public/sass/pages/_dashboard.scss
View File

@ -217,32 +217,62 @@ div.flot-text {
display: flex;
flex-direction: row;
text-align: left;
align-items: center;
}
.dash-row-header-title {
font-size: $font-size-h3;
font-family: $headings-font-family;
padding: $spacer $spacer*2;
padding: $spacer $spacer $spacer $spacer/2;
}
.dash-row-header-settings {
display: none;
display: block;
}
.dash-row-header-chevron {
flex-grow: 100;
text-align: right;
margin-right: 0.6rem;
}
.dash-row-header-collapse-toggle {
flex-grow: 100;
text-align: right;
display: none;
margin-right: $spacer/2;
}
.dash-edit-mode {
.dash-row {
background-color: $dark-5;
padding: 0 $spacer $spacer $spacer;
}
// .dash-row {
// background: $dash-row-background;
// box-shadow: $dash-row-shadow;
// padding: 0 ($spacer/4) ($spacer/2) ($spacer/4);
// margin-bottom: $spacer;
// }
.dash-row {
background: lighten($body-bg, 1%);
box-shadow: inset 15px 0px 0px 0px #262626;
padding: 0 ($spacer/4) ($spacer/2) ($spacer*2);
margin-left: 5px;
margin-bottom: $spacer;
}
.dash-row-header-collapse-toggle,
.dash-row-header-settings {
display: block;
}
}
.fa.fa-wrench-close:after {
content: "";
position: absolute;
width: .22rem;
height: 33.421356%;
top: 19px;
display: block;
background: #33B5E5;
left: 181px;
transform: translate(-50%, 0) rotate(-45deg);
}