Merge pull request #37 from kubernetes/kubernetes-like-chrome

Kubernetes themed chrome with simple navigation

Author: mgr01

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-material.js'),
           path.join(conf.paths.nodeModules,
               'google-closure-compiler/contrib/externs/angular_ui_router.js'),
           path.join(conf.paths.externs, '**/*.js'),

src/app/assets/images/kubernetes-logo.svg

@@ -1,20 +1,17 @@
-<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>
+<md-content>
+  <md-toolbar>
+    <div class="md-toolbar-tools">
+      <md-button ui-sref="main" aria-label="Kubernetes Dashboard homepage" class="md-icon-button">
+        <md-icon md-svg-icon="assets/images/kubernetes-logo.svg" class="kd-toolbar-logo"></md-icon>
+      </md-button>
+      <h2>
+        <span>kubernetes</span>
+      </h2>
+      <span flex></span>
+      <md-button class="md-icon-button">
+        <md-icon md-font-library="material-icons">more_vert</md-icon>
+      </md-button>
+    </div>
+  </md-toolbar>
+  <div ng-transclude></div>
+</md-content>

src/app/assets/images/yeoman.png

@@ -0,0 +1,18 @@
+// 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.
+
+.kd-toolbar-logo {
+  height: 42px;
+  width: 42px;
+}

src/app/frontend/chrome/chrome.html

@@ -14,7 +14,17 @@
 
 
 /**
+ * @param {!md.$mdThemingProvider} $mdThemingProvider
  * @ngInject
  */
-export function config() {
+export default function config($mdThemingProvider) {
+  // Create a color palette that uses Kubernetes colors.
+  let kubernetesColorPaletteName = 'kubernetesColorPalette';
+  let kubernetesColorPalette = $mdThemingProvider.extendPalette('blue', {
+    '500': '326de6',
+  });
+
+  // Use the palette as default one.
+  $mdThemingProvider.definePalette(kubernetesColorPaletteName, kubernetesColorPalette);
+  $mdThemingProvider.theme('default').primaryPalette(kubernetesColorPaletteName);
 }

src/app/frontend/chrome/chrome.scss

@@ -18,8 +18,10 @@
  */
 import chromeModule from './chrome/chrome.module';
 import mainModule from './main/main.module';
+import indexConfig from './index.config';
 import routeConfig from './index.route';
 
+
 export default angular.module(
     'kubernetesDashboard',
     [
@@ -33,4 +35,5 @@ export default angular.module(
       chromeModule.name,
       mainModule.name,
     ])
+    .config(indexConfig)
     .config(routeConfig);

src/app/frontend/index.config.js

@@ -21,5 +21,5 @@
  */
 export default function routeConfig($urlRouterProvider) {
   // When no state is matched by an URL, redirect to default one.
-  $urlRouterProvider.otherwise('');
+  $urlRouterProvider.otherwise('/');
 }

src/app/frontend/index.module.js

@@ -1,12 +1,5 @@
 <div layout="vertical" layout-fill>
   <header>
-    Hello world! {{ctrl.testValue}}
+    Page content goes here.
   </header>
-
-  <section class="jumbotron">
-    <h1>'Allo, 'Allo!</h1>
-    <p class="lead">
-      <img src="assets/images/yeoman.png" alt="I'm Yeoman"><br>
-    </p>
-  </section>
 </div>

src/app/frontend/index.route.js

@@ -21,7 +21,7 @@ import MainController from './main.controller';
  */
 export default function stateConfig($stateProvider) {
   $stateProvider.state('main', {
-    url: '',
+    url: '/',
     templateUrl: 'main/main.html',
     controller: MainController,
     controllerAs: 'ctrl',