Merge pull request #217 from bryk/styling

Style replica set list page

src/app/frontend/_variables.scss

@@ -20,6 +20,8 @@
 }
 
 $subhead-font-size-base:   rem(1.6) !default;
+$body-font-size-base:      rem(1.4) !default;
+$caption-font-size-base:   rem(1.2) !default;
 
 $primary: #326de6;
 $delicate: #aaa;
@@ -30,6 +32,11 @@ $emphasis: #000;
 $content-background: #fff;
 
 // TODO(bryk): Get those variables from Angular Material scss files.
+$foreground-1: rgba(0, 0, 0, .87);
+$foreground-2: rgba(0, 0, 0, .54);
+
+$title-font-weight: 400;
+
 $layout-breakpoint-lg: 1280px;
 $whiteframe-shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
 $baseline-grid: 8px;

src/app/frontend/common/filters/filters_module.js

+// 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 middleEllipsisFilter from './middleellipsis_filter';
+
+/**
+ * Module containing common filters for the application.
+ */
+export default angular.module(
+                          'kubernetesDashboard.common.flters',
+                          [
+                            'ngMaterial',
+                          ])
+    .filter('middleEllipsis', middleEllipsisFilter);

src/app/frontend/replicasetlist/logsmenu.html

@@ -15,34 +15,33 @@ limitations under the License.
 -->
 
 <md-menu>
-  <md-button ng-click="ctrl.openMenu($mdOpenMenu, $event)" class="kd-replicaset-card-logs">Logs</md-button>
-  <md-menu-content width="6">
+  <md-button ng-click="ctrl.openMenu($mdOpenMenu, $event)" class="kd-replicaset-card-logs-button">Logs</md-button>
+  <md-menu-content>
     <md-menu-item class="kd-menu-logs-md-menu-item">
-      <div flex="33">Logs</div>
+      <div>Logs</div>
     </md-menu-item>
     <md-menu-item class="kd-menu-logs-md-menu-item">
-      <div flex class="kd-menu-logs-item-header">Pod</div>
-      <div flex="50" class="kd-menu-logs-item-header">Running since</div>
-      <div flex class="kd-menu-logs-item-header">Prior restart</div>
+      <div class="kd-menu-logs-item-header kd-menu-logs-item-pods">Pod</div>
+      <div class="kd-menu-logs-item-header kd-menu-logs-item-since">Running since</div>
+      <div class="kd-menu-logs-item-header kd-menu-logs-item-prior">Prior restart</div>
     </md-menu-item>
-    <md-menu-item ng-repeat="pod in ctrl.replicaSetPodsList" class="kd-menu-logs-md-menu-item">
-      <div flex class="kd-menu-logs-item">{{pod.name | middleEllipsis:10}}</div>
-      <div flex="50" class="kd-menu-logs-item" ng-if="ctrl.podContainerExists(pod)">
-        <a ng-href="{{::ctrl.getLogsHref(pod.name, pod.podContainers[0].name)}}">
-          {{pod.startTime}}<i
+    <md-menu-item ng-repeat="pod in ::ctrl.replicaSetPodsList" class="kd-menu-logs-md-menu-item">
+      <div class="kd-menu-logs-item kd-menu-logs-item-pods">
+        {{::(pod.name | middleEllipsis:10)}}
+      </div>
+      <div class="kd-menu-logs-item kd-menu-logs-item-since">
+        <a ng-href="{{::ctrl.getLogsHref(pod.name, pod.podContainers[0].name)}}"
+             ng-if="::ctrl.podContainerExists(pod)">
+          {{pod.startTime | date:"short"}}<i
           class="material-icons kd-menu-logs-link-icon">open_in_new</i>
         </a>
+        <span ng-if="::!ctrl.podContainerExists(pod)">-</span>
       </div>
-      <div flex="50" class="kd-menu-logs-item" ng-if="!ctrl.podContainerExists(pod)">
-        -
-      </div>
-      <div flex class="kd-menu-logs-item" ng-if="ctrl.podContainersRestarted(pod)">
-        <a>
+      <div class="kd-menu-logs-item kd-menu-logs-item-prior">
+        <a ng-if="::ctrl.podContainersRestarted(pod)">
           Logs<i class="material-icons kd-menu-logs-link-icon">open_in_new</i>
         </a>
-      </div>
-      <div flex class="kd-menu-logs-item" ng-if="!ctrl.podContainersRestarted(pod)">
-        -
+        <span ng-if="::!ctrl.podContainersRestarted(pod)">-</span>
       </div>
     </md-menu-item>
   </md-menu-content>

src/app/frontend/replicasetlist/replicasetcard.html

@@ -16,24 +16,28 @@ limitations under the License.
 
 <md-card class="kd-replicaset-card">
   <md-card-content>
-    <div layout="row" layout-align="space-between center">
-      <div flex layout="column">
-        <a ng-href="{{::ctrl.getReplicaSetDetailHref()}}" flex>
-          {{::ctrl.replicaSet.name}}
-        </a>
-        <div flex class="md-caption">
-          <span ng-repeat="(label, value) in ::ctrl.replicaSet.labels"
-              class="kd-replicaset-card-label">
-            {{::label}}:{{::value}}
-          </span>
-        </div>
+    <div layout="column">
+      <div flex layout="row" layout-align="space-between center"
+          class="kd-replicaset-card-title-row">
+        <h3 class="md-title kd-replicaset-card-title">
+          <a ng-href="{{::ctrl.getReplicaSetDetailHref()}}" class="kd-replicaset-card-name" flex>
+            {{::ctrl.replicaSet.name}}
+          </a>
+        </h3>
+  
+        <md-button class="md-icon-button kd-replicaset-card-menu-button">
+          <md-icon md-font-library="material-icons">more_vert</md-icon>
+        </md-button>
+      </div>
+      <div flex class="md-caption">
+        <span ng-repeat="(label, value) in ::ctrl.replicaSet.labels"
+            class="kd-replicaset-card-label">
+          {{::label}}:{{::value}}
+        </span>
       </div>
-      <md-button class="md-icon-button">
-        <md-icon md-font-library="material-icons">more_vert</md-icon>
-      </md-button>
     </div>
     <div class="md-caption">
-      <div layout="row">
+      <div layout="row" layout-align="center end">
         <span flex="60">
           {{::ctrl.replicaSet.podsRunning}} pods running, {{::ctrl.replicaSet.podsPending}} pending
         </span>
@@ -41,33 +45,34 @@ limitations under the License.
                    replica-set-name="::ctrl.replicaSet.name">
         </logs-menu>
       </div>
-      <hr class="kd-replicaset-card-divider"></hr>
+      <md-divider class="kd-replicaset-card-divider"></md-divider>
       <div layout="row" layout-wrap>
         <div ng-if="::ctrl.replicaSet.description" flex="100" layout="column"
             class="kd-replicaset-card-section">
-          <span flex>Description</span>
+          <span flex class="kd-replicaset-card-section-title">Description</span>
           <div flex>
             {{::ctrl.replicaSet.description}}
           </div>
         </div>
 
         <div flex="60" layout="column" class="kd-replicaset-card-section">
-          <span flex>Image</span>
+          <span flex class="kd-replicaset-card-section-title">Image</span>
           <div flex>
             <div ng-repeat="image in ::ctrl.replicaSet.containerImages track by $index"
                 class="kd-replicaset-card-section-image">
-              {{::image}}
+              <md-tooltip>{{::image}}</md-tooltip>
+              {{::(image | middleEllipsis:32)}}
             </div>
           </div>
         </div>
 
         <div flex="40" layout="column" class="kd-replicaset-card-section">
-          <span flex="initial">Creation time</span>
-          <span flex>{{::ctrl.replicaSet.creationTime}}</span>
+          <span flex="initial" class="kd-replicaset-card-section-title">Creation time</span>
+          <span flex>{{::(ctrl.replicaSet.creationTime | date:'short')}}</span>
         </div>
 
         <div flex="60" layout="column" class="kd-replicaset-card-section">
-          <span flex="initial">Internal Endpoint</span>
+          <span flex="initial" class="kd-replicaset-card-section-title">Internal Endpoint</span>
           <div flex>
             <div ng-repeat="endpoint in ::ctrl.replicaSet.internalEndpoints track by $index">
               <kd-service-endpoint endpoint="::endpoint"></kd-service-endpoint>
@@ -79,7 +84,7 @@ limitations under the License.
         </div>
 
         <div flex="40" layout="column" class="kd-replicaset-card-section">
-          <span flex="initial">External Endpoint</span>
+          <span flex="initial" class="kd-replicaset-card-section-title">External Endpoint</span>
           <div flex>
             <div ng-repeat="endpoint in ::ctrl.replicaSet.externalEndpoints track by $index">
               <kd-service-endpoint endpoint="::endpoint"></kd-service-endpoint>

src/app/frontend/replicasetlist/replicasetcard.scss

@@ -19,37 +19,53 @@
   width: ($layout-breakpoint-lg - (2 * $baseline-grid) * 2) / 3;  
 }
 
-// This override button style to make it look like a link.
-.kd-replicaset-card-logs {
-  border-radius: inherit;
+.kd-replicaset-card-name {
   color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: 0;
-  margin: inherit;
-  min-height: inherit;
-  min-width: inherit;
-  padding: inherit;
+  display: inline-block;
+  font-weight: $title-font-weight;
   text-decoration: none;
-  text-transform: inherit;
+}
 
-  &:after {
-    content: '\25BC';
-  }
+.kd-replicaset-card-title {
+  margin: 0;
+}
+
+.kd-replicaset-card-title-row {
+  margin-top: -$baseline-grid - 2px;
 }
 
 .kd-replicaset-card-divider {
-  border: 0;
-  border-top: 1px solid;
+  margin-top: $baseline-grid;
+}
+
+// This override button style to make it look like a link.
+.md-button {
+  &.kd-replicaset-card-logs-button {
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: 0;
+    margin: 0;
+    min-height: inherit;
+    min-width: inherit;
+    padding: $baseline-grid 0;
+    text-decoration: none;
+    text-transform: inherit;
+
+    &:after {
+      content: ' \25BE';
+    }
+  }
 }
 
 .kd-replicaset-card-section {
   margin-top: 2 * $baseline-grid;
 }
 
+.kd-replicaset-card-section-title {
+  color: $foreground-2;
+}
+
 .kd-replicaset-card-section-image {
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -57,24 +73,32 @@
   margin-right: 2 * $baseline-grid;
 }
 
-.kd-menu-logs-md-menu-item {
-  height: 30px;
-  min-height: 30px;
-}
-
 .kd-menu-logs-item-header {
-  color: $muted;
-  font-size: .8em;
+  box-sizing: inherit;
+  color: $foreground-2;
+  font-size: $body-font-size-base;
   white-space: nowrap;
 }
 
 .kd-menu-logs-item {
-  font-size: .8em;
-  overflow: hidden;
+  box-sizing: inherit;
+  font-size: $body-font-size-base;
   white-space: nowrap;
 }
 
+.kd-menu-logs-item-pods {
+  width: 10 * $baseline-grid;
+}
+
+.kd-menu-logs-item-prior {
+  width: 10 * $baseline-grid;
+}
+
+.kd-menu-logs-item-since {
+  width: 15 * $baseline-grid;
+}
+
 .kd-menu-logs-link-icon {
-  font-size: 1em;
+  font-size: $subhead-font-size-base;
   margin-left: $baseline-grid;
 }

src/app/frontend/replicasetlist/replicasetlist_module.js

@@ -14,7 +14,7 @@
 
 import stateConfig from './replicasetlist_stateconfig';
 import logsMenuDirective from './logsmenu_directive';
-import middleEllipsisFilter from 'common/filters/middleellipsis_filter';
+import filtersModule from 'common/filters/filters_module';
 import replicaSetCardDirective from './replicasetcard_directive';
 import replicaSetDetailModule from 'replicasetdetail/replicasetdetail_module';
 import replicaSetListContainer from './replicasetlistcontainer_directive';
@@ -31,9 +31,9 @@ export default angular.module(
                             'ngResource',
                             'ui.router',
                             replicaSetDetailModule.name,
+                            filtersModule.name,
                           ])
     .config(stateConfig)
-    .filter('middleEllipsis', middleEllipsisFilter)
     .directive('logsMenu', logsMenuDirective)
     .directive('kdReplicaSetListContainer', replicaSetListContainer)
     .directive('kdReplicaSetCard', replicaSetCardDirective);