IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-30 12:44:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(dashboard): refining new row slide out menu, #6442

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-11-03 22:14:29 +01:00
parent d917f69255
commit 98be1734fa
8 changed files with 78 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/core/components/grafana_app.ts
View File

@ -116,6 +116,16 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
return;
}
// for stuff that animates, slides out etc, clicking it needs to
// hide it right away
var clickAutoHide = target.closest('[data-click-hide]');
if (clickAutoHide.length) {
clickAutoHide.toggleClass('transition-hide');
setTimeout(function() {
clickAutoHide.toggleClass('transition-hide');
}, 1000);
}
if (target.parents('.dash-playlist-actions').length === 0) {
playlistSrv.stop();
}

2
public/app/core/services/keybindingSrv.ts
View File

@ -59,7 +59,7 @@ export class KeybindingSrv {
}
showHelpModal() {
appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
}
bind(keyArg, fn) {

8
public/app/features/dashboard/row/row.html
View File

@ -1,10 +1,9 @@
<div class="dash-row-menu-container" id="dash-row-menu-container-id" ng-hide="dashboard.meta.fullscreen">
<ul class="dash-row-menu" role="menu" aria-labelledby="drop1">
<div class="dash-row-menu-container" data-click-hide>
<ul class="dash-row-menu" role="menu">
<li>
<a ng-click="ctrl.onMenuAddPanel()">
<i class="fa fa-plus"></i> Add Panel
</a>
<i class="icon-gf icon-gf-bulk_action dash-row-menu--affordance" id="dash-row-menu--affordance-id"></i>
</li>
<li>
<a ng-click="ctrl.onMenuRowOptions()">
@ -27,6 +26,9 @@
</a>
</li>
</ul>
<div class="dash-row-menu-grip">
<i class="fa fa-ellipsis-v"></i>
</div>
</div>
<div class="dash-row-header" ng-if="ctrl.row.showTitle || ctrl.row.collapse">

25
public/app/features/dashboard/row/row_ctrl.ts
View File

@ -14,7 +14,7 @@ export class DashRowCtrl {
dropView: number;
/** @ngInject */
constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
constructor(private $scope, private $rootScope, private $timeout) {
this.row.title = this.row.title || 'Row title';
if (this.row.isNew) {
@ -202,18 +202,16 @@ coreModule.directive('panelDropZone', function($timeout) {
}
function updateState() {
if (scope.ctrl.dashboard.editMode) {
if (row.panels.length === 0 && indrag === false) {
return showPanel(12, 'Empty Space');
}
if (row.panels.length === 0 && indrag === false) {
return showPanel(12, 'Empty Space');
}
var dropZoneSpan = 12 - row.span;
if (dropZoneSpan > 0) {
if (indrag) {
return showPanel(dropZoneSpan, 'Drop Here');
} else {
return showPanel(dropZoneSpan, 'Empty Space');
}
var dropZoneSpan = 12 - row.span;
if (dropZoneSpan > 0) {
if (indrag) {
return showPanel(dropZoneSpan, 'Drop Here');
} else {
return showPanel(dropZoneSpan, 'Empty Space');
}
}
@ -228,7 +226,6 @@ coreModule.directive('panelDropZone', function($timeout) {
}
row.events.on('span-changed', updateState, scope);
dashboard.events.emit('edit-mode-changed', updateState, scope);
scope.$on("ANGULAR_DRAG_START", function() {
indrag = true;
@ -239,6 +236,8 @@ coreModule.directive('panelDropZone', function($timeout) {
indrag = false;
updateState();
});
updateState();
};
});

71
public/app/partials/help_modal.html
View File

@ -1,71 +0,0 @@
<div class="modal-body">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-keyboard-o"></i>
<span class="p-l-1">Help</span>
</h2>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in ['Shortcuts', 'Tips', 'Docs']">
<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
{{::tab}}
</a>
</li>
</ul>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="modal-content">
<table class="shortcut-table">
<tr>
<th></th>
<th style="text-align: left;">Dashboard wide shortcuts</th>
</tr>
<tr>
<td style="text-align: right;"><span class="label label-info">ESC</span></td>
<td>Exit fullscreen edit/view mode, close search or any editor view</td>
</tr>
<tr>
<td><span class="label label-info">F</span></td>
<td>Open dashboard search view (also contains import/playlist controls)</td>
</tr>
<tr>
<td><span class="label label-info">R</span></td>
<td>Refresh (Fetches new data and rerenders panels)</td>
</tr>
<tr>
<td><span class="label label-info">left arrow key</span></td>
<td>Shift time backward</td>
</tr>
<tr>
<td><span class="label label-info">right arrow key</span></td>
<td>Shift time forward</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+S</span></td>
<td>Save dashboard</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+H</span></td>
<td>Hide row controls</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+Z</span></td>
<td>Zoom out</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+I</span></td>
<td>Quick snapshot</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+O</span></td>
<td>Enable/Disable shared graph crosshair</td>
</tr>
</table>
</div>
</div>

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

@ -54,7 +54,7 @@ $body-color: $gray-4;
$text-color: $gray-4;
$text-color-strong: $white;
$text-color-weak: $gray-2;
$text-color-faint: $gray-1;
$text-color-faint: $dark-5;
$text-color-emphasis: $gray-5;
$text-shadow-strong: 1px 1px 4px $black;

90
public/sass/components/_row.scss
View File

@ -3,6 +3,7 @@
display: block;
display: flex;
flex-direction: column;
position: relative;
}
.dash-row-header {
@ -103,77 +104,68 @@
width: 2rem;
}
$dash-row-menu-animation-speed: 0.20s;
.dash-row-menu-container {
position: absolute;
left: -120px;
background: $panel-bg;
width: 130px;
transition: .30s left;
transition-delay: .05s;
top: 0px;
transform: translate(-131px, 0);
transition: $dash-row-menu-animation-speed ease-out 0.5s;
z-index: 100;
display: flex;
flex-direction: row;
&:hover {
left: 0px;
transform: translate(-$panel-margin, 0);
transition: $dash-row-menu-animation-speed ease-in 0.05s;
z-index: 101;
box-shadow: $search-shadow;
.dash-row-menu-grip {
opacity: 0;
transition: $dash-row-menu-animation-speed ease-in 0.05s;
}
&.transition-hide {
transform: translate(-131px, 0);
transition: 0.0s ease-in 0s;
}
}
}
.dash-row-menu {
border-top: $panel-border;
border-bottom: $panel-border;
list-style: none;
flex-grow: 1;
box-shadow: $search-shadow;
background: $side-menu-bg;
li a {
display: inline-block;
display: block;
white-space: nowrap;
color: $text-muted;
font-size: $font-size-sm;
padding: 0.4rem 1rem;
padding: $spacer/2 $spacer;
border-left: 2px solid $side-menu-bg;
i {
display: inline-block;
padding-right: $spacer/2;
}
&:hover {
@include left-brand-border-gradient();
color: $link-color;
background: $input-label-bg;
}
}
}
.dash-row-menu--affordance {
float: right;
font-size: 130%;
margin-top: 7px;
color: $text-color-faint;
margin-right: -7px;
opacity: 1;
transition: .30s opacity forwards;
}
// Legacy mode
.row-tab {
.dropdown-menu-right {
top: 0;
left: 33px;
}
}
.row-tab-button {
padding: 0px;
cursor: pointer;
vertical-align: middle;
width: 30px;
height: 30px;
.dash-row-menu-grip {
text-align: center;
display: inline-block;
line-height: 30px;
background: $btn-success-bg;
color: rgba(255,255,255,.90);
font-size: 130%;
color: $text-color-faint;
opacity: 1;
transition: $dash-row-menu-animation-speed ease-out 0.5s;
width: 1rem;
}
.row-open {
margin-top: 1px;
left: -24px;
position: absolute;
z-index: 100;
transition: .10s left;
transition-delay: .05s;
&:hover {
left: 0px;
}
}

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

@ -52,10 +52,6 @@ div.flot-text {
}
}
.add-row-panel-hint {
display: none;
}
.panel-content {
padding: 0px 10px 5px 10px;
}
@ -212,15 +208,13 @@ div.flot-text {
}
}
.dash-edit-mode {
.resize-panel-handle {
color: $text-color-faint;
overflow: hidden;
&:before {
left: initial;
right: -5px;
bottom: 0px;
position: absolute;
}
.resize-panel-handle {
color: $text-color-faint;
overflow: hidden;
&:before {
left: initial;
right: -5px;
bottom: 0px;
position: absolute;
}
}