Merge pull request #83 from PonderTeam/3-Edit-Button

3 edit button
PonderTeam · Mar 11, 2024 · 01f8ac1 · 01f8ac1
2 parents c69054d + c3c35b3
commit 01f8ac1
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 12 deletions.
diff --git a/src/app/edit-create-study-set/edit-create-study-set.component.html b/src/app/edit-create-study-set/edit-create-study-set.component.html
@@ -4,12 +4,12 @@
 
 
 <body>
-  <div class = "body-div">
-    <div class = "upper-components">
-      <div class ="first-row">
-        <h1 class = "page-title">Create Study Set</h1>
-        <button mat-flat-button class = "done-button">Done</button>
-      </div>
+<div class = "body-div">
+  <div class = "upper-components">
+    <div class ="first-row">
+      <h1 class = "page-title">Create Study Set</h1>
+      <button mat-flat-button class = "done-button" [routerLink]="['/viewStudySet']">Done</button>
+    </div>
 
       <div class = "second-row">
         <mat-form-field class = "study-set-title">

diff --git a/src/app/edit-create-study-set/edit-create-study-set.component.ts b/src/app/edit-create-study-set/edit-create-study-set.component.ts
@@ -5,14 +5,15 @@ import { FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { RouterLink } from '@angular/router';
 import { CustomTabsModule } from '../custom-tabs/custom-tabs.module';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-edit-create-study-set',
   standalone: true,
-  imports: [CommonModule,MatButtonModule, MatInputModule,MatFormFieldModule,FormsModule,MatButtonToggleModule, CustomTabsModule, MatCardModule, MatIconModule],
+  imports: [CommonModule,MatButtonModule, MatInputModule,MatFormFieldModule,FormsModule,MatButtonToggleModule, CustomTabsModule, MatCardModule, MatIconModule, RouterLink],
   templateUrl: './edit-create-study-set.component.html',
   styleUrl: './edit-create-study-set.component.scss'
 })

diff --git a/src/app/studybuttonmenu/studybuttonmenu.component.html b/src/app/studybuttonmenu/studybuttonmenu.component.html
@@ -1,5 +1,5 @@
 <section class ="study">
-  <button mat-flat-button [matMenuTriggerFor]="menu">
+  <button class="study-button"mat-flat-button [matMenuTriggerFor]="menu">
    <mat-icon>arrow_drop_down</mat-icon> Study
   </button>
   <mat-menu #menu="matMenu">

diff --git a/src/app/studybuttonmenu/studybuttonmenu.component.scss b/src/app/studybuttonmenu/studybuttonmenu.component.scss
@@ -2,7 +2,7 @@
 @use '@angular/material-experimental' as matx;
 
 @mixin theme($theme) {
-  .study {
+  .study-button {
     width: 102px;
     height: 40px;
   }

diff --git a/src/app/viewstudyset/viewstudyset.component.html b/src/app/viewstudyset/viewstudyset.component.html
@@ -1,9 +1,13 @@
 <div class = "view-header">
   <div class="title">
     <h1>Layers of OSI network Model</h1>
+    <button mat-flat-button class = "edit-button" [routerLink]="['/editCreateSet']">
+      <mat-icon>mode_edit</mat-icon>
+      Edit
+    </button>
     <app-studybuttonmenu class ="study-button"></app-studybuttonmenu>
   </div>
-    <p>description</p>
+  <p>description</p>
 </div>
 <div class="tabs">
   <app-tabs>

diff --git a/src/app/viewstudyset/viewstudyset.component.scss b/src/app/viewstudyset/viewstudyset.component.scss
@@ -13,9 +13,18 @@
 
   .title{
     display: flex;
+    flex-direction: row;
     font: mat.get-theme-typography($theme, headline-large);
   }
 
+  .edit-button{
+    color:mat.get-theme-color($theme,primary);
+    align-self: center;
+    height: 40px;
+    width: 102px;
+    margin-left: 16px;
+  }
+
   .study-button {
     align-self: center;
     margin-left: auto;

diff --git a/src/app/viewstudyset/viewstudyset.component.ts b/src/app/viewstudyset/viewstudyset.component.ts
@@ -1,13 +1,15 @@
 import { Component } from '@angular/core';
-import {MatTabsModule} from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
 import { StudybuttonmenuComponent } from '../studybuttonmenu/studybuttonmenu.component';
 import { CustomTabsModule } from '../custom-tabs/custom-tabs.module';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-viewstudyset',
   standalone: true,
-  imports: [MatCardModule,MatTabsModule,StudybuttonmenuComponent, CustomTabsModule],
+  imports: [MatCardModule,StudybuttonmenuComponent, CustomTabsModule, MatIconModule, MatButtonModule, RouterLink],
   templateUrl: './viewstudyset.component.html',
   styleUrl: './viewstudyset.component.scss'
 })