Merge pull request #491 from floreks/logs-fix

Fixed styling issues on logs page and made it more responsive

Author: Sebastian Florek

.sass-lint.yml

@@ -41,7 +41,7 @@ rules:
   no-empty-rulesets: 2
   no-extends: 0
   no-ids: 2
-  no-important: 2
+  no-important: 0
   no-invalid-hex: 2
   no-mergeable-selectors: 2
   no-misspelled-properties: 2

src/app/frontend/chrome/chrome.scss

@@ -23,7 +23,7 @@
 .kd-toolbar {
   box-shadow: $whiteframe-shadow-1dp;
   height: $toolbar-height-size-base;
-  position: fixed;
+  position: fixed !important;
   top: 0;
 }
 

src/app/frontend/logs/logstoolbar/logstoolbar.html

@@ -14,38 +14,78 @@
 limitations under the License.
 -->
 
-<div layout="row" layout-wrap layout-margin layout-align="center center">
-  <span flex="10"></span>
-
-  <div layout="row" layout-wrap layout-margin layout-align="center center">
-    <span class="kd-logs-toolbar-text">Logs from pod:</span>
-    <md-select class="kd-logs-toolbar-select" aria-label="Logs from pod" ng-model="ctrl.pod"
-               md-on-close="ctrl.onPodChange(ctrl.pod.name)"
-               required>
-      <md-option ng-repeat="item in ctrl.pods" ng-value="item">
-        <span class="kd-logs-toolbar-text">{{item.name}}</span>
-      </md-option>
-    </md-select>
-    <span class="kd-logs-toolbar-text">Container:</span>
-    <md-select class="kd-logs-toolbar-select" aria-label="Containers" ng-model="ctrl.container"
-               md-on-close="ctrl.onContainerChange(ctrl.container.name)"
-               required>
-      <md-option ng-repeat="item in ctrl.containers" ng-value="item">
-        <span class="kd-logs-toolbar-text">{{item.name}}</span>
-      </md-option>
-    </md-select>
-  </div>
-  <span class="kd-logs-toolbar-text" flex="auto" >
+<div layout="row" hide show-gt-sm layout-margin layout-align="center center"
+     class="kd-logs-toolbar">
+  <span class="kd-logs-toolbar-text">Pod:</span>
+  <md-select class="kd-logs-toolbar-select" aria-label="Logs from pod" ng-model="ctrl.pod"
+             md-on-close="ctrl.onPodChange(ctrl.pod.name)"
+             required>
+    <md-option ng-repeat="item in ctrl.pods" ng-value="item">
+      <span class="kd-logs-toolbar-text">{{item.name}}</span>
+    </md-option>
+  </md-select>
+
+  <span class="kd-logs-toolbar-text">Container:</span>
+  <md-select class="kd-logs-toolbar-select" aria-label="Containers" ng-model="ctrl.container"
+             md-on-close="ctrl.onContainerChange(ctrl.container.name)"
+             required>
+    <md-option ng-repeat="item in ctrl.containers" ng-value="item">
+      <span class="kd-logs-toolbar-text">{{item.name}}</span>
+    </md-option>
+  </md-select>
+
+  <span class="kd-logs-toolbar-text" flex="auto">
     <span ng-if="ctrl.podCreationTime">
       Running since {{ctrl.podCreationTime | date:'short'}}
     </span>
     <span ng-if="!ctrl.podCreationTime">
       Not running
     </span>
   </span>
-  <span flex="auto" ></span>
-  <md-button class="kd-icon-button" id="colorText"
-             ng-click="ctrl.onTextColorChange()">
+
+  <span flex="auto"></span>
+  <md-button ng-click="ctrl.onTextColorChange()">
+    <md-icon md-font-library="material-icons"
+             ng-class="ctrl.getStyleClass()">
+      format_color_text
+    </md-icon>
+  </md-button>
+</div>
+
+<div layout="row" hide-gt-sm layout-no-wrap layout-margin layout-align="center center"
+     class="kd-logs-toolbar">
+  <md-menu-bar class="kd-logs-toolbar-menu-bar">
+    <md-menu>
+      <button ng-click="$mdOpenMenu()" class="kd-logs-toolbar-menu-button">
+        Logs source
+      </button>
+      <md-menu-content width="3">
+        <md-menu-item>
+          <md-menu>
+            <md-button ng-click="$mdOpenMenu()">Pods</md-button>
+            <md-menu-content width="4">
+              <md-button ng-repeat="item in ctrl.pods"
+                         ng-click="ctrl.onPodChange(item.name)">{{item.name}}
+              </md-button>
+            </md-menu-content>
+          </md-menu>
+        </md-menu-item>
+        <md-menu-item>
+          <md-menu>
+            <md-button ng-click="$mdOpenMenu()">Containers</md-button>
+            <md-menu-content width="4">
+              <md-button ng-repeat="item in ctrl.containers"
+                         ng-click="ctrl.onContainerChange(item.name)">{{item.name}}
+              </md-button>
+            </md-menu-content>
+          </md-menu>
+        </md-menu-item>
+      </md-menu-content>
+    </md-menu>
+  </md-menu-bar>
+
+  <span flex="auto"></span>
+  <md-button class="kd-logs-toolbar-icon" ng-click="ctrl.onTextColorChange()">
     <md-icon md-font-library="material-icons"
              ng-class="ctrl.getStyleClass()">
       format_color_text

src/app/frontend/logs/logstoolbar/logstoolbar.scss

@@ -60,3 +60,30 @@ md-toolbar {
     }
   }
 }
+
+.md-button {
+  &.kd-logs-toolbar-icon {
+    min-width: 4 * $baseline-grid;
+  }
+}
+
+.kd-logs-toolbar-menu-button {
+  color: $content-background;
+
+  &:after {
+    content: '\25BC';
+    display: inline-block;
+    position: relative;
+    transform: scaleY(.9) scaleX(1.3);
+  }
+}
+
+.kd-logs-toolbar-menu-bar {
+  .kd-logs-toolbar-menu-button {
+    background: none;
+  }
+}
+
+.kd-logs-toolbar {
+  margin-bottom: $baseline-grid / 2;
+}