You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@archiva.apache.org by ma...@apache.org on 2020/11/04 20:41:09 UTC
[archiva] branch master updated: Improving sidemenu for angular app
This is an automated email from the ASF dual-hosted git repository.
martin_s pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/archiva.git
The following commit(s) were added to refs/heads/master by this push:
new 091d826 Improving sidemenu for angular app
091d826 is described below
commit 091d82640b4e530af4539f8f006a645c050f654b
Author: Martin Stockhammer <ma...@apache.org>
AuthorDate: Wed Nov 4 21:41:01 2020 +0100
Improving sidemenu for angular app
---
.../src/main/archiva-web/src/app/app.module.ts | 2 +
.../app/directives/nav-subgroup.directive.spec.ts | 26 +++++
.../src/app/directives/nav-subgroup.directive.ts | 52 ++++++++++
.../app/directives/view-permission.directive.ts | 3 +-
.../general/sidemenu/sidemenu.component.html | 105 +++++++++++----------
5 files changed, 137 insertions(+), 51 deletions(-)
diff --git a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app.module.ts b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app.module.ts
index 451e095..8c7786a 100644
--- a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app.module.ts
+++ b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app.module.ts
@@ -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,
diff --git a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.spec.ts b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.spec.ts
new file mode 100644
index 0000000..295d6c0
--- /dev/null
+++ b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.spec.ts
@@ -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();
+ });
+});
diff --git a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.ts b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.ts
new file mode 100644
index 0000000..49c33dc
--- /dev/null
+++ b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.ts
@@ -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");
+ }
+ }
+ }
+ }
+ }
+ }
+
+
+}
diff --git a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/view-permission.directive.ts b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/view-permission.directive.ts
index 70aeadb..f9990d5 100644
--- a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/view-permission.directive.ts
+++ b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/view-permission.directive.ts
@@ -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]'
diff --git a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/general/sidemenu/sidemenu.component.html b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/general/sidemenu/sidemenu.component.html
index c394e89..d023167 100644
--- a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/general/sidemenu/sidemenu.component.html
+++ b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/general/sidemenu/sidemenu.component.html
@@ -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>