Merge pull request #223 from solver-it-sro/GO-352-menu-stale-blika-na…

…-mobile Add display none for preview and add hide actions
slovensko-digital · Dec 5, 2023 · 825a25c · 825a25c
2 parents dded5ca + b12ecff
commit 825a25c
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 4 deletions.
diff --git a/app/components/common/inline_rename_component.html.erb b/app/components/common/inline_rename_component.html.erb
@@ -13,7 +13,7 @@
       <span class="text-xl text-left text-gray-900"><%= @name %></span>
     </button>
   </div>
-  <div data-dropdown-target="menu" class="transform transition hidden scale-95">
+  <div data-dropdown-target="menu" data-turbo-temporary-hide class="transform transition hidden scale-95">
     <%= form_with model: @model, url: @url, method: @method, class: "flex justify-stretch items-center absolute -top-10 gap-2" do |form| %>
       <%= form.text_field @field, class: "flex text-base text-left text-gray-400 grow rounded-md bg-white border border-gray-400" %>
       <%= button_tag type: 'submit' do %>

diff --git a/app/components/common/modal_component.html.erb b/app/components/common/modal_component.html.erb
@@ -1,4 +1,4 @@
-<div class="relative" data-modal-disable-backdrop="true" data-controller="turbo-content" data-action="keydown.esc@window-><%= remove_content_action %>">
+<div class="relative" data-modal-disable-backdrop="true" data-controller="turbo-content" data-action="keydown.esc@window-><%= remove_content_action %>" data-turbo-temporary-hide>
   <div role="dialog" aria-modal="true" aria-labelledby="modal-title" class="animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 10000;">
     <div class="max-w-lg max-h-screen w-full relative" style="z-index: 1000">
       <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">

diff --git a/app/components/common/options_component.html.erb b/app/components/common/options_component.html.erb
@@ -17,6 +17,7 @@
        data-transition-leave="transition ease-in duration-75"
        data-transition-leave-from="transform opacity-100 scale-100"
        data-transition-leave-to="transform opacity-0 scale-95"
+       data-turbo-temporary-hide
        class="hidden absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
        role="menu"
        aria-orientation="vertical"

diff --git a/app/components/message_attachment_menu_component.html.erb b/app/components/message_attachment_menu_component.html.erb
@@ -10,6 +10,7 @@
          data-transition-leave="transition ease-in duration-75"
          data-transition-leave-from="transform opacity-100 scale-100"
          data-transition-leave-to="transform opacity-0 scale-95"
+         data-turbo-temporary-hide
          class="hidden absolute right-0 z-30">
       <div class="flex flex-col justify-start items-start gap-px py-0.5 rounded-lg bg-white border border-gray-300 mt-1" style="box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);">
         <div class="flex justify-start items-start">

diff --git a/app/components/message_thread_log_item_component.html.erb b/app/components/message_thread_log_item_component.html.erb
@@ -36,6 +36,7 @@
           data-transition-leave="transition ease-in duration-150"
           data-transition-leave-from="opacity-100 translate-y-0"
           data-transition-leave-to="opacity-0 translate-y-1"
+          data-turbo-temporary-hide
           class="hidden">
         <%= tag.turbo_frame(
               id: dom_id(@message),

diff --git a/app/components/message_threads_bulk_actions_component.html.erb b/app/components/message_threads_bulk_actions_component.html.erb
@@ -16,7 +16,13 @@
             </button>
           </div>
 
-          <div data-dropdown-target="menu" class="absolute hidden right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+          <div data-dropdown-target="menu"
+               data-turbo-temporary-hide
+               class="absolute hidden right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+               role="menu"
+               aria-orientation="vertical"
+               aria-labelledby="menu-button"
+               tabindex="-1">
             <div class="py-1" role="none">
               <%= button_tag "change_tags", type: "submit", id: "menu-item-0",
                                             formaction: edit_message_threads_bulk_tags_path,

diff --git a/app/components/t_w/mobile_sidebar_component.html.erb b/app/components/t_w/mobile_sidebar_component.html.erb
@@ -7,6 +7,7 @@
        data-transition-leave="transition ease-in duration-150"
        data-transition-leave-from="opacity-100"
        data-transition-leave-to="opacity-0"
+       data-turbo-temporary-hide
   >
     <div class="fixed inset-0">
       <div class="absolute inset-0 bg-gray-600 opacity-75"></div>

diff --git a/app/components/t_w/user_menu_component.html.erb b/app/components/t_w/user_menu_component.html.erb
@@ -20,6 +20,7 @@
           data-transition-leave="transition ease-in duration-150"
           data-transition-leave-from="opacity-100 translate-y-0"
           data-transition-leave-to="opacity-0 translate-y-1"
+          data-turbo-temporary-hide
           class="hidden absolute right-0">
       <div class="flex flex-col justify-start items-start gap-px py-0.5 rounded-lg bg-white border border-gray-300" style="box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);">
         <div class="flex justify-start items-start px-4 py-3">

diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js
@@ -16,5 +16,23 @@ application.register('tabs', Tabs)
 application.register('popover', Popover)
 application.register('toggle', Toggle)
 application.register('slideover', Slideover)
+document.addEventListener('turbo:before-cache', function(event) {
+    const setOpenAsFalse = (attribute) => {
+        const element = event.target.querySelector(`[${attribute}="true"]`)
+        element?.setAttribute(attribute, "false")
+    }
+
+    const addHiddenClass = () => {
+        event.target.querySelectorAll("[data-turbo-temporary-hide]").forEach((elm) => {
+            if (!elm.classList.contains('hidden')) {
+                elm.classList.add('hidden')
+            }
+        })
+    }
+
+    addHiddenClass()
+    setOpenAsFalse('data-slideover-open-value')
+    setOpenAsFalse('data-dropdown-open-value')
+})
 
 export { application }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -3,7 +3,6 @@
   <head>
     <title>GovboxPro</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <meta name="turbo-cache-control" content="no-cache">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <link rel="manifest" crossorigin="use-credentials" href="/manifest.json" />