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

@ -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;
}

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

@ -1,4 +1,4 @@
cor-tabs {
.vertical cor-tabs {
display: table-cell;
float: none;
vertical-align: top;
@ -6,6 +6,37 @@ 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 {
display: none;
}
}
.co-tab-container {
padding: 0px;
}
@ -18,7 +49,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 +106,10 @@ cor-tabs {
}
@media (max-width: 767px) {
.vertical cor-tabs {
display: block;
}
.co-tabs {
display: block;
width: auto;
@ -78,6 +120,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 +158,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 +205,7 @@ cor-tabs {
font-size: 28px;
}
.co-tabs li.active a .xs-label {
.co-tabs li.active a .horizontal-label {
color: black;
}
@ -145,6 +219,7 @@ cor-tabs {
.co-tab-element.closed li {
height: 0px;
padding: 0px;
overflow: hidden;
}

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

@ -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 }}">

152
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="app-row">
<!-- Main panel -->
<div class="col-md-9 main-content">
<div class="col-md-9 col-sm-12 main-content">
<!-- 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>
@ -10,89 +10,91 @@
</div>
<!-- Tabs -->
<ul class="co-top-tab-bar">
<li class="co-top-tab" ng-class="$ctrl.currentTab == 'description' ? 'active': ''" ng-click="$ctrl.showTab('description')">
Description
</li>
<li class="co-top-tab" ng-class="$ctrl.currentTab == 'channels' ? 'active': ''" ng-click="$ctrl.showTab('channels')">
Channels
</li>
<li class="co-top-tab" ng-class="$ctrl.currentTab == 'releases' ? 'active': ''" ng-click="$ctrl.showTab('releases')">
Releases
</li>
<li class="co-top-tab" ng-class="$ctrl.currentTab == 'settings' ? 'active': ''" ng-click="$ctrl.showTab('settings')"
ng-if="$ctrl.repository.can_admin">
Settings
</li>
</ul>
<cor-tab-panel>
<cor-tabs>
<cor-tab tab-title="Description" tab-id="description">
<i class="fa fa-info-circle"></i>
</cor-tab>
<cor-tab tab-title="Channels" tab-id="channels">
<i class="fa fa-tags"></i>
</cor-tab>
<cor-tab tab-title="Releases" tab-id="releases">
<i class="fa ci-package"></i>
</cor-tab>
<cor-tab tab-title="Settings" tab-id="settings"
ng-if="$ctrl.repository.can_admin">
<i class="fa fa-gear"></i>
</cor-tab>
</cor-tabs>
<div class="tab-content">
<div ng-show="$ctrl.currentTab == 'description'">
<div class="description markdown-input"
content="$ctrl.repository.description"
can-write="$ctrl.repository.can_write"
content-changed="$ctrl.updateDescription"
field-title="'application description'">
</div>
</div>
<cor-tab-content>
<!-- Description -->
<cor-tab-pane id="description">
<div class="description markdown-input"
content="$ctrl.repository.description"
can-write="$ctrl.repository.can_write"
content-changed="$ctrl.updateDescription"
field-title="'application description'">
</div>
</cor-tab-pane>
<div ng-show="$ctrl.currentTab == 'channels'">
<div ng-show="!$ctrl.repository.channels.length && $ctrl.repository.can_write">
<h3>No channels found for this application</h3>
<br>
<p>
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">
helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}
</pre>
</p>
</div>
<!-- Channels -->
<cor-tab-pane id="channels">
<div ng-show="!$ctrl.repository.channels.length && $ctrl.repository.can_write">
<h3>No channels found for this application</h3>
<br>
<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):
<pre class="command hidden-xs">helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}</pre>
</p>
</div>
<div ng-show="$ctrl.repository.channels.length || !$ctrl.repository.can_write">
<cor-table table-data="$ctrl.repository.channels" table-item-title="channels" filter-fields="['name']">
<cor-table-col datafield="name" sortfield="name" title="Name"
templateurl="/static/js/directives/ui/app-public-view/channel-name.html"></cor-table-col>
<cor-table-col datafield="release" sortfield="release" title="Current Release"></cor-table-col>
<cor-table-col datafield="last_modified" sortfield="last_modified" title="Last Modified"
selected="true" kindof="datetime"
templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
</cor-table>
</div>
</div> <!-- /channels -->
<div ng-show="$ctrl.repository.channels.length || !$ctrl.repository.can_write">
<cor-table table-data="$ctrl.repository.channels" table-item-title="channels" filter-fields="['name']">
<cor-table-col datafield="name" sortfield="name" title="Name"
templateurl="/static/js/directives/ui/app-public-view/channel-name.html"></cor-table-col>
<cor-table-col datafield="release" sortfield="release" title="Current Release"></cor-table-col>
<cor-table-col datafield="last_modified" sortfield="last_modified" title="Last Modified"
selected="true" kindof="datetime"
templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
</cor-table>
</div>
</cor-tab-pane>
<div ng-show="$ctrl.currentTab == 'releases'">
<div ng-show="!$ctrl.repository.releases.length && $ctrl.repository.can_write">
<h3>No releases found for this application</h3>
<br>
<p>
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">
helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}
</pre>
</p>
</div>
<!-- Releases -->
<cor-tab-pane id="releases">
<div ng-show="!$ctrl.repository.releases.length && $ctrl.repository.can_write">
<h3>No releases found for this application</h3>
<br>
<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):
<pre class="command hidden-xs">helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}</pre>
</p>
</div>
<div ng-show="$ctrl.repository.releases.length || !$ctrl.repository.can_write">
<cor-table table-data="$ctrl.repository.releases" table-item-title="releases" filter-fields="['name']">
<cor-table-col datafield="name" sortfield="name" title="Name"></cor-table-col>
<cor-table-col datafield="last_modified" sortfield="last_modified"
title="Created"
selected="true" kindof="datetime"
templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
<cor-table-col datafield="channels" title="Channels"
templateurl="/static/js/directives/ui/app-public-view/channels-list.html"></cor-table-col>
</cor-table>
</div>
</div> <!-- /releases -->
<div ng-show="$ctrl.repository.releases.length || !$ctrl.repository.can_write">
<cor-table table-data="$ctrl.repository.releases" table-item-title="releases" filter-fields="['name']">
<cor-table-col datafield="name" sortfield="name" title="Name"></cor-table-col>
<cor-table-col datafield="last_modified" sortfield="last_modified"
title="Created"
selected="true" kindof="datetime"
templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
<cor-table-col datafield="channels" title="Channels"
templateurl="/static/js/directives/ui/app-public-view/channels-list.html"></cor-table-col>
</cor-table>
</div>
</cor-tab-pane>
<div ng-show="$ctrl.currentTab == 'settings'" ng-if="$ctrl.repository.can_admin">
<div class="repo-panel-settings" repository="$ctrl.repository" is-enabled="$ctrl.settingsShown"></div>
</div>
</div>
<!-- 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>
</cor-tab-pane>
</cor-tab-content>
</cor-tab-panel>
</div>
<!-- Side bar -->
<div class="col-md-3 side-bar">
<div class="col-md-3 hidden-xs hidden-sm side-bar">
<div>
<visibility-indicator repository="$ctrl.repository"></visibility-indicator>
</div>

8
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 {
@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++;
}
}

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-tab-container" ng-transclude></div>
<div class="co-tab-container" ng-class="$ctrl.isVertical() ? 'vertical': 'horizontal'" ng-transclude></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 {
// 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;
// If 'true', the tabs will be displayed vertically, as opposed to horizontally.
@Input('<') public verticalTabs: boolean;
// The tabs under this tabs component.
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 {
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()">
<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>

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="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>

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 { 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;
}

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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()">

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

@ -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()">

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

@ -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>