From 591f6536f8b2eab32e783627404c4013d9b5a12e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 29 Oct 2016 13:10:08 +0200 Subject: [PATCH] feat(ux): trying to simplify display rules for edit mode / row actions --- public/app/features/dashboard/row/row.html | 66 ++++-- public/app/features/dashboard/row/row.ts | 6 +- public/sass/_grafana.scss | 1 + public/sass/components/_row.scss | 216 +++++++++++++++++ public/sass/pages/_dashboard.scss | 264 --------------------- 5 files changed, 259 insertions(+), 294 deletions(-) create mode 100644 public/sass/components/_row.scss diff --git a/public/app/features/dashboard/row/row.html b/public/app/features/dashboard/row/row.html index ad5b891e5e3..f98c249c03a 100644 --- a/public/app/features/dashboard/row/row.html +++ b/public/app/features/dashboard/row/row.html @@ -1,35 +1,49 @@ -
- - - - - - {{ctrl.row.title}} - +
+
+ + + + + + {{ctrl.row.title}} + -
+
+
+ +
+ + Add Panel + + + + + Row Options + + + +
-
- - Add Panel - - - - - Row Options - - - +
+ +
+ +
+
-
- -
- -
- +
diff --git a/public/app/features/dashboard/row/row.ts b/public/app/features/dashboard/row/row.ts index a022467c811..6fcbfb6a140 100644 --- a/public/app/features/dashboard/row/row.ts +++ b/public/app/features/dashboard/row/row.ts @@ -84,6 +84,7 @@ export class DashRowCtrl { } showAddPanel() { + this.row.collapse = false; this.dropView = this.dropView === 1 ? 0 : 1; } @@ -104,11 +105,8 @@ export function rowDirective($rootScope) { row: "=", }, link: function(scope, element) { - scope.$watchGroup(['ctrl.row.collapse', 'ctrl.row.height', 'ctrl.row.showTitle', 'ctrl.dropView'], function() { + scope.$watchGroup(['ctrl.row.height'], function() { element.css({minHeight: scope.ctrl.row.collapse ? '5px' : scope.ctrl.row.height}); - element.toggleClass('dash-row-show-title', scope.ctrl.row.showTitle === true); - element.toggleClass('dash-row-show-options', scope.ctrl.dropView === 2); - element.toggleClass('dash-row-show-add-panel', scope.ctrl.dropView === 1); }); $rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) { diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 936ce0af4d6..6bd83cd81c0 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -73,6 +73,7 @@ @import "components/query_part"; @import "components/jsontree"; @import "components/edit_sidemenu.scss"; +@import "components/row.scss"; // PAGES @import "pages/login"; diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss new file mode 100644 index 00000000000..610e7c14153 --- /dev/null +++ b/public/sass/components/_row.scss @@ -0,0 +1,216 @@ + +.dash-row { + display: block; + display: flex; + flex-direction: column; +} + +.dash-row-header { + position: relative; + display: flex; + flex-direction: row; + margin-right: $panel-margin; + margin-left: 0; + + .h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem } + .h2 { font-size: 2.4rem; line-height: 3.5rem; } + .h3 { font-size: 2.0rem; line-height: 3rem;} + .h4 { font-size: 1.7rem; } + .h5 { font-size: 1.4rem; } + .h6 { font-size: 1rem } +} + +.dash-row-header-title { + padding: 0.6rem; + flex-grow: 1; + + .dash-row-collapse-toggle { + padding: 0 2px; + font-size: $font-size-xs; + color: $text-muted; + position: relative; + left: -3px; + top: -1px; + } + + &:hover { + .dash-row-collapse-toggle { + color: $link-color; + } + } +} + +.dash-row-header-actions { + position: absolute; + color: $text-muted; + font-size: $font-size-sm; + bottom: 5px; + right: 1rem; + a { + color: $text-muted; + padding-left: 1rem; + &:hover { + color: $link-hover-color; + } + } +} + +.dash-row-header-add-panel { + padding: 0.7rem; + i { + font-size: 0.9rem; + position: relative; + top: 2px; + left: 1px; + color: $text-muted; + } +} + +.dash-row-header-spacer { + flex: 50; +} + +.panels-wrapper { + flex-grow: 1; + position: relative; +} + +.dash-edit-mode { + .dash-row-header { + display: flex; + border-bottom: 1px solid $dark-4; + border-right: 1px solid $dark-4; + margin-right: 0; + } + .dash-row-header::after { + content: ' '; + border-top: 1px solid $dark-4; + width: 15px; + position: relative; + } + .dash-row { + margin-bottom: $spacer*2; + } + .dash-row-header-title { + border-left: 1px solid $dark-4; + } + .dash-row-header-title::before { + content: ' '; + border-top: 1px solid $dark-4; + width: 15px; + position: absolute; + margin: -9px 0 0 -9px; + } + .panels-wrapper { + padding: $panel-margin*2 $panel-margin 0 $panel-margin; + border-left: 1px solid $dark-4; + border-right: 1px solid $dark-4; + } + .panels-wrapper::after { + content: ' '; + border-bottom: 1px solid $dark-4; + width: 15px; + position: absolute; + margin: 0 0 0 -12px; + bottom: 0; + } + .add-row-panel-hint { + display: block; + } +} + +.dash-row-options-close-btn { + float: right; + padding: 0; + margin: 0; + background-color: transparent; + border: none; + padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom; + i { + font-size: 120%; + } + color: $text-color; + &:hover { + color: $white; + } +} + +.dash-row-options { + background: $panel-bg; + border-left: $panel-border; + border-bottom: $panel-border; + border-right: $panel-border; + margin: 0 0 $panel-margin*2 0; + padding: $panel-margin*2; + box-shadow: 0px 3px 7px -3px $black; +} + +.dash-row-add-panel { + background: $panel-bg; + border-left: $panel-border; + border-bottom: $panel-border; + border-right: $panel-border; + margin: 0 0 $panel-margin*2 0; + padding: $panel-margin*2; + box-shadow: 0px 3px 7px -3px $black; + display: flex; +} + +.dash-edit-mode { + .dash-row-options { + margin-bottom: 0; + } + .dash-row-add-panel { + margin-bottom: 0; + } +} + +.add-panel-panels-scroll { + width: 100%; + overflow: hidden; +} + +.add-panel-panels { + display: flex; + flex-direction: row; +} + +.add-panel-item { + background: $input-label-bg; + border: $panel-border; + padding: $spacer; + min-width: 9rem; + max-width: 9rem; + text-align: center; + margin: $gf-form-margin; + cursor: pointer; + + &.active, + &:hover { + box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8) + } +} + +.add-panel-item-name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-size: $font-size-sm; +} + +.add-panel-item-img { + width: 2rem; +} + +// Animations + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index a5421a6b943..616ffd8e7ea 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -200,267 +200,3 @@ div.flot-text { } } -// -// Dashboard row -// - -.dash-row { - display: block; -} - -.dash-row-header { - position: relative; - display: flex; - display: none; - flex-direction: row; - margin-right: $panel-margin; - margin-left: 0; - - &:hover { - .dash-row-header-actions { - display: block; - opacity: 0; - animation: fadeIn 150ms linear 100ms forwards; - } - } - - .h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem } - .h2 { font-size: 2.4rem; line-height: 3.5rem; } - .h3 { font-size: 2.0rem; line-height: 3rem;} - .h4 { font-size: 1.7rem; } - .h5 { font-size: 1.4rem; } - .h6 { font-size: 1rem } -} - -.dash-row-header-title { - padding: 0.6rem; - - .dash-row-collapse-toggle { - padding: 0 2px; - font-size: $font-size-xs; - color: $text-muted; - position: relative; - left: -3px; - top: -1px; - } - - &:hover { - .dash-row-collapse-toggle { - color: $link-color; - } - } -} - -.dash-row-header-actions { - position: absolute; - display: none; - color: $text-muted; - font-size: $font-size-sm; - bottom: 5px; - right: 1rem; - a { - color: $text-muted; - padding-left: 1rem; - &:hover { - color: $link-hover-color; - } - } -} - -.dash-row-show-options { - .dash-row-header-actions { - display: block; - } - .dash-row-header-action-show-options { - color: $link-color; - } - .dash-row-header { - border-bottom: none; - } -} - -.dash-row-show-add-panel { - .dash-row-header-actions { - display: block; - } - .dash-row-header-action--add-panel { - color: $link-color; - } - .dash-row-header { - border-bottom: none; - } -} - -.dash-row-show-title { - .dash-row-header { - display: flex; - } -} - -.dash-row-header-add-panel { - padding: 0.7rem; - i { - font-size: 0.9rem; - position: relative; - top: 2px; - left: 1px; - color: $text-muted; - } -} - -.dash-row-header-spacer { - flex: 50; -} - -.dash-edit-mode { - .dash-row-header { - display: flex; - border-bottom: 1px solid $dark-4; - border-right: 1px solid $dark-4; - margin-right: 0; - .dash-row-header-actions { - display: block; - } - } - .dash-row-show-add-panel { - .dash-row-header { - border-bottom: none; - } - } - .dash-row-show-options { - .dash-row-header { - border-bottom: none; - } - } - .dash-row-header::after { - content: ' '; - border-top: 1px solid $dark-4; - width: 15px; - position: relative; - } - .dash-row { - margin-bottom: $spacer*2; - } - .dash-row-header-title { - border-left: 1px solid $dark-4; - } - .dash-row-header-title::before { - content: ' '; - border-top: 1px solid $dark-4; - width: 15px; - position: absolute; - margin: -9px 0 0 -9px; - } - .panels-wrapper { - padding: $panel-margin*2 $panel-margin 0 $panel-margin*2; - border-left: 1px solid $dark-4; - border-right: 1px solid $dark-4; - } - .panels-wrapper::after { - content: ' '; - border-bottom: 1px solid $dark-4; - width: 15px; - position: absolute; - margin: 0 0 0 -12px; - } - - .add-row-panel-hint { - display: block; - } -} - -.dash-row-options-close-btn { - float: right; - padding: 0; - margin: 0; - background-color: transparent; - border: none; - padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom; - i { - font-size: 120%; - } - color: $text-color; - &:hover { - color: $white; - } -} - -.dash-row-options { - border-left: $panel-border; - border-bottom: $panel-border; - border-right: $panel-border; - margin: 0 0 $panel-margin*2 0; - padding: $panel-margin*2; - box-shadow: 0px 3px 7px -3px $black; -} - -.dash-row-add-panel { - border-left: $panel-border; - border-bottom: $panel-border; - border-right: $panel-border; - margin: 0 0 $panel-margin*2 0; - padding: $panel-margin*2; - // display: flex; - // align-items: flex-start; - // position: relative; - box-shadow: 0px 3px 7px -3px $black; -} - -.dash-edit-mode { - .dash-row-options { - margin-bottom: 0; - } - .dash-row-add-panel { - margin-bottom: 0; - } -} - -.add-panel-panels-scroll { - width: 100%; - overflow: hidden; -} - -.add-panel-panels { - display: flex; - flex-direction: row; -} - -.add-panel-item { - background: $panel-bg; - border: $panel-border; - padding: $spacer; - min-width: 9rem; - max-width: 9rem; - text-align: center; - margin: $gf-form-margin; - cursor: pointer; - - &.active, - &:hover { - box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8) - } -} - -.add-panel-item-name { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - font-size: $font-size-sm; -} - -.add-panel-item-img { - width: 2rem; -} - -// Animations - -@keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} -