From 87cf878fa8fa545a539d3ea6c59525e8de239f81 Mon Sep 17 00:00:00 2001
From: Michael Hartung <michi@Michaels-MacBook-Pro.local>
Date: Wed, 7 Jul 2021 17:38:00 +0200
Subject: [PATCH] added node style dot to legend
---
.../network-legend/network-legend.component.html | 5 +++++
.../network-legend/network-legend.component.scss | 12 ++++++++++--
src/app/config.ts | 2 +-
src/index.html | 2 +-
src/styles.scss | 1 -
5 files changed, 17 insertions(+), 5 deletions(-)
diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
index 9d54cb34..e90c6498 100644
--- a/src/app/components/network-legend/network-legend.component.html
+++ b/src/app/components/network-legend/network-legend.component.html
@@ -38,6 +38,11 @@
>
</span>
</td>
+ <td *ngSwitchCase="'circle'">
+ <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color>
+ ...
+ </span>
+ </td>
<td *ngSwitchDefault>
<span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color>
</span>
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index 2bb00112..7e5d263b 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -28,7 +28,7 @@ div.legend {
display: inline-block;
}
.box{
- // class "box" exists in bulma css, we need only small changes
+ // class "box" exists in bulma css, only small changes needed
height: 100%;
width: 100%;
display: inline-block;
@@ -39,13 +39,21 @@ div.legend {
width: 100%;
border-radius: 50%;
display: inline-block;
- }
+ }
+ .dot{
+ background: $legend-default-background-color;
+ border-radius: 50%;
+ width: $legend-circle-size;
+ height: $legend-circle-size;
+ display: inline-block;
+ }
.circle{
background: $legend-default-background-color;
border-radius: 50%;
width: $legend-circle-size;
height: $legend-circle-size;
display: inline-block;
+ text-align: center;
}
.triangle{
width: 0;
diff --git a/src/app/config.ts b/src/app/config.ts
index 50bfb974..09c462e1 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -1,7 +1,7 @@
export interface NodeGroup {
groupName: string;
color: string;
- shape: 'circle' | 'triangle' | 'star' | 'square' | 'image' | 'text' | 'ellipse' | 'box' | 'diamond';
+ shape: 'circle' | 'triangle' | 'star' | 'square' | 'image' | 'text' | 'ellipse' | 'box' | 'diamond' | 'dot';
type: string;
image?: string;
detailShowLabel?: boolean;
diff --git a/src/index.html b/src/index.html
index 00802705..b36d924c 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": "diamond"}, "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": "circle"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "circle"}},
"edgeGroups": {"dashes": {"color": "black", "groupName": "dashes Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}},
"identifier": "symbol"
}'
diff --git a/src/styles.scss b/src/styles.scss
index eae2fd7d..46417e24 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -44,7 +44,6 @@ img.menu-icon.is-hoverable.navbar-item.logo {
overflow-y: scroll;
padding-right: 5px;
}
-
}
div.navbar-menu {
--
GitLab