From ea13469d9dfef507740fdefff37b02a93d9a92eb Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Mon, 8 May 2017 16:46:46 -0400 Subject: [PATCH] Add support for horizontal tabs into cor-tabs --- static/css/directives/ui/cor-tabs.css | 95 +++++++++++++++++-- static/directives/credentials-dialog.html | 2 +- .../ui/cor-tabs/cor-tab-panel.component.html | 2 +- .../ui/cor-tabs/cor-tab-panel.component.ts | 10 ++ .../ui/cor-tabs/cor-tab.component.html | 7 +- .../ui/cor-tabs/cor-tabs.component.html | 2 +- .../ui/cor-tabs/cor-tabs.component.ts | 6 +- static/partials/image-view.html | 2 +- static/partials/manage-application.html | 2 +- static/partials/org-view.html | 2 +- static/partials/repo-view.html | 2 +- static/partials/super-user.html | 2 +- static/partials/user-view.html | 2 +- 13 files changed, 116 insertions(+), 20 deletions(-) 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/manage-application.html b/static/partials/manage-application.html index 698dca5c0..85c986c4a 100644 --- a/static/partials/manage-application.html +++ b/static/partials/manage-application.html @@ -20,7 +20,7 @@ - + diff --git a/static/partials/org-view.html b/static/partials/org-view.html index 1fd56e0bb..8cfef7e10 100644 --- a/static/partials/org-view.html +++ b/static/partials/org-view.html @@ -20,7 +20,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 @@
         
        - +