Style and productionize replica set details page

* make fonts larger (md-body instead of md-caption)
* use only color and sizes from variables.scss
* use less different colors
* simplify CSS rules

Please check out this change and compare to previous version.

src/app/backend/events.go

@@ -80,6 +80,7 @@ func GetEvents(client *client.Client, namespace, replicaSetName string) (*Events
 
 	events := AppendEvents(rsEvents, Events{
 		Namespace: namespace,
+		Events:    make([]Event, 0),
 	})
 
 	// Get events for pods in replica set.

src/app/frontend/_variables.scss

@@ -37,8 +37,11 @@ $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);
+$foreground-3: rgba(0, 0, 0, .26);
+$foreground-4: rgba(0, 0, 0, .12);
 
 $regular-font-weight: 400;
+$bold-font-weight: 500;
 
 $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);

src/app/frontend/common/components/labels/labels.scss

@@ -14,18 +14,16 @@
 
 @import '../../../variables';
 
-$label-height: $caption-font-size-base + 6;
 $label-margin: 0 $baseline-grid ($baseline-grid / 2) 0;
 
 // Style taken(mostly) from angular material md-chip style.
 .kd-labels {
   background-color: $body;
-  border-radius: $label-height / 2;
+  border-radius: $baseline-grid;
   display: inline-block;
-  font-size: $caption-font-size-base;
-  line-height: $label-height;
+  font-size: inherit;
   margin: $label-margin;
-  padding: 0 $baseline-grid;
+  padding: ($baseline-grid / 4) $baseline-grid;
   vertical-align: middle;
 }
 

src/app/frontend/replicasetdetail/replicasetdetail.html

@@ -15,83 +15,82 @@ limitations under the License.
 -->
 
 <md-content layout="row" layout-fill flex>
-  <div class="kd-replicasetdetail-sidebar" layout="column">
-    <div class="kd-replicasetdetail-sidebar-header" flex layout-align="start center" layout="row">
-      <a flex-offset="10" ui-sref="replicasets">
-        <i class="material-icons kd-replicasetdetail-sidebar-header-icon">keyboard_backspace</i>
-      </a>
-      <span flex-offset="5" flex class="md-title kd-replicasetdetail-app-name">
-        {{ctrl.replicaSetDetail.name}}
-      </span>
+  <div class="kd-replicasetdetail-sidebar" layout="column" flex="noshrink">
+    <div class="kd-replicasetdetail-sidebar-header-wrapper kd-replicasetdetail-sidebar-item"
+        flex="nogrow">
+      <div class="kd-replicasetdetail-sidebar-header" layout-align="start center" layout="row">
+        <md-button class="md-icon-button" ui-sref="replicasets">
+          <md-icon md-font-library="material-icons">arrow_back</md-icon>
+        </md-button>
+        <h1 flex class="md-title kd-replicasetdetail-app-name">
+          {{ctrl.replicaSetDetail.name}}
+        </h1>
+      </div>
     </div>
-    <div flex-offset="5" flex layout-align="start start" layout-padding layout="row">
-      <div flex layout="column">
-        <div layout="row" flex>
-          <md-button class="md-primary kd-replicasetdetail-sidebar-button">
-            <md-icon class="material-icons">refresh</md-icon>
-            ROLLING UPDATE
-          </md-button>
-          <md-button class="md-primary kd-replicasetdetail-sidebar-button"
-                     ng-click="ctrl.handleDeleteReplicaSetDialog()">
-            <md-icon class="material-icons">delete</md-icon>
-            DELETE
-          </md-button>
-        </div>
-        <div flex layout="column" class="kd-replicasetdetail-sidebar-info">
-          <span>
+    <div flex layout="column" class="kd-replicasetdetail-sidebar-item">
+      <div layout="row" flex="nogrow" class="kd-replicasetdetail-sidebar-actions">
+        <md-button class="md-primary" ng-click="ctrl.handleDeleteReplicaSetDialog()">
+          <md-icon class="material-icons">delete</md-icon>
+          DELETE
+        </md-button>
+      </div>
+      <div flex layout="column" class="kd-replicasetdetail-sidebar-info">
+        <div>
+          <span class="kd-replicasetdetail-sidebar-title">
             {{ctrl.replicaSetDetail.podsDesired}} pods
-            <md-button class="kd-replicasetdetail-sidebar-editpods-button">
-              <md-icon class="material-icons md-primary" ng-click="ctrl.handleUpdateReplicasDialog()">
-                mode_edit
-              </md-icon>
-            </md-button>
           </span>
+          <md-button class="md-icon-button md-primary">
+            <md-icon class="material-icons"
+                ng-click="ctrl.handleUpdateReplicasDialog()">
+              mode_edit
+            </md-icon>
+          </md-button>
+        </div>
+        <span class="kd-replicasetdetail-sidebar-line">Label selector</span>
+        <span class="kd-replicasetdetail-sidebar-subline">
+          <kd-labels labels="::ctrl.replicaSetDetail.labelSelector"></kd-labels>
+        </span>
+        <span class="kd-replicasetdetail-sidebar-title">Replica Set</span>
+        <span class="kd-replicasetdetail-sidebar-line">Labels</span>
+        <span class="kd-replicasetdetail-sidebar-subline">
+          <kd-labels labels="::ctrl.replicaSetDetail.labels"></kd-labels>
+        </span>
+        <span class="kd-replicasetdetail-sidebar-line">Images</span>
+        <span class="kd-replicasetdetail-sidebar-subline"
+              ng-repeat="image in ctrl.replicaSetDetail.containerImages">
+          {{image}}
+        </span>
+        <div ng-if="::ctrl.replicaSetDetail.services" layout="column">
+          <span class="kd-replicasetdetail-sidebar-title">Services</span>
           <span class="kd-replicasetdetail-sidebar-line">Label selector</span>
-          <span class="kd-replicasetdetail-sidebar-subline">
-            <kd-labels labels="::ctrl.replicaSetDetail.labelSelector"></kd-labels>
-          </span>
-          <span class="kd-replicasetdetail-sidebar-title">Replica Sets</span>
-          <span class="kd-replicasetdetail-sidebar-line">Labels</span>
-          <span class="kd-replicasetdetail-sidebar-subline">
-            <kd-labels labels="::ctrl.replicaSetDetail.labels"></kd-labels>
-          </span>
-          <span class="kd-replicasetdetail-sidebar-line">Images</span>
           <span class="kd-replicasetdetail-sidebar-subline"
-                ng-repeat="image in ctrl.replicaSetDetail.containerImages">
-            {{image}}
+                ng-repeat="service in ::ctrl.replicaSetDetail.services">
+            <kd-labels labels="::service.selector"></kd-labels>
           </span>
-          <div ng-if="::ctrl.replicaSetDetail.services" layout="column">
-            <span class="kd-replicasetdetail-sidebar-title">Service</span>
-            <span class="kd-replicasetdetail-sidebar-line">Label selector</span>
-            <span class="kd-replicasetdetail-sidebar-subline"
-                  ng-repeat="service in ::ctrl.replicaSetDetail.services">
-              <kd-labels labels="::service.selector"></kd-labels>
-            </span>
-            <span class="kd-replicasetdetail-sidebar-line">Internal endpoint</span>
-            <div class="kd-replicasetdetail-sidebar-subline"
-                 ng-repeat="service in ::ctrl.replicaSetDetail.services">
-              <div ng-if="::service.internalEndpoint">
-                <kd-service-endpoint endpoint="::service.internalEndpoint"></kd-service-endpoint>
-              </div>
-              <span ng-hide="service.internalEndpoint">none</span>
+          <span class="kd-replicasetdetail-sidebar-line">Internal endpoint</span>
+          <div class="kd-replicasetdetail-sidebar-subline"
+               ng-repeat="service in ::ctrl.replicaSetDetail.services">
+            <div ng-if="::service.internalEndpoint">
+              <kd-service-endpoint endpoint="::service.internalEndpoint"></kd-service-endpoint>
             </div>
-            <span class="kd-replicasetdetail-sidebar-line">External endpoint</span>
-            <div class="kd-replicasetdetail-sidebar-subline"
-                 ng-repeat="service in ::ctrl.replicaSetDetail.services">
-              <div ng-repeat="endpoint in service.externalEndpoints">
-                <kd-service-endpoint endpoint="::endpoint"></kd-service-endpoint>
-              </div>
-              <span class="kd-replicasetdetail-sidebar-subline"
-                  ng-hide="::service.externalEndpoints">
-                none
-              </span>
+            <span ng-hide="service.internalEndpoint">none</span>
+          </div>
+          <span class="kd-replicasetdetail-sidebar-line">External endpoint</span>
+          <div class="kd-replicasetdetail-sidebar-subline"
+               ng-repeat="service in ::ctrl.replicaSetDetail.services">
+            <div ng-repeat="endpoint in service.externalEndpoints">
+              <kd-service-endpoint endpoint="::endpoint"></kd-service-endpoint>
             </div>
+            <span class="kd-replicasetdetail-sidebar-subline"
+                ng-hide="::service.externalEndpoints">
+              none
+            </span>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <md-tabs flex md-border-bottom md-dynamic-height>
+  <md-tabs flex="grow" md-border-bottom md-dynamic-height>
     <md-tab label="Pods">
       <md-content>
         <table class="kd-replicasetdetail-table" cellspacing="0">
@@ -136,8 +135,8 @@ limitations under the License.
             <th class="kd-replicasetdetail-table-header">
               <kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
                                 currently-selected-order="ctrl.podsOrder"
-                                column-name="podIP" tooltip="IP adress of the pod">
-                IP
+                                column-name="podIP" tooltip="In cluster IP adress of the pod">
+                Cluster IP
               </kd-sorted-header>
             </th>
             <th class="kd-replicasetdetail-table-header">
@@ -149,11 +148,12 @@ limitations under the License.
               </kd-sorted-header>
             </th>
             <th class="kd-replicasetdetail-table-header">
-              Logs
-              <i class="material-icons kd-replicasetdetail-help-icon">
-                help
-                <md-tooltip>Display logs from the pod</md-tooltip>
-              </i>
+              <span>Logs
+                <i class="material-icons kd-replicasetdetail-help-icon">
+                  help
+                  <md-tooltip>Display logs from the pod</md-tooltip>
+                </i>
+              <span>
             </th>
             <th class="kd-replicasetdetail-table-header"/>
           </tr>
@@ -177,7 +177,9 @@ limitations under the License.
             <td class="kd-replicasetdetail-table-cell">{{pod.podIP}}</td>
             <td class="kd-replicasetdetail-table-cell">{{pod.nodeName}}</td>
             <td class="kd-replicasetdetail-table-cell">
-              Logs <i class="material-icons kd-replicasetdetail-table-icon">arrow_drop_down</i>
+              <span>
+                Logs<i class="material-icons kd-replicasetdetail-table-icon">arrow_drop_down</i>
+              </span>
               <!-- TODO(maciaszczykm): Handle it. -->
             </td>
             <td class="kd-replicasetdetail-table-cell">
@@ -266,7 +268,7 @@ limitations under the License.
           </thead>
           <tbody>
           <tr ng-repeat="event in ctrl.events | orderBy:ctrl.sortEventsBy:ctrl.eventsOrder">
-            <td class="kd-replicasetdetail-table-message">
+            <td class="kd-replicasetdetail-table-cell">
               <i ng-if="ctrl.isEventWarning(event)"
                  class="material-icons kd-replicasetdetail-warning-icon">warning</i>
               {{event.message}}

src/app/frontend/replicasetdetail/replicasetdetail.scss

@@ -15,11 +15,11 @@
 @import '../variables';
 
 $replicasetdetails-sidebar-bg: #fafafa;
-$replicasetdetails-border: #ddd;
-$replicasetdetails-table-message: #000;
-$replicasetdetails-table-cell: #777;
 $replicasetdetails-sidebar-width: 315px;
 
+$table-cell-height: 6 * $baseline-grid;
+$table-cell-height-half: $table-cell-height / 2;
+
 .kd-replicasetdetail-app-name {
   color: $foreground-2;
   font-weight: $regular-font-weight;
@@ -27,140 +27,99 @@ $replicasetdetails-sidebar-width: 315px;
 
 .kd-replicasetdetail-sidebar {
   background-color: $replicasetdetails-sidebar-bg;
-  max-width: $replicasetdetails-sidebar-width;
+  max-width: $replicasetdetails-sidebar-width + 10 * $baseline-grid;
   min-width: $replicasetdetails-sidebar-width;
 }
 
+.kd-replicasetdetail-sidebar-item {
+  padding-left: 2 * $baseline-grid;
+  padding-right: $baseline-grid;  
+}
+
 .kd-replicasetdetail-table {
   width: 100%;
 }
 
 .kd-replicasetdetail-sidebar-header {
-  border-bottom: 1px solid $replicasetdetails-border;
-  color: $muted;
-  max-height: 49px;
-  min-height: 49px;
+  height: $table-cell-height;
 }
 
-.kd-replicasetdetail-sidebar-header-icon {
-  color: $muted;
-  font-size: $headline-font-size-base;
-  font-weight: $regular-font-weight;
-  margin-right: 6px;
-  vertical-align: middle;
-}
-
-.kd-replicasetdetail-table-message {
-  border-bottom: 1px solid $replicasetdetails-border;
-  color: $replicasetdetails-table-message;
-  font-size: $caption-font-size-base;
-  font-weight: $regular-font-weight;
-  height: 40px;
-  overflow: hidden;
-  padding: 5px 5px 5px 15px;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.kd-replicasetdetail-sidebar-header-wrapper {
+  border-bottom: 1px solid $foreground-4;
 }
 
 .kd-replicasetdetail-sidebar-title {
   font-size: $subhead-font-size-base;
-  padding-bottom: 10px;
-  padding-top: 10px;
+  font-weight: $bold-font-weight;
+  padding: $baseline-grid 0;
 }
 
 .kd-replicasetdetail-sidebar-line {
-  color: $delicate;
-  font-size: $caption-font-size-base;
-  padding-bottom: 6px;
+  color: $foreground-2;
+  font-size: $body-font-size-base;
+  padding-bottom: $baseline-grid;
 }
 
 .kd-replicasetdetail-sidebar-subline {
-  color: $muted;
-  font-size: $caption-font-size-base;
+  color: $foreground-1;
+  font-size: $body-font-size-base;
+  overflow: hidden;
   padding-bottom: $baseline-grid;
-}
-
-.kd-replicasetdetail-sidebar-icon {
-  color: $primary;
-  font-size: 20px;
-  padding: 0 3px;
-  vertical-align: top;
+  text-overflow: ellipsis;
 }
 
 .kd-replicasetdetail-warning-icon {
   color: $warning;
-  font-size: 24px;
-  padding: 0 5px;
+  font-size: $table-cell-height-half;
+  padding: 0 $baseline-grid;
   vertical-align: middle;
 }
 
-.kd-replicasetdetail-sidebar-service-icon {
-  color: $muted;
-  font-size: $body-font-size-base;
-  padding: 0 3px;
-  vertical-align: top;
-}
-
-.kd-replicasetdetail-sidebar-button {
-  font-size: .85em;
-  margin: 0;
-  padding-left: 0;
-}
-
-.kd-replicasetdetail-sidebar-editpods-button {
-  margin: 0;
-  min-width: 25px;
-
-  > md-icon {
-    outline: none;
-  }
-}
-
 .kd-replicasetdetail-options {
-  margin: 15px;
+  margin: 2 * $baseline-grid;
 }
 
 .kd-replicasetdetail-sidebar-info {
-  padding-left: 5px;
+  // 6px needed to offset for md-button padding.
+  padding-left: $baseline-grid + 6px;
+}
+
+.kd-replicasetdetail-sidebar-actions {
+  padding-top: $baseline-grid;
 }
 
 .kd-replicasetdetail-option-picker {
-  min-width: 150px;
-  padding-right: 25px;
+  padding-right: 2 * $baseline-grid;
+  width: 15 * $baseline-grid;
 }
 
 .kd-replicasetdetail-table-header {
-  border-bottom: 1px solid $replicasetdetails-border;
-  color: $replicasetdetails-table-cell;
+  border-bottom: 1px solid $foreground-4;
+  color: $foreground-2;
   font-size: $body-font-size-base;
   font-weight: $regular-font-weight;
-  padding: 15px 10px 15px 15px;
+  height: $table-cell-height;
+  padding: 0 0 0 (2 * $baseline-grid);
   text-align: left;
-}
-
-.kd-replicasetdetail-pointer {
-  cursor: pointer;
+  white-space: nowrap;
 }
 
 .kd-replicasetdetail-table-cell {
-  border-bottom: 1px solid $replicasetdetails-border;
-  color: $replicasetdetails-table-cell;
-  font-size: $caption-font-size-base;
-  height: 40px;
-  padding: 5px 5px 5px 15px;
+  border-bottom: 1px solid $foreground-4;
+  font-size: $body-font-size-base;
+  height: $table-cell-height;
+  padding: 0 0 0 (2 * $baseline-grid);
 }
 
 .kd-replicasetdetail-table-icon {
-  font-size: $body-font-size-base;
-  padding: 0 3px;
+  font-size: inherit;
   vertical-align: top;
 }
 
 .kd-replicasetdetail-help-icon {
-  color: $muted;
-  cursor: help;
-  font-size: $body-font-size-base;
-  padding: 0 3px;
-  vertical-align: middle;
+  color: $foreground-2;
+  cursor: default;
+  font-size: inherit;
+  height: inherit;
+  vertical-align: text-top;
 }

src/app/frontend/replicasetdetail/sortedheader.html

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<a class="kd-sortedheader-pointer" ng-click="sortCtrl.changeSorting()">
+<button class="kd-replicaset-detail-table-header-button" ng-click="sortCtrl.changeSorting()">
   <md-icon md-font-library="material-icons" ng-show="sortCtrl.isArrowDown()"
            class="kd-sortedheader-sort-icon">
     arrow_downward
@@ -24,9 +24,9 @@ limitations under the License.
     arrow_upward
   </md-icon>
   <ng-transclude></ng-transclude>
-</a>
+</button>
 <md-icon ng-show="sortCtrl.isTooltipAvailable()" md-font-library="material-icons"
-         class="kd-sortedheader-help-icon">
+         class="kd-replicasetdetail-help-icon">
   help
   <md-tooltip>{{sortCtrl.tooltip}}</md-tooltip>
 </md-icon>

src/app/frontend/replicasetdetail/sortedheader.scss

@@ -14,26 +14,20 @@
 
 @import '../variables';
 
-$sortedheader-font-size: 14px;
+.kd-replicaset-detail-table-header-button {
+  background: inherit;
+  border: 0;
+  color: inherit;
+  padding: 0;
 
-.kd-sortedheader-pointer {
-  cursor: pointer;
-}
-
-.kd-sortedheader-help-icon {
-  color: $muted;
-  cursor: help;
-  font-size: $sortedheader-font-size;
-  height: $sortedheader-font-size;
-  padding: 0 3px;
-  vertical-align: text-top;
-  width: $sortedheader-font-size;
+  &:focus {
+    outline: none;
+  }
 }
 
 .kd-sortedheader-sort-icon {
-  font-size: $sortedheader-font-size;
-  height: $sortedheader-font-size;
-  padding: 0 3px;
+  font-size: inherit;
+  height: inherit;
   vertical-align: text-top;
-  width: $sortedheader-font-size;
+  width: inherit;
 }