AMBARI-13536. Timezone: UX (onechiporenko)

ambari-web/app/styles/application.less

@@ -2208,6 +2208,11 @@ a:focus {
 }
 
 /*start chart/style graphs*/
+.chart-wrapper {
+  .timezone {
+    font-size: @smaller-font-size;
+  }
+}
 .chart-container {
   cursor: pointer;
   cursor: -moz-zoom-in;

ambari-web/app/styles/common.less

@@ -160,6 +160,7 @@
 @top-nav-menu-dropdown-bg-color: #ffffff;
 @top-nav-menu-dropdown-text-color: #333333;
 @default-font-size: 14px;
+@smaller-font-size: 12px;
 
 .editable-list-container.well{
   padding: 10px;

ambari-web/app/templates/common/chart/linear_time.hbs

@@ -15,28 +15,30 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-
-<div {{bindAttr class="view.isReady:hide:show :screensaver :no-borders :chart-container"}}></div>
-<div {{bindAttr class="view.isReady::hidden :time-label"}}>
-  {{view.parentView.currentTimeState.name}}
-  <a {{bindAttr class="view.isExportButtonHidden:hidden :corner-icon :pull-right"}} href="#" {{action toggleFormatsList target="view"}}>
-   {{t common.export}} <i class="icon-save"></i>
-  </a>
-  {{view view.exportMetricsMenuView}}
-</div>
-{{#if view.isTimePagingEnable}}
-  <div {{bindAttr class="view.leftArrowVisible:visibleArrow :arrow-left"}} {{action "switchTimeBack" target="view.parentView"}}></div>
-{{/if}}
-<div {{bindAttr id="view.containerId"}} {{bindAttr class="view.isReady:show:hide view.containerClass :chart-container"}}>
-  <div {{bindAttr id="view.yAxisId"}} {{bindAttr class="view.yAxisClass :chart-y-axis"}}></div>
-  <div {{bindAttr id="view.xAxisId"}} {{bindAttr class="view.xAxisClass :chart-x-axis"}}></div>
-  <div {{bindAttr id="view.legendId"}} {{bindAttr class="view.legendClass :chart-legend"}}></div>
-  <div {{bindAttr id="view.chartId"}} {{bindAttr class="view.chartClass :chart"}}></div>
-  <div {{bindAttr id="view.titleId"}} {{bindAttr class="view.titleClass view.isExportButtonHidden::has-data :chart-title"}}>{{view.title}}</div>
-</div>
-{{#if view.isTimePagingEnable}}
-  <div {{bindAttr class="view.rightArrowVisible:visibleArrow :arrow-right"}} {{action "switchTimeForward" "forward" target="view.parentView"}}></div>
-{{/if}}
-<div class="timezone mtl15 mll">
-  {{t common.timezone}}: <strong>{{App.router.userSettingsController.userSettings.timezone.label}}</strong>
+<div class="chart-wrapper">
+  <div {{bindAttr class="view.isReady:hide:show :screensaver :no-borders :chart-container"}}></div>
+  <div {{bindAttr class="view.isReady::hidden :time-label"}}>
+    {{view.parentView.currentTimeState.name}}
+    <a {{bindAttr class="view.isExportButtonHidden:hidden :corner-icon :pull-right"}}
+        href="#" {{action toggleFormatsList target="view"}}>
+      {{t common.export}} <i class="icon-save"></i>
+    </a>
+    {{view view.exportMetricsMenuView}}
+  </div>
+  {{#if view.isTimePagingEnable}}
+    <div {{bindAttr class="view.leftArrowVisible:visibleArrow :arrow-left"}} {{action "switchTimeBack" target="view.parentView"}}></div>
+  {{/if}}
+  <div {{bindAttr id="view.containerId"}} {{bindAttr class="view.isReady:show:hide view.containerClass :chart-container"}}>
+    <div {{bindAttr id="view.yAxisId"}} {{bindAttr class="view.yAxisClass :chart-y-axis"}}></div>
+    <div {{bindAttr id="view.xAxisId"}} {{bindAttr class="view.xAxisClass :chart-x-axis"}}></div>
+    <div {{bindAttr id="view.legendId"}} {{bindAttr class="view.legendClass :chart-legend"}}></div>
+    <div {{bindAttr id="view.chartId"}} {{bindAttr class="view.chartClass :chart"}}></div>
+    <div {{bindAttr id="view.titleId"}} {{bindAttr class="view.titleClass view.isExportButtonHidden::has-data :chart-title"}}>{{view.title}}</div>
+  </div>
+  {{#if view.isTimePagingEnable}}
+    <div {{bindAttr class="view.rightArrowVisible:visibleArrow :arrow-right"}} {{action "switchTimeForward" "forward" target="view.parentView"}}></div>
+  {{/if}}
+  <div class="timezone mtl15 mll">
+    <strong>{{t common.timezone}}</strong>: {{App.router.userSettingsController.userSettings.timezone.label}}
+  </div>
 </div>