nosu
/
security-c4po
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: styling adjustments for category sidenav

This commit is contained in:
Marcel Haag 2022-06-13 20:40:37 +02:00
parent 9ef5a681b5
commit f48868570a
12 changed files with 137 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
security-c4po-angular/package-lock.json generated
View File

@ -6941,6 +6941,16 @@
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true
},
"bindings": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
"dev": true,
"optional": true,
"requires": {
"file-uri-to-path": "1.0.0"
}
},
"bl": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@ -9366,6 +9376,13 @@
"escape-string-regexp": "^1.0.5"
}
},
"file-uri-to-path": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
"dev": true,
"optional": true
},
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -12710,6 +12727,13 @@
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
"integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
},
"nan": {
"version": "2.16.0",
"resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz",
"integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
"dev": true,
"optional": true
},
"nanoid": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz",
@ -18259,7 +18283,11 @@
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
"dev": true,
"optional": true
"optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1"
}
},
"glob-parent": {
"version": "3.1.0",

6
security-c4po-angular/src/app/pentest-overview/pentest-categories/pentest-categories.component.html
View File

@ -1 +1,5 @@
<nb-menu class="menu-style" tag="menu" [items]="categories"></nb-menu>
<div>
<nb-menu class="menu-style" tag="menu" [items]="categories"></nb-menu>
</div>

8
security-c4po-angular/src/app/pentest-overview/pentest-categories/pentest-categories.component.scss
View File

@ -1,7 +1 @@
.menu-style{
--menu-item-padding: 0.75rem 1.5rem;
--menu-item-hover-background-color: rgba(143, 155, 179, 0.24);
--menu-item-hover-text-color: #ffffff;
--menu-item-active-text-color: #ffffff;
--menu-item-active-background-color: #556ff8 !important;
}
@import '../../../assets/@theme/styles/themes';

35
security-c4po-angular/src/app/pentest-overview/pentest-categories/pentest-categories.component.spec.ts
View File

@ -1,6 +1,17 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PentestCategoriesComponent } from './pentest-categories.component';
import {NbMenuModule, NbMenuService} from '@nebular/theme';
import {NgxsModule} from '@ngxs/store';
import {ProjectState} from '@shared/stores/project-state/project-state';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {HttpLoaderFactory} from '../../common-app.module';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {CommonModule} from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ThemeModule} from '@assets/@theme/theme.module';
import {RouterTestingModule} from '@angular/router/testing';
describe('PentestCategoriesComponent', () => {
let component: PentestCategoriesComponent;
@ -8,7 +19,29 @@ describe('PentestCategoriesComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ PentestCategoriesComponent ]
declarations: [
PentestCategoriesComponent
],
imports: [
CommonModule,
BrowserAnimationsModule,
NbMenuModule.forRoot(),
ThemeModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
NgxsModule.forRoot([ProjectState]),
RouterTestingModule.withRoutes([]),
HttpClientModule,
HttpClientTestingModule
],
providers: [
NbMenuService
]
})
.compileComponents();
});

34
security-c4po-angular/src/app/pentest-overview/pentest-categories/pentest-categories.component.ts
View File

@ -14,9 +14,9 @@ import {TranslateService} from '@ngx-translate/core';
})
export class PentestCategoriesComponent implements OnInit, OnDestroy {
categories: NbMenuItem[] = [];
selectedCategory: Category = 0;
private destroy$ = new Subject<void>();
selectedCategory: Category;
constructor(private store: Store,
private menuService: NbMenuService,
@ -24,6 +24,26 @@ export class PentestCategoriesComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
this.initTranslation();
// Set first item in list as selected
this.categories[0].selected = true;
this.menuService.onItemClick()
.pipe(
untilDestroyed(this)
)
.subscribe((menuBag) => {
this.selectedCategory = menuBag.item.data;
this.categories.forEach(category => {
category.selected = false;
});
menuBag.item.selected = true;
this.store.dispatch(new ChangeCategory(this.selectedCategory));
});
}
private initTranslation(): void {
for (const cat in Category) {
if (isNaN(Number(cat))) {
// initialize category menu
@ -48,18 +68,6 @@ export class PentestCategoriesComponent implements OnInit, OnDestroy {
});
}
}
this.menuService.onItemClick()
.pipe(
untilDestroyed(this)
)
.subscribe((menuBag) => {
this.selectedCategory = menuBag.item.data;
this.categories.forEach(category => {
category.selected = false;
});
menuBag.item.selected = true;
this.store.dispatch(new ChangeCategory(this.selectedCategory));
});
}
ngOnDestroy(): void {

7
security-c4po-angular/src/app/pentest-overview/pentest-overview.module.ts
View File

@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common';
import {PentestHeaderComponent} from './pentest-header/pentest-header.component';
import {PentestCategoriesComponent} from './pentest-categories/pentest-categories.component';
import {PentestTableComponent} from './pentest-table/pentest-table.component';
import {NbCardModule, NbLayoutModule, NbTreeGridModule, NbMenuModule, NbSidebarModule} from '@nebular/theme';
import {NbCardModule, NbLayoutModule, NbTreeGridModule, NbMenuModule, NbSidebarModule, NbListModule} from '@nebular/theme';
import {TranslateModule} from '@ngx-translate/core';
import {StatusTagModule} from '@shared/widgets/status-tag/status-tag.module';
import {FindigWidgetModule} from '@shared/widgets/findig-widget/findig-widget.module';
@ -25,14 +25,15 @@ import {FormsModule} from '@angular/forms';
CommonModule,
NbLayoutModule,
NbCardModule,
NbMenuModule.forRoot(),
NbTreeGridModule,
TranslateModule,
StatusTagModule,
FindigWidgetModule,
RouterModule,
NbSidebarModule,
NbMenuModule,
FormsModule
FormsModule,
NbListModule
]
})
export class PentestOverviewModule {

1
security-c4po-angular/src/app/project-overview/project-overview.module.ts
View File

@ -19,7 +19,6 @@ import {LoadingSpinnerComponent} from '@shared/widgets/loading-spinner/loading-s
imports: [
CommonModule,
NbCardModule,
NbMenuModule.forRoot(),
NbButtonModule,
NbSpinnerModule,
NbProgressBarModule,

2
security-c4po-angular/src/app/project-overview/project/project.component.html
View File

@ -11,7 +11,7 @@
</nb-card>
</nb-layout-column>
<nb-layout-column class="table-wrapper" fxFlex="4 1 0%">
<nb-layout-column class="table-wrapper" fxFlex="4 1 85%">
<nb-card class="table-column">
<nb-card-body>
<app-pentest-table></app-pentest-table>

2
security-c4po-angular/src/app/project-overview/project/project.module.ts
View File

@ -18,10 +18,8 @@ import {PentestOverviewModule} from '../../pentest-overview';
],
imports: [
CommonModule,
NbSidebarModule.forRoot(),
NbCardModule,
NbLayoutModule,
NbMenuModule,
RouterModule.forChild([{
path: '',
component: ProjectComponent

40
security-c4po-angular/src/assets/@theme/styles/_overrides.scss
View File

@ -8,4 +8,44 @@
right: 0.41rem !important;
}
}
nb-menu {
background-color: nb-theme(menu-background-color);
ul.menu-items {
margin: 0;
padding: 0;
}
.menu-item a {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 0.95rem;
font-weight: nb-theme(text-font-weight);;
line-height: nb-theme(menu-text-line-height);
padding: nb-theme(menu-item-padding);
}
.menu-item {
a {
color: nb-theme(menu-text-color);
border-radius: nb-theme(menu-item-border-radius);
}
a.active {
background-color: nb-theme(color-primary-hover) !important;
color: nb-theme(text-control-color) !important;
font-weight: nb-theme(menu-text-font-weight);
}
a:hover {
background-color: nb-theme(color-basic-transparent-focus);
color: nb-theme(menu-text-color);
cursor: nb-theme(menu-item-hover-cursor);
// Increases element size on hover
transform: scale(1.025);
}
}
}
}

2
security-c4po-angular/src/assets/i18n/de-DE.json
View File

@ -210,7 +210,7 @@
},
"categories": {
"INFORMATION_GATHERING": "Informationsbeschaffung",
"CONFIGURATION_AND_DEPLOY_MANAGEMENT_TESTING": "Konfigurations- und Bereitstellungsmanagement-Testing",
"CONFIGURATION_AND_DEPLOY_MANAGEMENT_TESTING": "Konfig- & Einsatzmanagement-Testing",
"IDENTITY_MANAGEMENT_TESTING": "Identitätsmanagement-Testing",
"AUTHENTICATION_TESTING": "Authentifizierungs-Testing",
"AUTHORIZATION_TESTING": "Autorisations-Testing",

2
security-c4po-angular/src/assets/i18n/en-US.json
View File

@ -210,7 +210,7 @@
},
"categories": {
"INFORMATION_GATHERING": "Information Gathering",
"CONFIGURATION_AND_DEPLOY_MANAGEMENT_TESTING": "Configuration and Deploy Management Testing",
"CONFIGURATION_AND_DEPLOY_MANAGEMENT_TESTING": "Config & Deploy Management Testing",
"IDENTITY_MANAGEMENT_TESTING": "Identity Management Testing",
"AUTHENTICATION_TESTING": "Authentication Testing",
"AUTHORIZATION_TESTING": "Authorization Testing",