Commit 6ec18d8b authored by Florent POITTEVIN's avatar Florent POITTEVIN
Browse files

feat: 1197 User guide side panel

parent 043acdfc
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
}
}
......@@ -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-->
@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;
}
}
}
......
......@@ -66,7 +66,6 @@ import {
styleUrls: ["./app.component.scss"],
})
export class AppComponent extends SharedAbstractPresentational {
private static readonly _themeAttributeName: string = "theme";
currentModule: string;
logo: string;
......
......@@ -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"
......
......@@ -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));
}
}
......@@ -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({
......
<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
@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