file preview edited

This commit is contained in:
Burak Civan 2022-11-16 17:49:40 +03:00
parent 39b8dff371
commit 6d7e614464
4 changed files with 77 additions and 37 deletions

21
public/css/app.css vendored
View File

@ -53470,6 +53470,27 @@ table thead a:hover{
visibility: visible;
opacity: 1;
}
.notifications-menu ul li a {
border-bottom: 1px solid;
}
.avatar-attachment{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
background-color: #adb5bd;
border-radius: .375rem;
font-size: 1rem;
height: 45px;
width: 45px;
}
/* index */

View File

@ -20,7 +20,7 @@
<div class="gap-x-1 relative">
<button data-dz-remove="true" class="absolute group right-0">
<span class="material-icons text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
<span class="material-icons-outlined text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
</button>
</div>
</div>
@ -45,12 +45,12 @@
</div>
</div>
<div class="gap-x-1">
<div class="flex flex-col gap-x-1">
<button data-dz-remove="true" class="group">
<span class="material-icons text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
<span class="material-icons-outlined text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
</button>
<a href="#" type="button" class="group hidden" data-dz-download>
<span class="material-icons-round text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
<span class="material-icons text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
</a>
</div>
</div>

View File

@ -46,6 +46,19 @@
.tabs-link:hover::before {
@apply opacity-100 visible;
}
.notifications-menu ul li a {
border-bottom: 1px solid;
}
.avatar-attachment {
@apply text-white inline-flex items-center justify-center;
background-color: #adb5bd;
border-radius: .375rem;
font-size: 1rem;
height: 45px;
width: 45px;
}
/* index */
}

View File

@ -1,37 +1,43 @@
<div class="flex items-center justify-between border-b py-4">
<div class="flex items-center">
@if ($file->aggregate_type == 'image')
<span class="material-icons text-base">image</span>
@else
<span class="material-icons text-base">attach_file</span>
@endif
<div class="flex flex-col text-gray-500 ltr:ml-3 rtl:mr-3 gap-y-1">
<span class="w-64 text-sm truncate">
{{ $file->basename }}
</span>
<span class="text-xs mb-0">
{{ $file->readableSize() }}
</span>
</div>
</div>
<div class="flex flex-row lg:flex-col gap-x-1">
@can('delete-common-uploads')
<x-link href="javascript:void();" id="remove-{{ $column_name }}" @click="onDeleteFile('{{ $file->id }}', '{{ route('uploads.destroy', $file->id) }}', '{{ trans('general.title.delete', ['type' => $column_name]) }}', '{{ trans('general.delete_confirm', ['name' => $file->basename, 'type' => $column_name]) }} ', '{{ trans('general.cancel') }}', '{{ trans('general.delete') }}')" type="button" class="group" override="class">
<span class="material-icons text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
</x-link>
@if ($options)
<input type="hidden" name="page_{{ $file->id}}" id="file-page-{{ $file->id}}" value="{{ $options['page'] }}" />
<input type="hidden" name="key_{{ $file->id}}" id="file-key-{{ $file->id}}" value="{{ $options['key'] }}" />
<input type="hidden" name="value_{{ $file->id}}" id="file-value-{{ $file->id}}" value="{{ $file->id }}" />
<div class="divide-y">
<div class="flex items-center justify-between py-4 -mb-4">
<div class="flex items-center">
@if ($file->aggregate_type == 'image')
<div class="avatar-attachment">
<img src="{{ route('uploads.get', $file->id) }}" alt="{{ $file->basename }}" class="avatar-img h-full rounded object-cover">
</div>
@else
<div class="avatar-attachment">
<span class="material-icons text-base">attach_file</span>
</div>
@endif
@endcan
<x-link href="{{ route('uploads.download', $file->id) }}" type="button" class="group" override="class">
<span class="material-icons text-base text-purple px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
</x-link>
<div class="flex flex-col text-gray-500 ltr:ml-3 rtl:mr-3 gap-y-1">
<span class="w-64 text-sm truncate">
{{ $file->basename }}
</span>
<span class="text-xs mb-0">
{{ $file->readableSize() }}
</span>
</div>
</div>
<div class="flex flex-row lg:flex-col gap-x-1">
@can('delete-common-uploads')
<x-link href="javascript:void();" id="remove-{{ $column_name }}" @click="onDeleteFile('{{ $file->id }}', '{{ route('uploads.destroy', $file->id) }}', '{{ trans('general.title.delete', ['type' => $column_name]) }}', '{{ trans('general.delete_confirm', ['name' => $file->basename, 'type' => $column_name]) }} ', '{{ trans('general.cancel') }}', '{{ trans('general.delete') }}')" type="button" class="group" override="class">
<span class="material-icons-outlined text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
</x-link>
@if ($options)
<input type="hidden" name="page_{{ $file->id}}" id="file-page-{{ $file->id}}" value="{{ $options['page'] }}" />
<input type="hidden" name="key_{{ $file->id}}" id="file-key-{{ $file->id}}" value="{{ $options['key'] }}" />
<input type="hidden" name="value_{{ $file->id}}" id="file-value-{{ $file->id}}" value="{{ $file->id }}" />
@endif
@endcan
<x-link href="{{ route('uploads.download', $file->id) }}" type="button" class="group" override="class">
<span class="material-icons text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
</x-link>
</div>
</div>
</div>