From 843c7c4399fa8642999e5f718d2a80829a4bc756 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 20 Jun 2023 14:17:57 -0400
Subject: [PATCH] Move style info out of template

---
 .../vue/components/CompositeLayers.vue        | 51 +++++++++++--------
 .../vue/components/FrameSelector.vue          | 11 ++--
 .../vue/components/HistogramEditor.vue        | 12 +++--
 3 files changed, 46 insertions(+), 28 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
index b89cb004a..c7122dbe0 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -206,9 +206,9 @@ export default {
                     </th>
                     <th></th>
                     <th></th>
-                    <th style="min-width: 100px;">
+                    <th>
                         <div class="auto-range-col">
-                            <span style="font-size: 10px;">Auto Range</span>
+                            <span class="small-text">Auto Range</span>
                             <switches
                                 :value="allAutoRange()"
                                 @input="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.02)"
@@ -225,18 +225,15 @@ export default {
                                     :max="50"
                                     :min="0"
                                     :value="autoRangeForAll"
-                                    style="width: 80px"
                                     @input="(e) => updateAllAutoRanges(e.target.value)"
                                 >
                             </span>
                         </div>
+                        <i
+                            :class="expandedRows.length === layers.length ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
+                            @click="toggleAllExpanded"
+                        />
                     </th>
-                    <div
-                        class="expand-btn"
-                        @click="toggleAllExpanded"
-                    >
-                        {{ expandedRows.length === layers.length ? '&#708;' : '&#709;'}}
-                    </div>
                 </tr>
             </thead>
             <tbody>
@@ -247,9 +244,9 @@ export default {
                         framedelta
                     } in Object.values(compositeLayerInfo)"
                     :key="layerName"
-                    :style="expandedRows.includes(index) ? {height: '75px'} : {}"
+                    :class="expandedRows.includes(index) ? 'tall-row' : ''"
                 >
-                    <td style="width: 10%;">
+                    <td class="enable-col">
                         <input
                             type="checkbox"
                             :value="layerName"
@@ -257,8 +254,8 @@ export default {
                             @change="updateActiveLayers"
                         >
                     </td>
-                    <td  style="width: 40%;">{{ layerName }}</td>
-                    <td :id="layerName+'_picker'" style="width: 25%;">
+                    <td class="name-col">{{ layerName }}</td>
+                    <td :id="layerName+'_picker'" class="color-col">
                     <span
                             class="current-color"
                             :style="{ 'background-color': palette }"
@@ -283,12 +280,10 @@ export default {
                             />
                         </div>
                     </td>
-                    <div
-                        class="expand-btn"
-                        @click="() => toggleExpanded(index)"
-                    >
-                    {{ expandedRows.includes(index) ? '&#708;' : '&#709;'}}
-                    </div>
+                    <i
+                        :class="expandedRows.includes(index) ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
+                        @click="toggleAllExpanded"
+                    />
                     <div v-if="expandedRows.includes(index)" class="advanced-section">
                         <histogram-editor
                             :itemId="itemId"
@@ -330,7 +325,23 @@ export default {
     z-index: 2;
     border-bottom: 3px solid;
 }
+.small-text {
+    font-size: 10px;
+}
+.tall-row {
+    height: 75px;
+}
+.enable-col {
+    width: 10%;
+}
+.name-col {
+    width: 40%;
+}
+.color-col {
+    width: 25%;
+}
 .auto-range-col {
+    min-width: 100px;
     display: flex;
     flex-direction: column;
     align-content: space-around;
@@ -357,7 +368,6 @@ tr {
     position: absolute;
     right: 10px;
     top: 5px;
-    font-size: 20px;
 }
 .advanced-section {
     position: absolute;
@@ -372,6 +382,7 @@ tr {
 .percentage-input {
     position: relative;
     margin-top: 5px;
+    width: 80px;
 }
 .percentage-input::after {
     position: absolute;
diff --git a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
index 4422bbd63..63895daf2 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -139,8 +139,8 @@ export default Vue.extend({
 
 <template>
     <div class="image-frame-control-box" v-if="loaded">
-        <div id="current_image_frame" style="display: none;">{{ currentFrame }}</div>
-        <div id="current_image_style" style="display: none;">{{ style }}</div>
+        <div id="current_image_frame" class="invisible">{{ currentFrame }}</div>
+        <div id="current_image_style" class="invisible">{{ style }}</div>
         <div>
             <label for="mode">Image control mode: </label>
             <select
@@ -184,7 +184,7 @@ export default Vue.extend({
                 :currentFrame="currentFrame"
                 :layers="imageMetadata.channels"
                 :layerMap="imageMetadata.channelmap"
-                :style="currentModeId === 2 ? {} : {display: 'none'}"
+                :class="currentModeId === 2 ? '' : 'invisible'"
                 @updateStyle="updateStyle"
             />
             <composite-layers
@@ -194,7 +194,7 @@ export default Vue.extend({
                 :currentFrame="currentFrame"
                 :layers="imageMetadata.bands"
                 :layerMap="undefined"
-                :style="currentModeId === 3 ? {} : {display: 'none'}"
+                :class="currentModeId === 3 ? '' : 'invisible'"
                 @updateStyle="updateStyle"
             />
         </div>
@@ -202,6 +202,9 @@ export default Vue.extend({
 </template>
 
 <style scoped>
+.invisible {
+    display: none;
+}
 .image-frame-control-box {
     display: flex;
     flex-direction: column;
diff --git a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
index 7aa058004..b5e013f1b 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -218,6 +218,7 @@ export default {
             }
         },
         autoRange() {
+            if (!this.histogram) return
             let newMinPosition = this.currentMin ? this.valueToXPosition(this.currentMin) : this.xRange[0]
             let newMaxPosition = this.currentMax ? this.valueToXPosition(this.currentMax) : this.xRange[1]
             if (this.autoRange) {
@@ -256,10 +257,9 @@ export default {
                 :min="histogram.min"
                 :max="currentMax"
                 :value="currentMin"
-                style="width: 80px"
                 @input="(e) => updateFromInput('updateMin', e.target.value)"
             >
-            <span v-else style="width: 80px"/>
+            <span v-else class="input-space"/>
             <svg ref="svg" class="handles-svg">
                 <text x="5" y="43" class="small">{{ this.vRange[0] }}</text>
                 <rect ref="minExclusionBox" x="5" y="0" width="0" height="30" opacity="0.2"/>
@@ -294,7 +294,6 @@ export default {
                 :max="histogram.max"
                 :min="currentMin"
                 :value="currentMax"
-                style="width: 80px"
                 @input="(e) => updateFromInput('updateMax', e.target.value)"
             >
             <span
@@ -306,7 +305,6 @@ export default {
                     :max="50"
                     :min="0"
                     :value="autoRange"
-                    style="width: 80px"
                     @input="(e) => updateFromInput('updateAutoRange', e.target.value)"
                 >
             </span>
@@ -315,6 +313,12 @@ export default {
 </template>
 
 <style scoped>
+input {
+    width: 80px
+}
+.input-space {
+    width: 80px
+}
 .range-editor {
     position: absolute;
     display: flex;