Skip to content

Commit

Permalink
add tooltip to conversation actions
Browse files Browse the repository at this point in the history
  • Loading branch information
juzeon committed Jan 20, 2024
1 parent 48fe81d commit 2a06f0a
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 5 deletions.
23 changes: 23 additions & 0 deletions frontend/src/components/index/ActionIconButton.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<script setup lang="ts">
let props = defineProps<{
icon: string,
text: string,
disabled?: boolean,
}>()
let emit = defineEmits<{
(e: 'click'): void
}>()
</script>

<template>
<v-tooltip location="bottom" :text="text">
<template #activator="{props}">
<v-btn @click="emit('click')" color="primary" density="compact" :icon="icon" v-bind="props"
:disabled="disabled ?? false"></v-btn>
</template>
</v-tooltip>
</template>

<style scoped>
</style>
11 changes: 6 additions & 5 deletions frontend/src/components/index/Conversation.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script setup lang="ts">
import dayjs from "dayjs"
import LocalizedFormat from "dayjs/plugin/localizedFormat"
import ActionIconButton from "./ActionIconButton.vue"
dayjs.extend(LocalizedFormat)
Expand Down Expand Up @@ -32,11 +33,11 @@ let emit = defineEmits<{
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="emit('share')" color="primary" density="comfortable" icon="mdi-share-variant"></v-btn>
<v-btn @click="emit('export')" color="primary" density="comfortable" icon="mdi-export"></v-btn>
<v-btn @click="emit('edit')" color="primary" density="compact" icon="mdi-pencil"></v-btn>
<v-btn @click="emit('delete')" color="primary" :disabled="disabled ?? false" density="compact"
icon="mdi-delete"></v-btn>
<action-icon-button @click="emit('share')" icon="mdi-share-variant" text="Share"></action-icon-button>
<action-icon-button @click="emit('export')" icon="mdi-export" text="Export"></action-icon-button>
<action-icon-button @click="emit('edit')" icon="mdi-pencil" text="Edit"></action-icon-button>
<action-icon-button @click="emit('delete')" icon="mdi-delete" text="Delete"
:disabled="disabled ?? false"></action-icon-button>
</v-card-actions>
</v-card>
</template>
Expand Down

0 comments on commit 2a06f0a

Please sign in to comment.