Skip to content

R
Requirement Formalization Tool
Commit 362d388c authored by Thodoris Nestoridis's avatar Thodoris Nestoridis
Browse files
Options

trying to complete nav bar (side bar)

parent e285942c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 589 additions and 383 deletions
.vscode/settings.json 0 → 100644
View file @ 362d388c
{
"python.pythonPath": "/home/nestorid/.pyenv/versions/reqman/bin/python"
}
\ No newline at end of file
reqtool/ReqmanAngular11/angular.json
View file @ 362d388c
......@@ -31,6 +31,7 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss"
],
"scripts": []
......@@ -94,6 +95,7 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss"
],
"scripts": []
......
reqtool/ReqmanAngular11/package-lock.json
View file @ 362d388c
......@@ -157,6 +157,23 @@
"tslib": "^2.0.0"
}
},
"@angular/cdk": {
"version": "11.2.0",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.0.tgz",
"integrity": "sha512-25k1giKAJ7DPzJBZfAVZmw/VfR4pZUaZnhgVAMwIdGPl5SaXJEW3e2znGlhzwkuQsiBgrSKfMgJmwKSyUbe2tg==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^2.0.0"
},
"dependencies": {
"parse5": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true
}
}
},
"@angular/cli": {
"version": "11.1.4",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.1.4.tgz",
......@@ -328,6 +345,14 @@
"tslib": "^2.0.0"
}
},
"@angular/flex-layout": {
"version": "11.0.0-beta.33",
"resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-11.0.0-beta.33.tgz",
"integrity": "sha512-unfhw3abZuKtdwQicRStHCYGbANPTHYg4WNRQk/RC5Mxq+4WOp4Q8HI7GqRHCGUYDCGUP7w1sU/oDt8f09nM8w==",
"requires": {
"tslib": "^2.0.0"
}
},
"@angular/forms": {
"version": "11.1.2",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-11.1.2.tgz",
......@@ -458,6 +483,14 @@
}
}
},
"@angular/material": {
"version": "11.2.0",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.0.tgz",
"integrity": "sha512-duTQdHtzdZ3KWn90JcN+eI0oNwr7E7JGEOp7tZ9XOtqty0h158SJUCYSuDxhFOqyAgaY41enNPHdB2c4Xz0iBQ==",
"requires": {
"tslib": "^2.0.0"
}
},
"@angular/platform-browser": {
"version": "11.1.2",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.1.2.tgz",
......
reqtool/ReqmanAngular11/package.json
View file @ 362d388c
......@@ -12,11 +12,14 @@
"private": true,
"dependencies": {
"@angular/animations": "~11.1.2",
"@angular/cdk": "^11.2.0",
"@angular/common": "~11.1.2",
"@angular/compiler": "~11.1.2",
"@angular/core": "~11.1.2",
"@angular/flex-layout": "^11.0.0-beta.33",
"@angular/forms": "~11.1.2",
"@angular/localize": "~11.1.2",
"@angular/material": "^11.2.0",
"@angular/platform-browser": "~11.1.2",
"@angular/platform-browser-dynamic": "~11.1.2",
"@angular/router": "~11.1.2",
......
reqtool/ReqmanAngular11/src/app/app.module.ts
View file @ 362d388c
......@@ -19,7 +19,11 @@ import { AddPrefixComponent } from './components/add-prefix/add-prefix.component
import { PrefixDetailsComponent } from './components/prefix-details/prefix-details.component';
import { PrefixListComponent } from './components/prefix-list/prefix-list.component';
import { NotifierModule } from "angular-notifier";
import { NavigationBarComponent } from './components/navigation-bar/navigation-bar.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MaterialModule} from './mat-module';
import { NavComponent } from './components/nav/nav.component';
......@@ -34,6 +38,8 @@ import { NotifierModule } from "angular-notifier";
AddPrefixComponent,
PrefixDetailsComponent,
PrefixListComponent,
NavigationBarComponent,
NavComponent,
],
imports: [
BrowserModule,
......@@ -42,6 +48,8 @@ import { NotifierModule } from "angular-notifier";
HttpClientModule,
NgbModule,
NotifierModule,
BrowserAnimationsModule,
MaterialModule,
],
providers: [
AuthService,
......
reqtool/ReqmanAngular11/src/app/components/nav/nav.component.html 0 → 100644
View file @ 362d388c
<app-navigation-bar></app-navigation-bar>
<mat-sidenav-container autosize>
<mat-sidenav #navigationSidenav mode="over" role="navigation">
<mat-toolbar>
<mat-toolbar-row>
<h2 class="toolbar-title"> APP </h2>
</mat-toolbar-row>
</mat-toolbar>
<!-- <mat-nav-list dense> -->
<mat-nav-list>
<h2 matSubheader> WORK </h2>
<a mat-list-item routerLink="/" style="height: 0;"></a>
<!-- <mat-divider></mat-divider> -->
<h2 matSubheader> CUSTOMER </h2>
<!--
<ng-container *ngIf="salesRoutes">
<h2 matSubheader> {{ 'SALES_SUB_HEADER' | translate }} </h2>
<a *ngFor="let item of salesRoutes"
mat-list-item
(click)="navigationSidenav.close()"
[routerLink]="[item.route]"
routerLinkActive="list-item-active">
<mat-icon matListIcon class="nav-list-icon"> {{ item.icon }} </mat-icon>
{{item.title}}
</a>
</ng-container>
<ng-container *ngIf="collateralRoutes">
<h2 matSubheader> {{ 'COLLATERAL_SUB_HEADER' | translate }} </h2>
<a *ngFor="let item of collateralRoutes"
mat-list-item
(click)="navigationSidenav.close()"
[routerLink]="[item.route]"
routerLinkActive="list-item-active">
<mat-icon matListIcon class="nav-list-icon"> {{ item.icon }} </mat-icon>
{{item.title}}
</a>
</ng-container>
-->
<h2 matSubheader> SALES</h2>
<h2 matSubheader> COL </h2>
<h2 matSubheader> MARKETING</h2>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav #commandbarSidenav position="end" mode="side" class="crm-command-bar-sidenav">
<mat-list style="padding: 10px;">
</mat-list>
</mat-sidenav>
<mat-sidenav-content role="main">
<!--
<crm-navigation-bar *ngIf="isAuthenticated()" (toggleSidenav)="navigationSidenav.toggle()">
</crm-navigation-bar>
-->
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
reqtool/ReqmanAngular11/src/app/components/nav/nav.component.scss 0 → 100644
View file @ 362d388c
@mixin crm-nav-theme($theme) {
$nav-list-icon-padding: 12px !default;
$toolbar-title-padding: 16px !default;
.list-item-active {
font-weight: bold;
color: mat-color(map-get($theme, accent), darker) !important;
background: rgba(0, 0, 0, 0.04);
}
.nav-list-icon {
margin: 0 $nav-list-icon-padding 0 $nav-list-icon-padding;
}
.toolbar-title {
margin: 0 $toolbar-title-padding 0 $toolbar-title-padding;
}
}
\ No newline at end of file
reqtool/ReqmanAngular11/src/app/components/nav/nav.component.spec.ts 0 → 100644
View file @ 362d388c
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NavComponent } from './nav.component';
describe('NavComponent', () => {
let component: NavComponent;
let fixture: ComponentFixture<NavComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ NavComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(NavComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
reqtool/ReqmanAngular11/src/app/components/nav/nav.component.ts 0 → 100644
View file @ 362d388c
import { Component, OnInit } from '@angular/core';
import { AuthService } from './../../services/auth.service';
@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
constructor(private authService: AuthService,) { }
ngOnInit(): void {
}
public isAuthenticated() {
this.authService.isLoggedIn();
}
}
reqtool/ReqmanAngular11/src/app/components/navigation-bar/navigation-bar.component.html 0 → 100644
View file @ 362d388c
<mat-toolbar color="primary" class="app-navigation-bar">
<mat-toolbar-row>
<span class="toolbar-title"> {{ 'APP_TOOLBAR_TITLE'}} </span>
<div fxFlex fxLayout fxLayoutAlign="flex-end">
<ul fxLayout fxLayoutGap="20px" class="navigation-items">
<li fxHide.xs>
<button mat-icon-button>
<mat-icon> settings </mat-icon>
</button>
</li>
<li fxHide.xs>
<button mat-icon-button>
<mat-icon> help_outline </mat-icon>
</button>
</li>
<li>
<button mat-icon-button [matMenuTriggerFor]="auth">
<mat-icon> person </mat-icon>
</button>
<mat-menu #auth="matMenu">
<mat-divider></mat-divider>
<button mat-menu-item (click)="logout()">
<mat-icon> exit_to_app </mat-icon>
<span> {{ 'SIGN_OUT_NAVIGATION_BAR_BUTTON' }} </span>
</button>
</mat-menu>
</li>
</ul>
</div>
</mat-toolbar-row>
</mat-toolbar>
<div fxFlex fxLayout fxLayoutAlign="flex-end" fxHide.xs>
<div fxFlex fxLayout fxLayoutAlign="flex-end" fxHide.xs>
<mat-icon class="toolbar-icon">settings</mat-icon>
<mat-icon class="toolbar-icon">help_outline</mat-icon>
<button mat-icon-button [matMenuTriggerFor]="auth">
<mat-icon>person_outline</mat-icon>
</button>
<mat-menu #auth="matMenu">
<button mat-menu-item>
<mat-icon>exit_to_app</mat-icon>
<span>Sign out</span>
</button>
</mat-menu>
</div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Check voicemail</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Disable alerts</span>
</button>
</mat-menu>
<div fxFlex fxLayout fxLayoutAlign="flex-end" fxHide.xs>
<ul fxLayout fxLayoutGap="20px" class="navigation-items">
<li>
<a>
<mat-icon class="toolbar-icon">settings</mat-icon>
</a>
</li>
<li>
<a >
<mat-icon class="toolbar-icon">help_outline</mat-icon>
</a>
</li>
<li>
<a>
<mat-icon class="toolbar-icon">person_outline</mat-icon>
</a>
</li>
</ul>
</div>
\ No newline at end of file
reqtool/ReqmanAngular11/src/app/components/navigation-bar/navigation-bar.component.scss 0 → 100644
View file @ 362d388c
$toolbar-title-padding: 16px !default;
.toolbar-title {
margin: 0 $toolbar-title-padding 0 $toolbar-title-padding;
}
.navigation-items {
list-style: none;
padding: 0;
margin: 0;
cursor: pointer;
}
.app-navigation-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 998;
}
\ No newline at end of file
reqtool/ReqmanAngular11/src/app/components/navigation-bar/navigation-bar.component.spec.ts 0 → 100644
View file @ 362d388c
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NavigationBarComponent } from './navigation-bar.component';
describe('NavigationBarComponent', () => {
let component: NavigationBarComponent;
let fixture: ComponentFixture<NavigationBarComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ NavigationBarComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(NavigationBarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
reqtool/ReqmanAngular11/src/app/components/navigation-bar/navigation-bar.component.ts 0 → 100644
View file @ 362d388c
import { Component, EventEmitter, Output } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { AuthService } from './../../services/auth.service';
@Component({
selector: 'app-navigation-bar',
templateUrl: './navigation-bar.component.html',
styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent {
@Output() toggleSidenav = new EventEmitter<void>();
private returnUrl = '/';
constructor(private authService: AuthService,
private router: Router) {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.returnUrl = event.url;
}
});
}
public onProfile() {
this.router.navigate(['users/profile']);
}
public logout() {
this.authService.logout();
}
}
reqtool/ReqmanAngular11/src/app/mat-module.ts 0 → 100644
View file @ 362d388c
import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
@NgModule({
exports: [
A11yModule,
ClipboardModule,
CdkStepperModule,
CdkTableModule,
CdkTreeModule,
DragDropModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
PortalModule,
ScrollingModule
],
imports: [
A11yModule,
ClipboardModule,
CdkStepperModule,
CdkTableModule,
CdkTreeModule,
DragDropModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
PortalModule,
ScrollingModule
]
})
export class MaterialModule { }
\ No newline at end of file
reqtool/ReqmanAngular11/src/app/services/sidenav.service.spec.ts 0 → 100644
View file @ 362d388c
import { TestBed } from '@angular/core/testing';
import { SidenavService } from './sidenav.service';
describe('SidenavService', () => {
let service: SidenavService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(SidenavService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
reqtool/ReqmanAngular11/src/app/services/sidenav.service.ts 0 → 100644
View file @ 362d388c
import { Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
@Injectable({
providedIn: 'root'
})
export class SidenavService {
//private sidenav: MatSidenav;
private opened = false;
constructor(private sidenav: MatSidenav) {}
public setSidenav(sidenav: MatSidenav) {
this.sidenav = sidenav;
}
public open() {
this.opened = true;
return this.sidenav.open();
}
public close() {
this.opened = false;
return this.sidenav.close();
}
public toggle() {
this.opened = !this.opened;
return this.sidenav.toggle();
}
public isOpen(): boolean {
return this.opened;
}
}
reqtool/ReqmanAngular11/src/index.html
View file @ 362d388c
......@@ -6,8 +6,11 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
reqtool/ReqmanAngular11/src/styles.scss
View file @ 362d388c
......@@ -6,4 +6,6 @@
@import '~bootstrap/scss/bootstrap';
/* Import angular-notifier. */
@import '~angular-notifier/styles';
\ No newline at end of file
@import '~angular-notifier/styles';
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment