Skip to content

Commit ee7e83e

Browse files
levkklevkk
authored
Onboarding components fixes (#1393)
1 parent 47610cb commit ee7e83e

File tree

28 files changed

+329
-31
lines changed

28 files changed

+329
-31
lines changed

‎pgml-dashboard/Cargo.lock

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ pub mod marketing;
1111
pub mod newsletter_subscribe;
1212
pub use newsletter_subscribe::NewsletterSubscribe;
1313

14+
// src/components/cards/primary
15+
pub mod primary;
16+
pub use primary::Primary;
17+
1418
// src/components/cards/rgb
1519
pub mod rgb;
1620
pub use rgb::Rgb;
21+
22+
// src/components/cards/secondary
23+
pub mod secondary;
24+
pub use secondary::Secondary;

‎pgml-dashboard/src/components/cards/primary/mod.rs

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
use pgml_components::{component, Component};
2+
use sailfish::TemplateOnce;
3+
4+
#[derive(TemplateOnce, Default)]
5+
#[template(path = "cards/primary/template.html")]
6+
pub struct Primary {
7+
component: Component,
8+
style: String,
9+
}
10+
11+
impl Primary {
12+
pub fn new(component: Component) -> Primary {
13+
Primary {
14+
component,
15+
style: "".into(),
16+
}
17+
}
18+
19+
pub fn z_index(mut self, index: i64) -> Self {
20+
self.style = format!("position: relative; z-index: {};", index);
21+
self
22+
}
23+
}
24+
25+
component!(Primary);

‎pgml-dashboard/src/components/cards/primary/primary.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
div[data-controller="cards-primary"] {
2+
border-radius: #{$card-border-radius};
3+
padding: #{$card-spacer-y} #{$card-spacer-x};
4+
box-shadow: #{$card-box-shadow};
5+
background-color: #{$gray-800};
6+
}

‎pgml-dashboard/src/components/cards/primary/template.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div data-controller="cards-primary" style="<%- style %>">
2+
<%+ component %>
3+
</div>

‎pgml-dashboard/src/components/cards/rgb/mod.rs

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
use pgml_components::{component, Component};
22
use sailfish::TemplateOnce;
33

4+
use crate::components::stimulus::StimulusAction;
5+
use crate::types::CustomOption;
6+
47
#[derive(TemplateOnce)]
58
#[template(path = "cards/rgb/template.html")]
69
pub struct Rgb {
710
value: Component,
8-
active: bool,
911
link: Option<String>,
12+
link_action: CustomOption<StimulusAction>,
13+
controller_classes: Vec<String>,
14+
card_classes: Vec<String>,
15+
body_classes: Vec<String>,
1016
}
1117

1218
impl Default for Rgb {
@@ -19,20 +25,44 @@ impl Rgb {
1925
pub fn new(value: Component) -> Rgb {
2026
Rgb {
2127
value,
22-
active: false,
2328
link: None,
29+
link_action: CustomOption::default(),
30+
controller_classes: vec![],
31+
card_classes: vec![],
32+
body_classes: vec![],
2433
}
2534
}
2635

2736
pub fn active(mut self) -> Self {
28-
self.active = true;
37+
self.card_classes.push("active".into());
38+
self.card_classes.push("main-gradient-border-card-1".into());
39+
self
40+
}
41+
42+
pub fn is_active(mut self, active: bool) -> Self {
43+
if active {
44+
self.card_classes.push("active".into());
45+
self.card_classes.push("main-gradient-border-card-1".into());
46+
}
47+
2948
self
3049
}
3150

3251
pub fn link(mut self, link: &str) -> Self {
3352
self.link = Some(link.to_string());
3453
self
3554
}
55+
56+
pub fn link_action(mut self, action: StimulusAction) -> Self {
57+
self.link_action = action.into();
58+
self
59+
}
60+
61+
pub fn h_100(mut self) -> Self {
62+
self.controller_classes.push("h-100".into());
63+
self.card_classes.push("h-100".into());
64+
self
65+
}
3666
}
3767

3868
component!(Rgb);

‎pgml-dashboard/src/components/cards/rgb/template.html

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
<% let active = if active { "main-gradient-border-card-1 active" } else { "" }; %>
2-
<div data-controller="cards-rgb">
3-
<div class="card <%= active %>">
4-
<div class="card-body">
1+
<%
2+
let controller_classes = controller_classes.join(" ");
3+
let card_classes = card_classes.join(" ");
4+
let body_classes = body_classes.join(" ");
5+
%>
6+
<div data-controller="cards-rgb" class="<%= controller_classes %>">
7+
<div class="card <%= card_classes %>">
8+
<div class="card-body <%= body_classes %>">
59
<%+ value %>
610
<% if let Some(link) = link { %>
7-
<a href="<%= link %>" class="stretched-link"></a>
11+
<a href="<%= link %>" class="stretched-link" data-action="<%= link_action %>"></a>
812
<% } %>
913
</div>
1014
</div>

‎pgml-dashboard/src/components/cards/secondary/mod.rs

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
use pgml_components::{component, Component};
2+
use sailfish::TemplateOnce;
3+
4+
#[derive(TemplateOnce, Default)]
5+
#[template(path = "cards/secondary/template.html")]
6+
pub struct Secondary {
7+
value: Component,
8+
}
9+
10+
impl Secondary {
11+
pub fn new(value: Component) -> Secondary {
12+
Secondary { value }
13+
}
14+
}
15+
16+
component!(Secondary);

‎pgml-dashboard/src/components/cards/secondary/secondary.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
div[data-controller="cards-secondary"] {
2+
.card {
3+
--bs-card-bg: transparent;
4+
--bs-card-border-color: #{$neon-tint-100};
5+
}
6+
}

‎pgml-dashboard/src/components/cards/secondary/template.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div data-controller="cards-secondary">
2+
<div class="card">
3+
<div class="card-body">
4+
<%+ value %>
5+
</div>
6+
</div>
7+
</div>

0 commit comments

Comments
 (0)