Merge pull request #78 from soft-eng-practicum/members-list-functionality

cengique · web-flow · commit 7e8278270f31 · 2024-07-11T18:15:59.000+03:00
Members list functionality
diff --git a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-following/dashboard-following.component.scss b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-following/dashboard-following.component.scss
@@ -1,3 +1,7 @@
 .card-header {
-    background-color: var(--background-color-tertiary);
-  }
+  background-color: var(--background-color-tertiary);
+}
+
+.nav-item:hover {
+  cursor: pointer;
+}
diff --git a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-quickstart/dashboard-quickstart.component.scss b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-quickstart/dashboard-quickstart.component.scss
@@ -1,9 +1,13 @@
 .card-header {
-    background-color: var(--background-color-tertiary);
-  }
-  
-  .btn-sm {
-    background-color: var(--button-background-color);
-    color: var(--primary-color);
-    border:none;
-  }
+  background-color: var(--background-color-tertiary);
+}
+
+.btn-sm {
+  background-color: var(--button-background-color);
+  color: var(--primary-color);
+  border:none;
+}
+
+.nav-item:hover {
+  cursor: pointer;
+}
diff --git a/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-social/dashboard-social.component.scss b/src/Analysim.Web/ClientApp/src/app/dashboard/dashboard-social/dashboard-social.component.scss
@@ -1,3 +1,7 @@
 .card-header {
-    background-color: var(--background-color-tertiary);
-  }
+  background-color: var(--background-color-tertiary);
+}
+
+.nav-item:hover {
+  cursor: pointer;
+}
diff --git a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.html b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.html
@@ -8,13 +8,13 @@
         <div class="row justify-content-center">
           <!-- Grid column Start-->
           <div class="col-md-4 mb-md-0 mb-3 footer-about">
-            <div class="footer-about">
+            <div class="footer-about" id="about">
               About
             </div>
             <!-- Links Start-->
             <ul class="list-unstyled">
               <li>
-                <a class="footer-link text-white" [routerLink]='["/contactus"]' >Contact Us</a>
+                <a class="footer-link text-white" [routerLink]='["/contactus"]'>Contact Us</a>
               </li>
               <li>
                 <a class="footer-link text-white" [routerLink]='["/aboutus"]'>Learn More</a>
diff --git a/src/Analysim.Web/ClientApp/src/app/footer/footer.component.scss b/src/Analysim.Web/ClientApp/src/app/footer/footer.component.scss
@@ -29,7 +29,7 @@ line-height: 0px;
         margin-bottom: 15px;
         //font-weight: 500;
         font-size: 18px;
-        width: min-content; 
+        width: min-content;
     }
 
     .footer-header {
@@ -64,6 +64,10 @@ line-height: 0px;
         }
     }
 
+    #about {
+        font-weight: bold;
+    }
+
     .footer-about {
         text-align: left;
     }
diff --git a/src/Analysim.Web/ClientApp/src/app/login/login.component.html b/src/Analysim.Web/ClientApp/src/app/login/login.component.html
@@ -52,7 +52,7 @@ <h4 class="card-title text-center mb-4 mt-1">Sign in</h4>
                         
                                                 <!-- Form Login-->
                                                 <div class="form-group">
-                                                    <button type="submit" class="btn btn-primary-new btn-block" value="Submit" [disabled]="loginForm.invalid">
+                                                    <button type="submit" class="btn-primary btn-block" value="Submit" [disabled]="loginForm.invalid">
                                                         <div *ngIf="!isLoading">
                                                             <span>Login</span>
                                                         </div>
diff --git a/src/Analysim.Web/ClientApp/src/app/navbar/navbar.component.scss b/src/Analysim.Web/ClientApp/src/app/navbar/navbar.component.scss
@@ -52,9 +52,18 @@
   }
   
   #navbarDropdownMenuLink {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-width: 150px;
     text-decoration:none;
   }
+
+  #navbarDropdownMenuLink > * {
+    margin-right: 10px;
+  }
   
   .dropdown-item:hover {
     background-color: var(--background-color-tertiary) !important;
+    cursor: pointer;
   }
diff --git a/src/Analysim.Web/ClientApp/src/app/profile/profile.component.html b/src/Analysim.Web/ClientApp/src/app/profile/profile.component.html
@@ -46,7 +46,7 @@ <h5 class="card-title text-center mb-1">{{ profile.userName }}</h5>
                 <!-- Project Tab -->
                 <li class="nav-item">
                   <a class="nav-link d-flex align-items-center" [class.active]="tabActive[0]" (click)="changeTab(0)">
-                    Project
+                    Projects
                     <span class="badge badge font-weight-light ml-1">
                       {{projects.length}}
                     </span>
@@ -64,7 +64,7 @@ <h5 class="card-title text-center mb-1">{{ profile.userName }}</h5>
                 <!-- Follower Tab -->
                 <li class="nav-item">
                   <a class="nav-link d-flex align-items-center" [class.active]="tabActive[2]" (click)="changeTab(2)">
-                    Follower
+                    Followers
                     <span class="badge badge-primary font-weight-light ml-1">
                       {{followers.length}}
                     </span>
diff --git a/src/Analysim.Web/ClientApp/src/app/profile/profile.component.scss b/src/Analysim.Web/ClientApp/src/app/profile/profile.component.scss
@@ -9,11 +9,15 @@
 }
 
 .btn{
-    background-color:var(--button-background-color);
-    color:var(--primary-color);
+  background-color:var(--button-background-color);
+  color:var(--primary-color);
 }
 
 .badge{
-    background-color:var(--button-background-color);
-    color:white; 
+  background-color:var(--button-background-color);
+  color:white; 
 }
+
+.nav-item:hover {
+  cursor: pointer;
+}
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-notebook-folder/modal-notebook-folder.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-notebook-folder/modal-notebook-folder.component.html
@@ -13,9 +13,9 @@ <h5 class="modal-title">Create Folder</h5>
                 <input formControlName="folderName" type="text" class="form-control" placeholder="" [class.invalid]="folderName.touched && folderName.invalid" [class.valid]="folderName.valid" [readOnly]="isLoading" required>
                 <div *ngIf="folderName.touched && folderName.errors" class="text-danger">
                     <span [hidden]="!folderName.errors?.['minlength']">Minimum 1 character</span>
-                    <span [hidden]="!folderName.errors?.['maxlength']">Maximum 20 character</span>
-                    <span [hidden]="!folderName.errors?.['noMatch']">Folder Already Exist</span>
-                    <span [hidden]="!folderName.errors?.['noSpaceSpecial']">No Space or Special Character</span>
+                    <span [hidden]="!folderName.errors?.['maxlength']">Maximum 20 characters</span>
+                    <span [hidden]="!folderName.errors?.['noMatch']">Folder Already Exists</span>
+                    <span [hidden]="!folderName.errors?.['noSpaceSpecial']">No Spaces or Special Characters</span>
                 </div>
             </div>
         </div>
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project/modal-member-list/modal-member-list.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project/modal-member-list/modal-member-list.component.html
@@ -9,9 +9,12 @@ <h5 class="modal-title">Member List</h5>
 
     <!-- Body -->
     <div class="modal-body">
-        <ul class="">
-            <li class="" *ngFor="let member of projectUsers">
-                {{ member.user.userName }}
+        <ul class="project-authors-list">
+            <li class="project-author" *ngFor='let member of projectUsers | projectMember:"owner"' [routerLink]='["/profile/" + member.user.userName]' (click)="closeModal()">
+                <img class="project-author-thumbnail" [src]="member.user | profileImage"/>
+                <div class="project-author-name">
+                  {{member.user.userName}} - <i>{{member.userRole}}</i>
+                </div>
             </li>
         </ul>
     </div>
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project/modal-member-list/modal-member-list.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project/modal-member-list/modal-member-list.component.scss
@@ -2,6 +2,7 @@
     color: var(--button-font-color);
     background-color: var(--button-background-color);
     border: none;
+    border: 1px solid var(--button-background-color);
 
     &:hover, &:active {
         color: var(--button-font-color-secondary-hov) !important;
@@ -11,3 +12,32 @@
     }
 }
 
+.project-authors-list {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+
+    .project-author {
+      display: flex;
+      cursor: pointer;
+      margin-right: 10px;
+
+      &:hover {
+        .project-author-name {
+          color: #0056b3;
+          text-decoration: underline;
+        }
+      }
+
+      .project-author-thumbnail {
+        width: 25px;
+        height: 25px;
+        border: 1px solid black;
+        border-radius: 40px;
+        margin-right: 5px;
+        margin-bottom: 10px;
+      }
+    }
+  }
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.html
@@ -10,7 +10,7 @@ <h3 class="project-title" *ngIf="(project.route | route:'projectname') as projec
             <ul class="project-authors-list">
               <li class="project-author" *ngFor='let members of project.projectUsers | projectMember:"owner"'
                 [routerLink]='["/profile/" + members.user.userName]'>
-                <img class="project-author-thumbnail" src="../../../assets/img/default-profile.png" />
+                <img class="project-author-thumbnail" [src]="members.user | profileImage"/>
                 <div class="project-author-name">
                   {{members.user.userName}}
                 </div>
@@ -133,7 +133,7 @@ <h3 class="project-title" *ngIf="(project.route | route:'projectname') as projec
               [ngClass]='{"active": toggleView == "Publications"}' (click)="showPublication()">
           </div>
           <div class="project-view-interaction">
-            <input class="fork" type="button" value="Fork Project" (click)="forkProject()">
+            <button class="btn-primary" (click)="forkProject()">Fork Project</button>
             <button type="button" *ngIf="!toggleMoreOption" (click)="toggleMoreOption = true;">
               More <i class="fa-solid fa-arrow-down"></i>
             </button>
diff --git a/src/Analysim.Web/ClientApp/src/app/register/register.component.html b/src/Analysim.Web/ClientApp/src/app/register/register.component.html
@@ -147,7 +147,7 @@ <h4 class="card-title text-center">Sign up</h4>
 
                                               <!-- Form Group Register -->
                                               <div class="form-group">
-                                                <button type="submit" class="btn btn-primary-new btn-block" value="Submit"
+                                                <button type="submit" class="btn-primary btn-block" value="Submit"
                                                         [disabled]="insertForm.invalid">
                                                   <div *ngIf="!isLoading">
                                                     <span>Register</span>
diff --git a/src/Analysim.Web/ClientApp/src/app/shared/profile-card/profile-card.component.html b/src/Analysim.Web/ClientApp/src/app/shared/profile-card/profile-card.component.html
@@ -24,15 +24,15 @@
                     <!-- Follow/UnFollow User -->
                     <div class="d-inline-flex ml-auto" *ngIf="currentUser == null || ( currentUser != null && profile.id != currentUser.id)">
                         <!-- Follow User Button -->
-                        <button class="btn btn-primary float-right" type="button" *ngIf="!isFollowing" (click)="followUser()">
+                        <button class="btn-primary" type="button" *ngIf="!isFollowing" (click)="followUser()">
                             Follow
                             <span class="badge badge-light font-weight-light ml-1">
                                 {{profile.followers.length}}
                             </span>
                         </button>
             
                         <!-- UnFollow User Button -->
-                        <button class="btn btn-primary float-right" type="button" *ngIf="isFollowing" (click)="unFollowUser()">
+                        <button class="btn-primary" type="button" *ngIf="isFollowing" (click)="unFollowUser()">
                             Unfollow
                             <span class="badge badge-light font-weight-light ml-1">
                                 {{profile.followers.length}}
diff --git a/src/Analysim.Web/ClientApp/src/app/shared/profile-card/profile-card.component.scss b/src/Analysim.Web/ClientApp/src/app/shared/profile-card/profile-card.component.scss
@@ -3,4 +3,18 @@
   
 }
 
+.user-follow, .user-unfollow {
+  margin-right: 10px;
+  padding: 5px 10px;
+  min-width: 90px;
+  color: var(--button-font-color);
+  background-color: var(--button-background-color);
+  border: 1px solid var(--button-font-color);
 
+  &:hover {
+    color: var(--button-font-color-secondary-hov);
+    background-color: var(--button-background-color-secondary-hov);
+    border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary-hov);
+    text-decoration: none;
+  }
+}
diff --git a/src/Analysim.Web/ClientApp/src/app/shared/project-card/project-card.component.html b/src/Analysim.Web/ClientApp/src/app/shared/project-card/project-card.component.html
@@ -12,15 +12,15 @@
       <!-- Follow/UnFollow Project -->
       <div class="project-follow-option">
         <!-- Follow Project Button -->
-        <button class="project-follow" type="button" *ngIf="!isFollowing" (click)="followProject()">
+        <button class="btn-primary" type="button" *ngIf="!isFollowing" (click)="followProject()">
           Follow
           <span class="badge badge-light font-weight-light ml-1">
             {{ project | role:"follower" }}
           </span>
         </button>
   
         <!-- UnFollow Project Button -->
-        <button class="project-unfollow" type="button" *ngIf="isFollowing" (click)="unFollowProject()">
+        <button class="btn-primary" type="button" *ngIf="isFollowing" (click)="unFollowProject()">
           Unfollow
           <span class="badge badge-light font-weight-light ml-1">
             {{ project | role:"follower" }}
diff --git a/src/Analysim.Web/ClientApp/src/app/shared/project-card/project-card.component.scss b/src/Analysim.Web/ClientApp/src/app/shared/project-card/project-card.component.scss
@@ -1,12 +1,6 @@
 .project-card-container {
   border: var(--border-width) var(--border-style) var(--border-color);
 
-  .project-unfollow {
-    background-color: var(--button-background-color);
-    color: var(--primary-color);
-    border: none;
-  }
-
   .project-card-header {
     padding: .75rem 1.25rem;
     margin-bottom: 0;
@@ -31,27 +25,19 @@
     .project-follow-option {
       margin-left: auto;
 
-      .project-follow {
+      .project-follow, .project-unfollow {
+        margin-right: 10px;
+        padding: 5px 10px;
+        min-width: 90px;
         color: var(--button-font-color);
         background-color: var(--button-background-color);
-        border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);
-        padding: 6px 12px;
-        font-size: 16px;
-        line-height: 1.5;
-        border-radius: 4px;
-        display: block;
-        float: right !important;
+        border: 1px solid var(--button-font-color);
 
         &:hover {
           color: var(--button-font-color-secondary-hov);
           background-color: var(--button-background-color-secondary-hov);
           border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary-hov);
-
-          span {
-            color: var(--button-font-color);
-            background-color: var(--button-background-color-secondary);
-            border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);
-          }
+          text-decoration: none;
         }
       }
     }
diff --git a/src/Analysim.Web/ClientApp/src/assets/styles/abstracts/_variables.scss b/src/Analysim.Web/ClientApp/src/assets/styles/abstracts/_variables.scss
@@ -15,6 +15,7 @@
   --border-radius: 4px;
   //Buttons
   --button-background-color: #256D85;
+  --button-background-color-disabled: #507e8e;
   --button-border-color: #256D85;
   --button-border-width: 1px;
   --button-border-style: solid;
@@ -23,6 +24,7 @@
   --button-background-color-hov: white;
   --button-border-color-hov: #256D85;
   --button-font-color-hov: #256D85;
+  --button-padding: 4px;
 
   //Button Secondary
   --button-background-color-secondary: #002B5B;
diff --git a/src/Analysim.Web/ClientApp/src/styles.scss b/src/Analysim.Web/ClientApp/src/styles.scss

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ line-height: 0px;`
`29`	`29`	`margin-bottom: 15px;`
`30`	`30`	`//font-weight: 500;`
`31`	`31`	`font-size: 18px;`
`32`		`- width: min-content;`
	`32`	`+ width: min-content;`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`.footer-header {`
`@@ -64,6 +64,10 @@ line-height: 0px;`
`64`	`64`	`}`
`65`	`65`	`}`
`66`	`66`
	`67`	`+ #about {`
	`68`	`+ font-weight: bold;`
	`69`	`+ }`
	`70`	`+`
`67`	`71`	`.footer-about {`
`68`	`72`	`text-align: left;`
`69`	`73`	`}`
Original file line number	Diff line number	Diff line change
`@@ -52,9 +52,18 @@`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`#navbarDropdownMenuLink {`
	`55`	`+ display: flex;`
	`56`	`+ justify-content: space-between;`
	`57`	`+ align-items: center;`
	`58`	`+ min-width: 150px;`
`55`	`59`	`text-decoration:none;`
`56`	`60`	`}`
	`61`	`+`
	`62`	`+ #navbarDropdownMenuLink > * {`
	`63`	`+ margin-right: 10px;`
	`64`	`+ }`
`57`	`65`
`58`	`66`	`.dropdown-item:hover {`
`59`	`67`	`background-color: var(--background-color-tertiary) !important;`
	`68`	`+ cursor: pointer;`
`60`	`69`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,11 +9,15 @@`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.btn{`
`12`		`- background-color:var(--button-background-color);`
`13`		`- color:var(--primary-color);`
	`12`	`+ background-color:var(--button-background-color);`
	`13`	`+ color:var(--primary-color);`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`.badge{`
`17`		`- background-color:var(--button-background-color);`
`18`		`- color:white;`
	`17`	`+ background-color:var(--button-background-color);`
	`18`	`+ color:white;`
`19`	`19`	`}`
	`20`	`+`
	`21`	`+.nav-item:hover {`
	`22`	`+ cursor: pointer;`
	`23`	`+}`