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

Switch app repo view to use cor-tabs, now that it supports horizontal tabs

Browse source
This commit is contained in:
Joseph Schorr 2017-05-08 16:48:24 -04:00
parent ea13469d9d
commit 43619b6745
3 changed files with 87 additions and 79 deletions
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;
}

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

@ -10,85 +10,91 @@
</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>
ng-if="$ctrl.repository.can_admin"> <cor-tab tab-title="Settings" tab-id="settings"
Settings ng-if="$ctrl.repository.can_admin">
</li> <i class="fa fa-gear"></i>
</ul> </cor-tab>
</cor-tabs>
<div class="tab-content"> <cor-tab-content>
<div ng-show="$ctrl.currentTab == 'description'"> <!-- Description -->
<div class="description markdown-input" <cor-tab-pane id="description">
content="$ctrl.repository.description" <div class="description markdown-input"
can-write="$ctrl.repository.can_write" content="$ctrl.repository.description"
content-changed="$ctrl.updateDescription" can-write="$ctrl.repository.can_write"
field-title="'application description'"> content-changed="$ctrl.updateDescription"
</div> field-title="'application description'">
</div> </div>
</cor-tab-pane>
<div ng-show="$ctrl.currentTab == 'channels'"> <!-- Channels -->
<div ng-show="!$ctrl.repository.channels.length && $ctrl.repository.can_write"> <cor-tab-pane id="channels">
<h3>No channels found for this application</h3> <div ng-show="!$ctrl.repository.channels.length && $ctrl.repository.can_write">
<br> <h3>No channels found for this application</h3>
<p> <br>
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): <p>
<pre class="command"> 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):
helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }} <pre class="command">
</pre> helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}
</p> </pre>
</div> </p>
</div>
<div ng-show="$ctrl.repository.channels.length || !$ctrl.repository.can_write"> <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 table-data="$ctrl.repository.channels" table-item-title="channels" filter-fields="['name']">
<cor-table-col datafield="name" sortfield="name" title="Name" <cor-table-col datafield="name" sortfield="name" title="Name"
templateurl="/static/js/directives/ui/app-public-view/channel-name.html"></cor-table-col> 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="release" sortfield="release" title="Current Release"></cor-table-col>
<cor-table-col datafield="last_modified" sortfield="last_modified" title="Last Modified" <cor-table-col datafield="last_modified" sortfield="last_modified" title="Last Modified"
selected="true" kindof="datetime" selected="true" kindof="datetime"
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 -->
<div ng-show="!$ctrl.repository.releases.length && $ctrl.repository.can_write"> <cor-tab-pane id="releases">
<h3>No releases found for this application</h3> <div ng-show="!$ctrl.repository.releases.length && $ctrl.repository.can_write">
<br> <h3>No releases found for this application</h3>
<p> <br>
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): <p>
<pre class="command"> 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):
helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }} <pre class="command">
</pre> helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}
</p> </pre>
</div> </p>
</div>
<div ng-show="$ctrl.repository.releases.length || !$ctrl.repository.can_write"> <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 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="name" sortfield="name" title="Name"></cor-table-col>
<cor-table-col datafield="last_modified" sortfield="last_modified" <cor-table-col datafield="last_modified" sortfield="last_modified"
title="Created" title="Created"
selected="true" kindof="datetime" selected="true" kindof="datetime"
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-col datafield="channels" title="Channels" <cor-table-col datafield="channels" title="Channels"
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 -->
<div class="repo-panel-settings" repository="$ctrl.repository" is-enabled="$ctrl.settingsShown"></div> <cor-tab-pane id="settings" ng-if="$ctrl.repository.can_admin">
</div> <div class="repo-panel-settings" repository="$ctrl.repository" is-enabled="$ctrl.settingsShown"></div>
</div> </cor-tab-pane>
</cor-tab-content>
</cor-tab-panel>
</div> </div>
<!-- Side bar --> <!-- Side bar -->

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 { 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; this.settingsShown++;
if (tab == 'settings') {
this.settingsShown++;
}
} }
} }