Updated Branches: refs/heads/trunk 66a7a7f66 -> 3adb81663
AMBARI-2632. Dashboard Widgets: "hover to show details" experience is jarring. (Xi Wang via yusaku) Project: http://git-wip-us.apache.org/repos/asf/incubator-ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-ambari/commit/3adb8166 Tree: http://git-wip-us.apache.org/repos/asf/incubator-ambari/tree/3adb8166 Diff: http://git-wip-us.apache.org/repos/asf/incubator-ambari/diff/3adb8166 Branch: refs/heads/trunk Commit: 3adb81663555db0707181987dd6e322dca28600b Parents: 66a7a7f Author: Yusaku Sako <[email protected]> Authored: Thu Jul 11 15:05:06 2013 -0700 Committer: Yusaku Sako <[email protected]> Committed: Thu Jul 11 15:05:14 2013 -0700 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 140 +++++++++++-------- .../main/dashboard/widgets/mapreduce_slots.hbs | 4 +- .../main/dashboard/widgets/simple_text.hbs | 2 +- .../templates/main/dashboard/widgets/uptime.hbs | 9 +- ambari-web/app/views/main/dashboard/widget.js | 20 ++- 5 files changed, 110 insertions(+), 65 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/3adb8166/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 9394667..a926a2b 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -2078,31 +2078,42 @@ table.graphs { } .thumbnail .corner-icon{ - color: #ffffff; display: none; + position: relative; + .icon-remove-sign{ + color: #000000; + text-shadow: #fff 0px 0px 15px; + position: relative; + left: -17px; + top: -7px; + } + .icon-edit{ + color: #555555; + } } .thumbnail .hidden-info{ - color: #ffffff; + color: #555555; font-size: 12px; font-weight: bold; padding-top: 60px; text-align: center; text-decoration: none; display: none; + position: relative; } .thumbnail .hidden-info-three-line{ - color: #ffffff; + color: #555555; font-size: 12px; font-weight: bold; padding-top: 50px; text-align: center; text-decoration: none; display: none; + position: relative; table td{ text-align: center ; } } - .thumbnail .caption { padding-left: 0px; padding-top: 7px; @@ -2112,18 +2123,13 @@ table.graphs { font-weight:bold; font-size: 12px; text-align: left; - } - .thumbnail .icon-remove-sign{ - color: #000000; - text-shadow: #fff 0px 0px 15px; position: relative; - left: -17px; - top: -7px; } .thumbnail .widget-content{ text-align: center; font-size: 35px; padding-top: 40px; //svg + position: relative; .screensaver{ // graph onload wait width: 90%; height: 105px; @@ -2138,8 +2144,67 @@ table.graphs { color: #D6DDDF; padding-top: 70px; font-weight: bold; - + position: relative; + } + .thumbnail{ + background-color: #ffffff; + z-index: 3; + } + .has-hidden-info .thumbnail:hover { + cursor: move; + //background-color: #d3d3d3; + .corner-icon{ + display:block; + text-decoration: none; + z-index: 9; + } + .hidden-info{ + display: block; + z-index: 7; + } + .hidden-info-three-line{ + display: block; + z-index: 7; + } + .caption{ + margin-left: -6px; + z-index: 7; + } + .slots-caption{ + margin-left: -13px; + z-index: 7; + } + .widget-content{ + top: -104px; + opacity: 0.3; + z-index: 5; + } + .widget-content-isNA{ + top: -104px; + opacity: 0.3; + z-index: 5; + } + .uptime-content{ + top: -136px; + } + .uptime-content-isNA{ + top: -95px; + } + .slots-content-isNA{ + top: -82px; + } + .simple-text-hidden-two-line{ + top: -105px; + opacity: 0.3; + z-index: 5; + } + .simple-text-hidden-three-line{ + top: -116px; + opacity: 0.3; + z-index: 5; + } } + .cluster-metrics .chart-container{ margin: 0px 10px 0px 10px; .chart-y-axis{ @@ -2154,16 +2219,14 @@ table.graphs { font-size: 12px; } .cluster-metrics .thumbnail:hover{ - background-color: #909090; cursor: move; .corner-icon{ display:block; text-decoration: none; + z-index: 9; } .caption{ - color: #ffffff; - margin-left: -5px; - text-shadow: #000 0px 0px 15px; + margin-left: -6px; } .rickshaw_legend{ padding-top: 3px; @@ -2206,51 +2269,16 @@ table.graphs { } } .links .thumbnail:hover{ - background-color: #909090; cursor: move; .corner-icon{ display:block; text-decoration: none; + z-index: 9; } .caption{ - color: #ffffff; - margin-left: -5px; - text-shadow: #000 0px 0px 15px; - } - .widget-content{ - color: #D6DDDF; - text-shadow: #000 0px 0px 5px; - a{ - color: #ffffff; - } + margin-left: -6px; } } - .has-hidden-info .thumbnail:hover { - background-color: #909090; - cursor: move; - text-shadow: #000 0px 0px 15px; - .corner-icon{ - display:block; - text-decoration: none; - } - .hidden-info{ - display: block; - } - .hidden-info-three-line{ - display: block; - } - .caption{ - color: #ffffff; - margin-left: -5px; - } - .widget-content{ - display: none; - } - .widget-content-isNA{ - display: none; - } - } - .thumbnail .widget-content .svg { position:relative; } @@ -2282,18 +2310,13 @@ table.graphs { .is-red{ .widget-content { color: #B80000; - //text-shadow: 0.1em 0.1em #D6DDDF ; - //filter: Shadow(Color=red, Direction=45, Strength=1); /* IE 10-*/ padding-top: 70px; font-weight: bold; } - } .is-orange{ .widget-content { color: #FF8E00; - //text-shadow: 0.1em 0.1em #D6DDDF ; - //filter: Shadow(Color=red, Direction=45, Strength=1); /* IE 10-*/ padding-top: 70px; font-weight: bold; } @@ -2301,13 +2324,12 @@ table.graphs { .is-green { .widget-content { color: #95A800; - //text-shadow: 0.1em 0.1em #D6DDDF ; - //filter: Shadow(Color=red, Direction=45, Strength=0); /* IE 10-*/ padding-top: 70px; font-weight: bold; } } .is-na { + position: relative; .widget-content { color: #D6DDDF; text-shadow: none; http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/3adb8166/ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs b/ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs index a2d6810..c372f2b 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs @@ -19,7 +19,7 @@ <div class="has-hidden-info"> <li class="thumbnail row" > <a class="corner-icon span1" href="#" {{action deleteWidget target="view"}}><i class="icon-remove-sign icon-large"></i></a> - <div class="caption span10"> {{view.title}}</div> + <div class="caption span10 slots-caption"> {{view.title}}</div> <div class="hidden-info"> <table align="center"> @@ -48,7 +48,7 @@ </ul> </div> {{else}} - <div class="widget-content-isNA" >{{t services.service.summary.notAvailable}}</div> + <div class="widget-content-isNA slots-content-isNA" >{{t services.service.summary.notAvailable}}</div> {{/if}} </li> </div> http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/3adb8166/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs b/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs index 63112f0..2908eba 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs @@ -34,6 +34,6 @@ </table> </div> - <div class="widget-content">{{view.content}}</div> + <div {{bindAttr class=":widget-content view.hoverContentTopClass"}}>{{view.content}}</div> </li> </div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/3adb8166/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs b/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs index 9f950e5..bbc2eea 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs @@ -33,6 +33,13 @@ {{/each}} </table> </div> - <div class="widget-content">{{view.content}}</div> + + {{#if view.isNA}} + <div class="widget-content-isNA uptime-content-isNA" >{{t services.service.summary.notAvailable}}</div> + {{else}} + <div class="widget-content uptime-content" > + {{view.content}} + </div> + {{/if}} </li> </div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/3adb8166/ambari-web/app/views/main/dashboard/widget.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard/widget.js b/ambari-web/app/views/main/dashboard/widget.js index c69e528..9fedb7e 100644 --- a/ambari-web/app/views/main/dashboard/widget.js +++ b/ambari-web/app/views/main/dashboard/widget.js @@ -221,7 +221,7 @@ App.DashboardWidgetView = Em.View.extend({ }); }, - getInternetExplorerVersion: function(){ + getInternetExplorerVersion: function (){ var rv = -1; //return -1 for other browsers if (navigator.appName == 'Microsoft Internet Explorer') { var ua = navigator.userAgent; @@ -235,7 +235,23 @@ App.DashboardWidgetView = Em.View.extend({ }else{ return rv; } - } + }, + + /** + * for simple-text template, + * calculate the hover content top number + * based on how long the hiddenInfo is + */ + hoverContentTopClass: function () { + var lineNum = this.get('hiddenInfo.length'); + if (lineNum == 2) { + return "simple-text-hidden-two-line"; + } else if (lineNum == 3) { + return "simple-text-hidden-three-line"; + } else { + return ""; + } + }.property('this.hiddenInfo.length') });
