Merge pull request #254 from GoogleCloudPlatform/update_material

Update Angular Material to v1.0.5

bower.json

@@ -5,10 +5,10 @@
   "author": "Joe Allan Muharsky <[email protected]>",
   "dependencies": {},
   "devDependencies": {
-    "angular": "~1.4.8",
+    "angular": "~1.4.9",
     "angular-bootstrap": "~0.14.3",
-    "angular-material": "~0.10.1",
-    "angular-mocks": "~1.4.8",
+    "angular-material": "~1.0.5",
+    "angular-mocks": "~1.4.9",
     "angular-ui-router": "~0.2.15",
     "angular-ui-grid": "~3.0.7",
     "bootstrap-css-only": "~3.3.5",

client/components/dashboard/dashboard-config-directive.css

@@ -114,7 +114,7 @@
 }
 
 .checkbox-row-checkbox {
-  padding-top: 4px;
+  padding-top: 7px;
   padding-right: 2px;
 }
 

client/components/dashboard/dashboard-directive.html

@@ -3,8 +3,8 @@
   <div class="spinner" ng-show="explorerSvc.model.dashboardIsLoading"></div>
 
   <div ng-repeat="container in dashboardSvc.containers"
-       class="pk-container pk-container-{{ container.model.id }} pk-background"
-       ng-class="getSelectedClass(container)">
+       class="pk-container pk-background"
+       ng-class="['pk-container-' + container.model.id, getSelectedClass(container)]">
 
     <container class="pk-container-content" layout="column"
                ng-model="container.model"
@@ -20,7 +20,7 @@
                 ng-repeat="widget in container.model.container.children"
                 widget-config="widget"
                 flex="{{ getWidgetFlexWidth(widget, container) }}"
-                layout="columns">
+                layout="column">
           <div class="pk-widget-toolbar">
             <span class="glyphicon glyphicon-remove pk-widget-button"
                   ng-hide="explorerSvc.model.readOnly"
@@ -46,14 +46,14 @@
               ng-style="{'height': container.model.container.widget_header_height + 'px'}"
               markdown-to-html="(widget.model.header_text || '') | stripHtml">
           </div>
-          <div class="pk-widget-content"
+          <div class="pk-widget-content" flex layout="column"
                ng-style="{height: isWidgetScrollable(widget, container) ? container.model.container.height + 'px' : 'auto',
                           'min-height': container.model.container.height + 'px',
                           'overflow-y': isWidgetScrollable(widget, container) ? 'auto' : 'visible'}"
                ng-click="clickWidget($event, widget, container)">
-            <gviz-chart-widget widget-config="widget"
+            <gviz-chart-widget widget-config="widget" flex
                  ng-if="widget.model.type == widgetFactorySvc.widgetTypes.CHART"></gviz-chart-widget>
-            <div class="pk-widget-section-text"
+            <div class="pk-widget-section-text" flex
                  ng-if="widget.model.type == widgetFactorySvc.widgetTypes.TEXT"
                  ng-show="widget.model.datasource.text"
                  markdown-to-html="widget.model.datasource.text | stripHtml">

client/components/widget/data_viz/gviz/gviz-directive.html

@@ -1,5 +1,5 @@
-<div>
-  <div class="pk-conditional" ng-class="getWidgetStatusClass()">
+<div layout="column" flex>
+  <div class="pk-conditional" ng-class="getWidgetStatusClass()" layout="column" flex>
     <div class="pk-if pk-cond-nodata pk-chart-nodata">
       No data available.
     </div>
@@ -11,7 +11,7 @@
     <div class="pk-if pk-cond-fetching pk-chart-loading md-primary md-hue-3">
       <md-progress-circular md-mode="indeterminate"></md-progress-circular>
     </div>
-    <div class="pk-if pk-cond-fetched pk-chart">
+    <div flex class="pk-if pk-cond-fetched pk-chart">
     </div>
     <div class="pk-if pk-cond-error pk-chart-error">
       {{ widgetConfig.state().chart.error }}

client/components/widget/data_viz/gviz/gviz-directive.js

@@ -188,6 +188,9 @@ explorer.components.widget.data_viz.gviz.gvizChart = function(
 
           chartWrapper.setDataTable(data);
 
+          adjustHeight();
+          adjustWidth();
+
           // Force height and width options value with state value
           options.height = scope.widgetConfig.state().chart.height;
           options.width = scope.widgetConfig.state().chart.width;
@@ -227,12 +230,8 @@ explorer.components.widget.data_viz.gviz.gvizChart = function(
 
       let adjustWidth = function() {
         if (scope.widgetConfig.model.chart) {
-          if (isWidthEnforced()) {
-            scope.widgetConfig.state().chart.width =
-                element.parent().prop('offsetWidth') - 1;
-          } else {
-            scope.widgetConfig.state().chart.width = null;
-          }
+          scope.widgetConfig.state().chart.width =
+              element.parent().prop('offsetWidth') - 1;
         }
       };
       adjustWidth();

client/components/widget/widget-directive.css

@@ -70,6 +70,7 @@
 .pk-widget-content {
   background: #ffffff;
   overflow-y: auto;
+  overflow-x: auto;
 }
 
 .pk-container {

client/components/widget/widget-directive.html

@@ -1,6 +1,5 @@
-<div flex
+<div flex layout="column"
      ng-class="{'pk-widget-selected': widgetConfig.state().selected}">
-  <div class="pk-widget-body {{ widgetConfig.model.layout.cssClasses }}"
-       ng-transclude>
+  <div class="pk-widget-body" layout="column" flex ng-transclude>
   </div>
 </div>