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

View file

@ -10,33 +10,36 @@
</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>
@ -58,9 +61,10 @@ 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>
@ -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> 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 -->

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