source: main/trunk/model-interfaces-dev/atea/ocr/src/components/EditAction.vue@ 35749

Last change on this file since 35749 was 35749, checked in by cstephen, 12 months ago

Improve editing action buttons

File size: 1.4 KB
Line 
1<template>
2<div class="edit-action">
3 <button v-if="!toggleMode" class="btn-fab action-button" @click="$emit('action')">
4 <span class="material-icons mdi-l">{{ icon }}</span>
5 </button>
6
7 <toggle-button v-if="toggleMode" class="action-button" v-model="myModelValue">
8 <span class="material-icons mdi-l">{{ icon }}</span>
9 </toggle-button>
10
11 <div class="card infotab">{{ description }}</div>
12</div>
13</template>
14
15<style lang="scss" scoped>
16.edit-action {
17 display: flex;
18 position: relative;
19
20 .action-button:hover + .infotab {
21 visibility: visible;
22 min-width: 10em;
23 }
24}
25
26.infotab {
27 position: absolute;
28 height: 70%;
29 top: 15%;
30 left: 120%;
31
32 display: flex;
33 align-items: center;
34 justify-content: center;
35 visibility: hidden;
36
37 width: 0;
38 min-width: 0;
39 padding: 0 0.2em;
40
41 white-space: nowrap;
42 transition-duration: var(--transition-duration);
43}
44</style>
45
46<script>
47export default {
48 name: "EditAction",
49 props: {
50 icon: String,
51 description: String,
52 modelValue: Boolean,
53 toggleMode: Boolean
54 },
55 emits: [ "update:modelValue", "action" ],
56 computed: {
57 myModelValue: {
58 get() {
59 return this.modelValue;
60 },
61 set(newValue) {
62 this.$emit("update:modelValue", newValue);
63 }
64 }
65 }
66}
67</script>
Note: See TracBrowser for help on using the repository browser.