tailwind config

1 week ago · a86fb41f36
9 changed files with 88 additions and 13 deletions
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@ -1,4 +1,5 @@
@import "tailwindcss";
+@config '../../../config/tailwind.config.js';

@plugin "../../../vendor/javascript/daisyui.mjs" {
  themes: light, dark;
@ -7,8 +8,8 @@
@plugin "../../../vendor/javascript/daisyui-theme.mjs" {
  name: "light";
  default: true;
-
  prefersdark: false;
+
  color-scheme: "light";

  --color-primary: var(--color-bichik-100);
@ -17,7 +18,6 @@
  --color-secondary-content: var(--color-bichik-100);
  --color-accent: #96d3dd;
  --color-accent-content: #1e2939;
-
  --color-border-primary: var(--color-bichik-110);
  --color-check-primary: white;
 }
@ -29,18 +29,13 @@

  --color-base-100: #364153;
  --color-base-200: #2a3240;
-  /* --color-base-content: white; */
-
  --color-primary: var(--color-bichik-100);
  --color-primary-content: black;
  --color-secondary: var(--color-base-100);
  --color-secondary-content: var(--color-bichik-80);
  --color-accent: #96d3dd;
  --color-accent-content: #1e2939;
-
  --color-border-primary: white;
  --color-check-primary: var(--color-bichik-110);
-
-  --radius-selector: 0.5rem;
 }

--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@ -0,0 +1,5 @@
+module ButtonHelper
+  def button_link_to(text, method: :post, **)
+    content_tag(:button, text, { data: { turbo_method: method }, ** })
+  end
+end
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@ -1,3 +1,23 @@
-// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
-import "controllers"
+Turbo.config.drive.progressBarDelay = 300
+Turbo.config.forms.confirm = (title) => {
+  const dialog = document.getElementById("main-dialog")
+  const dialogTitle = dialog.querySelector('[data-modal=title]')
+  const previousTitleContent = dialogTitle.textContent
+
+  dialogTitle.textContent = title
+  dialog.showModal()
+
+  return new Promise((resolve, _) => {
+    dialog.addEventListener(
+      "close",
+      () => {
+        dialogTitle.textContent = previousTitleContent
+        resolve(dialog.returnValue == "confirm")
+      },
+      { once: true },
+    );
+  });
+}
+
+import "controllers"
--- a/app/views/edge/index.html.erb
+++ b/app/views/edge/index.html.erb
@ -1 +1,3 @@
 <h1 class="font-bold text-4xl">Edge#index</h1>
+<%= button_link_to 'Open Dialog', class: "btn btn-primary", command: 'show-modal', commandfor: 'main-dialog' %>
+<%= button_to 'Delete', @meeting, method: :delete, class: "btn btn-accent", data: { turbo_confirm: 'merci de confirmer'} %>
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -25,9 +25,10 @@
    <%= javascript_importmap_tags %>
  </head>

-  <body>
-    <%= render '/layouts/navbar' %>
-    <main class="flex m-8 min-h-60"><%= yield %></main>
-    <%= render '/layouts/footer' %>
+  <body class="flex flex-col">
+    <%= render '/layouts/components/main_dialog' %>
+    <%= render '/layouts/components/navbar' %>
+    <main class="m-8 min-h-60"><%= yield %></main>
+    <%= render '/layouts/components/footer' %>
  </body>
 </html>
--- a/app/views/layouts/components/_footer.html.erb
+++ b/app/views/layouts/components/_footer.html.erb
--- a/app/views/layouts/components/_main_dialog.html.erb
+++ b/app/views/layouts/components/_main_dialog.html.erb
@ -0,0 +1,21 @@
+<dialog
+  id="main-dialog"
+  class="
+    top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 shadow-2xl
+    backdrop:bg-primary-content/80 rounded-lg p-6 animate-fade-in
+  "
+>
+  <h2 data-modal="title" class="text-2xl font-bold mb-2">Dialog Title</h2>
+
+  <p class="mb-6">
+    This is a centered dialog using the HTML dialog element with Tailwind CSS.
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro quisquam
+    enim blanditiis iusto neque accusantium minus, aspernatur ex eius at.
+    Aliquam nam ex sit vel nesciunt qui ducimus velit nulla.
+  </p>
+
+  <div class="flex gap-2 justify-end">
+    <%= button_link_to 'OK', autofocus: true, value: 'confirm', class: "btn btn-primary", command: 'close', commandfor: 'main-dialog' %>
+    <%= button_link_to 'Cancel', value: 'cancel', class: "btn btn-neutral", command: 'close', commandfor: 'main-dialog' %>
+  </div>
+</dialog>
--- a/app/views/layouts/components/_navbar.html.erb
+++ b/app/views/layouts/components/_navbar.html.erb
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@ -0,0 +1,31 @@
+export const content = [
+  "./public/*.html",
+  "./app/helpers/**/*.rb",
+  "./app/javascript/**/*.js",
+  "./app/views/**/*.{erb,html}",
+];
+
+export const theme = {
+  extend: {
+    colors: {},
+    keyframes: {
+      "fade-in": {
+        "0%": { opacity: 0, transform: "translateY(-30)" },
+        "60%": { transform: "translateY(0)" },
+        "100%": { opacity: "100%" }
+      },
+    },
+    swing: {
+      "0%": { transform: "rotate(0deg)" },
+      "20%": { transform: "rotate(15deg)" },
+      "40%": { transform: "rotate(-10deg)" },
+      "60%": { transform: "rotate(5deg)" },
+      "100%": { transform: "rotate(0deg)" },
+    },
+  },
+  animation: {
+    "fade-in": "fade-in .2s ease-in-out",
+    swing: "swing 1s ease-in-out forwards",
+  },
+},
+};