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>

‎pgml-dashboard/src/components/headings/gray/gray.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
span[data-controller="headings-gray"] {
2+
color: #{$gray-400};
3+
}

‎pgml-dashboard/src/components/headings/gray/mod.rs

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

‎pgml-dashboard/src/components/headings/gray/template.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<span
2+
data-controller="headings-gray">
3+
<%= value %>
4+
</span>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
pub mod blue;
66
pub use blue::Blue;
77

8+
// src/components/headings/gray
9+
pub mod gray;
10+
pub use gray::Gray;
11+
812
// src/components/headings/green
913
pub mod green;
1014
pub use green::Green;

‎pgml-dashboard/src/components/inputs/radio/radio_controller.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ export default class extends Controller {
1212

1313
e.currentTarget.classList.add("active");
1414
e.currentTarget.ariaPressed = true;
15-
e.currentTarget.querySelector("input").checked = true;
15+
16+
const input = e.currentTarget.querySelector("input");
17+
18+
input.checked = true;
19+
input.dispatchEvent(new Event("change"));
1620
}
1721
}

‎pgml-dashboard/src/components/inputs/range_group_v_2/mod.rs

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ use pgml_components::component;
22
use sailfish::TemplateOnce;
33

44
use crate::components::stimulus::{stimulus_action::StimulusActions, StimulusAction};
5+
use std::collections::BTreeSet;
56

67
#[derive(TemplateOnce, Default)]
78
#[template(path = "inputs/range_group_v_2/template.html")]
@@ -12,14 +13,26 @@ pub struct RangeGroupV2 {
1213
step: String,
1314
value: String,
1415
unit: String,
16+
input_unit: String,
17+
input_classes: BTreeSet<String>,
1518
cost_per_unit: String,
19+
cost_frequency: String,
1620

1721
actions: StimulusActions,
1822
}
1923

2024
impl RangeGroupV2 {
2125
pub fn new() -> RangeGroupV2 {
22-
Self::default()
26+
Self {
27+
input_classes: BTreeSet::from_iter(vec!["form-control".to_string()].into_iter()),
28+
..Default::default()
29+
}
30+
.min("40")
31+
.max("16000")
32+
.unit("GB")
33+
.cost_per_unit("0.20")
34+
.value("40")
35+
.cost_frequency("h")
2336
}
2437

2538
pub fn name(mut self, name: impl ToString) -> Self {
@@ -49,18 +62,41 @@ impl RangeGroupV2 {
4962

5063
pub fn unit(mut self, unit: impl ToString) -> Self {
5164
self.unit = unit.to_string();
52-
self
65+
self.input_unit = unit.to_string();
66+
67+
self.with_input_classes()
68+
}
69+
70+
pub fn input_unit(mut self, input_unit: impl ToString) -> Self {
71+
self.input_unit = input_unit.to_string();
72+
self.with_input_classes()
5373
}
5474

5575
pub fn cost_per_unit(mut self, cost_per_unit: impl ToString) -> Self {
5676
self.cost_per_unit = cost_per_unit.to_string();
5777
self
5878
}
5979

80+
pub fn cost_frequency(mut self, cost_frequency: impl ToString) -> Self {
81+
self.cost_frequency = cost_frequency.to_string();
82+
self
83+
}
84+
6085
pub fn action(mut self, action: StimulusAction) -> Self {
6186
self.actions.push(action);
6287
self
6388
}
89+
90+
fn with_input_classes(mut self) -> Self {
91+
if !self.input_unit.is_empty() {
92+
self.input_classes
93+
.insert("inputs-range-group-v-2-with-unit".to_string());
94+
} else {
95+
self.input_classes.remove("inputs-range-group-v-2-with-unit");
96+
}
97+
98+
self
99+
}
64100
}
65101

66102
component!(RangeGroupV2);

‎pgml-dashboard/src/components/inputs/range_group_v_2/range_group_v_2.scss

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,33 @@ div[data-controller="inputs-range-group-v-2"] {
55
}
66

77
input[type="text"] {
8-
padding-right: 30px;
8+
&.inputs-range-group-v-2-with-unit {
9+
padding-right: 0;
10+
border-right: 0;
11+
border-top-right-radius: 0;
12+
border-bottom-right-radius: 0;
13+
}
914
}
1015

11-
.inputs-range-group-v-2-unit {
12-
margin-left: -33px;
16+
span.inputs-range-group-v-2-unit {
1317
color: #{$gray-400};
18+
background: #{$input-bg};
19+
height: 100%;
20+
padding: #{$input-padding-y} #{$input-padding-x};
21+
border: #{$input-border-width} solid #{$input-border-color};
22+
23+
border-top-right-radius: var(--bs-border-radius);
24+
border-bottom-right-radius: var(--bs-border-radius);
25+
border-top-left-radius: 0;
26+
border-bottom-left-radius: 0;
27+
border-left: 0;
28+
transition: #{$input-transition};
29+
30+
&.focused {
31+
background: #{$input-focus-bg};
32+
box-shadow: #{$input-focus-box-shadow};
33+
border-color: #{$input-focus-border-color};
34+
border-width: #{$input-border-width};
35+
}
1436
}
1537
}

‎pgml-dashboard/src/components/inputs/range_group_v_2/range_group_v_2_controller.js

Lines changed: 17 additions & 1 deletion
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-
static targets = ["input", "range"];
4+
static targets = ["input", "range", "unit"];
55

66
onInputInput(e) {
77
const value = parseInt(e.currentTarget.value);
@@ -14,6 +14,22 @@ export default class extends Controller {
1414
}
1515
}
1616

17+
onInputFocusIn(e) {
18+
if (this.hasUnitTarget) {
19+
this.unitTarget.classList.add("focused");
20+
}
21+
}
22+
23+
onInputBlur(e) {
24+
if (this.hasUnitTarget) {
25+
this.unitTarget.classList.remove("focused");
26+
}
27+
}
28+
29+
onUnitClick(e) {
30+
this.inputTarget.focus();
31+
}
32+
1733
onRangeInput(e) {
1834
this.inputTarget.value = e.currentTarget.value;
1935
}

0 commit comments

Comments
 (0)