Update ModalDelete.vue

n1crack · Jul 1, 2024 · f5db7a2 · f5db7a2
1 parent a85bc2e
commit f5db7a2
Showing 1 changed file with 49 additions and 13 deletions.
diff --git a/src/components/modals/ModalDelete.vue b/src/components/modals/ModalDelete.vue
@@ -2,18 +2,18 @@
   <ModalLayout>
     <div>
       <ModalHeader :icon="DeleteSVG" :title="t('Delete files')"></ModalHeader>
-      <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
-        <div class="mt-2">
-          <p class="text-sm text-gray-500">{{ t('Are you sure you want to delete these files?') }}</p>
-          <div class="text-gray-500 text-sm mb-1 overflow-auto vf-scrollbar" style="max-height: 200px;">
-            <p v-for="item in items" class="flex text-sm text-gray-800 dark:text-gray-400">
-              <svg v-if="item.type === 'dir'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+      <div class="vuefinder__delete-modal__content">
+        <div class="vuefinder__delete-modal__form">
+          <p class="vuefinder__delete-modal__description">{{ t('Are you sure you want to delete these files?') }}</p>
+          <div class="vuefinder__delete-modal__files vf-scrollbar">
+            <p v-for="item in items" class="vuefinder__delete-modal__file">
+              <svg v-if="item.type === 'dir'" class="vuefinder__delete-modal__icon vuefinder__delete-modal__icon--dir" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
               </svg>
-              <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+              <svg v-else class="vuefinder__delete-modal__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
               </svg>
-              <span class="ml-1.5">{{ item.basename }}</span>
+              <span class="vuefinder__delete-modal__file-name">{{ item.basename }}</span>
             </p>
           </div>
           <message v-if="message.length" @hidden="message=''" error>{{ message }}</message>
@@ -22,15 +22,51 @@
     </div>
 
     <template v-slot:buttons>
-      <button type="button" @click="remove" class="vf-btn vf-btn-danger">
-        {{ t('Yes, Delete!') }}</button>
-      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">
-        {{ t('Cancel') }}</button>
-      <div class="m-auto font-bold text-red-500 text-sm dark:text-red-200 text-center">{{ t('This action cannot be undone.') }}</div>
+      <button type="button" @click="remove" class="vf-btn vf-btn-danger">{{ t('Yes, Delete!') }}</button>
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">{{ t('Cancel') }}</button>
+      <div class="vuefinder__delete-modal__warning">{{ t('This action cannot be undone.') }}</div>
     </template>
   </ModalLayout>
 </template>
 
+<style>
+.vuefinder__delete-modal__content {
+  @apply mt-3 text-center sm:mt-0 sm:text-left w-full;
+}
+
+.vuefinder__delete-modal__form {
+  @apply mt-2;
+}
+
+.vuefinder__delete-modal__description {
+  @apply text-sm text-gray-500;
+}
+
+.vuefinder__delete-modal__files {
+  @apply text-gray-500 text-sm mb-1 overflow-auto;
+  max-height: 200px;
+}
+
+.vuefinder__delete-modal__file {
+  @apply flex text-sm text-gray-800 dark:text-gray-400;
+}
+
+.vuefinder__delete-modal__icon {
+  @apply h-5 w-5 text-neutral-500;
+}
+
+.vuefinder .vuefinder__delete-modal__icon--dir {
+  @apply fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500;
+}
+
+.vuefinder__delete-modal__file-name {
+  @apply ml-1.5;
+}
+
+.vuefinder__delete-modal__warning {
+  @apply m-auto font-bold text-red-500 text-sm dark:text-red-200 text-center;
+}
+</style>
 <script setup>
 import ModalLayout from './ModalLayout.vue';
 import {inject, ref} from 'vue';