Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1042f85

Browse files
authored
Custom greeting area in split, checkbox component (#1404)
1 parent507e9b6 commit1042f85

File tree

11 files changed

+116
-39
lines changed

11 files changed

+116
-39
lines changed
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+
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+
usecrate::utils::random_string;
5+
6+
#[derive(TemplateOnce,Default)]
7+
#[template(path ="inputs/checkbox/template.html")]
8+
pubstructCheckbox{
9+
name:String,
10+
value:String,
11+
label:Component,
12+
id:String,
13+
}
14+
15+
implCheckbox{
16+
pubfnnew(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);
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<divdata-controller="inputs-checkbox">
2+
<divclass="form-check d-flex gap-2 align-items-center">
3+
<inputclass="form-check-input"type="checkbox"id="<%= id %>"name="<%= name %>"value="<%= value %>">
4+
<labelclass="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+
pubmod checkbox;
6+
pubuse checkbox::Checkbox;
7+
48
// src/components/inputs/radio
59
pubmod radio;
610
pubuse 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-
leteyebrow_formated = r#"<spanclass="text-white-300">APPLY NOW</span>"#;
7+
leteyebrow_formatted = r#"<spanclass="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
<divclass="container"data-controller="pages-demo">
@@ -186,4 +186,19 @@
186186
</div>
187187
</div>
188188
</div>
189+
190+
<divclass="py-5 mb-5">
191+
<divclass="card mb-3">
192+
<divclass="card-body">
193+
<divclass="d-flex">
194+
<%+ Checkbox::new("Inline checkbox", "inline") %>
195+
</div>
196+
</div>
197+
</div>
198+
<divclass="card">
199+
<divclass="card-body">
200+
<%+ Checkbox::new("Take full width checkbox", "block") %>
201+
</div>
202+
</div>
203+
</div>
189204
</div>
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<divclass="py-5 text-center text-lg-start greeting">
2+
<h6class="h6 text-uppercase mb-0">
3+
<smallclass="eyebrow-text">
4+
<%+ eyebrow %>
5+
</small>
6+
</h6>
7+
<h2class="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
pubstructSplit{
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+
pubstructGreeting{
19+
eyebrow:Component,
20+
title:Component,
21+
}
22+
23+
component!(Greeting);
24+
25+
implGreeting{
26+
pubfnnew(eyebrow:Component,title:Component) ->Greeting{
27+
Greeting{ eyebrow, title}
28+
}
29+
}
30+
1431
implSplit{
1532
pubfnnew() ->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-
pubfneyebrow(mutself,eyebrow:Component) ->Split{
25-
self.eyebrow = eyebrow;
40+
// Set the greeting.
41+
pubfngreeting(mutself,eyebrow:Component,title:Component) ->Split{
42+
self.greeting_area =Greeting::new(eyebrow, title).into();
2643
self
2744
}
2845

29-
pubfntitle(mutself,title:Component) ->Split{
30-
self.title = title;
46+
// Set whatever you want on the left side of the display.
47+
pubfngreeting_area(mutself,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-
<divclass="py-5 text-center text-lg-start greeting">
6-
<h6class="h6 text-uppercase mb-0">
7-
<smallclass="eyebrow-text">
8-
{}
9-
</small>
10-
</h6>
11-
<h2class="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-
<divdata-controller="sections-split"class="">
1+
<divdata-controller="sections-split">
212
<divclass="row h-100 gx-0">
223
<!-- left -->
234
<divclass="col-6 d-none d-lg-block">
24-
<divclass="d-flex flex-columnsignup-left"style="height: 100%;">
5+
<divclass="d-flex flex-columnsections-split-left"style="height: 100%;">
256
<divclass="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
<divclass="col-12 col-lg-6">
33-
<divclass="d-flex flex-column align-items-center justify-content-centersignup-right pt-lg-5 pt-0 pb-5 px-3 right-center<% if with_navbar {%>-navbar<% } %>">
14+
<divclass="d-flex flex-column align-items-center justify-content-centersections-split-right pt-lg-5 pt-0 pb-5 px-3 right-center<% if with_navbar {%>-navbar<% } %>">
3415
<divclass="glow-1"></div>
3516
<divclass="glow-2"></div>
3617
<divclass="glow-3"></div>
3718
<divclass="glow-4"></div>
3819
<divclass="glow-5"></div>
39-
<divclass="d-flex d-lg-none"><%+Component::from(greeting) %></div>
20+
<divclass="d-flex d-lg-none"><%+greeting_area %></div>
4021

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

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp