Skip to content

Commit b9b32a6

Browse files
thejonrobertsthejonroberts
committed
flash messages
(turbo and regular)
1 parent 418be08 commit b9b32a6

File tree

13 files changed

+75
-9
lines changed

13 files changed

+75
-9
lines changed

‎app/assets/stylesheets/application.sass.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
// Configuration
66
@import "config/variables";
77
@import "config/reset";
8+
@import "config/animations";
89

910
// Components
1011
@import "components/btn";
@@ -14,6 +15,7 @@
1415
@import "components/quote";
1516
@import "components/turbo_progress_bar";
1617
@import "components/navbar";
18+
@import "components/flash";
1719

1820
// Layouts
1921
@import "layouts/container";

‎app/assets/stylesheets/components/_flash.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.flash {
2+
position: fixed;
3+
top: 5rem;
4+
left: 50%;
5+
transform: translateX(-50%);
6+
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
gap: var(--space-s);
11+
12+
max-width: 100%;
13+
width: max-content;
14+
padding: 0 var(--space-m);
15+
16+
&__message {
17+
font-size: var(--font-size-s);
18+
color: var(--color-white);
19+
padding: var(--space-xs) var(--space-m);
20+
background-color: var(--color-dark);
21+
animation: appear-then-fade 4s both;
22+
border-radius: 999px;
23+
}
24+
}

‎app/assets/stylesheets/config/_animations.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@keyframes appear-then-fade {
2+
3+
0%, 100% {
4+
opacity: 0
5+
}
6+
7+
5%, 60% {
8+
opacity: 1
9+
}
10+
}

‎app/controllers/quotes_controller.rb

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ def create
1919

2020
if @quote.save
2121
respond_to do |format|
22-
format.html { redirect_to quotes_path, notice: "Quote was successfully created." }
23-
format.turbo_stream
22+
notice = "Quote was successfully created."
23+
format.html { redirect_to quotes_path, notice: }
24+
format.turbo_stream { flash.now[:notice] = notice }
2425
end
2526
else
2627
render :new, status: :unprocessable_entity
@@ -32,7 +33,11 @@ def edit
3233

3334
def update
3435
if @quote.update(quote_params)
35-
redirect_to quotes_path, notice: "Quote was successfully updated."
36+
respond_to do |format|
37+
notice = "Quote was successfully updated."
38+
format.html { redirect_to quotes_path, notice: }
39+
format.turbo_stream { flash.now[:notice] = notice }
40+
end
3641
else
3742
render :edit, status: :unprocessable_entity
3843
end
@@ -41,8 +46,9 @@ def update
4146
def destroy
4247
@quote.destroy
4348
respond_to do |format|
44-
format.html { redirect_to quotes_path, notice: "Quote was successfully destroyed." }
45-
format.turbo_stream
49+
notice = "Quote was successfully destroyed."
50+
format.html { redirect_to quotes_path, notice: }
51+
format.turbo_stream { flash.now[:notice] = notice }
4652
end
4753
end
4854

‎app/helpers/application_helper.rb

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
module ApplicationHelper
2+
def render_turbo_stream_flash_messages
3+
turbo_stream.prepend "flash", partial: "layouts/flash"
4+
end
25
end

‎app/javascript/application.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
// Entry point for the build script in your package.json
22
import "@hotwired/turbo-rails"
33
import "./controllers"
4+
5+
// disable Turbo on the whole application
6+
// (also need <body data-turbo="false"> in views/layouts/application.html.erb)
7+
// import { Turbo } from "@hotwired/turbo-rails"
8+
// Turbo.session.drive = false

‎app/javascript/controllers/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44

55
import { application } from "./application"
66

7-
import HelloController from "./hello_controller"
8-
application.register("hello", HelloController)
7+
import RemovalsController from "./removals_controller"
8+
application.register("removals", RemovalsController)

‎app/javascript/controllers/hello_controller.js renamed to ‎app/javascript/controllers/removals_controller.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Controller } from "@hotwired/stimulus"
22

33
export default class extends Controller {
4-
connect() {
5-
this.element.textContent = "Hello World!"
4+
remove() {
5+
this.element.remove()
66
}
77
}

‎app/views/layouts/_flash.html.erb

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<% flash.each do |flash_type, message| %>
2+
<div
3+
class="flash__message"
4+
data-controller="removals"
5+
data-action="animationend->removals#remove"
6+
>
7+
<%= message %>
8+
</div>
9+
<% end %>

‎app/views/layouts/application.html.erb

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212

1313
<body>
1414
<%= render "layouts/navbar" %>
15+
<div id="flash" class="flash">
16+
<%= render "layouts/flash" %>
17+
</div>
1518
<%= yield %>
1619
<% console if Rails.env == 'development' %>
1720
</body>

0 commit comments

Comments
 (0)