andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

better scrolling of legend

Browse Source
This commit is contained in:
Andreas Huber
2023-10-03 14:12:59 +02:00
parent a64e851c33
commit b0467c4571
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pdb-js/src/app/plot-view/plot-view.component.html
View File

@@ -5,9 +5,11 @@
class="plot-view--legend" class="plot-view--legend"
[cdkDragFreeDragPosition]="legendInitialPosition"> [cdkDragFreeDragPosition]="legendInitialPosition">
<div cdkDragHandle></div> <div cdkDragHandle></div>
<div class="plot-view--legend-content">
<ol> <ol>
<li *ngFor="let stat of dataSeries()"><div class="{{ pointTypeClass(stat.dashTypeAndColor) }}" title="{{ stat.name }}"></div>{{ stat.name }}</li> <li *ngFor="let stat of dataSeries()"><div class="{{ pointTypeClass(stat.dashTypeAndColor) }}" title="{{ stat.name }}"></div>{{ stat.name }}</li>
</ol> </ol>
</div>
</div> </div>
<div <div
*ngIf="imageUrl"> *ngIf="imageUrl">

15
pdb-js/src/app/plot-view/plot-view.component.scss
View File

@@ -23,7 +23,6 @@ img {
} }
.plot-view--legend { .plot-view--legend {
padding-bottom: 0.5em;
border: solid 1px #ccc; border: solid 1px #ccc;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -36,9 +35,6 @@ img {
0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12); 0 1px 5px 0 rgba(0, 0, 0, 0.12);
background-color: white; background-color: white;
max-height: 30em;
overflow: auto;
max-width: 60em;
} }
.plot-view--legend:active { .plot-view--legend:active {
@@ -58,6 +54,15 @@ img {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAF0lEQVQI12P4//8/AwMDhGSEUFCAUwYAJl4R8Z1D4wIAAAAASUVORK5CYII=); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAF0lEQVQI12P4//8/AwMDhGSEUFCAUwYAJl4R8Z1D4wIAAAAASUVORK5CYII=);
} }
.plot-view--legend-content {
max-height: 30em;
overflow: auto;
max-width: 60em;
overflow: auto;
resize: both;
padding-bottom: 0.5em;
}
.plot-view--legend ol { .plot-view--legend ol {
padding-inline-start: 0.7em; padding-inline-start: 0.7em;
} }
@@ -70,4 +75,6 @@ img {
} }
.plot-view--legend ol li .plot-details-plotType{ .plot-view--legend ol li .plot-details-plotType{
margin-right: 0.3em; margin-right: 0.3em;
flex-shrink: 0;
flex-grow: 0;
} }