Compare commits

...

2 commits

Author SHA1 Message Date
Ruben van de Ven
c908bf16af Change: tags in sidebar 2022-05-31 14:03:50 +02:00
Ruben van de Ven
fd408f549c tooltips not in the way of the annotation overview 2022-05-31 13:37:15 +02:00
2 changed files with 35 additions and 15 deletions

View file

@ -148,6 +148,7 @@ class Annotator extends EventTarget {
}); });
this.wrapperEl = wrapperEl; this.wrapperEl = wrapperEl;
this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.wrapperEl.appendChild(this.svgEl); this.wrapperEl.appendChild(this.svgEl);
this.wrapperEl.classList.add(this.config.is_player ? "svganim_player" : "svganim_annotator"); this.wrapperEl.classList.add(this.config.is_player ? "svganim_player" : "svganim_annotator");
@ -274,7 +275,7 @@ class Annotator extends EventTarget {
}); });
this.tagsEl.appendChild(tagEl); this.tagsEl.appendChild(tagEl);
this.controlsEl.appendChild(this.tagsEl); this.wrapperEl.appendChild(this.tagsEl);
this.commentEl = document.createElement('input'); this.commentEl = document.createElement('input');
this.commentEl.type = 'text'; this.commentEl.type = 'text';

View file

@ -93,9 +93,9 @@ path.before_in {
.scrubber {} .scrubber {}
.tags { .tags {
line-height: 40px; line-height: 1.5;
display: flex; /* display: flex;
flex-direction: row; flex-direction: row; */
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -238,9 +238,15 @@ path.before_in {
} }
#interface .noUi-horizontal .noUi-tooltip { #interface .noUi-horizontal .noUi-tooltip {
/* tooltips go below the buttons */ /* tooltips go outside of the buttons */
bottom: auto; bottom: auto;
top: 110%; left: 110%;
transform: none;
top: -2px;
}
#interface .noUi-horizontal .noUi-handle-lower .noUi-tooltip {
left: auto;
right: 110%;
} }
.audioconfig { .audioconfig {
@ -251,13 +257,17 @@ path.before_in {
width: 100px; width: 100px;
/* as wide as audio controls only */ /* as wide as audio controls only */
overflow: hidden; overflow: hidden;
white-space: nowrap; /* white-space: nowrap; */
left: -50px; left: -50px;
grid-area: sidebar;
} }
.audioconfig:hover { .audioconfig:hover {
width: auto; width: auto;
left: 0px; left: 0px;
overflow: visible;
height: 200px;
} }
.audioconfig select, .audioconfig select,
@ -273,28 +283,37 @@ audio {
.svganim_annotator { .svganim_annotator {
display: flex; display: grid;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
grid-template-rows: 40px auto 100px;
grid-template-columns: 200px auto;
gap: 10px;
overflow: hidden;
} }
.svganim_annotator svg { .svganim_annotator svg {
top: 20px; top: auto;
background: white; background: white;
margin-left: 20px; margin-left: 0;
flex-shrink: 1;
flex-grow: 1;
position: static; position: static;
height: auto;
width: auto;
} }
.svganim_annotator .tags {
grid-area: 2/1/2/1;
}
.svganim_annotator .audioconfig { .svganim_annotator .audioconfig {
order: -1;
flex-grow: 0;
flex-shrink: 0;
position: static; position: static;
grid-area: 1/1/1/1;
} }
.svganim_annotator > svg {
grid-area: 1/2/2/2;
}
.svganim_annotator .controls { .svganim_annotator .controls {
grid-area: 3/2/3/2;
margin-left: 5%; margin-left: 5%;
position: static !important; position: static !important;
} }