Feature: Implement Mobile Responsiveness (#2092)

* WIP * WIP * WIP * WIP * WIP * WIP * WIP * format * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * fix conflict * fix conflict * chore: run rubocop * fix test * update PWA logo * fix tests * chore: lint * fix test * Refactor: Remove duplicate data attribute in activity partial and add chat form rendering in chats index --------- Co-authored-by: Josh Pigford <josh@joshpigford.com>
2025-07-19 21:29:38 +02:00 · 2025-04-18 18:53:10 +05:30 · 2025-04-18 18:53:10 +05:30 · 65e1bc6edd
commit 65e1bc6edd
parent 6a21f26d2d
91 changed files with 1333 additions and 527 deletions
--- a/app/javascript/controllers/file_upload_controller.js
+++ b/app/javascript/controllers/file_upload_controller.js
@ -0,0 +1,74 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "fileName", "uploadArea", "uploadText"]
+
+  connect() {
+    if (this.hasInputTarget) {
+      this.inputTarget.addEventListener("change", this.fileSelected.bind(this))
+    }
+    
+    // Find the form element
+    this.form = this.element.closest("form")
+    if (this.form) {
+      this.form.addEventListener("turbo:submit-start", this.formSubmitting.bind(this))
+    }
+  }
+
+  disconnect() {
+    if (this.hasInputTarget) {
+      this.inputTarget.removeEventListener("change", this.fileSelected.bind(this))
+    }
+    
+    if (this.form) {
+      this.form.removeEventListener("turbo:submit-start", this.formSubmitting.bind(this))
+    }
+  }
+
+  triggerFileInput() {
+    if (this.hasInputTarget) {
+      this.inputTarget.click()
+    }
+  }
+
+  fileSelected() {
+    if (this.hasInputTarget && this.inputTarget.files.length > 0) {
+      const fileName = this.inputTarget.files[0].name
+      
+      if (this.hasFileNameTarget) {
+        // Find the paragraph element inside the fileName target
+        const fileNameText = this.fileNameTarget.querySelector('p')
+        if (fileNameText) {
+          fileNameText.textContent = fileName
+        }
+        
+        this.fileNameTarget.classList.remove("hidden")
+      }
+      
+      if (this.hasUploadTextTarget) {
+        this.uploadTextTarget.classList.add("hidden")
+      }
+      
+    
+    }
+  }
+  
+  formSubmitting() {
+    if (this.hasFileNameTarget && this.hasInputTarget && this.inputTarget.files.length > 0) {
+      const fileNameText = this.fileNameTarget.querySelector('p')
+      if (fileNameText) {
+        fileNameText.textContent = `Uploading ${this.inputTarget.files[0].name}...`
+      }
+      
+      // Change the icon to a loader
+      const iconContainer = this.fileNameTarget.querySelector('.lucide-file-text')
+      if (iconContainer) {
+        iconContainer.classList.add('animate-pulse')
+      }
+    }
+    
+    if (this.hasUploadAreaTarget) {
+      this.uploadAreaTarget.classList.add("opacity-70")
+    }
+  }
+}