diff --git a/static/css/directives/ui/cor-tabs.css b/static/css/directives/ui/cor-tabs.css
index e7f405d9c..8e11be91e 100644
--- a/static/css/directives/ui/cor-tabs.css
+++ b/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;
}
diff --git a/static/directives/credentials-dialog.html b/static/directives/credentials-dialog.html
index d5c45b42e..c491741bb 100644
--- a/static/directives/credentials-dialog.html
+++ b/static/directives/credentials-dialog.html
@@ -6,7 +6,7 @@
-
+
diff --git a/static/js/directives/ui/cor-tabs/cor-tab-panel.component.html b/static/js/directives/ui/cor-tabs/cor-tab-panel.component.html
index d041c9466..d449a6e30 100644
--- a/static/js/directives/ui/cor-tabs/cor-tab-panel.component.html
+++ b/static/js/directives/ui/cor-tabs/cor-tab-panel.component.html
@@ -1,3 +1,3 @@
diff --git a/static/js/directives/ui/cor-tabs/cor-tab-panel.component.ts b/static/js/directives/ui/cor-tabs/cor-tab-panel.component.ts
index a427989f4..e59d70fe4 100644
--- a/static/js/directives/ui/cor-tabs/cor-tab-panel.component.ts
+++ b/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);
}
diff --git a/static/js/directives/ui/cor-tabs/cor-tab.component.html b/static/js/directives/ui/cor-tabs/cor-tab.component.html
index ca8e42f49..56b97fccf 100644
--- a/static/js/directives/ui/cor-tabs/cor-tab.component.html
+++ b/static/js/directives/ui/cor-tabs/cor-tab.component.html
@@ -1,10 +1,11 @@
-
+
- {{ ::$ctrl.tabTitle }}
+ bs-tooltip>{{ ::$ctrl.tabTitle }}
diff --git a/static/js/directives/ui/cor-tabs/cor-tabs.component.html b/static/js/directives/ui/cor-tabs/cor-tabs.component.html
index 0e1b4bf22..e068a43bf 100644
--- a/static/js/directives/ui/cor-tabs/cor-tabs.component.html
+++ b/static/js/directives/ui/cor-tabs/cor-tabs.component.html
@@ -1,4 +1,4 @@
-
+
diff --git a/static/js/directives/ui/cor-tabs/cor-tabs.component.ts b/static/js/directives/ui/cor-tabs/cor-tabs.component.ts
index 6b58ae50e..7c7c60a61 100644
--- a/static/js/directives/ui/cor-tabs/cor-tabs.component.ts
+++ b/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;
}
diff --git a/static/partials/image-view.html b/static/partials/image-view.html
index beec1526d..231a8ce0e 100644
--- a/static/partials/image-view.html
+++ b/static/partials/image-view.html
@@ -15,7 +15,7 @@
-
+
diff --git a/static/partials/repo-view.html b/static/partials/repo-view.html
index 95da42e2a..9da90ba49 100644
--- a/static/partials/repo-view.html
+++ b/static/partials/repo-view.html
@@ -35,7 +35,7 @@
-
+
diff --git a/static/partials/super-user.html b/static/partials/super-user.html
index f272834bb..90fff94fe 100644
--- a/static/partials/super-user.html
+++ b/static/partials/super-user.html
@@ -22,7 +22,7 @@
Quay Enterprise Management
-
+
diff --git a/static/partials/user-view.html b/static/partials/user-view.html
index e275fe049..4fc2e620c 100644
--- a/static/partials/user-view.html
+++ b/static/partials/user-view.html
@@ -20,7 +20,7 @@
-
+