You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by xi...@apache.org on 2015/04/11 03:54:15 UTC
ambari git commit: AMBARI-10374. Implement hover icons on widgets
(clone, hide, edit, etc)(xiwang)
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 <xi...@apache.org>
Authored: Mon Apr 6 18:11:41 2015 -0700
Committer: Xi Wang <xi...@apache.org>
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');