imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Added global empty btn styling, adjusted and WIP modal styling

Browse Source
This commit is contained in:
Colin Kallemein
2024-10-16 20:47:29 +02:00
parent f24a498246
commit be3cbf77bf
26 changed files with 89 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/utilities/ConfirmationModal.vue
View File

@ -40,7 +40,7 @@ const modalOpened = ref(props.modalOpened)
<template>
<Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190">
<template #modalHeader>
<div class="text-gray-300">
<div class="text-white">
<slot name="modalHeader"></slot>
</div>
</template>

23
src/components/utilities/Modal.vue
View File

@ -1,8 +1,11 @@
<template>
<Teleport to="body">
<div v-if="isModalOpenRef" class="fixed bg-gray border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500">
<slot name="modalHeader" />
<div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
<div class="rounded-t-xl absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90"></div>
<div class="relative z-10">
<slot name="modalHeader" />
</div>
<div class="flex gap-2.5">
<button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
<img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-full h-full invert" />
@ -12,12 +15,12 @@
</button>
</div>
</div>
<div class="overflow-hidden grow">
<slot name="modalBody" />
<img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
</div>
<div v-if="$slots.modalFooter" class="px-5 min-h-12 flex justify-end gap-7.5 items-center border-solid border-t border-gray-500">
<slot name="modalFooter" />
<div class="overflow-hidden grow relative">
<div class="rounded-b-xl absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover opacity-90"></div>
<div class="relative z-10 h-full">
<slot name="modalBody" />
</div>
<img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute z-10 bottom-0 right-0 w-5 h-5 cursor-nwse-resize" @mousedown="startResize" />
</div>
</div>
</Teleport>
@ -84,7 +87,7 @@ let startHeight = 0
let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
const modalStyle = computed(() => ({
borderRadius: isFullScreen.value ? '0' : '10px',
borderRadius: isFullScreen.value ? '0' : '12px',
top: isFullScreen.value ? '0' : `${y.value}px`,
left: isFullScreen.value ? '0' : `${x.value}px`,
width: isFullScreen.value ? '100vw' : `${width.value}px`,

2
src/components/utilities/Notifications.vue
View File

@ -1,7 +1,7 @@
<template>
<Modal v-for="notification in gameStore.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
<template #modalHeader v-if="notification.title">
<h3 class="m-0 font-medium shrink-0 text-gray-300">{{ notification.title }}</h3>
<h3 class="m-0 font-medium shrink-0 text-white">{{ notification.title }}</h3>
</template>
<template #modalBody v-if="notification.message">
<p class="m-4">{{ notification.message }}</p>