AMBARI-7179. Configs: ui selected/disabled version visuals.(XIWANG)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/41a9caa8 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/41a9caa8 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/41a9caa8 Branch: refs/heads/branch-alerts-dev Commit: 41a9caa8a0e0ca9b176327acf4f15271274f0706 Parents: 5986ad5 Author: Xi Wang <xiw...@apache.org> Authored: Fri Sep 5 11:53:07 2014 -0700 Committer: Xi Wang <xiw...@apache.org> Committed: Fri Sep 5 18:00:50 2014 -0700 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 71 +++++++++++++------- .../common/configs/config_history_flow.hbs | 22 +++--- 2 files changed, 57 insertions(+), 36 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/41a9caa8/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 5160eb6..1a63440 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -4954,19 +4954,20 @@ ul.inline li { } .one-story-bar { - margin-bottom: 80px; + margin-bottom: 60px; } .two-stories-bar { - margin-bottom: 120px; + margin-bottom: 100px; } #config_history_flow { + margin-top: -5px; .version-slider { width: 100%; - height: 100px; - margin: 10px 0; + height: 64px; + margin: 5px 0; .flow-element { - width: 18%; + width: 18.5%; height: 100%; .version-box { position: relative; @@ -4977,22 +4978,40 @@ ul.inline li { width: 72%; height: 100%; background-color: #ffffff; - border: 1px solid #dddddd; - font-size: 13px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border: 1px solid #d2d9dd; + font-size: 11px; .top-label { min-width: 20px; - padding: 5px; + padding: 3px 2px; } + .author, .content { - padding: 0 5px; + padding: 0px 2px; text-align: center; color: #555555; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .content { + max-width: 97% !important; + } + .author { + max-width: 75% !important; + } + .current-label { + text-align: center; + padding: 2px 5px; } } .version-box .version-popover { display: none; position: absolute; - bottom: 89px; + bottom: 58px; left: -45px; z-index: 1000; float: left; @@ -5028,29 +5047,34 @@ ul.inline li { .version-popover { display: block; } + .box { + background-color: #e6f1f6; + } } .version-box .box.displayed { - border: 1px solid #444444; + background-color: #e6f1f6; .content { color: #444444; font-weight: bold; } } .version-box .box.grayedOut { - background-color: #eeeeee; - border: 1px solid #eeeeee; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + .author, .content { - color: #b8b8b8; + color: #a6a6a6; } + .current-label .label, .top-label .label { - color: #eeeeee; - background-color: #b8b8b8; + opacity: .5; } + } .arrow-box { width: 20%; margin-left: 1px; - margin-top: 20px; + margin-top: 9px; .icon-arrow-right { color: #c3c3c3; } @@ -5058,7 +5082,7 @@ ul.inline li { } .first { width: 13%; - margin-left: 15px; + margin-left: 0px; .arrow-box { display: none; } @@ -5068,7 +5092,7 @@ ul.inline li { } .icon-chevron-box { - margin-top: 25px; + margin-top: 12px; width: 5%; cursor: pointer; .icon-chevron-right, @@ -6176,18 +6200,13 @@ i.icon-asterisks { #config_history_flow { .version-slider { .flow-element { - .box { - width: 75%; + .version-box .box { + font-size: 13px; } .arrow-box { margin-left: 5px; } } - .first { - .box { - width: 100%; - } - } } .version-info-bar { width: 960px; http://git-wip-us.apache.org/repos/asf/ambari/blob/41a9caa8/ambari-web/app/templates/common/configs/config_history_flow.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/config_history_flow.hbs b/ambari-web/app/templates/common/configs/config_history_flow.hbs index fb08584..0dfbe2e 100644 --- a/ambari-web/app/templates/common/configs/config_history_flow.hbs +++ b/ambari-web/app/templates/common/configs/config_history_flow.hbs @@ -28,15 +28,17 @@ <div {{bindAttr class=":version-info :box :pull-right serviceVersion.isDisplayed:displayed serviceVersion.isDisabled:grayedOut"}} {{action switchVersion serviceVersion target="view"}}> <div class="top-label"> <span class="label label-info">{{serviceVersion.versionText}}</span> - {{#if serviceVersion.isCurrent}} - <span class="label label-success"> - {{t common.current}} - <i {{bindAttr class=":icon-refresh :restart-required-service serviceVersion.isRestartRequired::hidden"}}></i> - </span> - {{/if}} + <span class="author pull-right">{{serviceVersion.author}}</span> </div> - <div class="content">{{serviceVersion.author}}</div> - <div class="content">{{serviceVersion.timeSinceCreated}}</div> + <div class="content">{{serviceVersion.timeSinceCreated}}</div> + {{#if serviceVersion.isCurrent}} + <div class="current-label"> + <span class="label label-success"> + {{t common.current}} + <i {{bindAttr class=":icon-refresh :restart-required-service serviceVersion.isRestartRequired::hidden"}}></i> + </span> + </div> + {{/if}} </div> <div class="version-popover"> @@ -63,7 +65,7 @@ <div class="span1 remove-compare-bar" {{action removeCompareVersionBar target="view"}} data-toggle="arrow-tooltip" {{translateAttr data-original-title="services.service.config.configHistory.dismissIcon.tooltip"}}> <i class="icon-remove-circle icon-large"></i> </div> - <div class="label-wrapper span9" + <div class="label-wrapper span8" data-toggle="tooltip" {{bindAttr data-original-title="view.compareServiceVersion.briefNotes"}}> {{t services.service.config.configHistory.comparing}} <span class="label label-info">{{view.displayedServiceVersion.versionText}}</span> @@ -120,7 +122,7 @@ {{/unless}} </ul> </div> - <div class="label-wrapper span9" data-toggle="tooltip" {{bindAttr data-original-title="view.displayedServiceVersion.briefNotes"}}> + <div class="label-wrapper span8" data-toggle="tooltip" {{bindAttr data-original-title="view.displayedServiceVersion.briefNotes"}}> <span class="label label-info">{{view.displayedServiceVersion.versionText}}</span> {{#if view.displayedServiceVersion.isCurrent}} <span class="label label-success">{{t common.current}}</span>
