vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #2631 from coreos-inc/cor-tabs-vertical

Browse source 
Apps and repository UI cleanup
This commit is contained in:
josephschorr 2017-05-09 13:04:38 -07:00 • committed by GitHub
commit 19a82b8c15
16 changed files with 197 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
static/css/directives/ui/app-public-view.css
View file

@ -73,3 +73,9 @@
.app-public-view-element .co-panel .co-panel-heading i.fa { .app-public-view-element .co-panel .co-panel-heading i.fa {
display: none; display: none;
} }
.app-public-view-element .co-tab-panel {
margin: 0px;
box-shadow: none;
border: none;
}

89
static/css/directives/ui/cor-tabs.css
View file

@ -1,4 +1,4 @@
cor-tabs { .vertical cor-tabs {
display: table-cell; display: table-cell;
float: none; float: none;
vertical-align: top; vertical-align: top;
@ -6,6 +6,37 @@ cor-tabs {
border-right: 1px solid #DDE7ED; 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 {
display: none;
}
}
.co-tab-container { .co-tab-container {
padding: 0px; padding: 0px;
} }
@ -18,7 +49,14 @@ cor-tabs {
vertical-align: top; vertical-align: top;
} }
.co-tab-content { .horizontal .co-tab-content {
width: 100%;
display: block;
float: none;
padding: 30px;
}
.vertical .co-tab-content {
width: 100%; width: 100%;
display: table-cell; display: table-cell;
float: none; float: none;
@ -68,6 +106,10 @@ cor-tabs {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.vertical cor-tabs {
display: block;
}
.co-tabs { .co-tabs {
display: block; display: block;
width: auto; width: auto;
@ -78,6 +120,16 @@ cor-tabs {
cor-tabs { cor-tabs {
position: relative; position: relative;
display: block; 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 { .co-tab-element .xs-toggle {
@ -106,24 +158,46 @@ cor-tabs {
font-family: FontAwesome; font-family: FontAwesome;
} }
.co-tab-element .xs-label { .co-tab-element .horizontal-label {
line-height: 60px;
font-size: 16px; font-size: 16px;
margin-left: 16px; margin-left: 16px;
display: inline-block !important; display: inline-block !important;
color: gray; 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; display: inline-block;
height: 60px; height: 60px;
line-height: 60px; line-height: 54px;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
text-align: left; text-align: left;
padding-left: 20px; padding-left: 20px;
text-decoration: none !important; text-decoration: none !important;
font-size: 28px; font-size: 28px;
color: #666;
}
.co-top-tab {
display: block !important;
border-bottom: 0px !important;
} }
.co-tabs li a i { .co-tabs li a i {
@ -131,7 +205,7 @@ cor-tabs {
font-size: 28px; font-size: 28px;
} }
.co-tabs li.active a .xs-label { .co-tabs li.active a .horizontal-label {
color: black; color: black;
} }
@ -145,6 +219,7 @@ cor-tabs {
.co-tab-element.closed li { .co-tab-element.closed li {
height: 0px; height: 0px;
padding: 0px;
overflow: hidden; overflow: hidden;
} }

2
static/directives/credentials-dialog.html
View file

@ -6,7 +6,7 @@
<div class="cor-loader"></div> <div class="cor-loader"></div>
</div> </div>
<div class="co-tab-modal-body" ng-show="!credentials.loading"> <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 --> <!-- Tabs -->
<cor-tabs> <cor-tabs>
<cor-tab tab-active="true" tab-id="cred-secret-{{ ::dialogID }}"> <cor-tab tab-active="true" tab-id="cred-secret-{{ ::dialogID }}">

70
static/js/directives/ui/app-public-view/app-public-view.component.html
View file

@ -2,7 +2,7 @@
<div class="co-main-content-panel"> <div class="co-main-content-panel">
<div class="app-row"> <div class="app-row">
<!-- Main panel --> <!-- Main panel -->
<div class="col-md-9 main-content"> <div class="col-md-9 col-sm-12 main-content">
<!-- App Header --> <!-- App Header -->
<div class="app-header"> <div class="app-header">
<a href="https://coreos.com/blog/quay-application-registry-for-kubernetes.html" class="hidden-xs hidden-sm" style="float: right; padding: 6px;" ng-safenewtab><i class="fa fa-info-circle" style="margin-right: 6px;"></i>Learn more about applications</a> <a href="https://coreos.com/blog/quay-application-registry-for-kubernetes.html" class="hidden-xs hidden-sm" style="float: right; padding: 6px;" ng-safenewtab><i class="fa fa-info-circle" style="margin-right: 6px;"></i>Learn more about applications</a>
@ -10,41 +10,42 @@
</div> </div>
<!-- Tabs --> <!-- Tabs -->
<ul class="co-top-tab-bar"> <cor-tab-panel>
<li class="co-top-tab" ng-class="$ctrl.currentTab == 'description' ? 'active': ''" ng-click="$ctrl.showTab('description')"> <cor-tabs>
Description <cor-tab tab-title="Description" tab-id="description">
</li> <i class="fa fa-info-circle"></i>
<li class="co-top-tab" ng-class="$ctrl.currentTab == 'channels' ? 'active': ''" ng-click="$ctrl.showTab('channels')"> </cor-tab>
Channels <cor-tab tab-title="Channels" tab-id="channels">
</li> <i class="fa fa-tags"></i>
<li class="co-top-tab" ng-class="$ctrl.currentTab == 'releases' ? 'active': ''" ng-click="$ctrl.showTab('releases')"> </cor-tab>
Releases <cor-tab tab-title="Releases" tab-id="releases">
</li> <i class="fa ci-package"></i>
<li class="co-top-tab" ng-class="$ctrl.currentTab == 'settings' ? 'active': ''" ng-click="$ctrl.showTab('settings')" </cor-tab>
<cor-tab tab-title="Settings" tab-id="settings"
ng-if="$ctrl.repository.can_admin"> ng-if="$ctrl.repository.can_admin">
Settings <i class="fa fa-gear"></i>
</li> </cor-tab>
</ul> </cor-tabs>
<div class="tab-content"> <cor-tab-content>
<div ng-show="$ctrl.currentTab == 'description'"> <!-- Description -->
<cor-tab-pane id="description">
<div class="description markdown-input" <div class="description markdown-input"
content="$ctrl.repository.description" content="$ctrl.repository.description"
can-write="$ctrl.repository.can_write" can-write="$ctrl.repository.can_write"
content-changed="$ctrl.updateDescription" content-changed="$ctrl.updateDescription"
field-title="'application description'"> field-title="'application description'">
</div> </div>
</div> </cor-tab-pane>
<div ng-show="$ctrl.currentTab == 'channels'"> <!-- Channels -->
<cor-tab-pane id="channels">
<div ng-show="!$ctrl.repository.channels.length && $ctrl.repository.can_write"> <div ng-show="!$ctrl.repository.channels.length && $ctrl.repository.can_write">
<h3>No channels found for this application</h3> <h3>No channels found for this application</h3>
<br> <br>
<p> <p class="hidden-xs">
To push a new channel (from within the Helm package directory and with the <a href="https://coreos.com/apps" ng-safenewtab>Helm registry plugin</a> installed): To push a new channel (from within the Helm package directory and with the <a href="https://coreos.com/apps" ng-safenewtab>Helm registry plugin</a> installed):
<pre class="command"> <pre class="command hidden-xs">helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}</pre>
helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}
</pre>
</p> </p>
</div> </div>
@ -58,17 +59,16 @@ helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {chann
templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col> templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
</cor-table> </cor-table>
</div> </div>
</div> <!-- /channels --> </cor-tab-pane>
<div ng-show="$ctrl.currentTab == 'releases'"> <!-- Releases -->
<cor-tab-pane id="releases">
<div ng-show="!$ctrl.repository.releases.length && $ctrl.repository.can_write"> <div ng-show="!$ctrl.repository.releases.length && $ctrl.repository.can_write">
<h3>No releases found for this application</h3> <h3>No releases found for this application</h3>
<br> <br>
<p> <p class="hidden-xs">
To push a new release (from within the Helm package directory and with the <a href="https://coreos.com/apps" ng-safenewtab>Helm registry plugin</a> installed): To push a new release (from within the Helm package directory and with the <a href="https://coreos.com/apps" ng-safenewtab>Helm registry plugin</a> installed):
<pre class="command"> <pre class="command hidden-xs">helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}</pre>
helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}
</pre>
</p> </p>
</div> </div>
@ -83,16 +83,18 @@ helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.
templateurl="/static/js/directives/ui/app-public-view/channels-list.html"></cor-table-col> templateurl="/static/js/directives/ui/app-public-view/channels-list.html"></cor-table-col>
</cor-table> </cor-table>
</div> </div>
</div> <!-- /releases --> </cor-tab-pane>
<div ng-show="$ctrl.currentTab == 'settings'" ng-if="$ctrl.repository.can_admin"> <!-- Settings -->
<cor-tab-pane id="settings" ng-if="$ctrl.repository.can_admin">
<div class="repo-panel-settings" repository="$ctrl.repository" is-enabled="$ctrl.settingsShown"></div> <div class="repo-panel-settings" repository="$ctrl.repository" is-enabled="$ctrl.settingsShown"></div>
</div> </cor-tab-pane>
</div> </cor-tab-content>
</cor-tab-panel>
</div> </div>
<!-- Side bar --> <!-- Side bar -->
<div class="col-md-3 side-bar"> <div class="col-md-3 hidden-xs hidden-sm side-bar">
<div> <div>
<visibility-indicator repository="$ctrl.repository"></visibility-indicator> <visibility-indicator repository="$ctrl.repository"></visibility-indicator>
</div> </div>

6
static/js/directives/ui/app-public-view/app-public-view.component.ts
View file

@ -10,7 +10,6 @@ import { Input, Component, Inject } from 'ng-metadata/core';
}) })
export class AppPublicViewComponent { export class AppPublicViewComponent {
@Input('<') public repository: any; @Input('<') public repository: any;
private currentTab: string = 'description';
private settingsShown: number = 0; private settingsShown: number = 0;
constructor(@Inject('Config') private Config: any) { constructor(@Inject('Config') private Config: any) {
@ -22,10 +21,7 @@ export class AppPublicViewComponent {
this.repository.put(); this.repository.put();
} }
public showTab(tab: string): void { public showSettings(): void {
this.currentTab = tab;
if (tab == 'settings') {
this.settingsShown++; this.settingsShown++;
} }
}
} }

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

@ -1,3 +1,3 @@
<div class="co-main-content-panel co-tab-panel co-fx-box-shadow-heavy"> <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> </div>

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

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

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

@ -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()"> <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-placement="right"
data-container="body" data-container="body"
style="display: inline-block" 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> </span>
</a> </a>
</li> </li>

2
static/js/directives/ui/cor-tabs/cor-tabs.component.html
View file

@ -1,4 +1,4 @@
<span class="co-tab-element" ng-class="$ctrl.isClosed ? 'closed' : 'open'"> <span class="co-tab-element" ng-class="$ctrl.isClosed ? 'closed' : 'open'">
<span class="xs-toggle" ng-click="$ctrl.toggleClosed($event)"></span> <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> </span>

6
static/js/directives/ui/cor-tabs/cor-tabs.component.ts
View file

@ -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 { 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. // If true, the tabs are in a closed state. Only applies in the mobile view.
private isClosed: boolean = true; private isClosed: boolean = true;
constructor(@Host() @Inject(CorTabPanelComponent) private parent: CorTabPanelComponent) {
}
private toggleClosed(e): void { private toggleClosed(e): void {
this.isClosed = !this.isClosed; this.isClosed = !this.isClosed;
} }

2
static/partials/image-view.html
View file

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

2
static/partials/manage-application.html
View file

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

2
static/partials/org-view.html
View file

@ -20,7 +20,7 @@
<div class="repo-list-view padded" namespaces="[organization]">&nbsp;</div> <div class="repo-list-view padded" namespaces="[organization]">&nbsp;</div>
</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-tabs quay-show="isMember">
<cor-tab tab-active="true" tab-title="Repositories" tab-id="repos"> <cor-tab tab-active="true" tab-title="Repositories" tab-id="repos">
<i class="fa fa-hdd-o"></i> <i class="fa fa-hdd-o"></i>

2
static/partials/repo-view.html
View file

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

2
static/partials/super-user.html
View file

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

2
static/partials/user-view.html
View file

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