Switch app repo view to use cor-tabs, now that it supports horizontal tabs
This commit is contained in:
parent
ea13469d9d
commit
43619b6745
3 changed files with 87 additions and 79 deletions
|
@ -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;
|
||||||
|
}
|
|
@ -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 -->
|
||||||
|
|
|
@ -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++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
Reference in a new issue