Implement simple chrome operating on ui.router

This change implements initial version of the chrome. It uses ui.router
for routing and state management. The reason to use this router is the
fact that it is more flexible than stock one. It also resembles Angular2
router, so hypothetical migration should be easier.

Author: bryk

bower.json

@@ -10,8 +10,8 @@
     "angular-aria": "~1.4.2",
     "angular-material": "~0.10.1",
     "angular-messages": "~1.4.2",
+    "angular-ui-router": "~0.2.15",
     "angular-resource": "~1.4.2",
-    "angular-route": "~1.4.2",
     "angular-sanitize": "~1.4.2"
   },
   "devDependencies": {

build/script.js

@@ -93,6 +93,8 @@ gulp.task('scripts', ['create-serve-folders'], function() {
               'google-closure-compiler/contrib/externs/angular-1.4-http-promise_templated.js'),
           path.join(conf.paths.nodeModules,
               'google-closure-compiler/contrib/externs/angular-1.4-q_templated.js'),
+          path.join(conf.paths.nodeModules,
+              'google-closure-compiler/contrib/externs/angular_ui_router.js'),
           path.join(conf.paths.externs, '**/*.js'),
         ],
         // Enable all compiler checks by default and make them errors.

src/app/frontend/chrome/chrome.controller.js

@@ -0,0 +1,27 @@
+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * Controller for the chrome directive.
+ *
+ * @final
+ */
+export default class ChromeController {
+  constructor() {
+    // TODO(bryk): This is for tests only, change to something meaningful later.
+    /** @export {string} */
+    this.clusterName = 'ClusterName';
+  }
+}

src/app/frontend/chrome/chrome.directive.js

@@ -0,0 +1,31 @@
+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import ChromeController from './chrome.controller';
+
+
+/**
+ * Returns directive definition object for the chrome directive.
+ *
+ * @return {!angular.Directive}
+ */
+export default function chromeDirective() {
+  return {
+    bindToController: true,
+    controller: ChromeController,
+    controllerAs: 'ctrl',
+    templateUrl: 'chrome/chrome.html',
+    transclude: true,
+  };
+}

src/app/frontend/chrome/chrome.html

@@ -0,0 +1,20 @@
+<div>
+  <md-content>
+    <md-toolbar>
+      <div class="md-toolbar-tools">
+        <md-button class="md-icon-button" aria-label="Settings">
+          <md-icon md-font-library="material-icons">menu</md-icon>
+        </md-button>
+        <h2>
+          <span>Kubernetes cluster: {{ctrl.clusterName}}</span>
+        </h2>
+        <span flex></span>
+        <md-button class="md-icon-button" aria-label="Favorite">
+          <md-icon md-font-library="material-icons">more_vert</md-icon>
+        </md-button>
+      </div>
+    </md-toolbar>
+
+    <div ng-transclude></div>
+  </md-content>
+</div>

src/app/frontend/main/main.scss renamed to src/app/frontend/chrome/chrome.module.js

@@ -1,4 +1,4 @@
-// Copyright 2015 Google Inc.
+// Copyright 2015 Google Inc. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -12,8 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import chromeDirective from './chrome.directive';
 
-body {
-  background-color: gray;
-}
 
+/**
+ * Angular module containing navigation chrome for the application.
+ */
+export default angular.module(
+    'kubernetesConsole.chrome',
+    [
+      'ngMaterial',
+    ])
+    .directive('chrome', chromeDirective);

src/app/frontend/index.html

@@ -26,8 +26,9 @@
       experience.</p>
     <![endif]-->
 
-    <div ng-view> <!-- Application content is inserted here. --> </div>
-
+    <chrome>
+      <div ui-view> <!-- Application content is inserted here. --> </div>
+    </chrome>
     <!-- build:js console/vendor.js -->
     <!-- bower:js -->
     <!-- Bower JS dependencies are populated here (dev build) and compiled

src/app/frontend/index.module.js

@@ -16,8 +16,9 @@
  * @fileoverview Entry point module to the application. Loads and configures other modules needed
  * to bootstrap the application.
  */
-import routeConfig from './index.route';
+import chromeModule from './chrome/chrome.module';
 import mainModule from './main/main.module';
+import routeConfig from './index.route';
 
 export default angular.module(
     'kubernetesConsole',
@@ -27,8 +28,9 @@ export default angular.module(
       'ngMaterial',
       'ngMessages',
       'ngResource',
-      'ngRoute',
       'ngSanitize',
+      'ui.router',
+      chromeModule.name,
       mainModule.name,
     ])
     .config(routeConfig);

src/app/frontend/index.route.js

@@ -14,9 +14,12 @@
 
 
 /**
- * @param {!angular.$routeProvider} $routeProvider
+ * Global route configuration for the application.
+ *
+ * @param {!ui.router.$urlRouterProvider} $urlRouterProvider
  * @ngInject
  */
-export default function routeConfig($routeProvider) {
-  // TODO(bryk): Configure 'otherwise' route here.
+export default function routeConfig($urlRouterProvider) {
+  // When no state is matched by an URL, redirect to default one.
+  $urlRouterProvider.otherwise('');
 }

src/app/frontend/index.scss

@@ -12,8 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+// Robo Slab font.
+@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic);
 
-body {
- border: 1px solid red;
-}
+// Angular Material icon font. It allows to use the icons as fonts.
+@import url(//fonts.googleapis.com/icon?family=Material+Icons);
 
+html {
+  font-family: 'Roboto Slab', serif;
+}