From ea13469d9dfef507740fdefff37b02a93d9a92eb Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Mon, 8 May 2017 16:46:46 -0400 Subject: [PATCH 1/3] 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 @@
         
        - + From 43619b674558490e41c0cce043e1e974e7f35702 Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Mon, 8 May 2017 16:48:24 -0400 Subject: [PATCH 2/3] Switch app repo view to use cor-tabs, now that it supports horizontal tabs --- static/css/directives/ui/app-public-view.css | 6 + .../app-public-view.component.html | 152 +++++++++--------- .../app-public-view.component.ts | 8 +- 3 files changed, 87 insertions(+), 79 deletions(-) diff --git a/static/css/directives/ui/app-public-view.css b/static/css/directives/ui/app-public-view.css index 39a5456cd..1436e99a6 100644 --- a/static/css/directives/ui/app-public-view.css +++ b/static/css/directives/ui/app-public-view.css @@ -72,4 +72,10 @@ .app-public-view-element .co-panel .co-panel-heading i.fa { display: none; +} + +.app-public-view-element .co-tab-panel { + margin: 0px; + box-shadow: none; + border: none; } \ No newline at end of file diff --git a/static/js/directives/ui/app-public-view/app-public-view.component.html b/static/js/directives/ui/app-public-view/app-public-view.component.html index ea4adaa13..e8da83a03 100644 --- a/static/js/directives/ui/app-public-view/app-public-view.component.html +++ b/static/js/directives/ui/app-public-view/app-public-view.component.html @@ -10,85 +10,91 @@ -
          -
        • - Description -
          • -
        • - Channels -
          • -
        • - Releases -
          • -
        • - Settings -
          • -
        + + + + + + + + + + + + + + + -
        -
        -
        -
        -
        + + + +
        +
        +         -
        -
        -

        No channels found for this application

        -
        -

        - To push a new channel (from within the Helm package directory and with the Helm registry plugin installed): -

        -helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}
-
        -

        -
        + + +
        +

        No channels found for this application

        +
        +

        + To push a new channel (from within the Helm package directory and with the Helm registry plugin installed): + 

        +  helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}
+
        +

        +
        -
        - - - - - -
        -
        +
        + + + + + +
        + -
        -
        -

        No releases found for this application

        -
        -

        - To push a new release (from within the Helm package directory and with the Helm registry plugin installed): -

        -helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}
-
        -

        -
        + + +
        +

        No releases found for this application

        +
        +

        + To push a new release (from within the Helm package directory and with the Helm registry plugin installed): + 

        +  helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}
+
        +

        +
        -
        - - - - - -
        -
        +
        + + + + + +
        + -
        -
        -
        -
        + + +
        +         + +         diff --git a/static/js/directives/ui/app-public-view/app-public-view.component.ts b/static/js/directives/ui/app-public-view/app-public-view.component.ts index 0d90c188f..6b1f75258 100644 --- a/static/js/directives/ui/app-public-view/app-public-view.component.ts +++ b/static/js/directives/ui/app-public-view/app-public-view.component.ts @@ -10,7 +10,6 @@ import { Input, Component, Inject } from 'ng-metadata/core'; }) export class AppPublicViewComponent { @Input('<') public repository: any; - private currentTab: string = 'description'; private settingsShown: number = 0; constructor(@Inject('Config') private Config: any) { @@ -22,10 +21,7 @@ export class AppPublicViewComponent { this.repository.put(); } - public showTab(tab: string): void { - this.currentTab = tab; - if (tab == 'settings') { - this.settingsShown++; - } + public showSettings(): void { + this.settingsShown++; } } From c4e3a5e0a734a274d0d5220279efa77af6efbd9f Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Mon, 8 May 2017 16:55:47 -0400 Subject: [PATCH 3/3] Fix apps view for mobile Fixes https://www.pivotaltracker.com/story/show/144543995 --- static/css/directives/ui/cor-tabs.css | 8 +------- .../app-public-view.component.html | 16 ++++++---------- .../ui/cor-tabs/cor-tab-panel.component.ts | 7 ++++--- 3 files changed, 11 insertions(+), 20 deletions(-) diff --git a/static/css/directives/ui/cor-tabs.css b/static/css/directives/ui/cor-tabs.css index 8e11be91e..d49094965 100644 --- a/static/css/directives/ui/cor-tabs.css +++ b/static/css/directives/ui/cor-tabs.css @@ -33,13 +33,7 @@ } .horizontal .cor-tab-itself i.fa { - color: #666; - font-size: 14px; - color: #ccc; - } - - .horizontal .cor-tab-itself.active i.fa { - color: #666; + display: none; } } diff --git a/static/js/directives/ui/app-public-view/app-public-view.component.html b/static/js/directives/ui/app-public-view/app-public-view.component.html index e8da83a03..fd9506d59 100644 --- a/static/js/directives/ui/app-public-view/app-public-view.component.html +++ b/static/js/directives/ui/app-public-view/app-public-view.component.html @@ -2,7 +2,7 @@
        -
        +
        @@ -43,11 +43,9 @@

        No channels found for this application


        -

        + 

        -  helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}
-
        +

        @@ -68,11 +66,9 @@

        No releases found for this application


        -

        + 

        -  helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}
-
        +

        @@ -98,7 +94,7 @@
        -
        +