Repository: ambari Updated Branches: refs/heads/trunk 37717dd4c -> 473c583c2
AMBARI-10374. Implement hover icons on widgets (clone, hide, edit, etc)(xiwang) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/473c583c Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/473c583c Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/473c583c Branch: refs/heads/trunk Commit: 473c583c2d8a686b1a5acfb709fae3962f2212cd Parents: 37717dd Author: Xi Wang <[email protected]> Authored: Mon Apr 6 18:11:41 2015 -0700 Committer: Xi Wang <[email protected]> Committed: Fri Apr 10 18:51:10 2015 -0700 ---------------------------------------------------------------------- ambari-web/app/mixins/common/widget_mixin.js | 21 +++++++- .../app/styles/enhanced_service_dashboard.less | 57 +++++++++++++++++--- .../templates/common/widget/gauge_widget.hbs | 11 +++- .../templates/common/widget/graph_widget.hbs | 11 +++- .../templates/common/widget/number_widget.hbs | 11 +++- .../templates/common/widget/template_widget.hbs | 11 +++- .../app/views/main/service/info/summary.js | 12 +++++ 7 files changed, 121 insertions(+), 13 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/473c583c/ambari-web/app/mixins/common/widget_mixin.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/mixins/common/widget_mixin.js b/ambari-web/app/mixins/common/widget_mixin.js index 0fe7958..9003161 100644 --- a/ambari-web/app/mixins/common/widget_mixin.js +++ b/ambari-web/app/mixins/common/widget_mixin.js @@ -248,10 +248,29 @@ App.WidgetMixin = Ember.Mixin.create({ getHostComponentMetricsSuccessCallback: function () { //TODO push data to metrics after response structure approved + }, + + /* + * make call when clicking on "remove icon" on widget + */ + hideWidget: function () { + + }, + /* + * make call when clicking on "clone icon" on widget + */ + cloneWidget: function () { + + }, + + /* + * make call when clicking on "edit icon" on widget + */ + editWidget: function () { + } }); - App.WidgetPreviewMixin = Ember.Mixin.create({ beforeRender: Em.K, isLoaded: true, http://git-wip-us.apache.org/repos/asf/ambari/blob/473c583c/ambari-web/app/styles/enhanced_service_dashboard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/enhanced_service_dashboard.less b/ambari-web/app/styles/enhanced_service_dashboard.less index 0578ee7..5eae29e 100644 --- a/ambari-web/app/styles/enhanced_service_dashboard.less +++ b/ambari-web/app/styles/enhanced_service_dashboard.less @@ -51,7 +51,6 @@ #widget_layout, #widget-preview { .frame { - overflow: hidden; height: 150px; width: 90%; } @@ -59,7 +58,6 @@ width: 19.3%; background-color: white; margin: 5px 0 5px 5px; - cursor: move; } .widget { .spinner { @@ -70,22 +68,26 @@ height: 25px; font-weight: bold; text-align: left; + position: relative; } .content { text-align: center; color: @health-status-green; - padding-top: 35px; font-weight: bold; font-size: 35px; + position: relative; } .template-widget, .number-widget { .frame; + .content { + padding-top: 70px; + } } .graph-widget { .frame; .content { - padding-top: 0; + padding-top: 30px; } .chart-legend { min-width: 100%; @@ -98,7 +100,7 @@ .gauge-widget { .frame; .content { - padding-top: 5px; + padding-top: 40px; } } .red { @@ -115,9 +117,48 @@ #widget-preview { max-width: 200px; - .graph-widget { - .title { - height: 0; + .widget { + .thumbnail .corner-icon { + display: none; + } + .graph-widget { + .title { + height: 0; + } + } + } +} + +#widget_layout { + .widget { + .thumbnail .corner-icon { + display: none; + position: relative; + .icon-remove-sign{ + color: #000000; + text-shadow: #fff 0px 0px 15px; + position: relative; + left: -17px; + top: -11px; + } + .icon-edit,.icon-copy{ + color: #555555; + position: relative; + } + .icon-edit { + left: 2px; + } + } + .thumbnail:hover { + cursor: move; + .corner-icon{ + display: block; + text-decoration: none; + z-index: 9; + } + .caption{ + margin-left: -10px; + } } } } http://git-wip-us.apache.org/repos/asf/ambari/blob/473c583c/ambari-web/app/templates/common/widget/gauge_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/widget/gauge_widget.hbs b/ambari-web/app/templates/common/widget/gauge_widget.hbs index 823a567..1846670 100644 --- a/ambari-web/app/templates/common/widget/gauge_widget.hbs +++ b/ambari-web/app/templates/common/widget/gauge_widget.hbs @@ -18,7 +18,16 @@ <div class="gauge-widget thumbnail"> {{#if view.isLoaded}} - <div class="caption title">{{view.content.displayName}}</div> + <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget target="view"}}> + <i class="icon-remove-sign icon-large"></i> + </a> + <div class="caption title span9">{{view.content.displayName}}</div> + <a class="corner-icon span1" href="#" {{action cloneWidget target="view"}}> + <i class="icon-copy"></i> + </a> + <a class="corner-icon span1" href="#" {{action editWidget target="view"}}> + <i class="icon-edit"></i> + </a> <div class="content"> {{view view.chartView}}</div> {{else}} <div class="spinner"></div> http://git-wip-us.apache.org/repos/asf/ambari/blob/473c583c/ambari-web/app/templates/common/widget/graph_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/widget/graph_widget.hbs b/ambari-web/app/templates/common/widget/graph_widget.hbs index 58fb143..ede376f 100644 --- a/ambari-web/app/templates/common/widget/graph_widget.hbs +++ b/ambari-web/app/templates/common/widget/graph_widget.hbs @@ -18,7 +18,16 @@ <div class="graph-widget thumbnail"> {{#if view.isLoaded}} - <div class="caption title">{{view.content.displayName}}</div> + <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget target="view"}}> + <i class="icon-remove-sign icon-large"></i> + </a> + <div class="caption title span9">{{view.content.displayName}}</div> + <a class="corner-icon span1" href="#" {{action cloneWidget target="view"}}> + <i class="icon-copy"></i> + </a> + <a class="corner-icon span1" href="#" {{action editWidget target="view"}}> + <i class="icon-edit"></i> + </a> <div class="content"> {{view view.graphView}}</div> {{else}} <div class="spinner"></div> http://git-wip-us.apache.org/repos/asf/ambari/blob/473c583c/ambari-web/app/templates/common/widget/number_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/widget/number_widget.hbs b/ambari-web/app/templates/common/widget/number_widget.hbs index 711773e..be32201 100644 --- a/ambari-web/app/templates/common/widget/number_widget.hbs +++ b/ambari-web/app/templates/common/widget/number_widget.hbs @@ -18,7 +18,16 @@ <div class="number-widget thumbnail"> {{#if view.isLoaded}} - <div class="caption title">{{view.content.displayName}}</div> + <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget target="view"}}> + <i class="icon-remove-sign icon-large"></i> + </a> + <div class="caption title span9">{{view.content.displayName}}</div> + <a class="corner-icon span1" href="#" {{action cloneWidget target="view"}}> + <i class="icon-copy"></i> + </a> + <a class="corner-icon span1" href="#" {{action editWidget target="view"}}> + <i class="icon-edit"></i> + </a> <div {{bindAttr class="view.contentColor :content"}}>{{view.value}}</div> {{else}} <div class="spinner"></div> http://git-wip-us.apache.org/repos/asf/ambari/blob/473c583c/ambari-web/app/templates/common/widget/template_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/widget/template_widget.hbs b/ambari-web/app/templates/common/widget/template_widget.hbs index ed29d23..4e2ea0b 100644 --- a/ambari-web/app/templates/common/widget/template_widget.hbs +++ b/ambari-web/app/templates/common/widget/template_widget.hbs @@ -18,7 +18,16 @@ <div class="template-widget thumbnail"> {{#if view.isLoaded}} - <div class="caption title">{{view.content.displayName}}</div> + <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget target="view"}}> + <i class="icon-remove-sign icon-large"></i> + </a> + <div class="caption title span9">{{view.content.displayName}}</div> + <a class="corner-icon span1" href="#" {{action cloneWidget target="view"}}> + <i class="icon-copy"></i> + </a> + <a class="corner-icon span1" href="#" {{action editWidget target="view"}}> + <i class="icon-edit"></i> + </a> <div class="content"> {{view.value}}</div> {{else}} <div class="spinner"></div> http://git-wip-us.apache.org/repos/asf/ambari/blob/473c583c/ambari-web/app/views/main/service/info/summary.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/service/info/summary.js b/ambari-web/app/views/main/service/info/summary.js index 2a1c274..8217f29 100644 --- a/ambari-web/app/views/main/service/info/summary.js +++ b/ambari-web/app/views/main/service/info/summary.js @@ -573,6 +573,12 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, { }, /** + * Define if some widget is currently moving + * @type {boolean} + */ + isMoving: false, + + /** * Make widgets' list sortable on New Dashboard style */ makeSortable: function () { @@ -591,6 +597,12 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, { var layout = self.get('controller.widgetLayouts').objectAt(0); self.get('controller').saveLayout(widgets, layout); + }, + activate: function (event, ui) { + self.set('isMoving', true); + }, + deactivate: function (event, ui) { + self.set('isMoving', false); } }).disableSelection(); $('html').off('DOMNodeInserted', '#widget_layout');
