paraview-lite/src/components/widgets/FloatingLookupTable/template.html

Lite ParaView client for Scientific Visualization on the Web

<v-layout
  column
  flow
  :class="[$style.container, darkMode ? $style.darkBG : $style.lightBG]"
  :style="{ left: floatingWindow.position[0] + 'px', top: floatingWindow.position[1] + 'px' }"
  v-on:mousedown="onMousePress"
>
  <v-flex xs12 :class="$style.title">
    {{lookupTable.name}}
    <v-btn
      icon
      small
      absolute
      style="top: 2px; left: 2px; width: 20px; height: 20px;"
      @click="toggleAdvanced"
    >
      <v-icon>{{ $vuetify.icons.pvLite.advanced }}</v-icon>
    </v-btn>
    <v-btn
      icon
      small
      absolute
      style="top: 2px; right: 2px; width: 20px; height: 20px;"
      @click="close"
    >
      <v-icon>{{ $vuetify.icons.pvLite.close }}</v-icon>
    </v-btn>
  </v-flex>
  <v-flex xs12 style="position: relative;">
    <img
      :class="$style.image"
      :src="lookupTable.image"
      draggable="false"
    />
  </v-flex>
  <v-flex xs12>
    <v-layout row justify-space-between flow>
      <v-flex xs5>
        <v-text-field
          class="pt-0"
          hide-details
          single-line
          type="number"
          v-model="lookupTable.range[0]"
          step="any"
          @change="updateDataRange"
        ></v-text-field>
      </v-flex>
      <v-flex xs5>
        <v-text-field
          reverse
          class="pt-0"
          hide-details
          single-line
          type="number"
          v-model="lookupTable.range[1]"
          step="any"
          @change="updateDataRange"
        ></v-text-field>
      </v-flex>
    </v-layout>
  </v-flex>
  <v-flex xs12 v-if="advanced">
    <v-layout row justify-space-between>
      <v-btn icon small style="visibility: hidden;">
        <v-icon>{{ $vuetify.icons.pvLite.piecewise }}</v-icon>
      </v-btn>
      <v-btn icon small @click="resetDataRange">
        <v-icon>{{ $vuetify.icons.pvLite.expandRange }}</v-icon>
      </v-btn>
      <v-btn icon small @click="togglePresets">
        <v-icon>{{ $vuetify.icons.pvLite.colorPalette }}</v-icon>
      </v-btn>
    </v-layout>
  </v-flex>
  <v-flex xs12 v-if="!advanced" style="height: 15px;">
  </v-flex>
  <v-flex xs12 v-show="advanced && showPresets">
    <v-layout row wrap style="width: inherit;">
      <v-flex
        xs4
        v-for="preset in presets"
        :key="preset.name"
        :class="$style.presetContainer"
      >
        <img
          :class="$style.presetImage"
          :src="preset.image"
          v-on:click="usePreset(preset.name)"
          draggable="false"
        />
      </v-flex>
    </v-layout>
  </v-flex>
</v-layout>