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)
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