Skip to content

Commit cf48ffa

Browse files
mckenzieartsmckenziearts
committed
🐛 correction du bug sur la notification wireui component
1 parent 5e2b33a commit cf48ffa

File tree

1 file changed

+17
-20
lines changed

1 file changed

+17
-20
lines changed

‎resources/views/vendor/wireui/components/notifications.blade.php

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,17 @@
44
x-on:wireui:notification.window="addNotification($event.detail)"
55
x-on:wireui:confirm-notification.window="addConfirmNotification($event.detail)"
66
wire:ignore>
7-
<div class="max-w-sm w-full space-y-2 pointer-events-auto flex flex-col-reverse">
7+
<div class="flex flex-col-reverse w-full max-w-sm space-y-2 pointer-events-auto">
88
<template x-for="notification in notifications" :key="`notification-${notification.id}`">
9-
<div class="max-w-sm w-full bg-skin-card shadow-lg rounded-lg ring-1 ring-black
10-
ring-opacity-5 relative overflow-hidden pointer-events-auto"
9+
<div class="relative w-full max-w-sm overflow-hidden rounded-lg shadow-lg pointer-events-auto bg-skin-card ring-1 ring-black ring-opacity-5"
1110
:class="{ 'flex': notification.rightButtons }"
1211
:id="`notification.${notification.id}`"
1312
x-transition:enter="transform ease-out duration-300 transition"
1413
x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
1514
x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
1615
x-on:mouseenter="pauseNotification(notification)"
1716
x-on:mouseleave="resumeNotification(notification)">
18-
<div class="bg-secondary-300 rounded-full transition-all duration-150 ease-linear absolute top-0 left-0"
17+
<div class="absolute top-0 left-0 transition-all duration-150 ease-linear rounded-full bg-secondary-300"
1918
style="height: 2px; width: 100%;"
2019
:id="`timeout.bar.${notification.id}`"
2120
x-show="Boolean(notification.timer) && notification.progressbar !== false">
@@ -40,7 +39,7 @@
4039
</template>
4140

4241
<template x-if="notification.img">
43-
<img class="h-10 w-10 rounded-full" :src="notification.img" />
42+
<img class="w-10 h-10 rounded-full" :src="notification.img" />
4443
</template>
4544
</div>
4645
</template>
@@ -59,8 +58,8 @@
5958

6059
<!-- actions buttons -->
6160
<template x-if="!notification.dense && !notification.rightButtons && (notification.accept || notification.reject)">
62-
<div class="mt-3 flex gap-x-3">
63-
<button class="rounded-md text-sm font-medium focus:outline-none"
61+
<div class="flex mt-3 gap-x-3">
62+
<button class="text-sm font-medium rounded-md focus:outline-none"
6463
:class="{
6564
'bg-skin-card text-primary-600 hover:text-primary-500': !Boolean($wireui.dataGet(notification, 'accept.style')),
6665
[$wireui.dataGet(notification, 'accept.style')]: Boolean($wireui.dataGet(notification, 'accept.style')),
@@ -71,7 +70,7 @@
7170
x-text="$wireui.dataGet(notification, 'accept.label', '')">
7271
</button>
7372

74-
<button class="rounded-md text-sm font-medium focus:outline-none"
73+
<button class="text-sm font-medium rounded-md focus:outline-none"
7574
:class="{
7675
'bg-skin-card text-skin-inverted-muted hover:text-skin-base': !Boolean($wireui.dataGet(notification, 'reject.style')),
7776
[$wireui.dataGet(notification, 'reject.style')]: Boolean($wireui.dataGet(notification, 'reject.style')),
@@ -85,9 +84,9 @@
8584
</template>
8685
</div>
8786

88-
<div class="ml-4 shrink-0 flex">
87+
<div class="flex ml-4 shrink-0">
8988
<!-- accept button -->
90-
<button class="mr-4 shrink-0 rounded-md text-sm font-medium focus:outline-none"
89+
<button class="mr-4 text-sm font-medium rounded-md shrink-0 focus:outline-none"
9190
:class="{
9291
'text-primary-600 hover:text-primary-500': !Boolean($wireui.dataGet(notification, 'accept.style')),
9392
[$wireui.dataGet(notification, 'accept.style')]: Boolean($wireui.dataGet(notification, 'accept.style'))
@@ -98,14 +97,14 @@
9897
</button>
9998

10099
<!-- close button -->
101-
<button class="rounded-md inline-flex text-skin-muted hover:text-skin-base focus:outline-none"
100+
<button class="inline-flex rounded-md text-skin-muted hover:text-skin-base focus:outline-none"
102101
x-show="notification.closeButton"
103102
x-on:click="closeNotification(notification)">
104103
<span class="sr-only">Close</span>
105104
<x-dynamic-component
106-
:component="WireUiComponent::resolve('icon')"
107-
class="h-5 w-5"
108-
name="x"
105+
:component="WireUi::component('icon')"
106+
class="w-5 h-5"
107+
name="x"
109108
/>
110109
</button>
111110
</div>
@@ -116,11 +115,10 @@ class="h-5 w-5"
116115
<template x-if="notification.rightButtons">
117116
<div class="flex flex-col border-l border-secondary-200">
118117
<template x-if="notification.accept">
119-
<div class="h-0 flex-1 flex" :class="{
118+
<div class="flex flex-1 h-0" :class="{
120119
'border-b border-secondary-200': notification.reject
121120
}">
122-
<button class="w-full rounded-none rounded-tr-lg px-4 py-3 flex items-center
123-
justify-center text-sm font-medium focus:outline-none"
121+
<button class="flex items-center justify-center w-full px-4 py-3 text-sm font-medium rounded-none rounded-tr-lg focus:outline-none"
124122
:class="{
125123
'text-primary-600 hover:text-primary-500 hover:bg-secondary-50': !Boolean(notification.accept.style),
126124
[notification.accept.style]: Boolean(notification.accept.style),
@@ -133,9 +131,8 @@ class="h-5 w-5"
133131
</template>
134132

135133
<template x-if="notification.reject">
136-
<div class="h-0 flex-1 flex">
137-
<button class="w-full rounded-none rounded-br-lg px-4 py-3 flex items-center
138-
justify-center text-sm font-medium focus:outline-none"
134+
<div class="flex flex-1 h-0">
135+
<button class="flex items-center justify-center w-full px-4 py-3 text-sm font-medium rounded-none rounded-br-lg focus:outline-none"
139136
:class="{
140137
'text-skin-inverted-muted hover:text-skin-base': !Boolean(notification.reject.style),
141138
[notification.reject.style]: Boolean(notification.reject.style),

0 commit comments

Comments
 (0)