upload_d_n_d 0.9.1

data/app/assets/stylesheets/upload_d_n_d/application.css

@@ -0,0 +1,604 @@
+:root {
+  --udnd-accent-color: #e97451;
+  --udnd-accent-rgb: 233 116 81;
+  --udnd-border-color: #e5e7eb;
+  --udnd-bg: #ffffff;
+  --udnd-bg-hover: #f9fafb;
+  --udnd-text-primary: #111827;
+  --udnd-text-secondary: #6b7280;
+  --udnd-shadow: 0 10px 25px rgba(17, 24, 39, 0.08);
+}
+
+.udnd-container {
+  width: 100%;
+  font-family: inherit;
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.udnd-dropzone {
+  border: 1.5px solid rgb(var(--udnd-accent-rgb) / 0.45);
+  border-radius: 0.5rem;
+  padding: 2rem 1.5rem;
+  text-align: center;
+  position: relative;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.92),
+    rgba(255, 255, 255, 0.75)
+  );
+  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
+  transition: transform 0.18s ease, box-shadow 0.18s ease,
+    border-color 0.18s ease, background-color 0.18s ease;
+  cursor: pointer;
+}
+
+.udnd-dropzone:hover {
+  box-shadow: var(--udnd-shadow);
+  transform: translateY(-1px);
+}
+
+.udnd-dropzone:focus-within {
+  outline: none;
+  border-color: var(--udnd-accent-color);
+  box-shadow: 0 0 0 4px rgb(var(--udnd-accent-rgb) / 0.18), var(--udnd-shadow);
+}
+
+.udnd-dropzone.dragover {
+  border-color: var(--udnd-accent-color);
+  background-color: var(--udnd-bg-hover);
+  box-shadow: 0 0 0 4px rgb(var(--udnd-accent-rgb) / 0.18), var(--udnd-shadow);
+  transform: translateY(-1px);
+}
+
+.udnd-input-hidden {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.udnd-dropzone-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.udnd-icon-wrapper {
+  width: 3.25rem;
+  height: 3.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: rgb(var(--udnd-accent-rgb) / 0.12);
+  color: var(--udnd-accent-color);
+  margin-bottom: 0.25rem;
+  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.05);
+}
+
+/* Lucide inline SVG icons */
+.udnd-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+  flex-shrink: 0;
+}
+
+.udnd-icon-lg {
+  width: 1.35rem;
+  height: 1.35rem;
+}
+
+.udnd-icon-xl {
+  width: 3rem;
+  height: 3rem;
+}
+
+.udnd-text-main {
+  font-weight: 600;
+  color: var(--udnd-text-primary);
+  font-size: 0.95rem;
+  line-height: 1.35;
+  margin: 0;
+}
+
+.udnd-text-sub {
+  color: var(--udnd-text-secondary);
+  font-size: 0.825rem;
+  line-height: 1.35;
+  margin: 0;
+}
+
+.udnd-progress-container {
+  height: 6px;
+  background: rgba(17, 24, 39, 0.08);
+  border-radius: 9999px;
+  margin: 12px auto 0;
+  overflow: hidden;
+  display: none;
+}
+
+.udnd-dropzone.upload-active .udnd-progress-container {
+  display: block;
+}
+
+.udnd-container.upload-active .udnd-progress-container {
+  display: block;
+}
+
+.udnd-progress-bar {
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgba(233, 116, 81, 0.75),
+    var(--udnd-accent-color)
+  );
+  width: 0%;
+  transition: width 0.1s ease;
+}
+
+/* Files list */
+.udnd-files-list {
+  margin-top: 1rem;
+}
+
+.udnd-file-items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.udnd-file-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  border: 1px solid var(--udnd-border-color);
+  border-radius: 0.375rem;
+  margin-bottom: 0.5rem;
+  transition: background-color 0.2s ease;
+}
+
+.udnd-file-item:hover {
+  background-color: var(--udnd-bg-hover);
+}
+
+.udnd-file-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+.udnd-file-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+  background-color: var(--udnd-bg-hover);
+  color: var(--udnd-accent-color);
+  font-size: 1.25rem;
+}
+
+.udnd-file-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.udnd-filename {
+  font-weight: 500;
+  color: var(--udnd-text-primary);
+  font-size: 0.875rem;
+}
+
+.udnd-filesize {
+  font-size: 0.75rem;
+  color: var(--udnd-text-secondary);
+}
+
+.udnd-btn-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 0.375rem;
+  background-color: transparent;
+  color: #ef4444;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.udnd-btn-remove:hover {
+  background-color: #fee2e2;
+  transform: scale(1.1);
+}
+
+.udnd-no-files {
+  text-align: center;
+  color: var(--udnd-text-secondary);
+  font-size: 0.875rem;
+  padding: 1rem;
+  margin: 0;
+}
+
+/* === Actions des fichiers === */
+.udnd-file-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.udnd-btn-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 0.375rem;
+  background-color: transparent;
+  color: #27885d;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.udnd-btn-preview:hover {
+  background-color: #d8f3e7;
+  transform: scale(1.1);
+}
+
+/* === Modale de prévisualisation === */
+.udnd-preview-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.udnd-preview-modal.show {
+  width: 100%;
+  opacity: 1;
+}
+
+.udnd-preview-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(4px);
+}
+
+.udnd-preview-container {
+  position: relative;
+  background-color: white;
+  border-radius: 0.75rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  width: 60%;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+@media (max-width: 768px) {
+  .udnd-preview-container {
+    width: 90%;
+  }
+}
+
+.udnd-preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid var(--udnd-border-color);
+  background-color: #f9fafb;
+}
+
+.udnd-preview-title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--udnd-text-primary);
+  max-width: 80%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.udnd-preview-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 0.5rem;
+  background-color: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 1.25rem;
+}
+
+.udnd-preview-close:hover {
+  background-color: #e5e7eb;
+  color: #111827;
+}
+
+.udnd-preview-body {
+  padding: 1.5rem;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.udnd-preview-image {
+  display: block;
+  max-width: 100%;
+  max-height: 80vh;
+  object-fit: contain;
+  border-radius: 0.5rem;
+}
+
+.udnd-preview-pdf {
+  width: 100%;
+  min-height: 80vh;
+  border: none;
+  border-radius: 0.5rem;
+}
+
+.udnd-preview-unsupported {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 3rem;
+  text-align: center;
+  color: var(--udnd-text-secondary);
+}
+
+.udnd-preview-unsupported svg {
+  color: var(--udnd-text-secondary);
+  opacity: 0.5;
+}
+
+.udnd-btn-download {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background-color: var(--udnd-accent-color);
+  color: white;
+  text-decoration: none;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.udnd-btn-download:hover {
+  background-color: color-mix(in srgb, var(--udnd-accent-color) 85%, black);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+/* ================================================
+   MODAL SYSTEM - Native modals for alerts & confirms
+   ================================================ */
+
+/* Overlay */
+.udnd-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(17, 24, 39, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  padding: 1rem;
+}
+
+.udnd-modal-overlay--active {
+  opacity: 1;
+}
+
+/* Modal container */
+.udnd-modal {
+  background: white;
+  border-radius: 1rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
+              0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  max-width: 28rem;
+  width: 100%;
+  transform: scale(0.95);
+  transition: transform 0.3s ease;
+  animation: udnd-modal-slide-up 0.3s ease forwards;
+}
+
+.udnd-modal-overlay--active .udnd-modal {
+  transform: scale(1);
+}
+
+@keyframes udnd-modal-slide-up {
+  from {
+    transform: translateY(1rem) scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+/* Modal header */
+.udnd-modal-header {
+  padding: 1.5rem 1.5rem 0.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.udnd-modal-icon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.udnd-modal-icon svg {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.udnd-modal-icon--info {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+
+.udnd-modal-icon--success {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #10b981;
+}
+
+.udnd-modal-icon--warning {
+  background-color: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+}
+
+.udnd-modal-icon--error {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+/* Modal body */
+.udnd-modal-body {
+  padding: 1rem 1.5rem;
+  text-align: center;
+}
+
+.udnd-modal-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111827;
+  margin: 0 0 0.5rem 0;
+}
+
+.udnd-modal-message {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* Modal footer */
+.udnd-modal-footer {
+  padding: 0.75rem 1.5rem 1.5rem;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.udnd-modal-button {
+  padding: 0.625rem 1.25rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: inherit;
+  flex: 1;
+  max-width: 10rem;
+}
+
+.udnd-modal-button:focus {
+  outline: 2px solid rgb(var(--udnd-accent-rgb));
+  outline-offset: 2px;
+}
+
+/* Primary button (OK dans alerts) */
+.udnd-modal-button--primary {
+  background-color: var(--udnd-accent-color);
+  color: white;
+}
+
+.udnd-modal-button--primary:hover {
+  background-color: color-mix(in srgb, var(--udnd-accent-color) 85%, black);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.udnd-modal-button--primary:active {
+  transform: translateY(0);
+}
+
+/* Confirm button (dans confirms) */
+.udnd-modal-button--confirm {
+  background-color: #ef4444;
+  color: white;
+}
+
+.udnd-modal-button--confirm:hover {
+  background-color: #dc2626;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);
+}
+
+.udnd-modal-button--confirm:active {
+  transform: translateY(0);
+}
+
+/* Cancel button */
+.udnd-modal-button--cancel {
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
+.udnd-modal-button--cancel:hover {
+  background-color: #e5e7eb;
+}
+
+.udnd-modal-button--cancel:active {
+  background-color: #d1d5db;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .udnd-modal {
+    margin: 1rem;
+    max-width: calc(100% - 2rem);
+  }
+
+  .udnd-modal-footer {
+    flex-direction: column-reverse;
+  }
+
+  .udnd-modal-button {
+    max-width: none;
+    width: 100%;
+  }
+}

data/app/components/upload_d_n_d/upload_component.html.erb

@@ -0,0 +1,53 @@
+<div class="udnd-container"
+     style="--udnd-accent-color: <%= main_color %>; --udnd-accent-rgb: <%= main_color_rgb %>;"
+     data-controller="upload-d-n-d--uploads"
+     data-upload-d-n-d--uploads-record-id-value="<%= record&.id %>"
+     data-upload-d-n-d--uploads-record-gid-value="<%= record_gid %>"
+     data-upload-d-n-d--uploads-attribute-name-value="<%= attribute_name %>"
+     data-upload-d-n-d--uploads-attach-url-value="<%= attach_path %>"
+     data-upload-d-n-d--uploads-max-size-value="<%= max_size %>"
+     data-upload-d-n-d--uploads-accepted-types-value="<%= accepted_types %>"
+     data-upload-d-n-d--uploads-mime-types-value="<%= accepted_mime_types %>"
+     data-upload-d-n-d--uploads-field-ref-value="<%= field_ref %>"
+     data-upload-d-n-d--uploads-multiple-value="<%= multiple %>"
+     data-upload-d-n-d--uploads-i18n-value="<%= i18n_messages.to_json %>">
+
+  <div class="udnd-dropzone"
+       role="button"
+       tabindex="0"
+       aria-label="<%= t('upload_d_n_d.drag_and_drop') %>"
+       data-action="dragover->upload-d-n-d--uploads#handleDragOver dragenter->upload-d-n-d--uploads#handleDragEnter dragleave->upload-d-n-d--uploads#handleDragLeave drop->upload-d-n-d--uploads#handleDrop">
+
+    <input type="file"
+           class="udnd-input-hidden"
+           aria-label="<%= t('upload_d_n_d.drag_and_drop') %>"
+           data-action="change->upload-d-n-d--uploads#previewFiles"
+           accept="<%= accepted_types %>"
+           <%= 'multiple' if multiple %>>
+
+    <div class="udnd-dropzone-content">
+      <div class="udnd-icon-wrapper">
+        <svg class="udnd-icon udnd-icon-lg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 13v8"/><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="m8 17 4-4 4 4"/></svg>
+      </div>
+      <p class="udnd-text-main"><%= t('upload_d_n_d.drag_and_drop') %></p>
+      <p class="udnd-text-sub"><%= accepted_types %> (max. <%= number_to_human_size(max_size) %>)</p>
+    </div>
+
+    <div class="udnd-progress-container"
+         role="progressbar"
+         aria-valuenow="0"
+         aria-valuemin="0"
+         aria-valuemax="100"
+         aria-label="<%= t('upload_d_n_d.progress', default: 'Upload progress') %>">
+      <div class="udnd-progress-bar" data-upload-d-n-d--uploads-target="progressBar"></div>
+    </div>
+  </div>
+
+  <%# Record persisté : ses attachments. Sinon : les fichiers temporaires de la session,
+      pour que la zone reste remplie après un rechargement de page. %>
+  <% if record&.persisted? %>
+    <%= render "upload_d_n_d/shared/files_list", record: record, attribute_name: attribute_name %>
+  <% else %>
+    <%= render "upload_d_n_d/shared/temp_files_list", files: files, attribute_name: attribute_name %>
+  <% end %>
+</div>