From 0ea49999d9a8e4251aa9699860789f573517990f Mon Sep 17 00:00:00 2001
From: Michael Hartung <michi@Michaels-MacBook-Pro.local>
Date: Wed, 7 Jul 2021 17:59:33 +0200
Subject: [PATCH] added node style triangleDown to legend
---
.../network-legend.component.html | 4 ++++
.../network-legend.component.scss | 18 +++++++++++++-----
src/index.html | 2 +-
src/variables.scss | 10 +++++++---
4 files changed, 25 insertions(+), 9 deletions(-)
diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
index e90c6498..ae48c09b 100644
--- a/src/app/components/network-legend/network-legend.component.html
+++ b/src/app/components/network-legend/network-legend.component.html
@@ -25,6 +25,10 @@
<span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color>
</span>
</td>
+ <td *ngSwitchCase="'triangleDown'">
+ <span class="node {{ nodeGroup.value.shape }}" [style.border-top-color]=nodeGroup.value.color>
+ </span>
+ </td>
<td *ngSwitchCase="'diamond'">
<span class="node {{ nodeGroup.value.shape }}"
[style.background-color]=nodeGroup.value.color
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index 7e5d263b..a540d034 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -58,11 +58,19 @@ div.legend {
.triangle{
width: 0;
height: 0;
- border-left: calc(#{$legend-circle-size} / 2) solid transparent;
- border-right: calc(#{$legend-circle-size} / 2) solid transparent;
- border-bottom: $legend-circle-size solid black;
+ border-left: calc(#{$legend-triangle-size} / 2) solid transparent;
+ border-right: calc(#{$legend-triangle-size} / 2) solid transparent;
+ border-bottom: $legend-triangle-height solid black; // default color will be changed by user input
display: inline-block;
}
+ .triangleDown {
+ width: 0;
+ height: 0;
+ border-left: calc(#{$legend-triangle-size} / 2) solid transparent;
+ border-right: calc(#{$legend-triangle-size} / 2) solid transparent;
+ border-top: $legend-triangle-height solid black; // default color will be changed by user input
+ display: inline-block;
+ }
.star {
position: relative;
display: inline-block;
@@ -100,8 +108,8 @@ div.legend {
display: inline-block;
}
.legend-icon {
- width: $legend-circle-size;
- height: $legend-circle-size;
+ width: $legend-row-height;
+ height: $legend-row-height;
}
hr.edge{
width: $legend-edge-width;
diff --git a/src/index.html b/src/index.html
index b36d924c..522fd620 100644
--- a/src/index.html
+++ b/src/index.html
@@ -36,7 +36,7 @@
<network-expander id="netexp1"
config='{
- "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "circle"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "circle"}},
+ "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "triangleDown"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "triangle"}},
"edgeGroups": {"dashes": {"color": "black", "groupName": "dashes Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}},
"identifier": "symbol"
}'
diff --git a/src/variables.scss b/src/variables.scss
index 359e0965..2170d7aa 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -1,17 +1,21 @@
$row-data-selector-height: auto;
$network-footer-height: 90px;
+// Settings Legend
$legend-default-background-color: #143d1f;
-$legend-circle-size: 35px;
+$legend-row-height: 35px;
+$legend-circle-size: $legend-row-height;
$legend-star-size: 20px;
-$legend-square-width: 35px;
+$legend-square-width: $legend-row-height;
$legend-edge-width: 20px;
$legend-edge-height: 3px;
$legend-star-color: #FC0;
+$legend-triangle-size: $legend-row-height;
+$legend-triangle-height: 29px;
$height: 100%;
-
+// Settings Interface Components
$sidebar-right-width: 25%;
$sidebar-right-min-width: 210px;
$sidebar-left-width: 18%;
--
GitLab