From 1039fc10791b6ca29edab84eeec8a6c1c27f7049 Mon Sep 17 00:00:00 2001
From: "Hartung, Michael" <michael.hartung@uni-hamburg.de>
Date: Fri, 8 Jul 2022 13:19:21 +0200
Subject: [PATCH] network fullscreen mode
---
src/app/app.module.ts | 5 ++--
.../components/network/network.component.html | 24 ++++++++++++++++++-
.../components/network/network.component.scss | 8 +++++++
.../components/network/network.component.ts | 5 ++++
4 files changed, 39 insertions(+), 3 deletions(-)
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ca8e0deb..d643abf3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -34,7 +34,7 @@ import {
faRulerVertical, faDna, faMicroscope, faBook, faPause, faTrash, faSpinner, faExclamationTriangle, faPlus,
faExpand, faInfo, faRocket, faAngleDown, faSearch, faFastForward, faExternalLinkAlt, faTasks, faFilter,
faMinus, faUpload, faAngleDoubleDown, faSync, faBroom, faAngleDoubleUp, faChild, faHeadSideMask, faBiohazard,
- faBullseye, faSeedling, faSyncAlt
+ faBullseye, faSeedling, faSyncAlt, faCompress
} from '@fortawesome/free-solid-svg-icons';
import { TooltipModule } from 'primeng/tooltip';
import { NetworkMenuComponent } from './components/network/network-menu/network-menu.component';
@@ -97,7 +97,8 @@ export class AppModule {
faCheck, faCamera, faDownload, faRulerVertical, faDna, faMicroscope, faBook, faPause, faTrash,
faSpinner, faExclamationTriangle, faPlus, faExpand, faInfo, faRocket, faAngleDown, faSearch,
faFastForward, faExternalLinkAlt, faTasks, faFilter, faMinus, faUpload, faAngleDoubleDown,
- faSync, faBroom, faAngleDoubleUp, faChild, faHeadSideMask, faBiohazard, faBullseye, faSeedling, faSyncAlt);
+ faSync, faBroom, faAngleDoubleUp, faChild, faHeadSideMask, faBiohazard, faBullseye, faSeedling,
+ faSyncAlt, faExpand, faCompress);
const NetworkExpander = createCustomElement(ExplorerPageComponent, { injector });
// Register the custom element with the browser.
customElements.define('drugst-one', NetworkExpander);
diff --git a/src/app/components/network/network.component.html b/src/app/components/network/network.component.html
index d2ac6fec..b8719e7a 100644
--- a/src/app/components/network/network.component.html
+++ b/src/app/components/network/network.component.html
@@ -1,8 +1,30 @@
-<div class="card network">
+<div class="card network" [ngClass]="{'fullscreen': fullscreen}">
<header class="card-header network-header" *ngIf="networkType === 'explorer'">
<p class="card-header-title">
{{ drugstoneConfig.config.title }}
</p>
+ <span class="mr-1 is-pulled-right columns is-flex is-vcentered">
+ <button
+ title="open in fullscreen"
+ *ngIf="!fullscreen"
+ (click)="toggleFullscreen()"
+ class="button is-primary is-outlined is-rounded is-small"
+ >
+ <span class="icon is-small">
+ <i class="fas fa-expand"></i>
+ </span>
+ </button>
+ <button
+ title="close fullscreen"
+ *ngIf="fullscreen"
+ (click)="toggleFullscreen()"
+ class="button is-primary is-outlined is-rounded is-small"
+ >
+ <span class="icon is-small">
+ <i class="fas fa-compress"></i>
+ </span>
+ </button>
+ </span>
</header>
<div
class="card-content network-view-settings"
diff --git a/src/app/components/network/network.component.scss b/src/app/components/network/network.component.scss
index e7d0a467..d7be5307 100644
--- a/src/app/components/network/network.component.scss
+++ b/src/app/components/network/network.component.scss
@@ -13,3 +13,11 @@
.dropdown-menu{
z-index: $network-tissue-options-z !important;
}
+
+.fullscreen{
+ position: fixed !important;
+ height: 100vh !important;
+ width: 100vw !important;
+ top: 0 !important;
+ left: 0 !important;
+}
diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts
index 21760f0e..529f5fcc 100644
--- a/src/app/components/network/network.component.ts
+++ b/src/app/components/network/network.component.ts
@@ -77,6 +77,7 @@ export class NetworkComponent implements OnInit {
public expressionMap: NodeAttributeMap = {};
public gradientMap: NodeAttributeMap = {};
+ public fullscreen = false;
constructor(public networkHandler: NetworkHandlerService, public analysis: AnalysisService, public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, public omnipath: OmnipathControllerService) { }
@@ -404,4 +405,8 @@ export class NetworkComponent implements OnInit {
this.setLegendContext();
}
+ public toggleFullscreen() {
+ this.fullscreen = !this.fullscreen;
+ }
+
}
--
GitLab