Added about page

VatMart · Aug 6, 2024 · b0d7c66 · b0d7c66
1 parent 622cabb
commit b0d7c66
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 47 deletions.
diff --git a/src/app/component/canvas/canvas.component.ts b/src/app/component/canvas/canvas.component.ts
@@ -6,6 +6,7 @@ import {GraphViewService} from "../../service/graph/graph-view.service";
 import {PixiManagerService} from "../../service/manager/pixi-manager.service";
 import {LocalStorageService} from "../../service/local-storage.service";
 import {FileService} from "../../service/file.service";
+import {ConfService} from "../../service/config/conf.service";
 
 /**
  * Component for the main canvas.
@@ -45,6 +46,8 @@ export class CanvasComponent implements AfterViewInit, OnDestroy {
     if (this.localStorageService.isAppDataSaved()) {
       this.localStorageService.loadAppData(); // Initialize app data from local storage
     }
+    // Set default grid
+    this.stateService.changeShowGrid(ConfService.SHOW_GRID);
 
     // ----------------- TODO Remove below -----------------
     (window as any).__PIXI_DEVTOOLS__ = { // TODO remove in production

diff --git a/src/app/component/dialog/about-page-dialog/about-page-dialog.component.css b/src/app/component/dialog/about-page-dialog/about-page-dialog.component.css
@@ -0,0 +1,33 @@
+.about-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  height: 95%;
+  background-color: white;
+  border-radius: 25px;
+  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+}
+
+.header-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 20px;
+}
+
+h1 {
+  text-align: center;
+  font-weight: 200;
+}
+
+.about-page-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: auto;
+  padding: 20px;
+}
+
diff --git a/src/app/component/dialog/about-page-dialog/about-page-dialog.component.html b/src/app/component/dialog/about-page-dialog/about-page-dialog.component.html
@@ -0,0 +1,37 @@
+<div class="about-page">
+  <header class="header-container">
+    <h1>About GraphWeb</h1>
+    <p-button icon="pi pi-times" class="move-right" [rounded]="true" [text]="true" severity="danger"
+    (onClick)="ref.close();"/>
+  </header>
+  <div class="about-page-content">
+    <div class="subheader-content">
+      <h3>What is GraphWeb?</h3>
+    </div>
+    <p>
+      <i>GraphWeb</i> is a web application that allows users to visualize and interact with graphs and algorithms.
+      The application provides a user-friendly interface for creating, editing, and analyzing graphs and matrices.
+      Users can create graphs in several ways; customize the appearance of the graph. The application also provides<
+      a set of algorithms that can be applied to the graph.<br>
+      <br>
+      <i>GraphWeb</i> is developed by a qualified software engineer <i>Marat Vataev</i>.
+    </p>
+    <div class="subheader-content">
+      <h3>The goal of project</h3>
+      <p></p>
+    </div>
+    <p>
+      The goal of <i>GraphWeb</i> is to simplify the process of graph visualization and manipulation for users
+      ranging from students and educators to researchers and developers. The application provides a comprehensive
+      platform for graph creation and analysis, enabling users to visualize and understand graph structures with ease.
+    </p>
+    <div class="subheader-content">
+      <h3>Contact</h3>
+    </div>
+      <p>If you faced with problems, or have recommendation feel free to reach me at:</p>
+      <ul>
+        <li>Email: <a href="mailto:your.email@example.com">vataevmarat&#64;hotmail.com</a></li>
+        <li>GitHub: <a href="https://github.com/VatMart" target="_blank">VatMart</a></li>
+      </ul>
+  </div>
+</div>
diff --git a/src/app/component/dialog/about-page-dialog/about-page-dialog.component.ts b/src/app/component/dialog/about-page-dialog/about-page-dialog.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import {Button} from "primeng/button";
+import {DynamicDialogRef} from "primeng/dynamicdialog";
+
+@Component({
+  selector: 'app-about-page-dialog',
+  standalone: true,
+  imports: [
+    Button
+  ],
+  templateUrl: './about-page-dialog.component.html',
+  styleUrl: './about-page-dialog.component.css'
+})
+export class AboutPageDialogComponent {
+
+  constructor(public ref: DynamicDialogRef) {
+  }
+
+}
diff --git a/src/app/component/tab-nav/tab-nav.component.css b/src/app/component/tab-nav/tab-nav.component.css
@@ -248,32 +248,4 @@
 }
 
 /* Styling when alg mode is on */
-:host {
-  /* Mobile tab nav */
-  ::ng-deep .alg-background .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-    background-color: var(--alg-bg-color) !important;
-    color: var(--alg-button-color) !important;
-    border-color: var(--alg-hover-color) !important;
-  }
-  ::ng-deep .alg-background .p-tabmenu-nav-content {
-    background-color: var(--alg-bg-color) !important;
-    color: var(--alg-button-color) !important;
-    border-color: var(--alg-hover-color) !important;
-  }
-  ::ng-deep .alg-background .p-tabmenu .p-tabmenu-nav {
-    background-color: var(--alg-bg-color) !important;
-    color: var(--alg-button-color) !important;
-    border-color: var(--alg-hover-color) !important;
-  }
-  ::ng-deep .alg-background .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-    background-color: var(--alg-bg-color) !important;
-    color: var(--main-blue-light-color) !important;
-    border-color: var(--main-blue-light-color) !important;
-  }
-  /* Mobile sidebar */
-  ::ng-deep .alg-background {
-    background-color: var(--alg-bg-color) !important;
-    color: var(--alg-button-color) !important;
-    border-color: var(--alg-hover-color) !important;
-  }
-}
+c
diff --git a/src/app/component/tool-bar/tool-bar.component.css b/src/app/component/tool-bar/tool-bar.component.css
@@ -24,7 +24,23 @@
   display: flex;
   align-items: center;
   padding-inline: 10px;
-  border-right: var(--main-border-color) 1px solid;
+  border-radius: 10px;
+}
+
+.logo-container:hover {
+  background-color: var(--main-hover-color);
+}
+
+.logo-container:active {
+  background-color: var(--alg-hover-color);
+}
+
+.logo-container-alg:hover {
+  background-color: var(--alg-hover-color) !important;
+}
+
+.logo-container-alg:active {
+  background-color: #949494 !important;
 }
 
 .image-container {

diff --git a/src/app/component/tool-bar/tool-bar.component.html b/src/app/component/tool-bar/tool-bar.component.html
@@ -10,7 +10,9 @@
     </defs>
   </svg>
 
-  <span class="logo-container" [ngClass]="isAlgorithmModeActive ? 'alg-background' : ''">
+  <p-menu #websiteMenu [model]="websiteMenuItems" [popup]="true"></p-menu>
+  <span class="logo-container" [ngClass]="isAlgorithmModeActive ? 'alg-background logo-container-alg' : ''"
+        (click)="websiteMenu.toggle($event)">
     <span class="image-container" [ngClass]="isAlgorithmModeActive ? 'image-container-alg' : ''">
       <img [ngSrc]="isAlgorithmModeActive ? 'assets/logo.png' : 'assets/logo_white.png'" alt="Graph Web Logo"
            class="logo-toolbar" height="251" width="249"/>
@@ -19,8 +21,10 @@
     <label class="logo-label" *ngIf="!isMobileDevice">GraphWeb</label>
   </span>
 
-  <!-- For debugging. TODO hide on prod -->
-  <span *ngIf="!isMobileDevice" class="coordinates-panel" [ngClass]="isAlgorithmModeActive ? 'alg-background' : ''">
+  <div class="alg-separator"></div>
+
+  <!-- For debugging -->
+  <span *ngIf="!isMobileDevice && false"  class="coordinates-panel" [ngClass]="isAlgorithmModeActive ? 'alg-background' : ''">
     <span>X: <span>{{ xCursor | number:'1.0-0' }}</span></span>
     <span>Y: <span>{{ yCursor | number:'1.0-0' }}</span></span>
   </span>

diff --git a/src/app/component/tool-bar/tool-bar.component.ts b/src/app/component/tool-bar/tool-bar.component.ts
@@ -21,6 +21,8 @@ import {LocalStorageService} from "../../service/local-storage.service";
 import {Algorithm} from "../../model/Algorithm";
 import {SvgIconService} from "../../service/svg-icon.service";
 import {SvgIconDirective} from "../../directive/svg-icon.directive";
+import {DialogService} from "primeng/dynamicdialog";
+import {AboutPageDialogComponent} from "../dialog/about-page-dialog/about-page-dialog.component";
 
 /**
  * Toolbar component.
@@ -35,22 +37,8 @@ import {SvgIconDirective} from "../../directive/svg-icon.directive";
 })
 export class ToolBarComponent implements OnInit, OnDestroy {
   private subscriptions!: Subscription;
-
   isMobileDevice: boolean;
 
-  // Buttons states
-  isAddVertexButtonActive: boolean = false;
-  isAddVertexButtonPressed: boolean = false;
-  isAddEdgesButtonActive: boolean = false;
-  isAddEdgesButtonPressed: boolean = false;
-
-  // Gradient state
-  useAddVertexGradient: boolean = false;
-  useAddEdgesGradient: boolean = false;
-  useUndoGradient: boolean = false;
-  useRedoGradient: boolean = false;
-  useClearGradient: boolean = false;
-
   // Undo/Redo buttons
   canUndo: boolean = false;
   canRedo: boolean = false;
@@ -59,6 +47,9 @@ export class ToolBarComponent implements OnInit, OnDestroy {
   xCursor: number = 0;
   yCursor: number = 0;
 
+  // Website menu items
+  websiteMenuItems: MenuItem[] | undefined;
+
   // Algorithm dropdown button (only for desktop version)
   algorithmsItems: MenuItem[] | undefined;
 
@@ -86,6 +77,18 @@ export class ToolBarComponent implements OnInit, OnDestroy {
   // Gradient colors
   gradientColorStart: string = '#FFC618';
   gradientColorEnd: string = '#ff0000';
+  // Buttons states
+  isAddVertexButtonActive: boolean = false;
+  isAddVertexButtonPressed: boolean = false;
+  isAddEdgesButtonActive: boolean = false;
+  isAddEdgesButtonPressed: boolean = false;
+
+  // Gradient state
+  useAddVertexGradient: boolean = false;
+  useAddEdgesGradient: boolean = false;
+  useUndoGradient: boolean = false;
+  useRedoGradient: boolean = false;
+  useClearGradient: boolean = false;
 
   // Algorithm mode state
   isAlgorithmModeActive: boolean = false;
@@ -101,6 +104,7 @@ export class ToolBarComponent implements OnInit, OnDestroy {
               private fileService: FileService,
               private localStorageService: LocalStorageService,
               private primengConfig: PrimeNGConfig,
+              private dialogService: DialogService,
               protected svgIconService: SvgIconService,
               protected cdr: ChangeDetectorRef) {
     this.isMobileDevice = this.environmentService.isMobile();
@@ -113,6 +117,27 @@ export class ToolBarComponent implements OnInit, OnDestroy {
     this.svgIconService.addIcon('step-back-icon', '<svg xmlns="http://www.w3.org/2000/svg" height="38" viewBox="100 -850 750 750" width="38" fill="currentColor"><path d="M220-240v-480h66.67v480zm520 0L389.33-480 740-720zm-66.67-126.67v-226.66L507.33-480z"/></svg>');
 
     this.initSubscriptions();
+    // Init website menu items
+    this.websiteMenuItems = [
+      {
+        label: 'GraphWeb',
+        items: [
+          {
+            label: 'Welcome Page',
+            command: () => {
+              this.openWelcomePage();
+            }
+          },
+          {
+            label: 'About',
+            command: () => {
+              this.openAboutDialog();
+            }
+          }
+        ]
+      }
+    ];
+
     // Init algorithm dropdown items
     this.algorithmsItems = [
       {
@@ -388,6 +413,31 @@ export class ToolBarComponent implements OnInit, OnDestroy {
     );
   }
 
+  private openAboutDialog() {
+    this.dialogService.open(AboutPageDialogComponent, {
+      contentStyle: {
+        overflow: 'auto',
+        ['background-image']: 'url(\'../../../../assets/img/AboutPageBackground.webp\')',
+        ['background-size']: 'cover',
+        ['background-repeat']: 'no-repeat',
+        ['background-position']: 'center',
+        ['align-content']: 'center',
+        padding: '2% 5%'
+  },
+      width: '95vw',
+      height: '95vh',
+      modal: true,
+      focusOnShow: false,
+      dismissableMask: true,
+      showHeader: false,
+    });
+  }
+
+  private openWelcomePage() {
+    console.log("Welcome page opened"); // TODO remove
+    // TODO
+  }
+
   onToggleAddVertexButton() {
     this.switchAddVertexButton();
     this.stateService.changeAddVertexModeState(this.isAddVertexButtonActive);

diff --git a/src/assets/img/AboutPageBackground.webp b/src/assets/img/AboutPageBackground.webp