mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-04 05:39:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

make success snackbar less obstrusive

Browse Source
This commit is contained in:
vabene1111
2025-04-26 23:23:50 +02:00
parent 06920807c6
commit 7232c9373f
1 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
vue3/src/components/display/VSnackbarQueued.vue
View File

@@ -5,7 +5,7 @@
:timer="true" :timer="true"
:timeout="visibleMessage.showTimeout" :timeout="visibleMessage.showTimeout"
:color="visibleMessage.type" :color="visibleMessage.type"
:vertical="props.vertical" :vertical="showViewButton && props.vertical"
:location="props.location" :location="props.location"
:close-on-back="false" :close-on-back="false"
multi-line multi-line
@@ -14,7 +14,7 @@
<h3 v-if="visibleMessage.msg.title">{{ visibleMessage.msg.title }}</h3> <h3 v-if="visibleMessage.msg.title">{{ visibleMessage.msg.title }}</h3>
<span class="text-pre">{{ visibleMessage.msg.text }}</span> <span class="text-pre">{{ visibleMessage.msg.text }}</span>
<template v-slot:actions> <template #actions v-if="showViewButton">
<v-btn ref="ref_btn_view">{{$t('View')}}</v-btn> <v-btn ref="ref_btn_view">{{$t('View')}}</v-btn>
<v-btn variant="text" @click="removeItem()"> <v-btn variant="text" @click="removeItem()">
@@ -22,6 +22,9 @@
<span v-else>{{$t('Close')}}</span> <span v-else>{{$t('Close')}}</span>
</v-btn> </v-btn>
</template> </template>
<template #actions v-else>
<v-btn icon="$close" size="x-small" @click="removeItem()"></v-btn>
</template>
</v-snackbar> </v-snackbar>
<message-list-dialog :activator="viewMessageDialogBtn"></message-list-dialog> <message-list-dialog :activator="viewMessageDialogBtn"></message-list-dialog>
@@ -30,7 +33,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref, useTemplateRef} from 'vue' import {computed, ref, useTemplateRef} from 'vue'
import {Message, useMessageStore} from "@/stores/MessageStore"; import {Message, useMessageStore} from "@/stores/MessageStore";
import {DateTime} from "luxon"; import {DateTime} from "luxon";
import MessageListDialog from "@/components/dialogs/MessageListDialog.vue"; import MessageListDialog from "@/components/dialogs/MessageListDialog.vue";
@@ -56,6 +59,16 @@ const props = defineProps({
} }
}) })
/**
* determine the snackbar layout depending if data is given or not
*/
const showViewButton = computed(() => {
if(Object.keys(visibleMessage.value).length > 0){
return Object.keys(visibleMessage.value.data).length > 0
}
return false
})
// ref to open message list dialog // ref to open message list dialog
const viewMessageDialogBtn = useTemplateRef('ref_btn_view') const viewMessageDialogBtn = useTemplateRef('ref_btn_view')
// ID of message timeout currently running // ID of message timeout currently running