Skip to content

Commit 1042f85

Browse files
levkklevkk
authored
Custom greeting area in split, checkbox component (#1404)
1 parent 507e9b6 commit 1042f85

File tree

11 files changed

+116
-39
lines changed

11 files changed

+116
-39
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
div[data-controller="inputs-checkbox"] {
2+
.form-check-label {
3+
padding-left: 8px;
4+
user-select: none; // Annoying to constantly highlight the text when clicking too fast.
5+
}
6+
7+
.form-check-input {
8+
&:not(:checked) {
9+
border-color: #{$neon-tint-100};
10+
}
11+
12+
&:hover {
13+
cursor: pointer;
14+
}
15+
}
16+
}
17+

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
use pgml_components::{component, Component};
2+
use sailfish::TemplateOnce;
3+
4+
use crate::utils::random_string;
5+
6+
#[derive(TemplateOnce, Default)]
7+
#[template(path = "inputs/checkbox/template.html")]
8+
pub struct Checkbox {
9+
name: String,
10+
value: String,
11+
label: Component,
12+
id: String,
13+
}
14+
15+
impl Checkbox {
16+
pub fn new(name: &str, value: &str) -> Checkbox {
17+
Checkbox {
18+
name: name.to_string(),
19+
value: value.to_string(),
20+
label: Component::from(name),
21+
id: random_string(16).to_lowercase(),
22+
}
23+
}
24+
}
25+
26+
component!(Checkbox);

‎pgml-dashboard/src/components/inputs/checkbox/template.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div data-controller="inputs-checkbox">
2+
<div class="form-check d-flex gap-2 align-items-center">
3+
<input class="form-check-input" type="checkbox" id="<%= id %>" name="<%= name %>" value="<%= value %>">
4+
<label class="form-check-label flex-grow-1" for="<%= id %>"><%+ label %></label>
5+
</div>
6+
</div>

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

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

4+
// src/components/inputs/checkbox
5+
pub mod checkbox;
6+
pub use checkbox::Checkbox;
7+
48
// src/components/inputs/radio
59
pub mod radio;
610
pub use radio::Radio;

‎pgml-dashboard/src/components/pages/careers/apply/template.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
use crate::components::sections::Split;
55
use crate::components::PostgresLogo;
66

7-
let eyebrow_formated = r#"<span class="text-white-300">APPLY NOW</span>"#;
7+
let eyebrow_formatted = r#"<span class="text-white-300 text-uppercase">Apply now</span>"#;
88

99
let path = format!("/careers/apply/{}",job_title.replace(" ", "-").to_lowercase());
1010

@@ -105,8 +105,7 @@
105105

106106
<%+
107107
Split::new()
108-
.eyebrow(Component::from(eyebrow_formated))
109-
.title(Component::from(job_title))
108+
.greeting(Component::from(eyebrow_formatted), Component::from(job_title))
110109
.display_area(Component::from(display_area))
111110
.with_navbar()
112111
%>

‎pgml-dashboard/src/components/pages/demo/template.html

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<% use crate::components::stimulus::StimulusAction; %>
77
<% use crate::components::inputs::RangeGroupV2; %>
88
<% use crate::components::inputs::select::{Select, Option}; %>
9-
<% use crate::components::inputs::{SwitchV2, Radio}; %>
9+
<% use crate::components::inputs::{SwitchV2, Radio, Checkbox}; %>
1010
<% use crate::components::cards::{Rgb, Secondary, Primary}; %>
1111

1212
<div class="container" data-controller="pages-demo">
@@ -186,4 +186,19 @@
186186
</div>
187187
</div>
188188
</div>
189+
190+
<div class="py-5 mb-5">
191+
<div class="card mb-3">
192+
<div class="card-body">
193+
<div class="d-flex">
194+
<%+ Checkbox::new("Inline checkbox", "inline") %>
195+
</div>
196+
</div>
197+
</div>
198+
<div class="card">
199+
<div class="card-body">
200+
<%+ Checkbox::new("Take full width checkbox", "block") %>
201+
</div>
202+
</div>
203+
</div>
189204
</div>

‎pgml-dashboard/src/components/sections/split/greeting.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="py-5 text-center text-lg-start greeting">
2+
<h6 class="h6 text-uppercase mb-0">
3+
<small class="eyebrow-text">
4+
<%+ eyebrow %>
5+
</small>
6+
</h6>
7+
<h2 class="display-1 fw-bold text-capitalize">
8+
<%+ title %>
9+
</h2>
10+
</div>

‎pgml-dashboard/src/components/sections/split/mod.rs

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,51 @@
1+
//! Left/right split used in onboarding, signup, careers, etc.
2+
13
use pgml_components::component;
24
use pgml_components::Component;
35
use sailfish::TemplateOnce;
46

57
#[derive(TemplateOnce, Default)]
68
#[template(path = "sections/split/template.html")]
79
pub struct Split {
8-
eyebrow: Component,
9-
title: Component,
10+
greeting_area: Component,
1011
display_area: Component,
1112
with_navbar: bool,
1213
}
1314

15+
// Greeting with its own styling.
16+
#[derive(TemplateOnce, Default, Clone)]
17+
#[template(path = "sections/split/greeting.html")]
18+
pub struct Greeting {
19+
eyebrow: Component,
20+
title: Component,
21+
}
22+
23+
component!(Greeting);
24+
25+
impl Greeting {
26+
pub fn new(eyebrow: Component, title: Component) -> Greeting {
27+
Greeting { eyebrow, title }
28+
}
29+
}
30+
1431
impl Split {
1532
pub fn new() -> Split {
1633
Split {
17-
eyebrow: Component::from(String::from("")),
18-
title: Component::from(String::from("")),
19-
display_area: Component::from(String::from("")),
34+
greeting_area: Component::default(),
35+
display_area: Component::default(),
2036
with_navbar: false,
2137
}
2238
}
2339

24-
pub fn eyebrow(mut self, eyebrow: Component) -> Split {
25-
self.eyebrow = eyebrow;
40+
// Set the greeting.
41+
pub fn greeting(mut self, eyebrow: Component, title: Component) -> Split {
42+
self.greeting_area = Greeting::new(eyebrow, title).into();
2643
self
2744
}
2845

29-
pub fn title(mut self, title: Component) -> Split {
30-
self.title = title;
46+
// Set whatever you want on the left side of the display.
47+
pub fn greeting_area(mut self, greeting_area: Component) -> Split {
48+
self.greeting_area = greeting_area;
3149
self
3250
}
3351

‎pgml-dashboard/src/components/sections/split/split.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ div[data-controller="sections-split"] {
77
}
88
}
99

10-
.signup-left {
10+
.sections-split-left {
1111
background: #{$gray-700};
1212
}
1313

14-
.signup-right {
14+
.sections-split-right {
1515
position: relative;
1616
background-color: #{$gray-800};
1717
overflow: hidden;

‎pgml-dashboard/src/components/sections/split/template.html

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,23 @@
1-
<%
2-
use pgml_components::Component;
3-
4-
let greeting = format!(r#"
5-
<div class="py-5 text-center text-lg-start greeting">
6-
<h6 class="h6 text-uppercase mb-0">
7-
<small class="eyebrow-text">
8-
{}
9-
</small>
10-
</h6>
11-
<h2 class="display-1 fw-bold" style="text-transform: capitalize">
12-
{}
13-
</h2>
14-
</div>
15-
"#,
16-
eyebrow.render_once().unwrap(),
17-
title.render_once().unwrap());
18-
%>
19-
20-
<div data-controller="sections-split" class="">
1+
<div data-controller="sections-split">
212
<div class="row h-100 gx-0">
223
<!-- left -->
234
<div class="col-6 d-none d-lg-block">
24-
<div class="d-flex flex-column signup-left" style="height: 100%;">
5+
<div class="d-flex flex-column sections-split-left" style="height: 100%;">
256
<div class="d-flex flex-column position-sticky justify-content-center left-center<% if with_navbar {%>-navbar<% } %>">
26-
<%+ Component::from(greeting.clone()) %>
7+
<%+ greeting_area.clone() %>
278
</div>
289
</div>
2910
</div>
3011

3112
<!-- right -->
3213
<div class="col-12 col-lg-6 ">
33-
<div class="d-flex flex-column align-items-center justify-content-center signup-right pt-lg-5 pt-0 pb-5 px-3 right-center<% if with_navbar {%>-navbar<% } %>">
14+
<div class="d-flex flex-column align-items-center justify-content-center sections-split-right pt-lg-5 pt-0 pb-5 px-3 right-center<% if with_navbar {%>-navbar<% } %>">
3415
<div class="glow-1"></div>
3516
<div class="glow-2"></div>
3617
<div class="glow-3"></div>
3718
<div class="glow-4"></div>
3819
<div class="glow-5"></div>
39-
<div class="d-flex d-lg-none"><%+ Component::from(greeting) %></div>
20+
<div class="d-flex d-lg-none"><%+ greeting_area %></div>
4021

4122
<%+ display_area %>
4223
</div>

0 commit comments

Comments
 (0)