Skip to content
Snippets Groups Projects
Commit f8a671a1 authored by AndiMajore's avatar AndiMajore
Browse files

fixed dropdown menu styles; adjusted default app styling

parent 7392cf14
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 128 additions and 107 deletions
src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.html
+ 1
− 2
View file @ f8a671a1
......@@ -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
src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss
+ 18
− 13
View file @ f8a671a1
@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;
}
}
}
src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.ts
+ 3
− 2
View file @ f8a671a1
......@@ -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
}
src/app/components/network/network-menu-left/network-menu-left.component.html
+ 1
− 0
View file @ f8a671a1
......@@ -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
......
src/app/components/network/network-menu-left/network-menu-left.component.scss
+ 32
− 12
View file @ f8a671a1
......@@ -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;
}
}
}
}
src/app/components/network/network-menu/download-button/download-button.component.html
+ 1
− 1
View file @ f8a671a1
......@@ -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')"
......
src/app/components/network/network-menu/download-button/download-button.component.scss
+ 16
− 13
View file @ f8a671a1
@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;
}
}
}
src/app/components/network/network-menu/download-button/download-button.component.ts
+ 2
− 1
View file @ f8a671a1
......@@ -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 {
}
......
src/app/components/network/network-menu/network-menu.component.html
+ 1
− 0
View file @ f8a671a1
......@@ -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
......
src/app/components/network/network-menu/network-menu.component.scss
+ 16
− 11
View file @ f8a671a1
......@@ -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;
}
}
}
}
src/index.html
+ 1
− 1
View file @ f8a671a1
......@@ -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>
......
src/index_static.html
+ 1
− 1
View file @ f8a671a1
......@@ -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>
......
src/stylesheets/default-theme.css 0 → 100644
+ 16
− 0
View file @ f8a671a1
: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;
}
src/stylesheets/theme-styles.scss
+ 19
− 34
View file @ f8a671a1
: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;
}
......
src/stylesheets/theme.css deleted 100644 → 0
+ 0
− 16
View file @ 7392cf14
: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;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment