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

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

View file

@ -73,3 +73,9 @@
.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;
}

View file

@ -10,41 +10,44 @@
</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')"
<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">
Settings
</li>
</ul>
<i class="fa fa-gear"></i>
</cor-tab>
</cor-tabs>
<div class="tab-content">
<div ng-show="$ctrl.currentTab == 'description'">
<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>
</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">
<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>
<pre class="command">
helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}
</pre>
</p>
</div>
@ -58,17 +61,18 @@ helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {chann
templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
</cor-table>
</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">
<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>
<pre class="command">
helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}
</pre>
</p>
</div>
@ -83,12 +87,14 @@ helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.
templateurl="/static/js/directives/ui/app-public-view/channels-list.html"></cor-table-col>
</cor-table>
</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>
</div>
</cor-tab-pane>
</cor-tab-content>
</cor-tab-panel>
</div>
<!-- Side bar -->

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') {
public showSettings(): void {
this.settingsShown++;
}
}
}