Merge pull request #497 from maciaszczykm/links-update

Add links to tour on zerostate and deploy views

src/app/frontend/deploy/deploy.html

@@ -28,6 +28,12 @@ limitations under the License.
             Upload a YAML or JSON file
           </md-radio-button>
         </md-radio-group>
+        <kd-user-help>
+          To learn more,
+          <a href="http://kubernetes.github.io/docs/user-guide/ui/" target="_blank">
+            take the Dashboard Tour <i class="material-icons">open_in_new</i>
+          </a>
+        </kd-user-help>
       </kd-help-section>
 
       <div ng-switch="ctrl.selection">

src/app/frontend/deploy/helpsection/userhelp.scss

@@ -15,11 +15,19 @@
 @import '../../variables';
 
 .kd-user-help {
+  font-size: $body-font-size-base;
+
   .kd-emphasized {
     color: $emphasis;
     word-wrap: break-word;
   }
 
+  .material-icons {
+    color: $primary;
+    font-size: $caption-font-size-base;
+    vertical-align: middle;
+  }
+
   * {
     color: $muted;
   }

src/app/frontend/replicationcontrollerlist/zerostate/zerostate.html

@@ -19,34 +19,29 @@ limitations under the License.
     <md-card flex="50" class="kd-zerostate-deploy-card">
       <md-toolbar layout="row" class="md-primary kd-zerostate-card-header"
                   layout-align="center center" flex="auto" >
-        <md-icon md-svg-icon="assets/images/kubernetes-logo.svg"
-                 class="kd-zerostate-card-logo"></md-icon>
-        <span class="md-padding" flex="auto" >The <b>Kubernetes Dashboard</b> lets you deploy, monitor
-          and troubleshoot containerized applications and services</span>
+        <md-icon md-svg-icon="assets/images/kubernetes-logo.svg" class="kd-zerostate-card-logo">
+        </md-icon>
+        <span class="md-padding" flex="auto" >
+          The <b>Kubernetes Dashboard</b> lets you deploy, monitor and troubleshoot containerized
+          applications and services
+        </span>
       </md-toolbar>
-      <md-card-content layout-align="center center">
-        <md-button ui-sref="deploy" class="md-raised md-primary kd-zerostate-deploy-bt">Deploy an
-          app
+      <md-card-content class="kd-zerostate-deploy-card-bottom" layout-align="center center">
+        <md-button ui-sref="deploy" class="md-raised md-primary kd-zerostate-deploy-bt">
+          Deploy an app
         </md-button>
-        <div></div>
-        <a class="md-raised md-primary kd-zerostate-deploy-bt" ng-if="ctrl.containsOnlyKubeSystemRCs"
+        <div class="kd-zerostate-lm">
+          To learn more,
+          <a href="http://kubernetes.github.io/docs/user-guide/ui/" target="_blank">
+            take the Dashboard Tour
+            <i class="material-icons kd-zerostate-ext-link-icon">open_in_new</i>
+          </a>
+        </div>
+        <a class="md-raised md-primary kd-zerostate-rcs" ng-if="ctrl.containsOnlyKubeSystemRCs"
            ui-sref="replicationcontrollers">
-          There are replication controllers in namespace "kube-system" - click to show.
+          There are replication controllers in kube-system namespace,<br>click to show them
         </a>
       </md-card-content>
     </md-card>
-    <md-card flex="15" class="kd-zerostate-lm-card">
-      <md-card-content>
-        <md-text-float class="kd-zerostate-lm-text"><b>Learn more</b></md-text-float>
-        <md-list class="kd-zerostate-lm-list">
-          <md-list-item class="kd-zerostate-lm-list-item"
-                        ng-repeat="option in ctrl.learnMoreLinks">
-            <a ui-sref="{{option.link}}">
-              {{option.title}} <i class="material-icons kd-zerostate-ext-link-icon">open_in_new</i>
-            </a>
-          </md-list-item>
-        </md-list>
-      </md-card-content>
-    </md-card>
   </md-content>
 </div>

src/app/frontend/replicationcontrollerlist/zerostate/zerostate.scss

@@ -31,39 +31,36 @@
 .kd-zerostate-card-logo {
   height: $logo-height;
   min-width: $logo-width;
-  padding: 0 0 0 15px;
+  padding-left: $baseline-grid * 2;
   width: $logo-width;
 }
 
 .kd-zerostate-deploy-card {
   color: $content-background;
-  min-width: 300px;
+  min-width: 500px;
 }
 
 .kd-zerostate-deploy-bt {
-  font-size: 12px;
+  font-size: $caption-font-size-base;
   min-width: 120px;
 }
 
-.kd-zerostate-lm-list {
-  margin-top: 10px;
-
-  > .kd-zerostate-lm-list-item {
-    color: $primary;
-    min-height: 30px;
-    padding: 0;
-  }
-}
-
 .kd-zerostate-ext-link-icon {
-  font-size: 1em;
+  font-size: $body-font-size-base;
+  vertical-align: middle;
 }
 
-.kd-zerostate-lm-card {
-  font-size: 15px;
-  min-width: 200px;
+.kd-zerostate-deploy-card-bottom {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
-.kd-zerostate-lm-text {
+.kd-zerostate-lm {
   color: $muted;
+  font-size: $subhead-font-size-base;
+}
+
+.kd-zerostate-rcs {
+  padding-top: $baseline-grid * 2;
 }

src/app/frontend/replicationcontrollerlist/zerostate/zerostate_controller.js

@@ -23,14 +23,6 @@ export default class ZeroStateController {
    * @ngInject
    */
   constructor($stateParams) {
-    /** @export {!Array<{title:string, link:string}>} */
-    this.learnMoreLinks = [
-      {title: 'Dashboard Tour', link: "#"},
-      {title: 'Deploying your App', link: "#"},
-      {title: 'Monitoring your App', link: "#"},
-      {title: 'Troubleshooting', link: "#"},
-    ];
-
     /** @export {boolean} */
     this.containsOnlyKubeSystemRCs = $stateParams.containsOnlyKubeSystemRCs;
   }

src/test/frontend/replicationcontrollerlist/zerostate/zerostate_controller_test.js

@@ -24,17 +24,10 @@ describe('Zerostate controller', () => {
 
   beforeEach(() => {
     angular.mock.module(replicationControllerListModule.name);
-
     angular.mock.inject(($controller) => { ctrl = $controller(ZerostateController, stateParams); });
   });
 
   it('should do something', () => {
-    expect(ctrl.learnMoreLinks).toEqual([
-      {title: 'Dashboard Tour', link: "#"},
-      {title: 'Deploying your App', link: "#"},
-      {title: 'Monitoring your App', link: "#"},
-      {title: 'Troubleshooting', link: "#"},
-    ]);
     expect(ctrl.containsOnlyKubeSystemRCs).toEqual(stateParams.containsOnlyKubeSystemRCs);
   });
 });