Channel colors & sliders

[annehaley]

Resolves #1211
Resolves #1217
Resolves #1219

[manthey]

This is working for me, but the channel name bubble cause the horizontal scroll bar to appear.

This could be solved by doing something like: :style="'left:'+value/valueMax*100+'%; transform:translateX(-'+value/valueMax*100+'%)'", which would make the bubble to the right of the slider on the left and to the left of the slider on the right (but it messes up the ::after tick position). The tick position could be made consistent by making it an explicit dom element and adjusting its style as we scrub.

[manthey]

Here is a diff that looks okay on my display, but maybe you want to do it a different way:

--- a/girder/girder_large_image/web_client/vue/components/DualInput.vue
+++ b/girder/girder_large_image/web_client/vue/components/DualInput.vue
@@ -36,11 +36,14 @@ export default {
             <div class="bubble-wrap">
                 <output
                     v-if="this.sliderLabels.length > value"
-                    :style="'left:'+value/valueMax*100+'%'"
+                    :style="'left:'+value/valueMax*100+'%; transform:translateX(-'+value/valueMax*100+'%)'"
                     class="bubble"
                 >
                     {{ this.sliderLabels[value] }}
                 </output>
+                <span v-if="this.sliderLabels.length > value"
+                    :style="'left:'+value/valueMax*100+'%; transform:translateX(-'+value/valueMax*100+'%)'"
+                    class="bubble-after"></span>
             </div>
         </td>
     </tr>
@@ -68,12 +71,12 @@ export default {
   border-radius: 4px;
   transform: translateX(-50%);
   z-index: 10;
+  white-space: nowrap;
 }
-.bubble::after {
-  content: "";
+.bubble-after {
   position: absolute;
   width: 2px;
-  height: 2px;
+  height: 4px;
   background: rgb(120, 120, 120);
   top: -1px;
   left: 50%;

[annehaley]

I like the look of that change, thanks. Committed in e7a824b

[manthey]

Because of recent upstream library change, CI will fail unless we merge master.

[manthey]

I think the only thing left is that we had been resolving the colors of all the matching channels first and then assigning colors to the remaining, but this is now assigning them in order so if we use up a color we can't later assign it based on valid match.

[annehaley]

I think the only thing left is that we had been resolving the colors of all the matching channels first and then assigning colors to the remaining, but this is now assigning them in order so if we use up a color we can't later assign it based on valid match.

I see what you mean. In 6a591e1 I split the color assignment block back into two iterations through the layer list so we can assign all regex matches first.

[manthey]

Excellent. Merge when CI passes.