Skip to content

Commit bec3d51

Browse files
chillenbergerchillenberger
authored
Dan alert notification update (#1223)
1 parent 22da4e3 commit bec3d51

File tree

15 files changed

+286
-113
lines changed

15 files changed

+286
-113
lines changed

‎pgml-dashboard/src/api/cms.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -268,7 +268,7 @@ impl Collection {
268268
Some(cluster.context.user.clone())
269269
};
270270

271-
let mut layout = crate::templates::Layout::new(&title, Some(cluster.clone()));
271+
let mut layout = crate::templates::Layout::new(&title, Some(cluster));
272272
if let Some(image) = image {
273273
// translate relative url into absolute for head social sharing
274274
let parts = image.split(".gitbook/assets/").collect::<Vec<&str>>();

‎pgml-dashboard/src/components/notifications/banner/banner_controller.js

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎pgml-dashboard/src/components/notifications/banner/mod.rs

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎pgml-dashboard/src/components/notifications/banner/banner.scss renamed to ‎pgml-dashboard/src/components/notifications/marketing/alert_banner/alert_banner.scss

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,10 @@
33
margin-right: calc(var(--bs-gutter-x) * -0.5);
44
}
55

6-
div[data-controller="notifications-banner"] {
6+
div[data-controller="notifications-marketing-alert-banner"] {
77
.btn-tertiary {
88
border: 0px;
99
}
10-
.news {
11-
background-color: #{$gray-100};
12-
color: #{$gray-900};
13-
.btn-tertiary:hover {
14-
filter: brightness(0.9);
15-
}
16-
}
17-
.blog {
18-
background-color: #{$neon-shade-100};
19-
.btn-tertiary {
20-
filter: brightness(1.5);
21-
}
22-
}
23-
.launch {
24-
background-color: #{$magenta-shade-200};
25-
.btn-tertiary {
26-
filter: brightness(1.5);
27-
}
28-
}
29-
.tip {
30-
background-color: #{$gray-900};
31-
}
3210
.level1 {
3311
background-color: #FFFF00;
3412
color: #{$gray-900};
@@ -42,7 +20,7 @@ div[data-controller="notifications-banner"] {
4220
}
4321

4422
.close-dark {
45-
color: #{$gray-900};
23+
color: #{$gray-300};
4624
}
4725
.close-light {
4826
color: #{$gray-100};

‎pgml-dashboard/src/components/notifications/marketing/alert_banner/mod.rs

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
use crate::Notification;
2+
use pgml_components::component;
3+
use sailfish::TemplateOnce;
4+
5+
#[derive(TemplateOnce, Default, Clone)]
6+
#[template(path = "notifications/marketing/alert_banner/template.html")]
7+
pub struct AlertBanner {
8+
pub notification: Option<Notification>,
9+
}
10+
11+
impl AlertBanner {
12+
pub fn new() -> AlertBanner {
13+
AlertBanner { notification: None }
14+
}
15+
16+
pub fn from_notification(notification: Option<&Notification>) -> AlertBanner {
17+
match notification {
18+
Some(notification) => {
19+
return AlertBanner {
20+
notification: Some(notification.clone()),
21+
}
22+
}
23+
None => return AlertBanner { notification: None },
24+
}
25+
}
26+
}
27+
28+
component!(AlertBanner);

‎pgml-dashboard/src/components/notifications/banner/template.html renamed to ‎pgml-dashboard/src/components/notifications/marketing/alert_banner/template.html

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
11
<% use crate::NotificationLevel; %>
22
<turbo-frame id="notifications-banner" class="position-relative d-block">
3-
<% if !remove_banner {%>
4-
<div data-controller="notifications-banner">
3+
<% if notification.is_some() {%>
4+
<% let notification = notification.unwrap(); %>
5+
<div data-controller="notifications-marketing-alert-banner">
56
<div class="<%- notification.level.to_string() %> W-100">
67
<div class="banner d-flex container p-1">
78
<div class="flex-grow-1 d-flex flex-column flex-md-row justify-content-center align-items-center row-gap-0 column-gap-3 fw-semibold overflow-hidden">
89
<div class="mx-3 overflow-hidden" style="max-width: 80%;">
910
<p class="m-0 text-center"><%- notification.message %></p>
1011
</div>
11-
<% if notification.link.is_some() {%>
12-
<a class="btn btn-tertiary fw-semibold p-0" href="<%- notification.link.unwrap() %>" data-turbo="false">
13-
Learn More
14-
<span class="material-symbols-outlined">arrow_forward</span>
15-
</a>
16-
<% } %>
1712
</div>
18-
<% if notification.dismissible {%>
19-
<a class="w-0 overflow-visible d-flex align-items-center" style="right: 4vw" href="/dashboard/notifications/remove_banner?id=<%- notification.id%>">
20-
<span class="material-symbols-outlined <% if notification.level == NotificationLevel::Tip {%>close-light<% } else {%>close-dark<% } %>">
13+
14+
<% if notification.dismissible && notification.level != NotificationLevel::Level3 {%>
15+
<a class="w-0 overflow-visible d-flex align-items-center" style="right: 4vw" href="/dashboard/notifications/remove_banner?id=<%- notification.id%>&alert=true">
16+
<span class="material-symbols-outlined <% if notification.level == NotificationLevel::Level2 {%>close-light<% } else {%>close-dark<% } %>">
2117
close
2218
</span></a>
2319
<% } %>

‎pgml-dashboard/src/components/notifications/marketing/feature_banner/feature_banner.scss

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
div[data-controller="notifications-marketing-feature-banner"] {
2+
.btn-tertiary {
3+
border: 0px;
4+
&:hover {
5+
.more-info {
6+
left: 0.5rem;
7+
}
8+
}
9+
.more-info {
10+
transition-duration: 0.5s;
11+
transition-property: left;
12+
left: 0rem;
13+
}
14+
}
15+
.feature1 {
16+
background-color: #{$slate-shade-100};
17+
margin: 2px 0px;
18+
.btn-tertiary {
19+
color: #{$gray-900};
20+
--bs-btn-color: #{$gray-900};
21+
}
22+
.close {
23+
color: #{$slate-shade-600};
24+
}
25+
.more-info {
26+
color: #{$gray-100}
27+
}
28+
}
29+
.feature2 {
30+
background-color: #{$violet-shade-100};
31+
margin: 2px 0px;
32+
.btn-tertiary {
33+
color: #{$gray-100};
34+
}
35+
.close {
36+
color: #{$gray-200};
37+
}
38+
.more-info {
39+
color: #{$gray-100}
40+
}
41+
}
42+
.feature3 {
43+
background-color: #{$gray-900};
44+
.btn-tertiary {
45+
color: #{$gray-100};
46+
}
47+
.close {
48+
color: #{$gray-300};
49+
}
50+
.more-info {
51+
color: #{$slate-shade-100}
52+
}
53+
}
54+
55+
.feature1, .feature2, .feature3 {
56+
border-radius: $border-radius-xl;
57+
}
58+
59+
.message-area {
60+
max-width: 75vw;
61+
}
62+
.banner {
63+
min-height: 2rem;
64+
}
65+
}

‎pgml-dashboard/src/components/notifications/marketing/feature_banner/mod.rs

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
use crate::Notification;
2+
use pgml_components::component;
3+
use sailfish::TemplateOnce;
4+
5+
#[derive(TemplateOnce, Default, Clone)]
6+
#[template(path = "notifications/marketing/feature_banner/template.html")]
7+
pub struct FeatureBanner {
8+
pub notification: Option<Notification>,
9+
}
10+
11+
impl FeatureBanner {
12+
pub fn new() -> FeatureBanner {
13+
FeatureBanner { notification: None }
14+
}
15+
16+
pub fn from_notification(notification: Option<&Notification>) -> FeatureBanner {
17+
match notification {
18+
Some(notification) => {
19+
return FeatureBanner {
20+
notification: Some(notification.clone()),
21+
}
22+
}
23+
None => return FeatureBanner { notification: None },
24+
}
25+
}
26+
}
27+
28+
component!(FeatureBanner);

‎pgml-dashboard/src/components/notifications/marketing/feature_banner/template.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<% use crate::NotificationLevel; %>
2+
<turbo-frame id="marketing-notifications-banner-feature" class="position-relative z-1">
3+
<% if notification.is_some() {%>
4+
<% let notification = notification.unwrap(); %>
5+
<div data-controller="notifications-marketing-feature-banner">
6+
7+
<div class="<%- notification.level.to_string() %> <% if notification.level == NotificationLevel::Feature3 {%>main-gradient-border-card<% } %> rounded-3 W-100">
8+
<div class="banner d-flex container">
9+
10+
<% let content = format!(
11+
r#"
12+
<{} class="{} flex-grow-1 d-flex flex-column flex-md-row justify-content-center align-items-center row-gap-0 column-gap-3 fw-semibold overflow-hidden">
13+
<div class="px-3 py-3 py-sm-0 overflow-hidden">
14+
<p class="m-0 text-center">{} {}</p>
15+
</div>
16+
</{}>
17+
"#,
18+
if notification.link.is_some() { "a" } else { "div" },
19+
if notification.link.is_some() { "btn btn-tertiary p-0" } else { "" },
20+
notification.message,
21+
if notification.link.is_some() { r#"<span class="material-symbols-outlined more-info position-relative" style="top: 2px;">arrow_forward</span>"# } else { "" },
22+
if notification.link.is_some() { "a" } else { "div" },
23+
); %>
24+
25+
<%- content %>
26+
27+
<% if notification.dismissible {%>
28+
<a class="w-0 btn btn-tertiary overflow-visible d-flex align-items-start p-2" style="height: fit-content" href="/dashboard/notifications/remove_banner?id=<%- notification.id%>&alert=false">
29+
<span class="material-symbols-outlined close">
30+
close
31+
</span></a>
32+
<% } %>
33+
</div>
34+
</div>
35+
</div>
36+
<% } %>
37+
</turbo-frame>

‎pgml-dashboard/src/components/notifications/marketing/mod.rs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// This file is automatically generated.
2+
// You shouldn't modify it manually.
3+
4+
// src/components/notifications/marketing/alert_banner
5+
pub mod alert_banner;
6+
pub use alert_banner::AlertBanner;
7+
8+
// src/components/notifications/marketing/feature_banner
9+
pub mod feature_banner;
10+
pub use feature_banner::FeatureBanner;

‎pgml-dashboard/src/components/notifications/mod.rs

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
// This file is automatically generated.
22
// You shouldn't modify it manually.
33

4-
// src/components/notifications/banner
5-
pub mod banner;
6-
pub use banner::Banner;
4+
// src/components/notifications/marketing
5+
pub mod marketing;

0 commit comments

Comments
 (0)