feat: 1197 User guide side panel

proxy.conf.dlcmtest-local.js

 module.exports = {
-  "/api/docs": {
-    "target": "https://e-research-test.unige.ch/dlcm-test/administration",
-    "pathRewrite": {
-      "^/api": ""
-    }
-  },
-  "/api/admin": {
-    "target": "https://e-research-test.unige.ch/dlcm-test/administration",
-    "logLevel": "info",
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    }
-  },
-  "/api/preservation-planning": {
-    "target": "https://e-research-test.unige.ch/dlcm-test/administration",
-    "logLevel": "info",
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    }
-  },
-  "/api/ingest": {
-    "target": "https://e-research-test.unige.ch/dlcm-test/ingestion",
-    "logLevel": "info",
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    }
-  },
-  "/api/preingest": {
-    "target": "https://e-research-test.unige.ch/dlcm-test/ingestion",
-    "logLevel": "info",
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    }
-  },
-  "/api/access": {
-    "target": "https://e-research-test.unige.ch/dlcm-test/accession",
-    "logLevel": "info",
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    }
-  },
-  "/api/archival-storage": {
-    "target": "https://e-research-test.unige.ch/dlcm-test/storagion",
-    "pathRewrite": {
-      "^/api": ""
-    }
-  },
-  "/api/rss": {
-    "target": "https://www.unige.ch/feed",
-    "logLevel": "info",
-    "secure": "false",
-    "pathRewrite": {
-      "^/api": ""
+    "/api/docs": {
+        "target": "https://yareta.unige.ch/doc",
+        "pathRewrite": {
+            "^/api": ""
+        }
     },
-    "changeOrigin": true
-  },
-  "/api/short-doi": {
-    "target": "http://shortdoi.org",
-    "pathRewrite":
-      {
-        "^/api/short-doi": ""
-      },
-    "changeOrigin": true,
-  },
-  "/dlcm/authorization/oauth": {
-    "target": "https://e-research-test.unige.ch/dlcm-test/authorization/oauth",
-    "pathRewrite": {
-      "^/dlcm/authorization/oauth": ""
+    "/api/admin": {
+        "target": "https://e-research-test.unige.ch/dlcm-test/administration",
+        "logLevel": "info",
+        "changeOrigin": true,
+        "pathRewrite": {
+            "^/api": ""
+        }
     },
-    "onProxyRes": (proxyRes, req, res) => {
-      proxyRes.headers['Access-Control-Allow-Origin'] = 'http://localhost:4200';
+    "/api/preservation-planning": {
+        "target": "https://e-research-test.unige.ch/dlcm-test/administration",
+        "logLevel": "info",
+        "changeOrigin": true,
+        "pathRewrite": {
+            "^/api": ""
+        }
     },
-    "secure": false,
-    "changeOrigin": true
-  }
+    "/api/ingest": {
+        "target": "https://e-research-test.unige.ch/dlcm-test/ingestion",
+        "logLevel": "info",
+        "changeOrigin": true,
+        "pathRewrite": {
+            "^/api": ""
+        }
+    },
+    "/api/preingest": {
+        "target": "https://e-research-test.unige.ch/dlcm-test/ingestion",
+        "logLevel": "info",
+        "changeOrigin": true,
+        "pathRewrite": {
+            "^/api": ""
+        }
+    },
+    "/api/access": {
+        "target": "https://e-research-test.unige.ch/dlcm-test/accession",
+        "logLevel": "info",
+        "changeOrigin": true,
+        "pathRewrite": {
+            "^/api": ""
+        }
+    },
+    "/api/archival-storage": {
+        "target": "https://e-research-test.unige.ch/dlcm-test/storagion",
+        "pathRewrite": {
+            "^/api": ""
+        }
+    },
+    "/api/rss": {
+        "target": "https://www.unige.ch/feed",
+        "logLevel": "info",
+        "secure": "false",
+        "pathRewrite": {
+            "^/api": ""
+        },
+        "changeOrigin": true
+    },
+    "/api/short-doi": {
+        "target": "http://shortdoi.org",
+        "pathRewrite":
+            {
+                "^/api/short-doi": ""
+            },
+        "changeOrigin": true,
+    },
+    "/dlcm/authorization/oauth": {
+        "target": "https://e-research-test.unige.ch/dlcm-test/authorization/oauth",
+        "pathRewrite": {
+            "^/dlcm/authorization/oauth": ""
+        },
+        "onProxyRes": (proxyRes, req, res) => {
+            proxyRes.headers['Access-Control-Allow-Origin'] = 'http://localhost:4200';
+        },
+        "secure": false,
+        "changeOrigin": true
+    }
 }

src/app/app.component.html

@@ -98,7 +98,8 @@
           cdkTrapFocus
           [dlcmSpinner]="!(isApplicationInitializedObs | async)"
     >
-      <div class="router-outlet-wrapper" [solidifyFocusFirstElement]="true"
+      <div class="router-outlet-wrapper"
+           [solidifyFocusFirstElement]="true"
       >
         <router-outlet></router-outlet>
       </div>
@@ -109,3 +110,6 @@
     ></dlcm-footer-container>
   </div>
 </div>
+
+<dlcm-shared-userguide-sidebar-container></dlcm-shared-userguide-sidebar-container>
+<!--TODO HIDE OPENER ON MOBILE AND ADD BUTTON ON MOBILE HEADER-->

src/app/app.component.scss

 @import "abstracts/variables";
 @import "abstracts/mixins";
 
-.instance-logo-wrapper {
-  cursor: pointer;
-  text-align: center;
-  background-color: $background-grey;
-  display: none;
-  height: $header-image-height;
-
-  .instance-logo {
-    $img-padding: 10px;
-    $img-height: $header-image-height - $img-padding;
-    height: $img-height;
-    padding: $img-padding;
+:host {
+  display: flex;
+
+  .app-wrapper {
+    flex: 1;
   }
 
-  @include respond-to-breakpoint-and-bigger('sm') {
-    display: block;
+  .instance-logo-wrapper {
+    cursor: pointer;
+    text-align: center;
+    background-color: $background-grey;
+    display: none;
+    height: $header-image-height;
+
+    .instance-logo {
+      $img-padding: 10px;
+      $img-height: $header-image-height - $img-padding;
+      height: $img-height;
+      padding: $img-padding;
+    }
+
+    @include respond-to-breakpoint-and-bigger('sm') {
+      display: block;
+    }
   }
-}
 
-dlcm-main-toolbar-desktop-horizontal {
-  display: none;
+  dlcm-main-toolbar-desktop-horizontal {
+    display: none;
 
-  @include respond-to-breakpoint-and-bigger('md') {
-    display: block;
+    @include respond-to-breakpoint-and-bigger('md') {
+      display: block;
+    }
   }
-}
 
-dlcm-main-toolbar-mobile {
-  display: block;
+  dlcm-main-toolbar-mobile {
+    display: block;
 
-  @include respond-to-breakpoint-and-bigger('md') {
-    display: none;
+    @include respond-to-breakpoint-and-bigger('md') {
+      display: none;
+    }
   }
-}
 
-dlcm-main-toolbar-desktop-vertical {
-  display: none;
-}
+  dlcm-main-toolbar-desktop-vertical {
+    display: none;
+  }
 
-.app-wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
+  .app-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
 
-  @include respond-to-smaller-than-breakpoint('md') {
-    height: calc(100vh - #{$header-mobile-toolbar})
+    @include respond-to-smaller-than-breakpoint('md') {
+      height: calc(100vh - #{$header-mobile-toolbar})
+    }
   }
-}
 
-:host-context(body[theme='yareta']) {
-  @include respond-to-breakpoint-and-bigger('md') {
-    .app-wrapper {
-      height: calc(100vh - #{$header-image-height})
+  :host-context(body[theme='yareta']) {
+    @include respond-to-breakpoint-and-bigger('md') {
+      .app-wrapper {
+        height: calc(100vh - #{$header-image-height})
+      }
     }
   }
-}
 
-.body {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+  .body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 
-  &.ignore-grid {
-    .header-sticky-bar {
-      .breadcrumb {
-        max-width: initial;
+    &.ignore-grid {
+      .header-sticky-bar {
+        .breadcrumb {
+          max-width: initial;
+        }
       }
-    }
 
-    .content {
-      .router-outlet-wrapper {
-        max-width: initial;
+      .content {
+        .router-outlet-wrapper {
+          max-width: initial;
+        }
       }
     }
   }
-}
 
-.header-sticky-bar {
-  background-color: $background-grey;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0 8px 10px -4px #5858582e;
-  z-index: $z-index-breadcrumb;
-
-  .breadcrumb {
-    max-width: $grid-width;
-    width: 100%;
-  }
+  .header-sticky-bar {
+    background-color: $background-grey;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 8px 10px -4px #5858582e;
+    z-index: $z-index-breadcrumb;
+
+    .breadcrumb {
+      max-width: $grid-width;
+      width: 100%;
+    }
 
-  .search-bar {
-    font-size: 14px;
-    margin-bottom: -7px;
-    margin-right: 10px;
-  }
+    .search-bar {
+      font-size: 14px;
+      margin-bottom: -7px;
+      margin-right: 10px;
+    }
 
-  .cart {
-    margin-right: 10px;
+    .cart {
+      margin-right: 10px;
+    }
   }
-}
-
-.content {
-  flex: 1;
-  display: flex;
-  overflow-y: auto;
-  justify-content: center;
 
-  .router-outlet-wrapper {
-    display: flex;
+  .content {
     flex: 1;
-    max-width: $grid-width;
+    display: flex;
+    overflow-y: auto;
+    justify-content: center;
+
+    .router-outlet-wrapper {
+      display: flex;
+      flex: 1;
+      max-width: $grid-width;
+    }
   }
 }
 

src/app/app.component.ts

@@ -66,7 +66,6 @@ import {
   styleUrls: ["./app.component.scss"],
 })
 export class AppComponent extends SharedAbstractPresentational {
-
   private static readonly _themeAttributeName: string = "theme";
   currentModule: string;
   logo: string;

src/app/components/container/footer/footer.container.html

@@ -18,6 +18,7 @@
                    [toolsGuide]="toolsGuideObs | async"
                    [apis]="apisObs | async"
                    [quickStart]="userDocumentationObs | async"
+                   (displaySidebarUserGuideChange)="displaySidebarUserGuide()"
   ></dlcm-shared-toc>
   <fa-icon class="version"
            icon="code-branch"

src/app/components/container/footer/footer.container.ts

@@ -4,8 +4,12 @@ import {
   Input,
   Output,
 } from "@angular/core";
+import {AppAction} from "@app/stores/app.action";
 import {AppTocState} from "@app/stores/toc/app-toc.state";
-import {Select} from "@ngxs/store";
+import {
+  Select,
+  Store,
+} from "@ngxs/store";
 import {SharedAbstractContainer} from "@shared/components/containers/shared-abstract/shared-abstract.container";
 import {AppUtil} from "@shared/utils/app.util";
 import {
@@ -34,6 +38,10 @@ export class FooterContainer extends SharedAbstractContainer {
   @Output("updateChange")
   readonly updateObs: Observable<void> = ObservableUtil.asObservable(this._updateBS);
 
+  constructor(private readonly _store: Store) {
+    super();
+  }
+
   get appUtil(): typeof AppUtil {
     return AppUtil;
   }
@@ -41,4 +49,8 @@ export class FooterContainer extends SharedAbstractContainer {
   update(): void {
     this._updateBS.next();
   }
+
+  displaySidebarUserGuide(): void {
+    this._store.dispatch(new AppAction.ChangeDisplaySidebarUserGuide(true));
+  }
 }

src/app/material.module.ts

@@ -30,6 +30,7 @@ import {MatRippleModule} from "@angular/material/core";
 import {MatDialog} from "@angular/material/dialog";
 import {MatIconModule} from "@angular/material/icon";
 import {MatMenuModule} from "@angular/material/menu";
+import {MatSidenavModule} from "@angular/material/sidenav";
 import {MatDialogOverrideService} from "@shared/services/mat-dialog-override.service";
 
 const modules = [
@@ -61,6 +62,7 @@ const modules = [
   MatBadgeModule,
   MatRippleModule,
   A11yModule,
+  MatSidenavModule,
 ];
 
 @NgModule({

src/app/shared/components/containers/shared-userguide-sidebar/shared-userguide-sidebar.container.html

+<div *ngIf="!(isOpenedUserGuideSidebarObs | async)"
+     class="sidebar-opener"
+     [matTooltip]="'userguideSidebar.tooltipOpener' | translate"
+     (click)="openUserGuideSidebar()"
+>
+  <span class="help">{{'userguideSidebar.labelOpener' | translate}}</span>
+</div>
+
+<div *ngIf="isOpenedUserGuideSidebarObs | async"
+     @sidebarAnimation
+     class="user-guide-sidebar"
+>
+  <div class="header">
+    <h2 class="title">{{'userguideSidebar.title' | translate}}</h2>
+    <mat-icon class="close"
+              (click)="closeUserGuideSidebar()"
+              [matTooltip]="'userguideSidebar.tooltipClose' | translate"
+    >close
+    </mat-icon>
+  </div>
+
+  <div class="list"
+       [innerHTML]="userDocumentationObs | async"
+  ></div>
+</div>
+
+<div *ngIf="isOpenedUserGuideSidebarObs | async"
+     @backdropAnimation
+     (click)="closeUserGuideSidebar()"
+     class="backdrop-user-guide-sidebar"
+>
+</div>
\ No newline at end of file

src/app/shared/components/containers/shared-userguide-sidebar/shared-userguide-sidebar.container.scss

+@import "abstracts/variables";
+@import "abstracts/mixins";
+
+:host {
+  display: flex;
+
+  .sidebar-opener {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $primary-color;
+    color: $white;
+    cursor: pointer;
+    transition: background-color 250ms ease-in-out;
+
+    &:hover {
+      background-color: black;
+    }
+
+    .help {
+      transform: rotate(-90deg);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-weight: bold;
+      width: 16px;
+    }
+
+    @include respond-to-smaller-than-breakpoint('md') {
+      display: none;
+    }
+  }
+
+  .user-guide-sidebar {
+    position: absolute;
+    right: 0;
+    width: 400px;
+    background: white;
+    height: 100vh;
+    z-index: $z-index-main-toolbar-userguide-sidebar;
+    box-shadow: 0 8px 10px -4px #5858582e;
+    overflow-y: auto;
+
+    @include respond-to-smaller-than-breakpoint('md') {
+      width: 100%;
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px;
+      align-items: center;
+
+      .title {
+        margin: 0;
+        text-align: center;
+        width: 100%;
+      }
+    }
+
+    .close {
+      cursor: pointer;
+    }
+
+    .list ::ng-deep {
+      ul {
+        &.sectlevel2 {
+          a {
+            padding: 0 20px;
+          }
+        }
+
+        li {
+          display: flex;
+          flex-direction: column;
+
+          a {
+            line-height: 30px;
+            font-size: 14px;
+            color: $text-color;
+            padding: 0 10px;
+            @include truncate-with-ellipsis;
+
+            &:hover {
+              background-color: $extra-light-grey;
+            }
+
+            &:before {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .backdrop-user-guide-sidebar {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    z-index: 3;
+    background-color: $black;
+    opacity: 0.75;
+    top: 0;
+    left: 0;
+  }
+
+}
+
+:host(.hide) {
+  display: none;
+}
\ No newline at end of file