OpenGeodeWeb-Front/app/components/ZScaling.vue at c10cbae7151f69a2a00e9ecd0d2ed0be6034cfae · Geode-solutions/OpenGeodeWeb-Front · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<script setup>
  import GlassCard from "@ogw_front/components/GlassCard"

  const zScale = defineModel({ type: Number, default: 1 })
  const { width } = defineProps({
    width: { type: Number, default: 400 },
  })

  const emit = defineEmits(["close"])
</script>
<template>
  <GlassCard
    @click.stop
    title="Z Scaling Control"
    :width="width"
    :ripple="false"
    variant="panel"
    padding="pa-0"
    class="position-absolute rounded-xl elevation-24"
    style="z-index: 2; top: 90px; right: 55px"
  >
    <v-card-text class="pa-5">
      <v-container>
        <v-row>
          <v-col cols="12" class="py-2">
            <v-slider
              v-model="zScale"
              :min="1"
              :max="10"
              :step="0.2"
              label="Z Scale"
              thumb-label
            />
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" class="py-2">
            <v-text-field
              v-model.number="zScale"
              type="number"
              label="Z Scale Value"
              outlined
              dense
              hide-details
              step="0.1"
              :min="1"
            />
          </v-col>
        </v-row>
      </v-container>
    </v-card-text>

    <template #actions>
      <v-card-actions class="justify-center pb-4">
        <v-btn variant="text" color="white" @click="emit('close')">Close</v-btn>
        <v-btn variant="outlined" color="white" @click="emit('close')"
          >Apply</v-btn
        >
      </v-card-actions>
    </template>
  </GlassCard>
</template>

<style scoped>
  .z-scaling-menu {
    position: absolute;
    z-index: 2;
    top: 90px;
    right: 55px;
    border-radius: 12px !important;
  }

  .custom-number-input :deep(.v-input__control) {
    min-height: 48px;
  }
</style>