Skip to content

Commit cbbfda5

Browse files
thapacodes4uthapacodes4u
committed
fix: complete MediaGallery Filament v4 migration
1 parent 209879e commit cbbfda5

8 files changed

Lines changed: 430 additions & 133 deletions

File tree

‎resources/css/media-gallery.css‎

Lines changed: 328 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
display: none !important;
33
}
44

5+
.eclipse-media-gallery {
6+
display: flex;
7+
flex-direction: column;
8+
gap: 1rem;
9+
}
10+
511
.eclipse-media-gallery [draggable="true"] {
612
cursor: move;
713
}
@@ -10,6 +16,291 @@
1016
cursor: grabbing;
1117
}
1218

19+
.eclipse-media-gallery-header {
20+
display: flex;
21+
flex-direction: column;
22+
gap: 0.75rem;
23+
}
24+
25+
@media (min-width: 640px) {
26+
.eclipse-media-gallery-header {
27+
flex-direction: row;
28+
align-items: center;
29+
justify-content: space-between;
30+
}
31+
}
32+
33+
.eclipse-media-gallery-bulk-controls {
34+
display: flex;
35+
align-items: center;
36+
gap: 0.75rem;
37+
}
38+
39+
.eclipse-media-gallery-select-label {
40+
display: flex;
41+
align-items: center;
42+
gap: 0.5rem;
43+
cursor: pointer;
44+
}
45+
46+
.eclipse-media-gallery-select-text {
47+
font-size: 0.875rem;
48+
line-height: 1.25rem;
49+
font-weight: 500;
50+
color: rgb(55 65 81);
51+
user-select: none;
52+
}
53+
54+
.dark .eclipse-media-gallery-select-text {
55+
color: rgb(209 213 219);
56+
}
57+
58+
.eclipse-media-gallery-bulk-actions {
59+
display: flex;
60+
align-items: center;
61+
gap: 0.5rem;
62+
margin-left: 0.5rem;
63+
}
64+
65+
.eclipse-media-gallery-action-buttons {
66+
display: flex;
67+
align-items: center;
68+
gap: 0.5rem;
69+
flex-shrink: 0;
70+
}
71+
72+
.eclipse-media-gallery-grid-wrapper {
73+
display: flex;
74+
flex-direction: column;
75+
gap: 1rem;
76+
}
77+
78+
.eclipse-media-gallery-grid {
79+
display: grid;
80+
gap: 0.75rem;
81+
}
82+
83+
.eclipse-media-gallery-card {
84+
position: relative;
85+
overflow: hidden;
86+
transition: all 300ms;
87+
border-radius: 0.75rem;
88+
background-color: rgb(255 255 255);
89+
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
90+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
91+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
92+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
93+
--tw-ring-color: rgb(0 0 0 / 0.05);
94+
}
95+
96+
.dark .eclipse-media-gallery-card {
97+
background-color: rgb(17 24 39);
98+
--tw-ring-color: rgb(255 255 255 / 0.1);
99+
}
100+
101+
.eclipse-media-gallery-card.draggable {
102+
cursor: move;
103+
}
104+
105+
.eclipse-media-gallery-card.hoverable:hover {
106+
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
107+
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
108+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
109+
}
110+
111+
.eclipse-media-gallery-card.selected {
112+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
113+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
114+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
115+
--tw-ring-color: rgb(59 130 246);
116+
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
117+
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
118+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
119+
background-color: rgb(239 246 255);
120+
}
121+
122+
.dark .eclipse-media-gallery-card.selected {
123+
--tw-ring-color: rgb(96 165 250);
124+
background-color: rgb(30 58 138 / 0.2);
125+
}
126+
127+
.eclipse-media-gallery-card.dragged {
128+
opacity: 0.5;
129+
}
130+
131+
.eclipse-media-gallery-card.drag-over {
132+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
133+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
134+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
135+
--tw-ring-color: rgb(96 165 250);
136+
background-color: rgb(239 246 255);
137+
}
138+
139+
.dark .eclipse-media-gallery-card.drag-over {
140+
background-color: rgb(30 58 138 / 0.2);
141+
}
142+
143+
.eclipse-image-card-container {
144+
position: relative;
145+
background-color: rgb(243 244 246);
146+
cursor: pointer;
147+
display: flex;
148+
align-items: center;
149+
justify-content: center;
150+
overflow: hidden;
151+
}
152+
153+
.eclipse-image-card-img {
154+
max-width: 100%;
155+
max-height: 100%;
156+
width: auto;
157+
height: auto;
158+
object-fit: contain;
159+
user-select: none;
160+
pointer-events: none;
161+
}
162+
163+
.eclipse-image-card-img.clickable {
164+
cursor: pointer;
165+
pointer-events: auto;
166+
}
167+
168+
.eclipse-image-card-cover-badge {
169+
position: absolute;
170+
z-index: 20;
171+
top: 8px;
172+
left: 8px;
173+
}
174+
175+
.eclipse-image-card-content {
176+
padding: 0.75rem;
177+
}
178+
179+
.eclipse-image-card-title {
180+
font-size: 0.875rem;
181+
line-height: 1.25rem;
182+
font-weight: 500;
183+
color: rgb(17 24 39);
184+
overflow: hidden;
185+
text-overflow: ellipsis;
186+
white-space: nowrap;
187+
}
188+
189+
.dark .eclipse-image-card-title {
190+
color: rgb(243 244 246);
191+
}
192+
193+
.eclipse-image-card-description {
194+
font-size: 0.75rem;
195+
line-height: 1rem;
196+
color: rgb(75 85 99);
197+
display: -webkit-box;
198+
-webkit-line-clamp: 1;
199+
-webkit-box-orient: vertical;
200+
overflow: hidden;
201+
}
202+
203+
.dark .eclipse-image-card-description {
204+
color: rgb(156 163 175);
205+
}
206+
207+
.eclipse-image-card-actions {
208+
display: flex;
209+
flex-wrap: wrap;
210+
align-items: center;
211+
justify-content: space-between;
212+
margin-top: 0.5rem;
213+
}
214+
215+
.eclipse-image-card-buttons {
216+
display: flex;
217+
align-items: center;
218+
gap: 0.5rem;
219+
}
220+
221+
.eclipse-media-gallery-empty {
222+
text-align: center;
223+
border-radius: 0.75rem;
224+
background-color: rgb(249 250 251 / 0.3);
225+
min-height: 280px;
226+
display: flex;
227+
flex-direction: column;
228+
align-items: center;
229+
justify-content: center;
230+
gap: 1.5rem;
231+
padding: 3rem 1.5rem;
232+
border-width: 2px;
233+
border-style: dashed;
234+
border-color: rgb(209 213 219);
235+
}
236+
237+
.dark .eclipse-media-gallery-empty {
238+
background-color: rgb(17 24 39 / 0.3);
239+
border-color: rgb(75 85 99);
240+
}
241+
242+
.eclipse-media-gallery-empty-content {
243+
display: flex;
244+
flex-direction: column;
245+
align-items: center;
246+
gap: 1rem;
247+
}
248+
249+
.eclipse-media-gallery-empty-icon-wrapper {
250+
padding: 1rem;
251+
border-radius: 9999px;
252+
background-color: rgb(243 244 246);
253+
}
254+
255+
.dark .eclipse-media-gallery-empty-icon-wrapper {
256+
background-color: rgb(31 41 55);
257+
}
258+
259+
.eclipse-media-gallery-empty-icon {
260+
height: 3rem;
261+
width: 3rem;
262+
color: rgb(156 163 175);
263+
}
264+
265+
.dark .eclipse-media-gallery-empty-icon {
266+
color: rgb(107 114 128);
267+
}
268+
269+
.eclipse-media-gallery-empty-text {
270+
display: flex;
271+
flex-direction: column;
272+
gap: 0.5rem;
273+
}
274+
275+
.eclipse-media-gallery-empty-title {
276+
font-size: 1rem;
277+
line-height: 1.5rem;
278+
font-weight: 600;
279+
color: rgb(55 65 81);
280+
}
281+
282+
.dark .eclipse-media-gallery-empty-title {
283+
color: rgb(229 231 235);
284+
}
285+
286+
.eclipse-media-gallery-empty-description {
287+
font-size: 0.875rem;
288+
line-height: 1.25rem;
289+
color: rgb(107 114 128);
290+
max-width: 32rem;
291+
}
292+
293+
.dark .eclipse-media-gallery-empty-description {
294+
color: rgb(156 163 175);
295+
}
296+
297+
.eclipse-media-gallery-empty-actions {
298+
display: flex;
299+
align-items: center;
300+
gap: 0.75rem;
301+
margin-top: 0.5rem;
302+
}
303+
13304
.eclipse-image-lightbox-overlay {
14305
position: fixed;
15306
top: 0;
@@ -135,19 +426,47 @@
135426
line-height: 1.5;
136427
}
137428

138-
.eclipse-image-card-container {
139-
background-color: #f3f4f6;
140-
cursor: pointer;
429+
.eclipse-icon-sm {
430+
height: 1rem;
431+
width: 1rem;
432+
}
433+
434+
.eclipse-icon-md {
435+
height: 1.5rem;
436+
width: 1.5rem;
437+
}
438+
439+
.eclipse-icon-lg {
440+
height: 2rem;
441+
width: 2rem;
442+
}
443+
444+
.eclipse-icon-xl {
445+
height: 3rem;
446+
width: 3rem;
447+
}
448+
449+
.eclipse-media-preview {
141450
display: flex;
451+
flex-direction: column;
142452
align-items: center;
143-
justify-content: center;
144-
overflow: hidden;
453+
gap: 0.5rem;
145454
}
146455

147-
.eclipse-image-card-img {
456+
.eclipse-media-preview-image {
148457
max-width: 100%;
149-
max-height: 100%;
150-
width: auto;
151-
height: auto;
458+
max-height: 12rem;
152459
object-fit: contain;
460+
border-radius: 0.5rem;
461+
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
462+
}
463+
464+
.eclipse-media-preview-filename {
465+
font-size: 0.75rem;
466+
line-height: 1rem;
467+
color: rgb(107 114 128);
468+
}
469+
470+
.dark .eclipse-media-preview-filename {
471+
color: rgb(156 163 175);
153472
}

‎resources/views/components/media-lightbox.blade.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ class="eclipse-image-lightbox-overlay"
1212

1313
<div class="eclipse-image-lightbox-container" @click.stop>
1414
<button type="button" @click.stop="lightboxOpen = false" class="eclipse-image-lightbox-close">
15-
<x-filament::icon icon="heroicon-m-x-mark" class="h-6 w-6" />
15+
<x-filament::icon icon="heroicon-m-x-mark" class="eclipse-icon-md" />
1616
</button>
1717

1818
<div class="eclipse-image-lightbox-image-wrapper">
@@ -27,11 +27,11 @@ class="eclipse-image-lightbox-image">
2727
<template x-if="state && state.length > 1">
2828
<div>
2929
<button type="button" @click.stop.prevent="previousImage()" class="eclipse-image-lightbox-nav prev">
30-
<x-filament::icon icon="heroicon-m-chevron-left" class="h-6 w-6" />
30+
<x-filament::icon icon="heroicon-m-chevron-left" class="eclipse-icon-md" />
3131
</button>
3232

3333
<button type="button" @click.stop.prevent="nextImage()" class="eclipse-image-lightbox-nav next">
34-
<x-filament::icon icon="heroicon-m-chevron-right" class="h-6 w-6" />
34+
<x-filament::icon icon="heroicon-m-chevron-right" class="eclipse-icon-md" />
3535
</button>
3636
</div>
3737
</template>

‎resources/views/components/media-preview.blade.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div class="flex flex-col items-center space-y-2">
1+
<div class="eclipse-media-preview">
22
<img
33
src="{{ $url }}"
44
alt="{{ $filename }}"
5-
class="max-w-full max-h-48 object-contain rounded-lg shadow-sm"
5+
class="eclipse-media-preview-image"
66
/>
7-
<p class="text-xs text-gray-500 dark:text-gray-400">{{ $filename }}</p>
7+
<p class="eclipse-media-preview-filename">{{ $filename }}</p>
88
</div>

0 commit comments

Comments
 (0)