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
Show 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.component.html
View file @ 362d388c
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 8px 0;
}
p {
margin: 0;
}
.spacer {
flex: 1;
}
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar img {
margin: 0 16px;
}
.toolbar #twitter-logo {
height: 40px;
margin: 0 16px;
}
.toolbar #twitter-logo:hover {
opacity: 0.8;
}
.content {
display: flex;
margin: 82px auto 32px;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
svg.material-icons {
height: 24px;
width: auto;
}
svg.material-icons:not(:last-child) {
margin-right: 8px;
}
.card svg.material-icons path {
fill: #888;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.card {
border-radius: 4px;
border: 1px solid #eee;
background-color: #fafafa;
height: 40px;
width: 200px;
margin: 0 8px 16px;
padding: 16px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
line-height: 24px;
}
.card-container .card:not(:last-child) {
margin-right: 0;
}
.card.card-small {
height: 16px;
width: 168px;
}
.card-container .card:not(.highlight-card) {
cursor: pointer;
}
.card-container .card:not(.highlight-card):hover {
transform: translateY(-3px);
box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
}
.card-container .card:not(.highlight-card):hover .material-icons path {
fill: rgb(105, 103, 103);
}
.card.highlight-card {
background-color: #1976d2;
color: white;
font-weight: 600;
border: none;
width: auto;
min-width: 30%;
position: relative;
}
.card.card.highlight-card span {
margin-left: 60px;
}
svg#rocket {
width: 80px;
position: absolute;
left: -10px;
top: -24px;
}
svg#rocket-smoke {
height: calc(100vh - 95px);
position: absolute;
top: 10px;
right: 180px;
z-index: -10;
}
a,
a:visited,
a:hover {
color: #1976d2;
text-decoration: none;
}
a:hover {
color: #125699;
}
.terminal {
position: relative;
width: 80%;
max-width: 600px;
border-radius: 6px;
padding-top: 45px;
margin-top: 8px;
overflow: hidden;
background-color: rgb(15, 15, 16);
}
.terminal::before {
content: "\2022 \2022 \2022";
position: absolute;
top: 0;
left: 0;
height: 4px;
background: rgb(58, 58, 58);
color: #c2c3c4;
width: 100%;
font-size: 2rem;
line-height: 0;
padding: 14px 0;
text-indent: 4px;
}
.terminal pre {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
color: white;
padding: 0 1rem 1rem;
margin: 0;
}
.circle-link {
height: 40px;
width: 40px;
border-radius: 40px;
margin: 8px;
background-color: white;
border: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: 1s ease-out;
}
.circle-link:hover {
transform: translateY(-0.25rem);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}
footer a {
display: flex;
align-items: center;
}
.github-star-badge {
color: #24292e;
display: flex;
align-items: center;
font-size: 12px;
padding: 3px 10px;
border: 1px solid rgba(27,31,35,.2);
border-radius: 3px;
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
margin-left: 4px;
font-weight: 600;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
.github-star-badge:hover {
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
border-color: rgba(27,31,35,.35);
background-position: -.5em;
}
.github-star-badge .material-icons {
height: 16px;
width: 16px;
margin-right: 4px;
}
svg#clouds {
position: fixed;
bottom: -160px;
left: -230px;
z-index: -10;
width: 1920px;
}
/* Responsive Styles */
@media screen and (max-width: 767px) {
.card-container > *:not(.circle-link) ,
.terminal {
width: 100%;
}
.card:not(.highlight-card) {
height: 16px;
margin: 8px 0;
}
.card.highlight-card span {
margin-left: 72px;
}
svg#rocket-smoke {
right: 120px;
transform: rotate(-5deg);
}
}
@media screen and (max-width: 575px) {
svg#rocket-smoke {
display: none;
visibility: hidden;
}
}
</style>
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img
width="40"
alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
/>
<span>Welcome</span>
<div class="spacer"></div>
<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none"/>
<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
</svg>
</a>
</div>
<div class="content" role="main">
<!-- Highlight Card -->
<div class="card highlight-card card-small">
<svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
<path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
<path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
</g>
</g>
</svg>
<span>{{ title }} app is running!</span>
<svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
<path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
</svg>
</div>
<!-- Resources -->
<h2>Resources</h2>
<p>Here are some links to help you get started:</p>
<notifier-container></notifier-container>
<router-outlet></router-outlet>
<!-- Footer -->
<footer>
Love Angular?&nbsp;
<a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
<div class="github-star-badge">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
Star
</div>
</a>
<a href="https://github.com/angular/angular" target="_blank" rel="noopener">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</a>
</footer>
<svg id="clouds" alt="Gray Clouds Background" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
<path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
</svg>
</div>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<app-nav></app-nav>
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
......@@ -7,3 +7,5 @@
/* Import angular-notifier. */
@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