Skip to content

Commit

Permalink
Move style info out of template
Browse files Browse the repository at this point in the history
  • Loading branch information
@annehaley
annehaley committed Jun 20, 2023
1 parent 38648d0 commit 843c7c4
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 28 deletions.
51 changes: 31 additions & 20 deletions girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand All @@ -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>
Expand All @@ -247,18 +244,18 @@ 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"
v-model="enabledLayers"
@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 }"
Expand All @@ -283,12 +280,10 @@ export default {
/>
</div>
</td>
<div
class="expand-btn"
@click="() => toggleExpanded(index)"
>
{{ expandedRows.includes(index) ? '&#708;' : '&#709;'}}
</div>
<i

This comment has been minimized.

Sign in to view

Copy link
@manthey

manthey Jun 20, 2023

Member

Should this be in a <td>? It seems like we are using table cells inconsistently.
: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"
Expand Down Expand Up @@ -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;
Expand All @@ -357,7 +368,6 @@ tr {
position: absolute;
right: 10px;
top: 5px;
font-size: 20px;
}
.advanced-section {
position: absolute;
Expand All @@ -372,6 +382,7 @@ tr {
.percentage-input {
position: relative;
margin-top: 5px;
width: 80px;
}
.percentage-input::after {
position: absolute;
Expand Down
11 changes: 7 additions & 4 deletions girder/girder_large_image/web_client/vue/components/FrameSelector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -194,14 +194,17 @@ export default Vue.extend({
:currentFrame="currentFrame"
:layers="imageMetadata.bands"
:layerMap="undefined"
:style="currentModeId === 3 ? {} : {display: 'none'}"
:class="currentModeId === 3 ? '' : 'invisible'"
@updateStyle="updateStyle"
/>
</div>
</div>
</template>

<style scoped>
.invisible {
display: none;
}
.image-frame-control-box {
display: flex;
flex-direction: column;
Expand Down
12 changes: 8 additions & 4 deletions girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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"/>
Expand Down Expand Up @@ -294,7 +294,6 @@ export default {
:max="histogram.max"
:min="currentMin"
:value="currentMax"
style="width: 80px"
@input="(e) => updateFromInput('updateMax', e.target.value)"
>
<span
Expand All @@ -306,7 +305,6 @@ export default {
:max="50"
:min="0"
:value="autoRange"
style="width: 80px"
@input="(e) => updateFromInput('updateAutoRange', e.target.value)"
>
</span>
Expand All @@ -315,6 +313,12 @@ export default {
</template>

<style scoped>
input {
width: 80px
}
.input-space {
width: 80px
}
.range-editor {
position: absolute;
display: flex;
Expand Down

0 comments on commit 843c7c4

Please sign in to comment.