From 7df4cff0784abbc15e701818e8b7b35540dadb9b Mon Sep 17 00:00:00 2001 From: Alvaro del Castillo Date: Wed, 9 Dec 2015 10:59:35 +0100 Subject: [PATCH 01/11] [Dashboard] Implement custom title for panels. --- .../kibana/public/dashboard/components/panel/panel.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.html b/src/plugins/kibana/public/dashboard/components/panel/panel.html index 15f1aee7b555..3f1877734119 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.html +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.html @@ -7,9 +7,16 @@ aria-label="{{savedObj.vis.type.title}} Icon" title="{{savedObj.vis.type.title}}"> - {{savedObj.title}} + {{panel.customTitle}} + {{savedObj.title}} + +
+ + + From 48dea279d0f2f22d5a24d5b107c36c49848663b2 Mon Sep 17 00:00:00 2001 From: Alvaro del Castillo Date: Thu, 10 Dec 2015 04:15:44 +0100 Subject: [PATCH 02/11] [Dashboard] Store the panel custom title on $scope.uiState using the set/get methods. --- .../public/dashboard/components/panel/panel.html | 2 +- .../public/dashboard/components/panel/panel.js | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.html b/src/plugins/kibana/public/dashboard/components/panel/panel.html index 3f1877734119..9aa2ecc8a2e5 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.html +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.html @@ -14,7 +14,7 @@
+ ng-show="chrome.getVisible() && editUrl" ng-click="setTitle()"> diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.js b/src/plugins/kibana/public/dashboard/components/panel/panel.js index 9ec79dcc244c..fa023570e4e0 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.js +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.js @@ -52,6 +52,14 @@ define(function (require) { var uiState = panelConfig.uiState || {}; $scope.uiState = $scope.parentUiState.createChild(getPanelId(panelConfig.panel), uiState, true); + if ($scope.uiState) { + $scope.panel.customTitle = $scope.uiState.get('title'); + // sync external uiState changes + var syncUIState = () => $scope.panel.customTitle = $scope.uiState.get('title'); + $scope.uiState.on('change', syncUIState); + $scope.$on('$destroy', () => $scope.uiState.off('change', syncUIState)); + } + $scope.filter = function (field, value, operator) { var index = $scope.savedObj.searchSource.get('index').id; filterManager.add(field, value, operator, index); @@ -79,6 +87,13 @@ define(function (require) { $scope.remove = function () { _.pull($state.panels, $scope.panel); }; + + $scope.setTitle = function () { + $scope.showFormTitle = !$scope.showFormTitle; + // save the panel title to the UI state + if (!_.isString($scope.panel.customTitle)) $scope.panel.customTitle = null; + $scope.uiState.set('title', $scope.panel.customTitle); + }; } }; }); From a036cc9c2c98dcb090e42a407c7952a89058c732 Mon Sep 17 00:00:00 2001 From: Alvaro del Castillo Date: Thu, 10 Dec 2015 05:35:20 +0100 Subject: [PATCH 03/11] [Dashboard] Make the panel title editable with an edit icon shown when hover. --- .../public/dashboard/components/panel/panel.html | 11 ++++++----- src/plugins/kibana/public/dashboard/styles/main.less | 11 +++++++++++ 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.html b/src/plugins/kibana/public/dashboard/components/panel/panel.html index 9aa2ecc8a2e5..5367b23361bb 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.html +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.html @@ -9,14 +9,15 @@ {{panel.customTitle}} {{savedObj.title}} - + + + + + +
- - - diff --git a/src/plugins/kibana/public/dashboard/styles/main.less b/src/plugins/kibana/public/dashboard/styles/main.less index c55428e6e009..900660fcdb93 100644 --- a/src/plugins/kibana/public/dashboard/styles/main.less +++ b/src/plugins/kibana/public/dashboard/styles/main.less @@ -83,8 +83,19 @@ dashboard-grid { font-size: 1.2em; margin-right: 4px; } + + .panel-title-edit { + display: none; + } + + &:hover { + .panel-title-edit { + display: inline-block; + } + } } + a { color: @dashboard-panel-heading-link-color; border: none; From 64514013cf4aac32a0254ce8f715f9d4b2209fbb Mon Sep 17 00:00:00 2001 From: Alvaro del Castillo Date: Thu, 10 Dec 2015 13:12:50 +0100 Subject: [PATCH 04/11] [Dashboard] Add confirm, cancel and reset icons as buttons for panel title editing. Improve hover ux. --- .../dashboard/components/panel/panel.html | 23 +++++++++++++------ .../dashboard/components/panel/panel.js | 7 ++++++ .../kibana/public/dashboard/styles/main.less | 6 +---- 3 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.html b/src/plugins/kibana/public/dashboard/components/panel/panel.html index 5367b23361bb..ce1546191317 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.html +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.html @@ -1,21 +1,30 @@
- +
- {{panel.customTitle}} - {{savedObj.title}} - - - + {{panel.customTitle}} + {{savedObj.title}} + - + + + + + + + + + + + +
diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.js b/src/plugins/kibana/public/dashboard/components/panel/panel.js index fa023570e4e0..e307deea1bfd 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.js +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.js @@ -94,6 +94,13 @@ define(function (require) { if (!_.isString($scope.panel.customTitle)) $scope.panel.customTitle = null; $scope.uiState.set('title', $scope.panel.customTitle); }; + + $scope.confirmTitle = function () {$scope.setTitle();}; + $scope.cancelTitle = function () { + $scope.panel.customTitle = $scope.uiState.get('title'); + $scope.showFormTitle = false; + }; + $scope.resetTitle = function () {$scope.panel.customTitle = null;}; } }; }); diff --git a/src/plugins/kibana/public/dashboard/styles/main.less b/src/plugins/kibana/public/dashboard/styles/main.less index 900660fcdb93..aad46af33f11 100644 --- a/src/plugins/kibana/public/dashboard/styles/main.less +++ b/src/plugins/kibana/public/dashboard/styles/main.less @@ -84,13 +84,9 @@ dashboard-grid { margin-right: 4px; } - .panel-title-edit { - display: none; - } - &:hover { .panel-title-edit { - display: inline-block; + cursor: pointer; } } } From e283f26868630abaa4d24e361ced35c3aed66e32 Mon Sep 17 00:00:00 2001 From: Alvaro del Castillo Date: Thu, 10 Dec 2015 15:33:43 +0100 Subject: [PATCH 05/11] [Dashboard] Make input text for title smaller so icons are visible in narrower panels. --- src/plugins/kibana/public/dashboard/components/panel/panel.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.html b/src/plugins/kibana/public/dashboard/components/panel/panel.html index ce1546191317..d54458c9b629 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.html +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.html @@ -11,7 +11,7 @@ {{panel.customTitle}} {{savedObj.title}} - + From a6948695e39f5a630b4569180146e77a96991070 Mon Sep 17 00:00:00 2001 From: Alvaro del Castillo Date: Fri, 11 Dec 2015 06:50:31 +0100 Subject: [PATCH 06/11] [dashboard] Edit title Proper bootstrap form classes added. Remove not needed editUrl. Use title as param name. Remove arrow syntax. --- .../dashboard/components/panel/panel.html | 31 ++++++++++--------- .../dashboard/components/panel/panel.js | 14 ++++----- .../kibana/public/dashboard/styles/main.less | 4 +++ 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.html b/src/plugins/kibana/public/dashboard/components/panel/panel.html index d54458c9b629..d150b5673b89 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.html +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.html @@ -8,22 +8,25 @@ title="{{savedObj.vis.type.title}}"> - {{panel.customTitle}} - {{savedObj.title}} + {{panel.title}} + {{savedObj.title}} - - - - - - - - - - - - +
+
+ + + + + + + + + + +
+
+
diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.js b/src/plugins/kibana/public/dashboard/components/panel/panel.js index e307deea1bfd..1364c73cc6fe 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.js +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.js @@ -53,11 +53,11 @@ define(function (require) { $scope.uiState = $scope.parentUiState.createChild(getPanelId(panelConfig.panel), uiState, true); if ($scope.uiState) { - $scope.panel.customTitle = $scope.uiState.get('title'); + $scope.panel.title = $scope.uiState.get('title'); // sync external uiState changes - var syncUIState = () => $scope.panel.customTitle = $scope.uiState.get('title'); + var syncUIState = function () {$scope.panel.title = $scope.uiState.get('title');}; $scope.uiState.on('change', syncUIState); - $scope.$on('$destroy', () => $scope.uiState.off('change', syncUIState)); + $scope.$on('$destroy', function () {$scope.uiState.off('change', syncUIState);}); } $scope.filter = function (field, value, operator) { @@ -91,16 +91,16 @@ define(function (require) { $scope.setTitle = function () { $scope.showFormTitle = !$scope.showFormTitle; // save the panel title to the UI state - if (!_.isString($scope.panel.customTitle)) $scope.panel.customTitle = null; - $scope.uiState.set('title', $scope.panel.customTitle); + if (!_.isString($scope.panel.title)) $scope.panel.title = null; + $scope.uiState.set('title', $scope.panel.title); }; $scope.confirmTitle = function () {$scope.setTitle();}; $scope.cancelTitle = function () { - $scope.panel.customTitle = $scope.uiState.get('title'); + $scope.panel.title = $scope.uiState.get('title'); $scope.showFormTitle = false; }; - $scope.resetTitle = function () {$scope.panel.customTitle = null;}; + $scope.resetTitle = function () {$scope.panel.title = null;}; } }; }); diff --git a/src/plugins/kibana/public/dashboard/styles/main.less b/src/plugins/kibana/public/dashboard/styles/main.less index aad46af33f11..f986b105c5ea 100644 --- a/src/plugins/kibana/public/dashboard/styles/main.less +++ b/src/plugins/kibana/public/dashboard/styles/main.less @@ -75,6 +75,10 @@ dashboard-grid { // http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements display: inline-block; + div { + display: inline-block; + } + .ellipsis(); flex: 1 1 auto; From a9ef64c736e30b9e2cf04e993082efc52a5866e6 Mon Sep 17 00:00:00 2001 From: Joe Fleming Date: Mon, 14 Dec 2015 14:56:54 -0700 Subject: [PATCH 07/11] easing master merge --- .../public/dashboard/components/panel/panel.html | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.html b/src/plugins/kibana/public/dashboard/components/panel/panel.html index d150b5673b89..8d11b1692e19 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.html +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.html @@ -1,15 +1,15 @@
-
+
+ aria-label="{{::savedObj.vis.type.title}} Icon" + title="{{::savedObj.vis.type.title}}"> - {{panel.title}} - {{savedObj.title}} + {{panel.title}} + {{::savedObj.title}}
@@ -30,7 +30,7 @@
- + @@ -45,7 +45,8 @@
- Date: Mon, 14 Dec 2015 14:58:17 -0700 Subject: [PATCH 08/11] UI tweaks --- .../kibana/public/dashboard/components/panel/panel.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.html b/src/plugins/kibana/public/dashboard/components/panel/panel.html index 8d11b1692e19..d1d808685694 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.html +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.html @@ -7,16 +7,16 @@ aria-label="{{::savedObj.vis.type.title}} Icon" title="{{::savedObj.vis.type.title}}"> - + {{panel.title}} {{::savedObj.title}}
- + - + From d701678605f6bb7f5a3c87a182a6840d4f811f3b Mon Sep 17 00:00:00 2001 From: Alvaro del Castillo Date: Thu, 14 Jan 2016 22:49:39 +0100 Subject: [PATCH 09/11] Add tooltips to Title Edit buttons. --- .../dashboard/components/panel/panel.html | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.html b/src/plugins/kibana/public/dashboard/components/panel/panel.html index d1d808685694..2baaf153ce4f 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.html +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.html @@ -15,15 +15,21 @@
From d4208554a3491f570919adc192ecc004f550dd21 Mon Sep 17 00:00:00 2001 From: Alvaro del Castillo Date: Thu, 11 Feb 2016 12:04:40 +0100 Subject: [PATCH 10/11] [Panel] Show with opacity 1 the buttons to edit the title of the panel. --- src/plugins/kibana/public/dashboard/styles/main.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/plugins/kibana/public/dashboard/styles/main.less b/src/plugins/kibana/public/dashboard/styles/main.less index f986b105c5ea..1d13587650ae 100644 --- a/src/plugins/kibana/public/dashboard/styles/main.less +++ b/src/plugins/kibana/public/dashboard/styles/main.less @@ -88,6 +88,12 @@ dashboard-grid { margin-right: 4px; } + .panel-title-edit { + i { + opacity: 1; + } + } + &:hover { .panel-title-edit { cursor: pointer; From de8d7fd73c23e776406a84e75a8beff7bd1358cc Mon Sep 17 00:00:00 2001 From: Alvaro del Castillo Date: Thu, 11 Feb 2016 12:06:11 +0100 Subject: [PATCH 11/11] [Panel] Follow Kibana style in title edit form. Support cancel with ESC key. --- .../dashboard/components/panel/panel.html | 59 ++++++++++++------- .../dashboard/components/panel/panel.js | 9 ++- 2 files changed, 47 insertions(+), 21 deletions(-) diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.html b/src/plugins/kibana/public/dashboard/components/panel/panel.html index 2baaf153ce4f..52ebc5efac7e 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.html +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.html @@ -12,27 +12,46 @@ {{::savedObj.title}} -
-
- - - - - - - - - - - - - - - - -
+
+
+ +
+
+
+ + + + + + + + +
-
diff --git a/src/plugins/kibana/public/dashboard/components/panel/panel.js b/src/plugins/kibana/public/dashboard/components/panel/panel.js index 1364c73cc6fe..6f302ba9b9d5 100644 --- a/src/plugins/kibana/public/dashboard/components/panel/panel.js +++ b/src/plugins/kibana/public/dashboard/components/panel/panel.js @@ -94,13 +94,20 @@ define(function (require) { if (!_.isString($scope.panel.title)) $scope.panel.title = null; $scope.uiState.set('title', $scope.panel.title); }; - $scope.confirmTitle = function () {$scope.setTitle();}; $scope.cancelTitle = function () { $scope.panel.title = $scope.uiState.get('title'); $scope.showFormTitle = false; }; $scope.resetTitle = function () {$scope.panel.title = null;}; + $scope.maybeCancel = function ($event) { + const keyCodes = { + ESC: 27 + }; + if ($event.keyCode === keyCodes.ESC) { + $scope.cancelTitle(); + } + }; } }; });