diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css index b764541..f575a68 100644 --- 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; } diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb new file mode 100644 index 0000000..1b4a322 --- /dev/null +++ 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 diff --git a/app/javascript/application.js b/app/javascript/application.js index 0d7b494..7a0e71d 100644 --- 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" \ No newline at end of file diff --git a/app/views/edge/index.html.erb b/app/views/edge/index.html.erb index fcd53a2..6d5790f 100644 --- a/app/views/edge/index.html.erb +++ b/app/views/edge/index.html.erb @@ -1 +1,3 @@

Edge#index

+<%= 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'} %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 5ebb1f7..231b8e5 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -25,9 +25,10 @@ <%= javascript_importmap_tags %> - - <%= render '/layouts/navbar' %> -
<%= yield %>
- <%= render '/layouts/footer' %> + + <%= render '/layouts/components/main_dialog' %> + <%= render '/layouts/components/navbar' %> +
<%= yield %>
+ <%= render '/layouts/components/footer' %> diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/components/_footer.html.erb similarity index 100% rename from app/views/layouts/_footer.html.erb rename to app/views/layouts/components/_footer.html.erb diff --git a/app/views/layouts/components/_main_dialog.html.erb b/app/views/layouts/components/_main_dialog.html.erb new file mode 100644 index 0000000..5090a1a --- /dev/null +++ b/app/views/layouts/components/_main_dialog.html.erb @@ -0,0 +1,21 @@ + +

Dialog Title

+ +

+ 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. +

+ +
+ <%= 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' %> +
+ diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/components/_navbar.html.erb similarity index 100% rename from app/views/layouts/_navbar.html.erb rename to app/views/layouts/components/_navbar.html.erb diff --git a/config/tailwind.config.js b/config/tailwind.config.js new file mode 100644 index 0000000..ca57a97 --- /dev/null +++ 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", + }, +}, +};