Style adjustments

girder · Jun 15, 2023 · 692e916 · 692e916
1 parent 44b7fa6
commit 692e916
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -204,7 +204,7 @@ export default {
                             @input="toggleEnableAll"
                         >
                     </th>
-                    <th>ALL</th>
+                    <th></th>
                     <th></th>
                     <th style="min-width: 100px;">
                         <div class="auto-range-col">
@@ -235,7 +235,7 @@ export default {
                         class="expand-btn"
                         @click="toggleAllExpanded"
                     >
-                        {{ expandedRows.length === layers.length ? '&#9651;' : '&#9661;'}}
+                        {{ expandedRows.length === layers.length ? '&#708;' : '&#709;'}}
                     </div>
                 </tr>
             </thead>
@@ -244,7 +244,6 @@ export default {
                     v-for="{
                         layerName, index, palette,
                         autoRange, min, max,
-                        defaultMin, defaultMax,
                         framedelta
                     } in Object.values(compositeLayerInfo)"
                     :key="layerName"
@@ -288,11 +287,7 @@ export default {
                         class="expand-btn"
                         @click="() => toggleExpanded(index)"
                     >
-                    {{ (min === undefined && max === undefined) ||
-                       (min === defaultMin && max === defaultMax)
-                        ? expandedRows.includes(index) ? '&#9651;' : '&#9661;'
-                        : expandedRows.includes(index) ? '&#9650;' : '&#9660;'
-                    }}
+                    {{ expandedRows.includes(index) ? '&#708;' : '&#709;'}}
                     </div>
                     <div v-if="expandedRows.includes(index)" class="advanced-section">
                         <histogram-editor
@@ -333,6 +328,7 @@ export default {
     top: 0px;
     background-color: white;
     z-index: 2;
+    border-bottom: 3px solid;
 }
 .auto-range-col {
     display: flex;
@@ -345,8 +341,8 @@ export default {
     width: 45px;
 }
 .table-container {
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto;
+    max-height: 300px;
 }
 .table-container td {
     padding: 0 5px;
@@ -359,8 +355,9 @@ tr {
 }
 .expand-btn {
     position: absolute;
-    right: 0;
-    bottom: 5px;
+    right: 10px;
+    top: 5px;
+    font-size: 30px;
 }
 .advanced-section {
     position: absolute;

diff --git a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -73,20 +73,20 @@ export default {
             const ctx = this.$refs.canvas.getContext("2d");
             const widthBetweenPoints = width / hist.length
             ctx.clearRect(0, 0, width, height);
-            ctx.lineWidth = 4;
-            ctx.beginPath()
-            ctx.moveTo(0, height)
             for (var i = 0; i < hist.length; i++) {
                 const frequency = hist[i]
-                const pointX = widthBetweenPoints * i
-
-                let pointY = height - (frequency / maxFrequency * height)
+                const x0 = widthBetweenPoints * i
+                const x1 = widthBetweenPoints * (i + 1)
+                let y0 = height - (frequency / maxFrequency * height)
                 if(shortenMaxFrequency) {
-                    pointY = frequency === maxFrequency ? 0 : height - (frequency / secondMaxFrequency * height * 2 / 3)
+                    y0 = frequency === maxFrequency ? 0 : height - (frequency / secondMaxFrequency * height * 2 / 3)
                 }
-                ctx.lineTo(pointX, pointY)
+                const y1 = height
+
+                ctx.rect(x0, y0, (x1 - x0), (y1 - y0))
             }
-            ctx.stroke();
+            ctx.fillStyle = "#444"
+            ctx.fill();
         },
         xPositionToValue(xPosition) {
             const xProportion = (xPosition - this.xRange[0]) / (this.xRange[1] - this.xRange[0])