add tooltips to most UI elements

This commit is contained in:
Yeicor
2024-02-24 12:51:53 +01:00
parent 3795e512cc
commit cd5c2ca362
5 changed files with 34 additions and 20 deletions

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import {defineModel, ref} from "vue";
import {VBtn, VSelect} from "vuetify/lib/components";
import {VBtn, VSelect, VTooltip} from "vuetify/lib/components";
import SvgIcon from '@jamescoyle/vue-icon/lib/svg-icon.vue';
import type {ModelViewerElement} from '@google/model-viewer';
import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
@@ -128,9 +128,16 @@ function toggleSelection() {
<template>
<div class="select-parent">
<v-btn icon @click="toggleSelection" :variant="selectionEnabled ? 'tonal' : 'elevated'">
<v-tooltip activator="parent">{{ selectionEnabled ? 'Disable Selection Mode' : 'Enable Selection Mode' }}
</v-tooltip>
<svg-icon type="mdi" :path="mdiCursorDefaultClick"/>
</v-btn>
<v-select class="select-only" variant="underlined" :items="['Faces', 'Edges', 'Vertices']" v-model="selectFilter"/>
<v-tooltip :text="'Select Only ' + selectFilter" :open-on-click="false">
<template v-slot:activator="{ props }">
<v-select v-bind="props" class="select-only" variant="underlined" :items="['Faces', 'Edges', 'Vertices']"
v-model="selectFilter"/>
</template>
</v-tooltip>
</div>
</template>
@@ -151,10 +158,4 @@ function toggleSelection() {
position: relative;
top: -12px;
}
</style>
<style>
.mdi-chevron-down, .mdi-menu-down { /* HACK: mdi is not fully imported, only required icons... */
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5H7z"/></svg>');
}
</style>