From 6a8f00850200207752f025d20d5233277a1af268 Mon Sep 17 00:00:00 2001
From: AndiMajore <andi.majore@googlemail.com>
Date: Thu, 2 Sep 2021 19:00:06 +0200
Subject: [PATCH] hopefully full encapsulation done
---
src/app/app.component.scss | 0
src/app/app.module.ts | 2 +-
.../analysis-panel.component.scss | 13 +-
.../network-legend.component.html | 1 -
.../network-legend.component.scss | 11 +-
.../query-tile/query-tile.component.html | 4 +-
.../query-tile/query-tile.component.ts | 44 +++++--
.../explorer-page.component.scss | 3 +-
.../explorer-page/explorer-page.component.ts | 12 +-
src/index.html | 7 +-
src/stylesheets/bulma.scss | 34 +++++
src/stylesheets/primeng.scss | 119 +++++++++++++++++-
src/stylesheets/styles.scss | 21 ++--
src/stylesheets/theme-styles.scss | 58 +++++----
src/stylesheets/toast.scss | 70 +++++++++++
15 files changed, 323 insertions(+), 76 deletions(-)
create mode 100644 src/app/app.component.scss
create mode 100644 src/stylesheets/bulma.scss
create mode 100644 src/stylesheets/toast.scss
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 68ceaf13..df8f6d13 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -49,7 +49,7 @@ import {TooltipModule} from 'primeng/tooltip';
AddExpressedProteinsComponent,
NetworkLegendComponent,
ProtTableComponent,
- DrugTableComponent
+ DrugTableComponent,
],
imports: [
BrowserModule,
diff --git a/src/app/components/analysis-panel/analysis-panel.component.scss b/src/app/components/analysis-panel/analysis-panel.component.scss
index bf5932e1..c94f018a 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.scss
+++ b/src/app/components/analysis-panel/analysis-panel.component.scss
@@ -1,16 +1,16 @@
@import "src/stylesheets/variables";
.analysis {
- position: absolute;
- height: 100%;
- width: 100%;
+ position: absolute !important;
+ height: 100% !important;
+ width: 100% !important;
}
.network-view-settings {
// remove margin from tab header when network is displayed, so that network
// does not disappear in empty border
- padding-left: 0;
- padding-right: 0;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
.tabs {
margin: 0;
}
@@ -37,7 +37,8 @@
}
&.table-tab {
// 100% - #{$network-header-height} - #{$analysis-tab-header-height} - normalization-button
- height: calc(100% - 40px - 1.5rem - 72px);
+ height: calc(100% - 40px - 1.5rem - 72px - 6px);
+
}
h4 {
diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
index 8bc8d9fc..d1262293 100644
--- a/src/app/components/network-legend/network-legend.component.html
+++ b/src/app/components/network-legend/network-legend.component.html
@@ -59,7 +59,6 @@
<td class="group-name"> {{ nodeGroup.value.groupName }}</td>
</ng-container>
</ng-container>
-
</tr>
</ng-container>
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index 0d1cb302..ad520fcc 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -14,18 +14,19 @@ div.legend {
// margin-bottom: 1rem;
}
td.group-name{
- color:var(--drgstn-text-primary);
+ color:var(--drgstn-text-primary) !important;
}
tr.list-item{
line-height: calc(#{$legend-row-height} / 2);
+ border-top: var(--drgstn-text-primary) 1px solid;
th{
height: $legend-row-height;
width: $legend-row-height;
vertical-align: middle !important;
- padding: 0 !important;
+ padding: 2px !important;
.text{
font-style: italic;
- color:var(--drgstn-text-primary);
+ color:var(--drgstn-text-primary) !important;
}
.diamond {
height: $legend-diamond-size;
@@ -130,8 +131,8 @@ div.legend {
/* Center edge icon */
margin: 0 auto;
&.dashes {
- border-top: dotted;
- background-color: transparent;
+ border-top: dotted !important;
+ background-color: transparent !important;
}
}
}
diff --git a/src/app/components/query-tile/query-tile.component.html b/src/app/components/query-tile/query-tile.component.html
index 60b4b9b0..1a50789c 100644
--- a/src/app/components/query-tile/query-tile.component.html
+++ b/src/app/components/query-tile/query-tile.component.html
@@ -1,6 +1,6 @@
<div class="content">
- <ng-select [items]="queryItems" bindLabel="data.label" bindValue="data.label" [virtualScroll]="true" class="custom"
- placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" pTooltip="Find nodes in the network." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top">
+ <ng-select [items]="queryItems" bindLabel="data.label" bindValue="data.label" [virtualScroll]="true"
+ [placeholder]="getLabel()" [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" pTooltip="Find nodes in the network." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top">
<ng-template ng-option-tmp let-item="item">
<span>{{item.data.label}}</span>
</ng-template>
diff --git a/src/app/components/query-tile/query-tile.component.ts b/src/app/components/query-tile/query-tile.component.ts
index 3dfb6525..2ffa2b7a 100644
--- a/src/app/components/query-tile/query-tile.component.ts
+++ b/src/app/components/query-tile/query-tile.component.ts
@@ -1,5 +1,5 @@
import {Component, Input, Output, EventEmitter} from '@angular/core';
-import { element } from 'protractor';
+import {element} from 'protractor';
import {Node, Wrapper} from '../../interfaces';
@Component({
@@ -12,6 +12,7 @@ export class QueryTileComponent {
@Output() selectItem: EventEmitter<any> = new EventEmitter();
@Input() queryItems: Wrapper[];
+ selectedItem = undefined;
private listStartsWith = (elments: any[], term) => {
for (const e of elments) {
@@ -26,13 +27,34 @@ export class QueryTileComponent {
term = term.toLowerCase();
const data = {...item.data}
// add possible missing attributes to not throw errors
- if (data.ensg === undefined) {data.ensg = []};
- if (data.groupName === undefined) {data.groupName = ''};
- if (data.type === undefined) {data.type = ''};
- if (data.symbol === undefined) {data.symbol = ''};
- if (data.proteinName === undefined) {data.proteinName = ''};
- if (data.uniprotAc === undefined) {data.uniprotAc = ''};
- if (data.drugId === undefined) {data.drugId = ''};
+ if (data.ensg === undefined) {
+ data.ensg = []
+ }
+ ;
+ if (data.groupName === undefined) {
+ data.groupName = ''
+ }
+ ;
+ if (data.type === undefined) {
+ data.type = ''
+ }
+ ;
+ if (data.symbol === undefined) {
+ data.symbol = ''
+ }
+ ;
+ if (data.proteinName === undefined) {
+ data.proteinName = ''
+ }
+ ;
+ if (data.uniprotAc === undefined) {
+ data.uniprotAc = ''
+ }
+ ;
+ if (data.drugId === undefined) {
+ data.drugId = ''
+ }
+ ;
return data.symbol.toLowerCase().indexOf(term) > -1 || data.uniprotAc.toLowerCase().indexOf(term) > -1 ||
data.label.toLowerCase().indexOf(term) > -1 || this.listStartsWith(data.ensg, term) || data.id.toLowerCase().indexOf(term) > -1
@@ -41,7 +63,13 @@ export class QueryTileComponent {
}
select(item) {
+ this.selectedItem = item;
this.selectItem.emit(item);
}
+ getLabel() {
+ if (this.selectedItem != null)
+ return ""
+ return "Search...";
+ }
}
diff --git a/src/app/pages/explorer-page/explorer-page.component.scss b/src/app/pages/explorer-page/explorer-page.component.scss
index 1a14bf39..31e60eea 100644
--- a/src/app/pages/explorer-page/explorer-page.component.scss
+++ b/src/app/pages/explorer-page/explorer-page.component.scss
@@ -1,4 +1,5 @@
@import "src/stylesheets/variables";
+
.quick-find {
.notification {
padding: 15px;
@@ -70,7 +71,7 @@
}
.task-list-container {
- padding: 0.5rem;
+ padding: 0.5rem !important;
}
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index b1bbb39d..b8536b59 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -2,12 +2,12 @@ import {
AfterViewInit,
Component,
ElementRef,
+ EventEmitter,
HostListener,
Input,
- OnInit, Output,
+ OnInit,
+ Output,
ViewChild,
- EventEmitter,
- ViewEncapsulation
} from '@angular/core';
import {
getDrugNodeId,
@@ -30,13 +30,7 @@ import {downLoadFile, removeDuplicateObjectsFromList} from '../../utils'
import * as merge from 'lodash/fp/merge';
import {AnalysisPanelComponent} from 'src/app/components/analysis-panel/analysis-panel.component';
-// import * as 'vis' from 'vis-network';
-// import {DataSet} from 'vis-data';
-// import {vis} from 'src/app/scripts/vis-network.min.js';
declare var vis: any;
-// import {Network, Data} from 'vis-network';
-// declare var DataSet: any;
-// declare var Network: any;
@Component({
selector: 'app-explorer-page',
diff --git a/src/index.html b/src/index.html
index 25659988..2d55cd16 100644
--- a/src/index.html
+++ b/src/index.html
@@ -31,7 +31,7 @@
<button onclick=changeConfigStr('{"interactions":"omnipath"}') >Get Omnipath Interactions </button> <br>
<button onclick="initTaskEventListener()">Init Task-Eventlistener</button> <br>
-<input id="taskID" type="text" /> <button onclick=loadTaskID(document.getElementById("taskID").value) >Load TaskID</button> <br>
+<input id="taskID" type="text" /> <button onclick=loadTaskID(document.getElementById("taskID").value) class="button is-primary" >Load TaskID</button> <br>
<!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
@@ -43,10 +43,9 @@
<div style="width: 1300px">
<network-expander id="netexp1"
- config='{"nodeGroups":{"patient":{"type":"patient","color":"#000000","font":{"color":"#f0f0f0"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"#000000","font":{"color":"#f0f0f0"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#f0f0f0"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#f0f0f0"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":{"border":"#F12590","background":"#F12590","highlight":{"border":"#F12590","background":"#F12590"}},"font":{"color":"#f0f0f0"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"white","groupName":"Relevant Gene"},"has-condition":{"color":"white","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#ffffff","groupName":"default edge"},"ggi":{"color":"#ffffff","groupName":"Interaction","dashes":[3,2]}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":false,"showLegend":true}'
+ config='{"nodeGroups":{"patient":{"type":"patient","color":"black","font":{"color":"#ffffff"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"black","font":{"color":"black"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#000000"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":{"border":"#F12590","background":"#F12590","highlight":{"border":"#F12590","background":"#F12590"}},"font":{"color":"#f0f0f0"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"black","groupName":"Relevant Gene"},"has-condition":{"color":"#000000","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#000000","groupName":"default edge"},"ggi":{"color":"#000000","groupName":"Interaction","dashes":[3,2]}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":false,"showLegend":true}'
network='{"nodes":[{"id":"patient-1","group":"patient","x":592,"y":446},{"id":"patient-2","group":"patient","x":235,"y":87},{"id":"patient-3","group":"patient","x":105,"y":369},{"id":"ATM","label":"ATM","group":"gene","x":289,"y":242},{"id":"BARD1","label":"BARD1","group":"gene","x":44,"y":250},{"id":"BRCA1","label":"BRCA1","group":"gene","x":466,"y":576},{"id":"BRCA2","label":"BRCA2","group":"gene","x":507,"y":285},{"id":"BRIP1","label":"BRIP1","group":"gene","x":54,"y":474},{"id":"CHEK2","label":"CHEK2","group":"gene","x":216,"y":590},{"id":"CDH1","label":"CDH1","group":"gene","x":320,"y":-57},{"id":"NF1","label":"NF1","group":"gene","x":481,"y":111},{"id":"NBN","label":"NBN","group":"gene","x":-57,"y":314},{"id":"PALB2","label":"PALB2","group":"gene","x":450,"y":190},{"id":"PTEN","label":"PTEN","group":"important","x":305,"y":494},{"id":"RAD51C","label":"RAD51C","group":"gene","x":182,"y":-90},{"id":"RAD51D","label":"RAD51D","group":"gene","x":368,"y":73},{"id":"STK11","label":"STK11","group":"gene","x":686,"y":330},{"id":"TP53","label":"TP53","group":"important","x":333,"y":316},{"id":"subtype-1","label":"Subtype 1","group":"condition","x":556,"y":171},{"id":"subtype-2","label":"Subtype 2","group":"condition","x":-87,"y":221}],"edges":[{"from":"BRCA1","to":"BRCA2","group":"ggi"},{"from":"ATM","to":"BARD1","group":"ggi"},{"from":"BRCA1","to":"CHEK2","group":"ggi"},{"from":"RAD51C","to":"RAD51D","group":"ggi"},{"from":"STK11","to":"TP53","group":"ggi"},{"from":"TP53","to":"PALB2","group":"ggi"},{"from":"TP53","to":"RAD51D","group":"ggi"},{"from":"TP53","to":"NF1","group":"ggi"},{"from":"TP53","to":"BRCA1","group":"ggi"},{"from":"TP53","to":"BRCA2","group":"ggi"},{"from":"PTEN","to":"BRCA1","group":"ggi"},{"from":"PTEN","to":"BRCA2","group":"ggi"},{"from":"TP53","to":"PTEN","group":"ggi"},{"from":"ATM","to":"PTEN","group":"ggi"},{"from":"CDH1","to":"RAD51D","group":"ggi"},{"from":"CDH1","to":"PALB2","group":"ggi"},{"from":"NBN","to":"BRIP1","group":"ggi"},{"from":"BRIP1","to":"PTEN","group":"ggi"},{"from":"patient-1","to":"BRCA1","group":"genotype"},{"from":"patient-1","to":"TP53","group":"genotype"},{"from":"patient-1","to":"BRCA2","group":"genotype"},{"from":"patient-1","to":"PTEN","group":"genotype"},{"from":"patient-2","to":"TP53","group":"genotype"},{"from":"patient-2","to":"NF1","group":"genotype"},{"from":"patient-2","to":"BARD1","group":"genotype"},{"from":"patient-3","to":"TP53","group":"genotype"},{"from":"patient-3","to":"PTEN","group":"genotype"},{"from":"patient-3","to":"NBN","group":"genotype"},{"from":"patient-1","to":"subtype-1","group":"has-condition"},{"from":"patient-2","to":"subtype-1","group":"has-condition"},{"from":"patient-3","to":"subtype-2","group":"has-condition"}]}'>
- }'
- ></network-expander>
+ }'></network-expander>
</div>
<br>
diff --git a/src/stylesheets/bulma.scss b/src/stylesheets/bulma.scss
new file mode 100644
index 00000000..57a4fc58
--- /dev/null
+++ b/src/stylesheets/bulma.scss
@@ -0,0 +1,34 @@
+@import "toast";
+#appWindow {
+ @import "../../node_modules/bulma/bulma";
+ height: var(--drgstn-height, 500px);
+ margin: 0;
+ font-family: Roboto, "Helvetica Neue", sans-serif;
+
+ p {
+ margin-bottom: .4rem !important;
+ }
+
+ .card-content.explorer-network-view-settings {
+ padding: 0 !important;
+
+ }
+
+ .delete, .modal-close {
+ padding: 0 !important;
+ }
+
+ hr {
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+ }
+
+ button {
+ height: auto !important;
+ }
+
+ .box {
+ padding: .5rem !important;
+ margin-bottom: .5rem !important;
+ }
+}
diff --git a/src/stylesheets/primeng.scss b/src/stylesheets/primeng.scss
index a8c1287c..a2720aed 100644
--- a/src/stylesheets/primeng.scss
+++ b/src/stylesheets/primeng.scss
@@ -1,5 +1,4 @@
@import '../stylesheets/icons';
-
.drgstn-tooltip {
position: absolute !important;
padding: .25em .5rem !important;
@@ -21,9 +20,10 @@
.p-tooltip-text {
white-space: pre-line !important;
background: var(--drgstn-tooltip) !important;
- border-radius: 2px !important;
- padding: .25rem 1rem .25rem 1rem !important;
+ border-radius: 4px !important;
+ padding: .5rem 1rem .5rem 1rem !important;
color: var(--drgstn-text-secondary) !important;
+ font-family: Roboto,Helvetica Neue,sans-serif !important;
font-size: .75rem !important;
}
@@ -82,3 +82,116 @@
}
}
+
+#appWindow {
+
+ //.ng-select{
+ // box-sizing: border-box !important;
+ // display: block !important;
+ // position: relative !important;
+ // clear: both;
+ // font-size: 1rem;
+ // text-align: inherit;
+ //}
+ //
+ //.ng-select.ng-select-single .ng-select-container .ng-value-container, .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value {
+ // overflow: hidden;
+ // text-overflow: ellipsis;
+ // white-space: nowrap;
+ //}
+ //
+ //.ng-select .ng-select-container .ng-value-container {
+ // display: flex;
+ // flex: 1;
+ //}
+ //
+ //.ng-select .ng-select-container .ng-value-container {
+ // align-items: center;
+ // padding-left: 10px;
+ //}
+ //
+ //.ng-select.ng-select-single .ng-select-container {
+ // height: 36px;
+ //}
+ //
+ //.control {
+ // box-sizing: border-box;
+ // clear: both;
+ // font-size: 1rem;
+ // position: relative;
+ // text-align: inherit;
+ //}
+ //
+ //.ng-select .ng-select-container {
+ // cursor: default;
+ // display: flex;
+ // outline: none;
+ // overflow: hidden;
+ // position: relative;
+ // width: 100%;
+ // color: #333;
+ // background-color: #fff;
+ // border-radius: 4px;
+ // border: 1px solid #ccc;
+ // min-height: 36px;
+ // align-items: center;
+ //}
+ //
+ //.ng-dropdown-panel.ng-select-bottom {
+ // top: 100%;
+ // border-bottom-right-radius: 4px;
+ // border-bottom-left-radius: 4px;
+ // border-top-color: #e6e6e6;
+ // margin-top: -1px;
+ //}
+ //
+ //.ng-dropdown-panel {
+ // -webkit-overflow-scrolling: touch;
+ // box-sizing: border-box;
+ // opacity: 0;
+ // position: absolute;
+ // width: 100%;
+ // z-index: 1050;
+ //}
+ //
+ //.ng-dropdown-panel {
+ // background-color: #fff;
+ // border: 1px solid #ccc;
+ // box-shadow: 0 1px 0 rgba(0,0,0,.06);
+ // left: 0;
+ //}
+ //
+ //.ng-dropdown-panel .total-padding {
+ // opacity: 0;
+ // width: 1px;
+ //}
+ //
+ //.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+ // box-sizing: border-box;
+ // cursor: pointer;
+ // display: block;
+ //}
+ //
+ //.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+ // background-color: #fff;
+ // color: rgba(0,0,0,.87);
+ // padding: 8px 10px;
+ //}
+ //
+ //.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup, .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+ // overflow: hidden;
+ // text-overflow: ellipsis;
+ // white-space: nowrap;
+ //}
+ //
+ //
+ //.ng-select-container {
+ // background-color: var(--drgstn-panel-secondary);
+ // border-color: var(--drgstn-border);
+ //}
+ //
+ //.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container {
+ // border-bottom-right-radius: 0;
+ // border-bottom-left-radius: 0;
+ //}
+}
diff --git a/src/stylesheets/styles.scss b/src/stylesheets/styles.scss
index 703f2555..4f118ead 100644
--- a/src/stylesheets/styles.scss
+++ b/src/stylesheets/styles.scss
@@ -1,20 +1,21 @@
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
-//@import "~@ng-select/ng-select/themes/default.theme.css";
-@import "../../node_modules/bulma/bulma";
-@import "../../node_modules/animate.css/animate.min.css";
-@import "variables";
+@import "../../node_modules/animate.css/animate.min";
@import "primeng";
+@import "bulma";
+@import "variables";
#appWindow {
- height: var(--drgstn-height, 500px);
- margin: 0;
- font-family: Roboto, "Helvetica Neue", sans-serif;
+
.fullheight {
height: 100%;
}
+ .card-content .tabs-header {
+ margin-bottom: 0;
+ }
+
.canvas-content {
height: calc(100% - #{$network-footer-height});
z-index: $explorer-network-z;
@@ -206,7 +207,7 @@
.analysis-view {
height: 100%;
width: 100%;
- position: absolute;
+ position: absolute !important;
margin-top: 0;
z-index: $analysis-view-z;
@@ -219,9 +220,6 @@
margin-top: 20px;
}
- .fa-spinner {
- color: $light-invert;
- }
.footer-buttons {
margin-left: 10px;
@@ -262,3 +260,4 @@
padding: $button-small-padding;
}
}
+
diff --git a/src/stylesheets/theme-styles.scss b/src/stylesheets/theme-styles.scss
index 26b914fe..c9da8d50 100644
--- a/src/stylesheets/theme-styles.scss
+++ b/src/stylesheets/theme-styles.scss
@@ -15,7 +15,7 @@
}
#appWindow {
- background-color: var(--drgstn-background);
+ background-color: var(--drgstn-background) !important;
.card-header-title, .card-content, .title {
@@ -38,13 +38,17 @@
border-color: var(--drgstn-border) !important;
}
+ .fa-spinner {
+ color: var(--drgstn-secondary) !important;
+ }
+
.tabs.is-toggle a:hover {
background-color: var(--drgstn-panel) !important;
}
.tabs li.is-active a, .tabs.is-toggle li.is-active a, .tabs a:hover {
border-color: var(--drgstn-primary) !important;
- color: var(--drgstn-primary) !important;
+ color: var(--drgstn-text-primary) !important;
}
.content h4, .content h6 {
@@ -64,9 +68,13 @@
background-color: var(--drgstn-border) !important;
}
+ .tr {
+ border-color: var(--drgstn-text-primary) !important;
+ }
+
// legend styles
.legend {
- color: var(--drgstn-text-primary);
+ color: var(--drgstn-text-primary) !important;
}
.modal-card-body {
@@ -107,11 +115,11 @@
}
a.dropdown-item:hover, button.dropdown-item:hover{
- background-color: var(--drgstn-panel-secondary)
+ background-color: var(--drgstn-panel-secondary) !important;
}
.tissue-dropdown {
- background-color: var(--drgstn-panel);
+ background-color: var(--drgstn-panel) !important;
}
.button.is-primary.is-focused, .button.is-primary:focus {
@@ -199,66 +207,66 @@
}
.ng-select-container, .ng-dropdown-panel.ng-select-bottom {
- background-color: var(--drgstn-panel-secondary);
- border-color: var(--drgstn-border);
+ background-color: var(--drgstn-panel-secondary) !important;
+ border-color: var(--drgstn-border) !important;
.ng-value-container {
.ng-placeholder{
- color: var(--drgstn-text-primary);
+ color: var(--drgstn-text-primary) !important;
}
}
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
- background-color: var(--drgstn-panel);
- color:var(--drgstn-text-primary);
+ background-color: var(--drgstn-panel) !important;
+ color:var(--drgstn-text-primary) !important;
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
- background-color: var(--drgstn-panel-secondary);
- color:var(--drgstn-text-primary);
+ background-color: var(--drgstn-panel-secondary) !important;
+ color:var(--drgstn-text-primary) !important;
}
.ng-select {
.ng-arrow-wrapper .ng-arrow {
- border-top-color: var(--drgstn-text-primary);
+ border-top-color: var(--drgstn-text-primary) !important;
}
.ng-clear-wrapper, .ng-select-container {
- color: var(--drgstn-text-primary);
+ color: var(--drgstn-text-primary) !important;
}
}
.ng-select.ng-select-opened>.ng-select-container .ng-arrow{
- border-bottom-color: var(--drgstn-text-primary);
+ border-bottom-color: var(--drgstn-text-primary) !important;
}
::-webkit-scrollbar {
- width: 5px;
+ width: 10px !important;
}
::-webkit-scrollbar-track {
- background: var(--scrollbarBG);
+ background: var(--scrollbarBG) !important;
}
::-webkit-scrollbar-thumb {
- background: var(--thumbBG);
- border-radius: 6px;
- border: 3px solid var(--scrollbarBG);
+ background: var(--thumbBG) !important;
+ border-radius: 6px !important;
+ border: 3px solid var(--scrollbarBG) !important;
}
::-moz-scrollbar-button:decrement,
::-moz-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:increment {
- width: 0px;
+ width: 0px !important;
}
}
// scrolllbar styles
network-expander {
- --thumbBG: var(--drgstn-primary);
- --scrollbarBG: var(--drgstn-background);
+ --thumbBG: var(--drgstn-primary) !important;
+ --scrollbarBG: var(--drgstn-background) !important;
- scrollbar-width: thin;
- scrollbar-color: var(--thumbBG) var(--scrollbarBG);
+ scrollbar-width: thin !important;
+ scrollbar-color: var(--thumbBG) var(--scrollbarBG) !important;
}
diff --git a/src/stylesheets/toast.scss b/src/stylesheets/toast.scss
new file mode 100644
index 00000000..5b40b1a8
--- /dev/null
+++ b/src/stylesheets/toast.scss
@@ -0,0 +1,70 @@
+.notification {
+ background-color: #f5f5f5;
+ border-radius: 4px;
+ position: relative;
+ padding: 1.25rem 2.5rem 1.25rem 1.5rem;
+ font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ font-size: 1em;
+ line-height: 1.5;
+}
+
+.notification.is-success{
+ background-color: var(--drgstn-success);
+ color: var(--drgstn-text-secondary);
+}
+
+.notification.is-danger{
+ background-color: var(--drgstn-danger);
+ color: var(--drgstn-text-secondary);
+}
+
+.notification>.delete{
+ right: .5rem;
+ position: absolute;
+ top: .5rem;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ background-color: hsla(0,0%,4%,.2);
+ border: none;
+ border-radius: 290486px;
+ cursor: pointer;
+ pointer-events: auto;
+ display: inline-block;
+ flex-grow: 0;
+ flex-shrink: 0;
+ font-size: 0;
+ height: 20px;
+ max-height: 20px;
+ max-width: 20px;
+ min-height: 20px;
+ min-width: 20px;
+ outline: none;
+ //position: relative;
+ vertical-align: top;
+ width: 20px;
+}
+
+.notification>.delete:before {
+ height: 2px;
+ width: 50%;
+}
+.notification>.delete:after {
+ height: 50%;
+ width: 2px;
+}
+
+.notification>.delete:after, .notification>.delete:before{
+ background-color: #fff;
+ content: "";
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ transform-origin: center center;
+}
--
GitLab