diff --git a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.html b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.html index 016a063290230501342ba605cf7ca7ee929d631b..6a93e0833cdf720d017a4e05cd527203fee75c6b 100644 --- a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.html +++ b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.html @@ -17,7 +17,7 @@ </span> </button> </div> - <div class="dropdown-menu" id="{{ 'controls-' + buttonId }}" role="menu"> + <div class="dropdown-menu" id="{{ 'controls-' + buttonId }}" role="menu" [ngClass]="{ 'inner-dropdown': !networkHandler.activeNetwork.networkSidebarOpen }"> <div class="dropdown-content"> <a (click)="downloadLink('graphml')" @@ -42,4 +42,3 @@ </div> </div> </div> - \ No newline at end of file diff --git a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss index b39d7b2e93b9b03be250f35ea92fb2e438ddf025..f8a6c3af7c02c19667f67a3fc4947de828ff00a4 100644 --- a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss +++ b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss @@ -1,18 +1,23 @@ @import "src/stylesheets/variables"; -.dropdown-menu{ - z-index: $network-tissue-options-z !important; - .dropdown-content { - padding-left: 0.5rem; - padding-right: 0.5rem; - .dropdown-item { - padding: .375rem 0rem !important; - padding-left: 0.5rem !important; - } - margin-left: calc(150px - 15px); - margin-right: calc(150px - 15px); - width: 150px; - margin-top: -45px; +.dropdown-menu { + z-index: $network-tissue-options-z !important; +} + +.inner-dropdown.dropdown-menu { + margin-left: calc(150px - 15px); + width: 150px; + margin-top: -45px; + + .dropdown-content { + padding-left: 0.5rem; + padding-right: 0.5rem; + + .dropdown-item { + padding: .375rem !important; } + } + + } diff --git a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.ts b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.ts index 1bd4a31e997c72fdf2ddd4baeccd2cd028c9c789..08b8c09001f0c4597378e5b174260d2ab5c5508d 100644 --- a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.ts +++ b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.ts @@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core'; import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service'; import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service'; import { downLoadFile } from 'src/app/utils'; +import {NetworkHandlerService} from 'src/app/services/network-handler/network-handler.service'; @Component({ selector: 'app-download-button-inverse', @@ -13,7 +14,7 @@ export class DownloadButtonInverseComponent implements OnInit { @Input() nodeData: { nodes: any, edges: any } = {nodes: null, edges: null}; @Input() buttonId: string; - constructor(public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService) { } + constructor(public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, public networkHandler: NetworkHandlerService) { } ngOnInit(): void { } @@ -25,4 +26,4 @@ export class DownloadButtonInverseComponent implements OnInit { }); } -} \ No newline at end of file +} diff --git a/src/app/components/network/network-menu-left/network-menu-left.component.html b/src/app/components/network/network-menu-left/network-menu-left.component.html index 16d614924e923c166611266c9b961ea70be4a8e2..b0214630f6ffe54af5a25ebfcd9f2308048d7a0a 100644 --- a/src/app/components/network/network-menu-left/network-menu-left.component.html +++ b/src/app/components/network/network-menu-left/network-menu-left.component.html @@ -83,6 +83,7 @@ <div class="dropdown network-footer-toolbar-element" [class.is-active]="networkHandler.activeNetwork.expressionExpanded" + [ngClass]="{ 'inner-dropdown': !networkHandler.activeNetwork.networkSidebarOpen }" > <div class="dropdown-trigger"> <button diff --git a/src/app/components/network/network-menu-left/network-menu-left.component.scss b/src/app/components/network/network-menu-left/network-menu-left.component.scss index e411e8aefcd208ff46898eed4e08e0c1c2707d40..e82800299e364669b63a03ae17d986020282e820 100644 --- a/src/app/components/network/network-menu-left/network-menu-left.component.scss +++ b/src/app/components/network/network-menu-left/network-menu-left.component.scss @@ -43,30 +43,37 @@ top: $network-header-height; background-color: var(--drgstn-panel-secondary); z-index: $network-footer-container-z; + &.small-sidebar { width: $network-footer-width-small; } + &.no-header { top: 0; height: 100%; } + &.opened { left: 0; animation-name: showSidebarLeft; animation-duration: 1s; + &.small-sidebar { animation-name: showSidebarLeftSmall; } } + &.closed { left: $network-footer-right-closed; animation-name: hideSidebarLeft; animation-duration: 1s; + &.small-sidebar { animation-name: hideSidebarLeftSmall; left: $network-footer-right-closed-small; } } + &-inner-container { width: 100%; height: $network-footer-inner-container-height; @@ -87,8 +94,10 @@ margin: 0px; right: -12px; padding: calc(.75em - 1px) !important; + .dropdown-menu { z-index: $network-tissue-options-z; + .scroll-area { height: 15rem; } @@ -96,19 +105,30 @@ } } -.dropdown-menu{ - z-index: $network-tissue-options-z !important; +.dropdown-menu { + z-index: $network-tissue-options-z !important; + + .dropdown-content { + .scroll-area { + height: 15rem; + padding: 5px; + } + } +} + +.inner-dropdown { + .dropdown-menu { + margin-left: calc(150px - 24px); + width: 250px; + margin-top: -45px; .dropdown-content { - padding-left: 0.5rem; - padding-right: 0.5rem; - .dropdown-item { - padding: .375rem 0rem !important; - padding-left: 0.5rem !important; - } - margin-left: calc(150px - 24px); - margin-right: calc(150px - 24px); - width: 250px; - margin-top: -45px; + padding-left: 0.5rem; + padding-right: 0.5rem; + + .dropdown-item { + padding: .375rem 0 !important; + } } + } } diff --git a/src/app/components/network/network-menu/download-button/download-button.component.html b/src/app/components/network/network-menu/download-button/download-button.component.html index 8754652cbfb75c95c15394440d8dc00c4650ec16..884f194255cee160fdb846769896add8b83e67d4 100644 --- a/src/app/components/network/network-menu/download-button/download-button.component.html +++ b/src/app/components/network/network-menu/download-button/download-button.component.html @@ -17,7 +17,7 @@ > </button> </div> - <div class="dropdown-menu" id="{{ 'controls-' + buttonId }}" role="menu"> + <div class="dropdown-menu" id="{{ 'controls-' + buttonId }}" role="menu" [ngClass]="{ 'inner-dropdown': !networkHandler.activeNetwork.networkSidebarOpen }"> <div class="dropdown-content"> <a (click)="downloadLink('graphml')" diff --git a/src/app/components/network/network-menu/download-button/download-button.component.scss b/src/app/components/network/network-menu/download-button/download-button.component.scss index e61e6773175cb94086fe7b236b293a1b54d27ecc..b739b999e35c1ee78fb8a1019e407be321a369bb 100644 --- a/src/app/components/network/network-menu/download-button/download-button.component.scss +++ b/src/app/components/network/network-menu/download-button/download-button.component.scss @@ -1,18 +1,21 @@ @import "src/stylesheets/variables"; -.dropdown-menu{ - z-index: $network-tissue-options-z !important; +.dropdown-menu { + z-index: $network-tissue-options-z !important; +} + +.inner-dropdown.dropdown-menu { + margin-left: calc(-150px - 43px) !important; + width: 150px; + margin-top: -45px; - .dropdown-content { - padding-left: 0.5rem; - padding-right: 0.5rem; - .dropdown-item { - padding: .375rem 0rem !important; - padding-left: 0.5rem !important; - } - margin-left: calc(-150px - 16px); - margin-right: calc(-150px - 16px); - width: 150px; - margin-top: -45px; + .dropdown-content { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; + + .dropdown-item { + padding: .375rem 0 !important; } + } } + diff --git a/src/app/components/network/network-menu/download-button/download-button.component.ts b/src/app/components/network/network-menu/download-button/download-button.component.ts index e398be82fe4fb481f52ebfcce88c942f08aef6dc..66d220660cd7aa477acf6fe0196111d9c2ca0a40 100644 --- a/src/app/components/network/network-menu/download-button/download-button.component.ts +++ b/src/app/components/network/network-menu/download-button/download-button.component.ts @@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core'; import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service'; import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service'; import { downLoadFile } from 'src/app/utils'; +import {NetworkHandlerService} from "../../../../services/network-handler/network-handler.service"; @Component({ selector: 'app-download-button', @@ -13,7 +14,7 @@ export class DownloadButtonComponent implements OnInit { @Input() nodeData: { nodes: any, edges: any } = {nodes: null, edges: null}; @Input() buttonId: string; - constructor(public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService) { } + constructor(public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, public networkHandler: NetworkHandlerService) { } ngOnInit(): void { } diff --git a/src/app/components/network/network-menu/network-menu.component.html b/src/app/components/network/network-menu/network-menu.component.html index 4a80fc1d0c0ad392ad463c891dfe58bfe9608707..4361003ccfa1a082f7357b45589c3ef22fe829d4 100644 --- a/src/app/components/network/network-menu/network-menu.component.html +++ b/src/app/components/network/network-menu/network-menu.component.html @@ -83,6 +83,7 @@ <div class="dropdown network-footer-toolbar-element" [class.is-active]="networkHandler.activeNetwork.expressionExpanded" + [ngClass]="{ 'inner-dropdown': !networkHandler.activeNetwork.networkSidebarOpen }" > <div class="dropdown-trigger"> <button diff --git a/src/app/components/network/network-menu/network-menu.component.scss b/src/app/components/network/network-menu/network-menu.component.scss index 63577262f2ef1b5e2a091d1d0a8c387074d03b75..e10fb01116f6d29e8fd2a3601e81d893cb59b62a 100644 --- a/src/app/components/network/network-menu/network-menu.component.scss +++ b/src/app/components/network/network-menu/network-menu.component.scss @@ -106,21 +106,26 @@ z-index: $network-tissue-options-z !important; .dropdown-content { - padding-left: 0.5rem; - padding-right: 0.5rem; - - .dropdown-item { - padding: .375rem 0rem !important; - padding-left: 0.5rem !important; + .scroll-area { + height: 15rem; + padding: 5px; } + } +} - margin-left: calc(-250px - 12px); - margin-right: calc(-250px - 12px); +.inner-dropdown { + .dropdown-menu { + margin-left: calc(-250px - 1px); width: 250px; margin-top: -45px; - } - .scroll-area { - height: 15rem; + .dropdown-content { + padding-left: 0.5rem; + padding-right: 0.5rem; + + .dropdown-item { + padding: .375rem 0 !important; + } + } } } diff --git a/src/index.html b/src/index.html index 480b4ecaa2effa0c8c32b1810e45259e19b2a5e9..698f37521eeb39d905ac660f2336550da42ee2f8 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,7 @@ <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script> -<!-- <link rel="stylesheet" type="text/css" href="./stylesheets/theme.css">--> +<!-- <link rel="stylesheet" type="text/css" href="./stylesheets/default-theme.css">--> </head> <body> diff --git a/src/index_static.html b/src/index_static.html index 1e05ab0f3ad23802fe6569a344ac85b53c1b0bc5..e673baef40aeddf6ce79877ec805e685787f5ab9 100644 --- a/src/index_static.html +++ b/src/index_static.html @@ -8,7 +8,7 @@ <!-- <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>--> <script src="https://cdn.drugst.one/v1.0.0-rc4/prod/drugstone.js"></script> <link rel="stylesheet" href="https://cdn.drugst.one/v1.0.0-rc4/prod/styles.css"> -<!-- <link rel="stylesheet" type="text/css" href="./stylesheets/theme.css">--> +<!-- <link rel="stylesheet" type="text/css" href="./stylesheets/default-theme.css">--> </head> <body> diff --git a/src/stylesheets/default-theme.css b/src/stylesheets/default-theme.css new file mode 100644 index 0000000000000000000000000000000000000000..cf1c9163acb9a460e7f30de2cccc46747baf96e4 --- /dev/null +++ b/src/stylesheets/default-theme.css @@ -0,0 +1,16 @@ +:root { + --drgstn-primary: #347eee; + --drgstn-secondary: #2e42f2; + --drgstn-success: #48C774; + --drgstn-warning: #ffdd00; + --drgstn-danger: #ff2744; + --drgstn-background: #f8f9fa; + --drgstn-panel: #ffffff; + --drgstn-info: #61c43d; + --drgstn-text-primary: #151515; + --drgstn-text-secondary: #eeeeee; + --drgstn-border: rgba(0, 0, 0, 0.2); + --drgstn-tooltip: rgba(74, 74, 74, 0.9); + --drgstn-panel-secondary: #FFFFFF; + --drgstn-height: 600px; +} diff --git a/src/stylesheets/theme-styles.scss b/src/stylesheets/theme-styles.scss index 2c09f9a93bd8af17ec04730f180c70fc161b2be4..cb113eeea8ace49fab57d5045599cb9e1799553b 100644 --- a/src/stylesheets/theme-styles.scss +++ b/src/stylesheets/theme-styles.scss @@ -1,35 +1,20 @@ -:root { - --drgstn-primary: #0000FF; - --drgstn-secondary: #fd6818; - --drgstn-success: #48C774; - --drgstn-warning: #ffdd00; - --drgstn-danger: #f14668; - --drgstn-background: #ffffff; - --drgstn-panel: #F0FFFF; - --drgstn-info: #61c43d; - --drgstn-text-primary: #020202; - --drgstn-text-secondary: #eeeeee; - --drgstn-border: rgba(0, 0, 0, 0.2); - --drgstn-tooltip: rgba(74, 74, 74, 0.9); - --drgstn-panel-secondary: #F0FFFF; - --drgstn-height: 600px; -} - -// :root { -// --drgstn-primary: #64b5f6; -// --drgstn-secondary: #fd6818; -// --drgstn-success: #48C774; -// --drgstn-warning: #FFDD57; -// --drgstn-danger: #F14668; -// --drgstn-background: #1e1e1e; -// --drgstn-panel: #1e1e1e; -// --drgstn-info: #61c43d; -// --drgstn-text-primary: #f0f0f0; -// --drgstn-text-secondary: #303030; -// --drgstn-border: rgba(255, 255, 255, 0.2); -// --drgstn-tooltip: rgba(181, 181, 181, 0.9); -// --drgstn-panel-secondary: #3b3b3b; -// } +@import "default-theme.css"; +//:root { +// --drgstn-primary: #347eee; +// --drgstn-secondary: #2e42f2; +// --drgstn-success: #48C774; +// --drgstn-warning: #ffdd00; +// --drgstn-danger: #ff2744; +// --drgstn-background: #f8f9fa; +// --drgstn-panel: #ffffff; +// --drgstn-info: #61c43d; +// --drgstn-text-primary: #151515; +// --drgstn-text-secondary: #eeeeee; +// --drgstn-border: rgba(0, 0, 0, 0.2); +// --drgstn-tooltip: rgba(74, 74, 74, 0.9); +// --drgstn-panel-secondary: #FFFFFF; +// --drgstn-height: 600px; +//} #appWindow { background-color: var(--drgstn-background) !important; @@ -40,7 +25,7 @@ } .tile.notification.quick-start.warning { - background-color: var(--drgstn-info) !important; + background-color: var(--drgstn-info) !important; } .tile.notification.quick-start { @@ -76,7 +61,7 @@ background-color: var(--drgstn-panel) !important; } - .tabs li a{ + .tabs li a { border-bottom: none; } diff --git a/src/stylesheets/theme.css b/src/stylesheets/theme.css deleted file mode 100644 index afb54953f06bdba6c9b91ac64397d2dd7ae3ad03..0000000000000000000000000000000000000000 --- a/src/stylesheets/theme.css +++ /dev/null @@ -1,16 +0,0 @@ -:root { - --drgstn-primary: #4885c7; - --drgstn-secondary: #cb32dc; - --drgstn-success: #7236d4; - --drgstn-warning: #FFDD57FF; - --drgstn-danger: #f14668; - --drgstn-background: #FFFFFF; - --drgstn-panel: #ff3a3a; - --drgstn-info: #61c43d; - --drgstn-text-primary: #000000; - --drgstn-text-secondary: #FFFFFF; - --drgstn-border: rgba(0, 0, 0, 0.2); - --drgstn-tooltip: rgba(74, 74, 74, 0.9); - --drgstn-panel-secondary: #ffffff; - --drgstn-height: 500px; -}