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;

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy