mirror of https://github.com/apache/archiva.git
Improving sidemenu for angular app
This commit is contained in:
Martin Stockhammer
parent
2313e1cd86
commit
091d82640b
|
|
@ -32,6 +32,7 @@ import { SidemenuComponent } from './modules/general/sidemenu/sidemenu.component
|
|||
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
|
||||
import { LoginComponent } from './modules/general/login/login.component';
|
||||
import { ViewPermissionDirective } from './directives/view-permission.directive';
|
||||
import { NavSubgroupDirective } from './directives/nav-subgroup.directive';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
|
@ -43,6 +44,7 @@ import { ViewPermissionDirective } from './directives/view-permission.directive'
|
|||
SidemenuComponent,
|
||||
LoginComponent,
|
||||
ViewPermissionDirective,
|
||||
NavSubgroupDirective,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import { NavSubgroupDirective } from './nav-subgroup.directive';
|
||||
|
||||
describe('NavSubgroupDirective', () => {
|
||||
it('should create an instance', () => {
|
||||
const directive = new NavSubgroupDirective();
|
||||
expect(directive).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import {Directive, ElementRef, HostListener, Renderer2} from '@angular/core';
|
||||
|
||||
/**
|
||||
* Used to mark a div element as navigation subgroup. If a navigation element is clicked,
|
||||
* it searches the siblings of the div element for activated children and deactivates them.
|
||||
* This is a workaround for a bootstrap issue, when nav-items are collected in div elements.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appNavSubgroup]'
|
||||
})
|
||||
export class NavSubgroupDirective {
|
||||
|
||||
constructor(private renderer : Renderer2, private el : ElementRef) { }
|
||||
|
||||
@HostListener('click')
|
||||
onClick() {
|
||||
let actionEl = this.el.nativeElement;
|
||||
let divElements = actionEl.parentElement.querySelectorAll("div[class~='nav']");
|
||||
if (divElements != null) {
|
||||
for (let divEl of divElements) {
|
||||
if (divEl != actionEl) {
|
||||
let actionElements = divEl.querySelectorAll("a[class~='active']");
|
||||
if (actionElements != null) {
|
||||
for (let activeEl of actionElements) {
|
||||
this.renderer.removeClass(activeEl, "active");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -19,7 +19,8 @@
|
|||
import {Directive, ElementRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges} from '@angular/core';
|
||||
|
||||
/**
|
||||
* This directive can be used to render based on permissions
|
||||
* This directive can be used to render a element based on permissions. Sets the 'd-none' class for the
|
||||
* element, if the permission returns 'false'.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appViewPermission]'
|
||||
|
|
|
|||
|
|
@ -18,57 +18,62 @@
|
|||
-->
|
||||
<nav class="nav flex-column nav-pills " role="tablist" aria-orientation="vertical">
|
||||
|
||||
<div [appViewPermission]="perms.menu.repo.section">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Artifacts</a>
|
||||
<div class="nav flex-column nav-pills" appNavSubgroup role="tablist" aria-orientation="vertical"
|
||||
[appViewPermission]="perms.menu.repo.section">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Artifacts</a>
|
||||
|
||||
<a class="nav-link active my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-search" aria-selected="true" >Search</a>
|
||||
<a class="nav-link active my-0 py-0" id="repo-search" href="#repo-search" data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.repo.search" role="tab" aria-controls="v-pills-search" aria-selected="true">Search</a>
|
||||
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Browse</a>
|
||||
<a class="nav-link my-0 py-0" id="repo-browse" href="#repo-browse" data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.repo.browse" role="tab" aria-controls="v-pills-browse" aria-selected="false">Browse</a>
|
||||
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false"
|
||||
[appViewPermission]="perms.menu.repo.upload">Upload Artifact</a>
|
||||
</div>
|
||||
<div [appViewPermission]="perms.menu.admin.section">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-home" aria-selected="false" >Administration</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Repository Groups</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Repositories</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Proxy Connectors</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">ProxyConnector Rules</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Network Proxies</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Repository Scanning</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Runtime Configuration</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">System Status</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">UI Configuration</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Reports</a>
|
||||
</div>
|
||||
<div [appViewPermission]="perms.menu.user.section">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-home" aria-selected="false">Users</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Manage</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Roles</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Users Runtime Configuration</a>
|
||||
</div>
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-home" aria-selected="false">Documentation</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">REST Api</a>
|
||||
<a class="nav-link my-0 py-0" href="#" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">User Documentation</a>
|
||||
<a class="nav-link my-0 py-0" id="repo-upload" href="#repo-upload" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false"
|
||||
[appViewPermission]="perms.menu.repo.upload">Upload Artifact</a>
|
||||
</div>
|
||||
<div class="nav flex-column nav-pills" appNavSubgroup aria-orientation="vertical" role="tablist"
|
||||
[appViewPermission]="perms.menu.admin.section">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
|
||||
role="tab" aria-controls="v-pills-home" aria-selected="false">Administration</a>
|
||||
<a class="nav-link my-0 py-0" id="admin-groups" href="#admin-groups" data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Repository Groups</a>
|
||||
<a class="nav-link my-0 py-0" id="admin-repos" href="#admin-repos" data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Repositories</a>
|
||||
<a class="nav-link my-0 py-0" id="admin-proxy-conn" href="#admin-proxy-conn" data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Proxy Connectors</a>
|
||||
<a class="nav-link my-0 py-0" id="admin-proxy-conn-rules" href="#admin-proxy-conn-rules" data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">ProxyConnector Rules</a>
|
||||
<a class="nav-link my-0 py-0" id="admin-network-proxy" href="#admin-network-proxy" data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Network Proxies</a>
|
||||
<a class="nav-link my-0 py-0" id="admin-repo-scan" href="#admin-repo-scan" data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Repository Scanning</a>
|
||||
<a class="nav-link my-0 py-0" id="admin-runtime-configuration" href="#admin-runtime-configuration"
|
||||
data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Runtime Configuration</a>
|
||||
<a class="nav-link my-0 py-0" id="admin-ui-configuration" href="#admin-ui-configuration" data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">UI Configuration</a>
|
||||
<a class="nav-link my-0 py-0" id="admin-status" href="#admin-status" data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.admin.status" role="tab" aria-controls="v-pills-browse" aria-selected="false">System Status</a>
|
||||
<a class="nav-link my-0 py-0" id="admin-reports" href="#admin-reports" data-toggle="pill"
|
||||
[appViewPermission]="perms.menu.admin.reports" role="tab" aria-controls="v-pills-browse" aria-selected="false">Reports</a>
|
||||
</div>
|
||||
<div class="nav flex-column nav-pills" appNavSubgroup [appViewPermission]="perms.menu.user.section">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-home" aria-selected="false">Users</a>
|
||||
<a class="nav-link my-0 py-0" id="users-manage" href="#users-manage" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Manage</a>
|
||||
<a class="nav-link my-0 py-0" id="users-roles" href="#users-roles" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Roles</a>
|
||||
<a class="nav-link my-0 py-0" id="users-configuration" href="#users-configuration" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">Users Runtime Configuration</a>
|
||||
</div>
|
||||
<div class="nav flex-column nav-pills" appNavSubgroup>
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-home" aria-selected="false">Documentation</a>
|
||||
<a class="nav-link my-0 py-0" id="doc-rest-api" href="#doc-rest-api" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">REST Api</a>
|
||||
<a class="nav-link my-0 py-0" id="doc-userdoc" href="#doc-userdoc" data-toggle="pill"
|
||||
role="tab" aria-controls="v-pills-browse" aria-selected="false">User Documentation</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in New Issue