Skip to content

Commit

Permalink
Fix color manipulation panel display when more than one image in a vi…
Browse files Browse the repository at this point in the history 
…ewer

Signed-off-by: Ulysse Rubens <[email protected]>
  • Loading branch information
@urubens
urubens committed Mar 5, 2020
1 parent 3c21c26 commit 87f4eb6
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 62 deletions.
6 changes: 3 additions & 3 deletions src/components/viewer/CytomineImage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -811,18 +811,18 @@ $colorOpenedPanelLink: #6c95c8;
}
}

.panels li:nth-child(-n+7) .panel-options {
.panels li:nth-child(-n+8) .panel-options {
bottom: -7.5em;
min-height: 13em;
}

.panels li:nth-child(-n+3) .panel-options {
.panels li:nth-child(-n+4) .panel-options {
top: -1.75em;
bottom: auto;
min-height: 7.5em;
}

.panels li:nth-child(4) .panel-options {
.panels li:nth-child(5) .panel-options {
top: -5.5em;
bottom: auto;
}
Expand Down
132 changes: 73 additions & 59 deletions src/components/viewer/panels/ColorManipulation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,61 +14,64 @@


<template>
<div class="color-manipulation">
<div>
<h1>{{$t('colors')}}</h1>
<template v-if="canComputeHistogram">
<b-message v-if="error" type="is-danger" has-icon icon-size="is-small" size="is-small">
<p> {{ $t('unexpected-error-info-message') }} </p>
</b-message>
<div class="histogram-actions" v-else-if="!loading && !hasHistograms">
<a class="button is-small is-fullwidth" @click="computeHistograms()">{{$t('button-compute-histogram')}}</a>
</div>
<b-tabs type="is-boxed" class="histogram" v-else-if="loading || hasHistograms">
<b-loading :is-full-page="false" class="small" :active="loading" />
<b-tab-item v-for="sampleHisto in sampleHistograms" :key="`${sampleHisto.id}`">
<template #header>
<i class="fa fa-circle color-preview" :style="{color: sampleColor(sampleHisto.sample)}" />
{{$t('sample-histogram-abbr')}} {{sampleHisto.sample}}
</template>
<sample-histogram :index="index" :sampleHistogram="sampleHisto" :histogram-scale="histogramScale" :revision="revisionBrightnessContrast" />
</b-tab-item>
</b-tabs>
</template>
<table>
<!-- <tr>
<td>{{ $t('contrast') }}</td>
<td>
<cytomine-slider v-model="contrast" :min="0.25" :max="10" :interval="0.25" :integer-only="false"/>
</td>
</tr>-->
<tr>
<td>{{ $t('gamma') }}</td>
<td>
<cytomine-slider v-model="gamma" :min="0.1" :max="4" :interval="0.1" :integer-only="false"/>
</td>
</tr>
<tr class="has-border-bottom">
<td>{{$t('inverse')}}</td>
<td>
<b-switch v-model="inverse" class="switch">
<template v-if="inverse">{{$t('yes')}}</template>
<template v-else>{{$t('no')}}</template>
</b-switch>
</td>
</tr>
<tr v-if="filters && filters.length > 0" class="has-border-bottom">
<td>{{ $t('filter') }}</td>
<td>
<b-select v-model="selectedFilter" size="is-small">
<option :value="null">{{$t('original-no-filter')}}</option>
<option v-for="filter in filters" :key="filter.id" :value="filter.prefix">
{{filter.name}}
</option>
</b-select>
</td>
</tr>
</table>
<div class="color-manipulation-wrapper" :class="{'limited-wrapper': nbImages > 2}">
<template v-if="canComputeHistogram">
<b-message v-if="error" type="is-danger" has-icon icon-size="is-small" size="is-small">
<p> {{ $t('unexpected-error-info-message') }} </p>
</b-message>
<div class="histogram-actions" v-else-if="!loading && !hasHistograms">
<a class="button is-small is-fullwidth" @click="computeHistograms()">{{$t('button-compute-histogram')}}</a>
</div>
<b-tabs type="is-boxed" class="histogram" v-else-if="loading || hasHistograms">
<b-loading :is-full-page="false" class="small" :active="loading" />
<b-tab-item v-for="sampleHisto in sampleHistograms" :key="`${sampleHisto.id}`">
<template #header>
<i class="fa fa-circle color-preview" :style="{color: sampleColor(sampleHisto.sample)}" />
{{$t('sample-histogram-abbr')}} {{sampleHisto.sample}}
</template>
<sample-histogram :index="index" :sampleHistogram="sampleHisto" :histogram-scale="histogramScale" :revision="revisionBrightnessContrast" />
</b-tab-item>
</b-tabs>
</template>
<table>
<!-- <tr>
<td>{{ $t('contrast') }}</td>
<td>
<cytomine-slider v-model="contrast" :min="0.25" :max="10" :interval="0.25" :integer-only="false"/>
</td>
</tr>-->
<tr>
<td>{{ $t('gamma') }}</td>
<td>
<cytomine-slider v-model="gamma" :min="0.1" :max="4" :interval="0.1" :integer-only="false"/>
</td>
</tr>
<tr class="has-border-bottom">
<td>{{$t('inverse')}}</td>
<td>
<b-switch v-model="inverse" class="switch">
<template v-if="inverse">{{$t('yes')}}</template>
<template v-else>{{$t('no')}}</template>
</b-switch>
</td>
</tr>
<tr v-if="filters && filters.length > 0" class="has-border-bottom">
<td>{{ $t('filter') }}</td>
<td>
<b-select v-model="selectedFilter" size="is-small">
<option :value="null">{{$t('original-no-filter')}}</option>
<option v-for="filter in filters" :key="filter.id" :value="filter.prefix">
{{filter.name}}
</option>
</b-select>
</td>
</tr>
</table>


</div>
<div class="actions">
<div class="level">
<template v-if="maxRank > 1 && hasHistograms">
Expand All @@ -79,7 +82,7 @@

<button class="level-item button is-small" @click="reset()">{{$t('button-reset')}}</button>
</div>
<a class="is-fullwidth button is-small" @click="switchHistogramScale()" v-if="hasHistograms">{{switchHistogramScaleLabel}}</a>
<a class="is-fullwidth button is-small" @click="switchHistogramScale()" v-if="hasHistograms">{{switchHistogramScaleLabel}}</a>
</div>
</div>
</template>
Expand Down Expand Up @@ -107,6 +110,12 @@ export default {
},
computed: {
project: get('currentProject/project'),
viewerWrapper() {
return this.$store.getters['currentProject/currentViewer'];
},
nbImages() {
return Object.keys(this.viewerWrapper.images).length;
},
imageModule() {
return this.$store.getters['currentProject/imageModule'](this.index);
},
Expand Down Expand Up @@ -270,6 +279,16 @@ export default {
</script>

<style scoped>
.color-manipulation-wrapper {

overflow: auto;
margin-bottom: 0.4em !important;
}

.limited-wrapper {
max-height: 13em;
}

td, tr {
vertical-align: middle !important;
}
Expand All @@ -284,11 +303,6 @@ td:last-child {
width: 100%;
}

.actions {
padding-top: 1em;
margin-bottom: 0.5em;
}

.actions .button, .histogram-actions .button {
margin: 3px;
box-sizing: border-box;
Expand Down

0 comments on commit 87f4eb6

Please sign in to comment.