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

added css variable based themes

parent 88d1be89
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 96 additions and 30 deletions
drugsTone-build/drugsTone.js
+ 1
− 1
View file @ 96bd113a
This diff is collapsed.
drugsTone-build/styles.css
+ 2
− 2
View file @ 96bd113a
This diff is collapsed.
drugstone-test.html
+ 3
− 3
View file @ 96bd113a
<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.7.0-rc2/remote/drugsTone.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.7.0-rc2/remote/styles.css">
<link rel="stylesheet" type="text/css" href="src/theme.css">
<script src="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.7.1-rc1/remote/drugsTone.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.7.1-rc1/remote/styles.css">
</head>
<body>
<div style="height: 700px; width: 1300px;">
<network-expander
id='drugstone-panel-1'
theme='{"background":"#212a4a","panel-background":"#1829c4","panel-border":"#c928c9","network-background":"#d93bd9","color1":"#00D1B2","color2":"#3273DC","text-primary":"#000000","text-secondary":"#FFFFFF","success":"#48C774","warn":"#C78E48","error":"#F14668"}'
config='{"nodeGroups":{"0.5":{"type":"gene","color":"#CCFF33FF","groupName":"0.5","shape":"star"},"1.5":{"type":"gene","color":"#66FF33FF","groupName":"1.5","shape":"circle"},"2.0":{"type":"gene","color":"#33CC33FF","groupName":"2.0","shape":"circle"},"patientGroup":{"type":"gene","color":"#FF0000FF","groupName":"Patients","shape":"circle"}},"edgeGroups":{"normal":{"color":"black","groupName":"Custom Group"},"dashed":{"color":"#000857","groupName":"Dashed","dashes":[3,2]}},"identifier":"symbol","legendUrl":"https://exbio.wzw.tum.de/covex/assets/leg1.png"}'
network='{"nodes":[{"id":"TP53","group":"0.5","x":4,"y":6},{"id":"C5","group":"0.5","x":6,"y":4},{"id":"Patient","group":"patientGroup"},{"label":"PTEN","id":"PTEN","group":0.5}],"edges":[{"from":"TP53","to":"C5","group":"dashed"},{"from":"TP53","to":"PTEN","group":"dashed"},{"from":"Patient","to":"C5","group":"normal"},{"from":"Patient","to":"PTEN","group":"normal"}]}'>
</network-expander>
......
src/app/app.module.ts
+ 2
− 2
View file @ 96bd113a
......@@ -29,7 +29,7 @@ import fontawesome from '@fortawesome/fontawesome';
import {faTimes, faAngleUp, faAngleLeft, faCapsules, faCrosshairs, faFlask, 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
faMinus, faUpload, faAngleDoubleDown, faSync, faBroom, faAngleDoubleUp
} from '@fortawesome/free-solid-svg-icons';
@NgModule({
......@@ -69,7 +69,7 @@ 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);
faSync, faBroom, faAngleDoubleUp);
// Convert `PopupComponent` to a custom element.
const NetworkExpander = createCustomElement(ExplorerPageComponent, {injector});
// Register the custom element with the browser.
......
src/app/components/analysis-panel/analysis-panel.component.scss
+ 1
− 0
View file @ 96bd113a
......@@ -75,3 +75,4 @@ div.network {
.scroll-y{
overflow-y: auto;
}
src/app/components/analysis-panel/drug-table/drug-table.component.scss
+ 6
− 2
View file @ 96bd113a
......@@ -41,11 +41,15 @@
width: 1.5rem;
}
.fa-times {
color: $danger;
color: var(--drgstn-danger);
}
.fa-check {
color: $success;
color: var(--drgstn-success);
}
a {
color: var(--drgstn-secondary);
}
td {
......
src/app/components/analysis-panel/prot-table/prot-table.component.scss
+ 6
− 2
View file @ 96bd113a
......@@ -41,11 +41,15 @@
width: 1.5rem;
}
.fa-times {
color: $danger;
color: var(--drgstn-danger);
}
.fa-check {
color: $success;
color: var(--drgstn-success);
}
a {
color: var(--drgstn-secondary);
}
td {
......
src/app/components/task-list/task-list.component.html
+ 1
− 1
View file @ 96bd113a
......@@ -62,7 +62,7 @@
<span class="icon is-pulled-right"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i></span>
</p>
<p class="has-text-danger">
<small [style.background-color]="colorTheme['panel-background']" [style.border-color]="colorTheme['panel-border']" class="status-field">{{task.info.status}}</small>
<small class="status-field">{{task.info.status}}</small>
<a (click)="analysis.removeTask(task.token)" class="is-pulled-right has-text-danger">
<span class="icon is-pulled-right">
<i class="fa fa-trash"></i>
......
src/app/components/task-list/task-list.component.scss
+ 2
− 2
View file @ 96bd113a
......@@ -10,12 +10,12 @@
}
.status-field {
background-color: white;
background-color: var(--drgstn-background);
padding: 2px;
font-size: 10px;
max-width: 215px;
height: 20px;
overflow: hidden;
border: 1px solid #e4e4e4;
border: 1px solid rgba(0,0,0,0.1);
display: inline-block;
}
src/app/pages/explorer-page/explorer-page.component.html
+ 1
− 1
View file @ 96bd113a
......@@ -490,7 +490,7 @@
class="card-footer-item has-text-primary"
data-tooltip="Add proteins expressed in the tissue." [style.border-color]="colorTheme['panel-border']">
<span class="icon">
<i class="fa fa-angle-double-up"></i>
<i class="fas fa-angle-double-up"></i>
</span>
<span>
Tissue proteins
......
src/index.html
+ 1
− 1
View file @ 96bd113a
......@@ -47,7 +47,7 @@
{"from": "Patient No. 5","to": "C5","label": "w/o group"}
]
}'
theme='{"background":"#cd3de6", "panel-background":"#C78E48", "panel-border":"black"}'
style="height: 100%; width: 100vw; display: block;"
></network-expander>
</div>
......
src/styles.scss
+ 59
− 7
View file @ 96bd113a
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
//@import "src/theme";
@import "~bulma/bulma.sass";
@import '~bulma-tooltip';
@import "~animate.css/animate.min";
@import "variables";
:root {
--drgstn-primary: #00D1B2;
--drgstn-secondary: #3273DC;
--drgstn-success: #48C774;
--drgstn-warning: #FFDD57FF;
--drgstn-danger: #F14668;
--drgstn-background: #FFFFFF;
--drgstn-info: #61c43d;
--drgstn-text-primary: #000000;
--drgstn-text-secondary: #FFFFFF;
}
.fullheight {
height: 100%;
}
......@@ -170,11 +180,53 @@ div.field.has-addons.add-remove-toggle {
}
.fa-check {
color: $success;
color: var(--drgstn-success)
}
a {
color: var(--drgstn-secondary);
}
.tabs li.is-active a{
border-bottom-color: var(--drgstn-secondary);
color: var(--drgstn-secondary)
}
.button.is-primary {
background-color: var(--drgstn-primary) !important;
border-color: transparent;
color: var(--drgstn-text-secondary)
}
.button.is-primary.is-outlined {
background-color: transparent !important;
border-color: var(--drgstn-primary) !important;
color: var(--drgstn-primary) !important;
}
.button.is-primary.is-focused, .button.is-primary:focus {
background-color: var(--drgstn-primary) !important;
border-color: transparent;
color: var(--drgstn-text-secondary)
}
.has-text-primary {
color: var(--drgstn-primary) !important;
}
.has-text-danger {
color: var(--drgstn-danger) !important;
}
.is-primary {
background-color: var(--drgstn-primary) !important;
}
.fa-search.investigational {
color: $warning;
color: var(--drgstn-warning);
}
.fa-spinner {
......@@ -182,15 +234,15 @@ div.field.has-addons.add-remove-toggle {
}
.fa-pause {
color: $warning;
color: var(--drgstn-warning);
}
.fa-exclamation-triangle {
color: $danger;
color: var(--drgstn-danger)
}
.fa-times {
color: $danger;
color: var(--drgstn-danger)
}
.footer-buttons {
......
src/theme.css 0 → 100644
+ 11
− 0
View file @ 96bd113a
:root {
--drgstn-primary: #4885c7;
--drgstn-secondary: #cb32dc;
--drgstn-success: #7236d4;
--drgstn-warning: #FFDD57FF;
--drgstn-danger: #47efd6;
--drgstn-background: #FFFFFF;
--drgstn-info: #61c43d;
--drgstn-text-primary: #000000;
--drgstn-text-secondary: #FFFFFF;
}
src/theme.scss deleted 100644 → 0
+ 0
− 6
View file @ 88d1be89
$primary: #48C774;
$success: #3070B3;
$danger: #EF476F;
$background: 'white';
$link: $primary;
$info: $primary;
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