From 6dd33e849bbe98c41ce3638644d0505ba979f8c6 Mon Sep 17 00:00:00 2001
From: Rikuoh <mail@riq0h.jp>
Date: Tue, 25 Feb 2025 09:23:00 +0900
Subject: [PATCH] =?UTF-8?q?=E6=8A=95=E7=A8=BF=E7=94=BB=E9=9D=A2=E3=81=AE?=
=?UTF-8?q?=E3=83=A2=E3=83=BC=E3=83=80=E3=83=AB=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../stylesheets/application.tailwind.css | 27 ++++++++++
app/javascript/controllers/index.js | 15 +++---
.../controllers/memo_card_controller.js | 15 ------
.../controllers/memo_form_controller.js | 11 -----
.../controllers/modal_controller.js | 24 +++++++++
app/views/layouts/application.html.erb | 49 +++++++++++--------
app/views/memos/_form.html.erb | 22 +++++----
app/views/memos/_memo.html.erb | 6 +--
app/views/memos/create.turbo_stream.erb | 1 -
app/views/memos/edit.html.erb | 9 ++--
app/views/memos/index.html.erb | 16 +++---
app/views/memos/new.html.erb | 9 ++--
app/views/memos/update.turbo_stream.erb | 1 -
13 files changed, 122 insertions(+), 83 deletions(-)
delete mode 100644 app/javascript/controllers/memo_card_controller.js
delete mode 100644 app/javascript/controllers/memo_form_controller.js
create mode 100644 app/javascript/controllers/modal_controller.js
delete mode 100644 app/views/memos/create.turbo_stream.erb
delete mode 100644 app/views/memos/update.turbo_stream.erb
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 25bc20d..245445b 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -14,3 +14,30 @@
transform: translateY(0);
}
}
+
+.modal {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+ cursor: pointer;
+}
+
+.modal-dialog {
+ position: relative;
+ margin: 1.75rem auto;
+ max-width: 500px;
+ cursor: default;
+}
+
+.modal-content {
+ position: relative;
+ background-color: #fff;
+ border-radius: 0.5rem;
+ padding: 1rem;
+ margin: 2rem;
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index 3b66ce1..393d972 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -1,8 +1,11 @@
-import { application } from "./application";
-import SearchController from "./search_controller";
-import MemoCardController from "./memo_card_controller";
-import MemoFormController from "./memo_form_controller";
+// This file is auto-generated by ./bin/rails stimulus:manifest:update
+// Run that command whenever you add a new controller or create them with
+// ./bin/rails generate stimulus controllerName
+import { application } from "./application";
+
+import ModalController from "./modal_controller";
+application.register("modal", ModalController);
+
+import SearchController from "./search_controller";
application.register("search", SearchController);
-application.register("memo_card", MemoCardController);
-application.register("memo_form", MemoFormController);
diff --git a/app/javascript/controllers/memo_card_controller.js b/app/javascript/controllers/memo_card_controller.js
deleted file mode 100644
index 258ee22..0000000
--- a/app/javascript/controllers/memo_card_controller.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-export default class extends Controller {
- connect() {
- this.element.classList.add("opacity-0");
- this.element.classList.add("translate-y-4");
-
- requestAnimationFrame(() => {
- this.element.classList.remove("opacity-0");
- this.element.classList.remove("translate-y-4");
- this.element.classList.add("transition-all");
- this.element.classList.add("duration-300");
- });
- }
-}
diff --git a/app/javascript/controllers/memo_form_controller.js b/app/javascript/controllers/memo_form_controller.js
deleted file mode 100644
index f2357be..0000000
--- a/app/javascript/controllers/memo_form_controller.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-export default class extends Controller {
- static targets = ["textarea"];
-
- connect() {
- if (this.hasTextareaTarget) {
- this.textareaTarget.focus();
- }
- }
-}
diff --git a/app/javascript/controllers/modal_controller.js b/app/javascript/controllers/modal_controller.js
new file mode 100644
index 0000000..9bbe728
--- /dev/null
+++ b/app/javascript/controllers/modal_controller.js
@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+ connect() {
+ this.element.style.display = "none";
+ }
+
+ open() {
+ this.element.style.display = "block";
+ }
+
+ close() {
+ this.element.style.display = "none";
+ const frame = document.getElementById("modal");
+ frame.removeAttribute("src");
+ frame.innerHTML = "";
+ }
+
+ clickOutside(event) {
+ if (event.target === this.element) {
+ this.close();
+ }
+ }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 8d888de..d6854a6 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -3,33 +3,42 @@
<head>
<title>rails8-memoapp</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 %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module", as: "script" %>
</head>
-
- <% if current_user %>
- <div class="fixed top-4 left-4 text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
- <%= current_user.email %>
- </div>
-<% end %>
-
<body class="bg-gray-50">
- <% if user_signed_in? %>
- <div class="fixed top-4 right-4">
- <%= button_to destroy_user_session_path,
- method: :delete,
- class: "bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200" do %>
- 退出
- <% end %>
+ <% if current_user %>
+ <div class="fixed top-4 left-4 text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
+ <%= current_user.email %>
+ </div>
+ <% end %>
+
+ <% if user_signed_in? %>
+ <div class="fixed top-4 right-4">
+ <%= button_to destroy_user_session_path,
+ method: :delete,
+ class: "bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200" do %>
+ 退出
+ <% end %>
+ </div>
+ <% end %>
+
+ <div class="max-w-2xl mx-auto px-4">
+ <%= yield %>
+ </div>
+ <div class="modal"
+ tabindex="-1"
+ data-controller="modal"
+ data-action="click->modal#clickOutside turbo:frame-load->modal#open turbo:submit-end->modal#close">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <%= turbo_frame_tag "modal" %>
+ </div>
</div>
- <% end %>
-
- <div class="max-w-2xl mx-auto px-4">
- <%= yield %>
</div>
-</body>
-
+ </body>
</html>
diff --git a/app/views/memos/_form.html.erb b/app/views/memos/_form.html.erb
index 185ebf4..28cac31 100644
--- a/app/views/memos/_form.html.erb
+++ b/app/views/memos/_form.html.erb
@@ -1,7 +1,8 @@
-<div class="space-y-6">
+<%= turbo_frame_tag "modal" do %>
+ <div class="space-y-6">
<%= form_with(model: memo,
class: "space-y-6",
- data: { turbo: false }) do |f| %>
+ data: { turbo: true }) do |f| %>
<% if memo.errors.any? %>
<div class="bg-red-50 p-4 rounded-md">
<div class="text-red-700">
@@ -14,7 +15,6 @@
</div>
</div>
<% end %>
-
<div>
<%= f.text_area :content,
class: "w-full h-64 p-4 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
@@ -27,12 +27,16 @@
<p class="mt-2 text-sm text-gray-500">現在の画像: <%= memo.image.filename %></p>
<% end %>
</div>
-
<div class="flex gap-4 items-center">
<%= f.submit memo.new_record? ? "出力" : "修正",
- class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" %>
- <%= link_to "終了", memos_path,
- class: "bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded" %>
+ class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" %>
+ <%= link_to "終了", "#",
+ class: "bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded",
+ data: {
+ action: "modal#close",
+ turbo_frame: "modal"
+ } %>
</div>
- <% end %>
-</div>
+ <% end %>
+ </div>
+ <% end %>
diff --git a/app/views/memos/_memo.html.erb b/app/views/memos/_memo.html.erb
index 9fff9d7..a374d69 100644
--- a/app/views/memos/_memo.html.erb
+++ b/app/views/memos/_memo.html.erb
@@ -1,7 +1,6 @@
<%= turbo_frame_tag dom_id(memo) do %>
- <div data-controller="memo-card"
- class="relative bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-1">
- <%= link_to edit_memo_path(memo), class: "h-full flex flex-col", data: { turbo_frame: "_top" } do %>
+ <div class="relative bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-1">
+ <%= link_to edit_memo_path(memo), class: "h-full flex flex-col", data: { turbo_frame: "modal" } do %>
<h2 class="text-xl font-semibold text-gray-800 mb-2 line-clamp-2">
<%= memo.content.lines.first.try(:strip) || "無題" %>
</h2>
@@ -19,7 +18,6 @@
</span>
</div>
<% end %>
-
<div class="absolute top-4 right-4">
<%= button_to memo_path(memo),
method: :delete,
diff --git a/app/views/memos/create.turbo_stream.erb b/app/views/memos/create.turbo_stream.erb
deleted file mode 100644
index 28b6653..0000000
--- a/app/views/memos/create.turbo_stream.erb
+++ /dev/null
@@ -1 +0,0 @@
-<turbo-stream action="redirect" url="<%= memos_path %>"></turbo-stream>
diff --git a/app/views/memos/edit.html.erb b/app/views/memos/edit.html.erb
index f1695af..d86ded7 100644
--- a/app/views/memos/edit.html.erb
+++ b/app/views/memos/edit.html.erb
@@ -1,4 +1,5 @@
-<div class="max-w-2xl mx-auto">
- <h1 class="text-2xl font-bold text-gray-900 mb-6">修正</h1>
- <%= render 'form', memo: @memo %>
-</div>
+<%= turbo_frame_tag "modal" do %>
+ <div class="modal-body">
+ <%= render "form", memo: @memo %>
+ </div>
+<% end %>
diff --git a/app/views/memos/index.html.erb b/app/views/memos/index.html.erb
index 60ae402..a1c729a 100644
--- a/app/views/memos/index.html.erb
+++ b/app/views/memos/index.html.erb
@@ -8,20 +8,20 @@
data: { action: "input->search#search" } %>
</div>
<% end %>
- <%= link_to new_memo_path, class: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200" do %>
- <span class="flex items-center">
- ＋ 出力開始
- </span>
- <% end %>
+ <%= link_to new_memo_path,
+ class: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200",
+ data: { turbo_frame: "modal" } do %>
+ <span class="flex items-center">
+ ＋ 出力開始
+ </span>
+<% end %>
</div>
</div>
-
-<%= turbo_frame_tag "memos" do %>
+<%= turbo_frame_tag "memos", data: { turbo_action: :advance } do %>
<div id="memos-container" class="flex flex-col gap-4">
<%= render @memos %>
<%= render "empty_results", query: @q&.content_cont if @memos.empty? %>
</div>
-
<div class="text-center mt-8">
<%= link_to_next_page @memos, "気力十分😤",
class: "inline-flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors duration-200",
diff --git a/app/views/memos/new.html.erb b/app/views/memos/new.html.erb
index 41fd2e6..d86ded7 100644
--- a/app/views/memos/new.html.erb
+++ b/app/views/memos/new.html.erb
@@ -1,4 +1,5 @@
-<div class="max-w-2xl mx-auto">
- <h1 class="text-2xl font-bold text-gray-900 mb-6">出力</h1>
- <%= render 'form', memo: @memo %>
-</div>
+<%= turbo_frame_tag "modal" do %>
+ <div class="modal-body">
+ <%= render "form", memo: @memo %>
+ </div>
+<% end %>
diff --git a/app/views/memos/update.turbo_stream.erb b/app/views/memos/update.turbo_stream.erb
deleted file mode 100644
index 28b6653..0000000
--- a/app/views/memos/update.turbo_stream.erb
+++ /dev/null
@@ -1 +0,0 @@
-<turbo-stream action="redirect" url="<%= memos_path %>"></turbo-stream>