paraview-lite/src/components/core/GlobalSettings/template.html

Lite ParaView client for Scientific Visualization on the Web

<v-container :class="$style.container">

  <v-card flat :class="$style.card">
    <div :class="$style.heading">
      <span class="body-2">Settings</span>
      <v-btn
        @click="resetSettings"
        absolute
        icon
        flat
        style="top: 50%; right: 0; transform: translateY(-50%);"
        v-show="hasChanges"
      >
        <v-icon>{{ $vuetify.icons.pvLite.undo }}</v-icon>
    </v-btn>
    </div>
    <v-divider :class="$style.divider" />
    <v-container fluid grid-list-md :class="$style.noPadding">
      <v-layout row wrap align-center>
        <v-flex xs10>
          <span class="body-2">Auto Apply</span>
        </v-flex>
        <v-flex xs2>
          <v-switch
            v-model="autoApply"
            hide-details
            :class="$style.noTop"
          />
        </v-flex>
        <v-flex xs10>
          <span class="body-2">Dark mode</span>
        </v-flex>
        <v-flex xs2>
          <v-switch
            v-model="darkMode"
            hide-details
            :class="$style.noTop"
          />
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>

  <v-card flat :class="$style.card">
    <div :class="$style.heading">
      <span class="body-2">Background</span>
    </div>
    <v-divider :class="$style.divider" />
    <palette-picker
      :palette="palette"
      :size="20"
      v-model="background"
    />
  </v-card>

  <v-card flat :class="$style.card">
    <div :class="$style.heading">
      <span class="body-2">View</span>
    </div>
    <v-divider :class="$style.divider" />
    <v-container fluid grid-list-md :class="$style.noPadding">
      <v-layout row wrap align-center>
        <v-flex xs10>
          <span class="body-2">Remote/Local</span>
        </v-flex>
        <v-flex xs2>
          <v-switch
            hide-details
            :class="$style.noTop"
            disabled
          />
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>

  <v-card flat :class="$style.card">
    <div :class="$style.heading">
      <span class="body-2">Remote rendering</span>
    </div>
    <v-divider :class="$style.divider" />
    <v-container fluid grid-list-md :class="$style.noPadding">
      <v-layout row wrap align-center>
        <v-flex xs5>
          <span class="body-2">Quality</span>
        </v-flex>
        <v-flex xs7>
          <v-slider
            :class="$style.noTop"
            hide-details
            thumb-label
            v-model="interactiveQuality"
            :min="5"
            :max="100"
            :step="1"
          />
        </v-flex>
        <v-flex xs5>
          <span class="body-2">Size ratio</span>
        </v-flex>
        <v-flex xs7>
          <v-slider
            :class="$style.noTop"
            hide-details
            thumb-label
            v-model="interactiveRatio"
            :min="0.1"
            :max="1"
            :step="0.01"
          />
        </v-flex>
        <v-flex xs5>
          <span class="body-2">Framerate (fps)</span>
        </v-flex>
        <v-flex xs7>
          <v-slider
            :class="$style.noTop"
            hide-details
            thumb-label
            v-model="maxFPS"
            :min="15"
            :max="30"
            :step="1"
          />
        </v-flex>
<!--         <v-flex xs10>
          <span class="body-2">Rendering statistics</span>
        </v-flex>
        <v-flex xs2>
          <v-switch
            v-model="showRenderingStats"
            hide-details
            :class="$style.noTop"
          />
        </v-flex> -->
      </v-layout>
    </v-container>
  </v-card>

</v-container>