Add support for horizontal tabs into cor-tabs

static/css/directives/ui/cor-tabs.css

@@ -1,4 +1,4 @@
-cor-tabs {
+.vertical cor-tabs {
   display: table-cell;
   float: none;
   vertical-align: top;
@@ -6,6 +6,43 @@ cor-tabs {
   border-right: 1px solid #DDE7ED;
 }
 
+@media (min-width: 768px) {
+  .horizontal-label {
+    color: #666;
+  }
+
+  .vertical .horizontal-label {
+    display: none;
+  }
+
+  .horizontal .horizontal-label {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .horizontal .horizontal-label {
+    margin-left: 10px;
+    display: inline-block;
+  }
+
+  .horizontal .cor-tab-itself {
+    font-size: 18px;
+    padding: 6px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .horizontal .cor-tab-itself i.fa {
+    color: #666;
+    font-size: 14px;
+    color: #ccc;
+  }
+
+  .horizontal .cor-tab-itself.active i.fa {
+    color: #666;
+  }
+}
+
 .co-tab-container {
   padding: 0px;
 }
@@ -18,7 +55,14 @@ cor-tabs {
   vertical-align: top;
 }
 
-.co-tab-content {
+.horizontal .co-tab-content {
+  width: 100%;
+  display: block;
+  float: none;
+  padding: 30px;
+}
+
+.vertical .co-tab-content {
   width: 100%;
   display: table-cell;
   float: none;
@@ -68,6 +112,10 @@ cor-tabs {
 }
 
 @media (max-width: 767px) {
+  .vertical cor-tabs {
+    display: block;
+  }
+
   .co-tabs {
     display: block;
     width: auto;
@@ -78,6 +126,16 @@ cor-tabs {
   cor-tabs {
     position: relative;
     display: block;
+    float: none;
+    vertical-align: top;
+    background-color: #e8f1f6;
+    border-right: 1px solid #DDE7ED;
+  }
+
+  .co-tab-element li.active {
+    background-color: white;
+    border-right: 1px solid white;
+    margin-right: -1px;
   }
 
   .co-tab-element .xs-toggle {
@@ -106,24 +164,46 @@ cor-tabs {
     font-family: FontAwesome;
   }
 
-  .co-tab-element .xs-label {
-    line-height: 60px;
+  .co-tab-element .horizontal-label {
     font-size: 16px;
     margin-left: 16px;
     display: inline-block !important;
     color: gray;
+    vertical-align: middle;
   }
 
-  .co-tabs li a {
+  .cor-tab-itself {
+    width: 100%;
+  }
+
+  .cor-tab-icon {
+    vertical-align: middle;
+  }
+
+  .co-top-tab-bar {
+    padding: 0px;
+  }
+
+  .co-top-tab-bar li {
+    padding: 0px;
+  }
+
+  .co-tabs li a, .co-top-tab-bar li a {
     display: inline-block;
     height: 60px;
-    line-height: 60px;
+    line-height: 54px;
     white-space: nowrap;
     width: 100%;
     text-align: left;
     padding-left: 20px;
     text-decoration: none !important;
     font-size: 28px;
+    color: #666;
+  }
+
+  .co-top-tab {
+    display: block !important;
+    border-bottom: 0px !important;
   }
 
   .co-tabs li a i {
@@ -131,7 +211,7 @@ cor-tabs {
     font-size: 28px;
   }
 
-  .co-tabs li.active a .xs-label {
+  .co-tabs li.active a .horizontal-label {
     color: black;
   }
 
@@ -145,6 +225,7 @@ cor-tabs {
 
   .co-tab-element.closed li {
     height: 0px;
+    padding: 0px;
     overflow: hidden;
   }
 

static/directives/credentials-dialog.html

@@ -6,7 +6,7 @@
           <div class="cor-loader"></div>
         </div>
         <div class="co-tab-modal-body" ng-show="!credentials.loading">
-          <cor-tab-panel remember-cookie="quay.credentialsTab">
+          <cor-tab-panel remember-cookie="quay.credentialsTab" vertical-tabs="true">
             <!-- Tabs -->
             <cor-tabs>
               <cor-tab tab-active="true" tab-id="cred-secret-{{ ::dialogID }}">

static/js/directives/ui/cor-tabs/cor-tab-panel.component.html

@@ -1,3 +1,3 @@
 <div class="co-main-content-panel co-tab-panel co-fx-box-shadow-heavy">
-    <div class="co-tab-container" ng-transclude></div>
+    <div class="co-tab-container" ng-class="$ctrl.isVertical() ? 'vertical': 'horizontal'" ng-transclude></div>
 </div>

static/js/directives/ui/cor-tabs/cor-tab-panel.component.ts

@@ -18,6 +18,9 @@ export class CorTabPanelComponent implements OnDestroy {
   // If 'true', the currently selected tab will be remembered via a cookie and not the page URL.
   @Input('@') public rememberCookie: string;
 
+  // If 'true', the tabs will be displayed vertically, as opposed to horizontally.
+  @Input('@') public verticalTabs: string;
+
   // The tabs under this tabs component.
   private tabs: CorTabComponent[] = [];
 
@@ -45,6 +48,13 @@ export class CorTabPanelComponent implements OnDestroy {
     }
   }
 
+  /**
+   * isVertical returns true if the tabs in this panel are displayed vertically.
+   */
+  public isVertical(): boolean {
+    return this.verticalTabs == 'true';
+  }
+
   public tabClicked(tab: CorTabComponent): void {
     this.setActiveTab(tab);
   }

static/js/directives/ui/cor-tabs/cor-tab.component.html

@@ -1,10 +1,11 @@
-<li ng-class="{'active': $ctrl.isActive}">
+<li class="cor-tab-itself" ng-class="{'active': $ctrl.isActive, 'co-top-tab': !$ctrl.parent.isVertical()}">
     <a ng-click="$ctrl.tabClicked()">
-        <span data-title="{{ ::$ctrl.tabTitle }}"
+        <span class="cor-tab-icon"
+              data-title="{{ ::($ctrl.parent.isVertical() ? $ctrl.tabTitle : '') }}"
               data-placement="right"
               data-container="body"
               style="display: inline-block"
-              bs-tooltip><span ng-transclude/></span><span class="visible-xs-inline xs-label">{{ ::$ctrl.tabTitle }}</span>
+              bs-tooltip><span ng-transclude/></span><span class="horizontal-label">{{ ::$ctrl.tabTitle }}</span>
         </span>
     </a>
 </li>

static/js/directives/ui/cor-tabs/cor-tabs.component.html

@@ -1,4 +1,4 @@
 <span class="co-tab-element" ng-class="$ctrl.isClosed ? 'closed' : 'open'">
   <span class="xs-toggle" ng-click="$ctrl.toggleClosed($event)"></span>
-  <ul class="co-tabs col-md-1" ng-transclude></ul>
+  <ul ng-class="$ctrl.parent.isVertical() ? 'co-tabs col-md-1' : 'co-top-tab-bar'" ng-transclude></ul>
 </span>

static/js/directives/ui/cor-tabs/cor-tabs.component.ts

@@ -1,5 +1,6 @@
-import { Component, Host, Inject } from 'ng-metadata/core';
+import { Component, Input, Output, Inject, EventEmitter, Host } from 'ng-metadata/core';
 import { CorTabComponent } from './cor-tab.component';
+import { CorTabPanelComponent } from './cor-tab-panel.component';
 
 
 /**
@@ -16,6 +17,9 @@ export class CorTabsComponent {
   // If true, the tabs are in a closed state. Only applies in the mobile view.
   private isClosed: boolean = true;
 
+  constructor(@Host() @Inject(CorTabPanelComponent) private parent: CorTabPanelComponent) {
+  }
+
   private toggleClosed(e): void {
     this.isClosed = !this.isClosed;
   }

static/partials/image-view.html

@@ -15,7 +15,7 @@
       </span>
     </div>
 
-    <cor-tab-panel>
+    <cor-tab-panel vertical-tabs="true">
       <cor-tabs>
         <cor-tab tab-title="Layers" tab-id="layers">
           <i class="fa ci-layers"></i>

static/partials/manage-application.html

@@ -20,7 +20,7 @@
       </div>
     </div>
 
-    <cor-tab-panel>
+    <cor-tab-panel vertical-tabs="true">
       <cor-tabs>
         <cor-tab tab-title="Settings" tab-id="settings">
           <i class="fa fa-gear"></i>

static/partials/org-view.html

@@ -20,7 +20,7 @@
       <div class="repo-list-view padded" namespaces="[organization]">&nbsp;</div>
     </div>
 
-    <cor-tab-panel ng-if="!user.anonymous && isMember">
+    <cor-tab-panel ng-if="!user.anonymous && isMember" vertical-tabs="true">
       <cor-tabs quay-show="isMember">
         <cor-tab tab-active="true" tab-title="Repositories" tab-id="repos">
           <i class="fa fa-hdd-o"></i>

static/partials/repo-view.html

@@ -35,7 +35,7 @@
         </span>
       </div>
 
-      <cor-tab-panel>
+      <cor-tab-panel vertical-tabs="true">
         <cor-tabs>
           <cor-tab tab-title="Information" tab-id="info"
                    tab-init="showInfo()">

static/partials/super-user.html

@@ -22,7 +22,7 @@
       <span class="cor-title-content">Quay Enterprise Management</span>
     </div>
 
-    <cor-tab-panel>
+    <cor-tab-panel vertical-tabs="true">
       <cor-tabs>
         <cor-tab tab-title="Manage Users"
                  tab-id="users" tab-init="loadUsers()">

static/partials/user-view.html

@@ -20,7 +20,7 @@
       <div class="repo-list-view padded" namespaces="[context.viewuser]">&nbsp;</div>
     </div>
 
-    <cor-tab-panel ng-if="context.viewuser.is_me">
+    <cor-tab-panel ng-if="context.viewuser.is_me" vertical-tabs="true">
       <cor-tabs quay-show="context.viewuser.is_me">
         <cor-tab tab-active="true" tab-title="Repositories" tab-id="repos">
           <i class="fa fa-hdd-o"></i>