Merge pull request #596 from DigitalExcellence/develop

Release v.1.8.0-beta - 11-4-2021

Author: DaveBouman

.idea/codeStyles/Project.xml

@@ -8,8 +8,8 @@
             "type": "chrome",
             "request": "attach",
             "name": "Attach to Chrome localhost",
-            "port": 9222,
+            "port": 4200,
             "webRoot": "${workspaceFolder}"
         }
     ]
-}
+}

.vscode/launch.json

@@ -5,12 +5,31 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+##  Release v.1.8.0-beta - []
+
+### Added
+
+### Changed
+
+### Deprecated
+
+### Removed
+
+### Fixed
+- Fixed pagination project overview - [#564](https://github.com/DigitalExcellence/dex-frontend/issues/564)
+- Added a close button onto the add project modal, ignore background click - [#558](https://github.com/DigitalExcellence/dex-frontend/issues/558)
+- Fixed input being lost upon session timeout - [#559](https://github.com/DigitalExcellence/dex-frontend/issues/559)
+- Fixed the navbar for longer names, adjusted the loading animation to be smooth. - [#593](https://github.com/DigitalExcellence/dex-frontend/issues/593)
+
+### Security
+
 ##  Release v.1.7.0-beta - 8-10-2021
 
 ### Added
-- Added pagination to own projects page. [#526](https://github.com/DigitalExcellence/dex-frontend/issues/526)
+- Pagination to own projects page. [#526](https://github.com/DigitalExcellence/dex-frontend/issues/526)
 - Back button to add project wizard - [#563](https://github.com/DigitalExcellence/dex-frontend/issues/563)
-- Fixed the wizard long description text area to wrap words. - [#562](https://github.com/DigitalExcellence/dex-frontend/issues/562)
+- Frontend implementation of transfer project ownership - [#581](https://github.com/DigitalExcellence/dex-frontend/issues/581)
+- Option to remove a previously uploaded icon to edit page and wizard[#482](https://github.com/DigitalExcellence/dex-frontend/issues/482)
 
 ### Changed
 - Projects overview not sorting on Likes High > Low [#557](https://github.com/DigitalExcellence/dex-frontend/issues/557)
@@ -23,7 +42,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### Fixed
 - Highlight project modal, not dissapearing when clicking out of it.[#569](https://github.com/DigitalExcellence/dex-frontend/issues/569)
 - Project filter is not cleared anymore after editing project. [#561](https://github.com/DigitalExcellence/dex-frontend/issues/561)
-- Added option to remove a previously uploaded icon to edit page and wizard[#482](https://github.com/DigitalExcellence/dex-frontend/issues/482)
+- The wizard long description text area to wrap words. - [#562](https://github.com/DigitalExcellence/dex-frontend/issues/562)
 
 ### Security
 

CHANGELOG.md

@@ -21,6 +21,9 @@ import { AppLayoutComponent } from './components/app-layout/app-layout.component
 import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
 import { FooterComponent } from './components/footer/footer.component';
 import { ModalDeleteGenericComponent } from './components/modals/modal-delete-generic/modal-delete-generic.component';
+import { ModalInformationGenericComponent } from './components/modals/modal-information-generic/modal-information-generic.component';
+import { ModalPotentialNewOwnerUserEmailConfirmationComponent } from './components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component';
+import { ModalPotentialNewOwnerUserEmailComponent } from './components/modals/modal-potential-new-owner-user-email/modal-potential-new-owner-user-email.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
 import { SearchComponent } from './components/search/search.component';
@@ -29,6 +32,7 @@ import { TokenInterceptor } from './interceptors/auth.interceptor';
 import { HttpErrorInterceptor } from './interceptors/http.interceptor';
 import { HomeModule } from './modules/home/home.module';
 import { ProjectModule } from './modules/project/project.module';
+import { TransferOwnershipComponent } from './modules/project/transfer-ownership/transfer-ownership.component';
 import { SharedModule } from './modules/shared/shared.module';
 
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
@@ -41,7 +45,6 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { QuillModule } from 'ngx-quill';
 
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -52,7 +55,11 @@ import { QuillModule } from 'ngx-quill';
     PrivacyPolicyComponent,
     NotFoundComponent,
     ModalDeleteGenericComponent,
-    SearchComponent
+    SearchComponent,
+    ModalPotentialNewOwnerUserEmailComponent,
+    ModalPotentialNewOwnerUserEmailConfirmationComponent,
+    TransferOwnershipComponent,
+    ModalInformationGenericComponent
   ],
   imports: [
     BsDropdownModule.forRoot(),

src/app/app.module.ts

@@ -21,7 +21,7 @@
   <header *ngIf="!displayContentWithoutLayout" class="header header-6 navbar navbar-expand-md navbar-light">
     <div class="branding">
       <span class="title"
-        ><a aria-label="Back to the Homepage" routerLink=""><img alt="" loading="lazy" src="assets/images/dex-logo-dark-orange.png" /></a
+      ><a aria-label="Back to the Homepage" routerLink=""><img alt="" loading="lazy" src="assets/images/dex-logo-dark-orange.png"/></a
       ></span>
       <p (click)="onClickHeaderBetaText()" class="beta-text">Beta</p>
     </div>
@@ -48,11 +48,12 @@
         <div *ngIf="isAuthenticated" class="profile">
           <div class="btn-group profile-dropdown w-100" dropdown>
             <button aria-controls="dropdown-basic" class="btn dropdown-toggle profile-dropdown" dropdownToggle id="button-basic" type="button">
-              {{ name }} <img alt="" class="profile-picture" loading="lazy" src="assets/images/profile-placeholder.png" />
+              <span class="profile-name">{{ name }}</span>
+              <img alt="" class="profile-picture" loading="lazy" src="assets/images/profile-placeholder.png"/>
               <span class="caret"></span>
             </button>
             <ul *dropdownMenu aria-labelledby="button-basic" class="dropdown-menu" id="dropdown-basic" role="menu">
-              <li role="menuitem"> <a class="dropdown-item" routerLink="user/projects">My Projects</a></li>
+              <li role="menuitem"><a class="dropdown-item" routerLink="user/projects">My Projects</a></li>
               <li role="menuitem"><a (click)="onClickSignout()" class="dropdown-item">Sign Out</a></li>
 
             </ul>
@@ -93,10 +94,10 @@
   </div>
 
   <svg class="background" viewBox="0 0 355.4 374.9" xmlns="http://www.w3.org/2000/svg">
-    <polygon fill="#e85b3f" points="240.9 166 347.7 0 245.2 0 188.7 92.5 240.9 166" />
+    <polygon fill="#e85b3f" points="240.9 166 347.7 0 245.2 0 188.7 92.5 240.9 166"/>
     <polygon
-      fill="#1d1d1b"
-      points="230.9 181 215.8 159.8 112.1 0 5.3 0 122.1 185.3 0 374.9 108.3 374.9 176.7 258.7 246.2 374.9 355.4 374.9 230.9 181"
+        fill="#1d1d1b"
+        points="230.9 181 215.8 159.8 112.1 0 5.3 0 122.1 185.3 0 374.9 108.3 374.9 176.7 258.7 246.2 374.9 355.4 374.9 230.9 181"
     />
   </svg>
 

src/app/components/app-layout/app-layout.component.html

@@ -35,6 +35,7 @@
   .right {
     display: flex;
   }
+
   .header-nav {
     display: flex;
 
@@ -52,18 +53,16 @@
   }
 
   .content {
+    grid-template-columns: auto 1fr auto;
     @include media-breakpoint-down(sm) {
       .search-bar {
         display: none;
       }
     }
-    @include media-breakpoint-down(md) {
-      grid-template-columns: auto 1fr auto !important;
-    }
     @include media-breakpoint-up(md) {
       display: grid !important;
       gap: 10px;
-      grid-template-columns: auto 1fr 200px;
+
       .search-bar-mobile {
         display: none;
       }
@@ -109,6 +108,7 @@
       width: 90px;
     }
   }
+
   .navbar-toggler {
     border: none;
   }
@@ -160,8 +160,9 @@
     -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
     -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
+    user-select: none;
+    /* Non-prefixed version, currently
+                                     supported by Chrome, Edge, Opera and Firefox */
   }
 
   .account {
@@ -177,7 +178,7 @@
     display: flex;
     align-items: center;
     margin-left: auto;
-    margin-right: 24px;
+
     @include media-breakpoint-down(sm) {
       margin-left: 0;
     }
@@ -190,6 +191,15 @@
       width: 30px;
       border-radius: 50%;
     }
+
+    .profile-name {
+      display: inline-block;
+      vertical-align: middle;
+      white-space: nowrap;
+      max-width: 280px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   /*
@@ -339,6 +349,10 @@
 
   a {
     cursor: pointer;
+
+    &:active {
+      background-color: $light-mode-grey-secondary;
+    }
   }
 
   @include media-breakpoint-down(sm) {

src/app/components/app-layout/app-layout.component.scss

@@ -0,0 +1,16 @@
+<div class="modal-information-container">
+  <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
+      <span aria-hidden="true">&times;</span>
+  </button>
+  <div class="modal-body">
+      <h2>{{titleText}}</h2>
+      <p [innerHTML]="mainText"></p>
+      <div class="row">
+          <div class="col-12 modal-buttons">
+              <button type="button" class="cancel" (click)="bsModalRef.hide()">{{secondaryButtonText}}</button>
+              <button type="button" class="primary" (click)="onClickCta()">{{ctaButtonText}}</button>
+          </div>
+      </div>
+
+  </div>
+</div>

src/app/components/modals/modal-information-generic/modal-information-generic.component.html

@@ -0,0 +1,55 @@
+/*
+ *
+ *  Digital Excellence Copyright (C) 2020 Brend Smits
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Lesser General Public License as published
+ *   by the Free Software Foundation version 3 of the License.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty
+ *   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *   See the GNU Lesser General Public License for more details.
+ *
+ *   You can find a copy of the GNU Lesser General Public License
+ *   along with this program, in the LICENSE.md file in the root project directory.
+ *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+ *
+ */
+ @import "assets/styles/variables";
+
+ .modal-body {
+     position: unset;
+ }
+
+ .modal-information-container {
+   background: #f8f8f8;
+   width: 100%;
+   max-width: 600px;
+   border-radius: 6px;
+   border: none;
+   outline: none;
+   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+   padding: 15px;
+
+   button.close {
+     border: none;
+     background: none;
+         display: flex;
+         float: right;
+         &:focus,
+         &:active {
+             border: none;
+             outline: none;
+         }
+     }
+ }
+
+ .modal-buttons {
+     display: flex;
+     justify-content: flex-end;
+
+     button:nth-child(1) {
+         margin-right: 15px;
+     }
+ }

src/app/components/modals/modal-information-generic/modal-information-generic.component.scss

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+@Component({
+  selector: 'app-modal-information-generic',
+  templateUrl: './modal-information-generic.component.html',
+  styleUrls: ['./modal-information-generic.component.scss']
+})
+export class ModalInformationGenericComponent {
+
+  @Output() cta = new EventEmitter<boolean>(true);
+
+  public readonly titleText = '';
+  public readonly mainText = '';
+  public readonly ctaButtonText = '';
+  public readonly secondaryButtonText = '';
+
+  constructor(
+    public bsModalRef: BsModalRef,
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Method which triggers when remove is confirmed.
+   * Emits true via the output property and closes the modal.
+   */
+  public onClickCta(): void {
+    this.cta.emit(true);
+    this.bsModalRef.hide();
+  }
+
+}

src/app/components/modals/modal-information-generic/modal-information-generic.component.ts

@@ -0,0 +1,31 @@
+<!--
+
+  Digital Excellence Copyright (C) 2020 Brend Smits
+
+   This program is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Lesser General Public License as published
+   by the Free Software Foundation version 3 of the License.
+
+   This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty
+   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+   See the GNU Lesser General Public License for more details.
+
+   You can find a copy of the GNU Lesser General Public License
+   along with this program, in the LICENSE.md file in the root project directory.
+   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+
+ -->
+<div id="overlay" (click)="this.bsModalRef.hide();"></div>
+
+<div class="modal-potential-new-owner-user-email-confirmation-container">
+  <div class="modal-body">
+    <h6>Are you sure you want to ask project transfership to {{email}}?</h6>
+    <div class="row">
+      <div class="col-12 modal-buttons">
+        <button type="button" class="cancel" (click)="bsModalRef.hide()">Cancel</button>
+        <button type="button" class="primary" (click)="onAcceptClicked()">Accept</button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/modals/modal-potential-new-owner-user-email-confirmation/modal-potential-new-owner-user-email-confirmation.component.html

@@ -0,0 +1,29 @@
+.modal-potential-new-owner-user-email-confirmation-container {
+  padding: 10px;
+  z-index: 1151;
+  position: relative;
+  background-color: #fff;
+
+  h6 {
+    width: 90%;
+    margin-bottom: 10px;
+  }
+
+  button {
+    margin-right: 10px;
+  }
+}
+
+#overlay {
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 0.5;
+  z-index: 1150;
+  cursor: pointer;
+  transition: opacity .5s ease-in;
+}