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

Commit5af5390

Browse files
make a range input group componnet (#998)
1 parent40a13e9 commit5af5390

File tree

9 files changed

+232
-5
lines changed

9 files changed

+232
-5
lines changed
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// This file is automatically generated.
2+
// You shouldn't modify it manually.
3+
4+
// src/components/inputs/range_group
5+
pubmod range_group;
6+
pubuse range_group::RangeGroup;
Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
use pgml_components::component;
2+
use sailfish::TemplateOnce;
3+
4+
#[derive(TemplateOnce,Default)]
5+
#[template(path ="inputs/range_group/template.html")]
6+
pubstructRangeGroup{
7+
pubtitle:String,
8+
pubidentifier:String,
9+
pubmin:i64,
10+
pubmax:i64,
11+
pubstep:f32,
12+
pubinitial_value:f64,
13+
pubtext_target:Option<String>,
14+
pubrange_target:Option<String>,
15+
pubcost_rate:Option<f32>,
16+
pubunits:String,
17+
}
18+
19+
implRangeGroup{
20+
pubfnnew(title:&str) ->RangeGroup{
21+
RangeGroup{
22+
title: title.to_owned(),
23+
identifier: title.replace(" ","_"),
24+
min:0,
25+
max:100,
26+
step:1.0,
27+
initial_value:1.0,
28+
text_target:None,
29+
range_target:None,
30+
cost_rate:None,
31+
units:String::default(),
32+
}
33+
}
34+
35+
pubfnidentifier(mutself,identifier:&str) ->Self{
36+
self.identifier = identifier.replace(" ","_").to_owned();
37+
self
38+
}
39+
40+
pubfnbounds(mutself,min:i64,max:i64,step:f32) ->Self{
41+
self.min = min;
42+
self.max = max;
43+
self.step = step;
44+
self
45+
}
46+
47+
pubfninitial_value(mutself,value:f64) ->Self{
48+
self.initial_value = value;
49+
self
50+
}
51+
52+
pubfntext_target(mutself,target:&str) ->Self{
53+
self.text_target =Some(target.to_owned());
54+
self
55+
}
56+
57+
pubfnrange_target(mutself,target:&str) ->Self{
58+
self.range_target =Some(target.to_owned());
59+
self
60+
}
61+
62+
pubfncost_rate(mutself,cost_rate:f32) ->Self{
63+
self.cost_rate =Some(cost_rate);
64+
self
65+
}
66+
67+
pubfnunits(mutself,units:&str) ->Self{
68+
self.units = units.to_owned();
69+
self
70+
}
71+
}
72+
73+
component!(RangeGroup);
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
div[data-controller="inputs-range-group"] {
2+
.text-input {
3+
width:4em;
4+
}
5+
6+
.hourly-rate {
7+
display:flex;
8+
flex-direction:row;
9+
background-color:#{$gray-900};
10+
border-radius:$border-radius;
11+
padding:8px4px;
12+
13+
color:#{$gray-400};
14+
text-align:center;
15+
font-size:18px;
16+
font-style:normal;
17+
font-weight:700;
18+
line-height:24px;
19+
letter-spacing:0.18px;
20+
}
21+
22+
.cost {
23+
width:5em;
24+
}
25+
26+
.unit {
27+
width:28px;
28+
}
29+
}
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import{Controller}from'@hotwired/stimulus'
2+
3+
exportdefaultclassextendsController{
4+
5+
statictargets=[
6+
"range",
7+
"text",
8+
]
9+
10+
staticvalues={
11+
bounds:Object
12+
}
13+
14+
initialize(){
15+
this.textTarget.value=this.rangeTarget.value
16+
}
17+
18+
updateText(e){
19+
this.textTarget.value=e.target.value
20+
}
21+
22+
updateRange(e){
23+
if(e.target.value<this.boundsValue.min
24+
||!e.target.value||!this.isNumeric(e.target.value)){
25+
this.rangeTarget.value=this.boundsValue.min
26+
this.textTarget.value=this.boundsValue.min
27+
return
28+
}
29+
30+
if(e.target.value>this.boundsValue.max){
31+
this.rangeTarget.value=this.boundsValue.max
32+
this.textTarget.value=this.boundsValue.max
33+
return
34+
}
35+
36+
this.rangeTarget.value=e.target.value
37+
}
38+
39+
isNumeric(n){
40+
return!isNaN(parseFloat(n))&&isFinite(n);
41+
}
42+
}
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<divdata-controller="inputs-range-group"data-inputs-range-group-bounds-value='{"min": <%- min%>, "max": <%- max%>}'>
2+
<divclass="d-flex flex-column flex-md-row">
3+
<divclass="flex-grow-1">
4+
<h6class="h6"><%- title %></h6>
5+
</div>
6+
<div>
7+
<divclass="input-group">
8+
<inputclass="text-input form-control text-end text-white fw-bold"maxlength="4"type="text"
9+
data-inputs-range-group-target="text"
10+
data-action="focusout->inputs-range-group#updateRange"
11+
<% if text_target.is_some() {%><%- text_target.unwrap()%><% } %>>
12+
<divclass="input-group-text fw-bold text-start"style="width: 2em;">
13+
<%- units %>
14+
</div>
15+
</div>
16+
</div>
17+
</div>
18+
19+
<inputclass="form-range"
20+
type="range"
21+
name="<%- identifier %>"
22+
min="<%- min %>"
23+
max="<%- max %>"
24+
step="<%- step %>"
25+
value="<%- initial_value %>"
26+
data-action="inputs-range-group#updateText"
27+
data-inputs-range-group-target="range"
28+
<% if range_target.is_some() { %><%- range_target.unwrap() %><% } %>>
29+
30+
<% if cost_rate.is_some() { %>
31+
<divclass="w-100 d-flex justify-content-end">
32+
<divclass="hourly-rate">
33+
<divclass="unit">$</div>
34+
<divclass="cost"><%= format!("{:.2}",cost_rate.unwrap()) %>/hr</div>
35+
</div>
36+
</div>
37+
<% } %>
38+
</div>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ pub use dropdown::Dropdown;
1717
pubmod github_icon;
1818
pubuse github_icon::GithubIcon;
1919

20+
// src/components/inputs
21+
pubmod inputs;
22+
2023
// src/components/left_nav_menu
2124
pubmod left_nav_menu;
2225
pubuse left_nav_menu::LeftNavMenu;

‎pgml-dashboard/static/css/bootstrap-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
// @import "./bootstrap-5.3.0-alpha1/scss/bootstrap.scss";
1616
@import"./bootstrap-5.3.0-alpha1/scss/root";
1717
@import"./bootstrap-5.3.0-alpha1/scss/reboot";
18+
1819
@import"./bootstrap-5.3.0-alpha1/scss/type";
1920
@import"./bootstrap-5.3.0-alpha1/scss/images";
2021
@import"./bootstrap-5.3.0-alpha1/scss/containers";
@@ -26,9 +27,14 @@
2627
@import"./bootstrap-5.3.0-alpha1/scss/forms/form-control";
2728
@import"./bootstrap-5.3.0-alpha1/scss/forms/form-select";
2829
@import"./bootstrap-5.3.0-alpha1/scss/forms/form-check";
30+
2931
// Do not import form-range, we style it ourselves entirely
3032
// @import "../bootstrap-5.3.0-alpha1/scss/forms/form-range";
3133

34+
@import"./bootstrap-5.3.0-alpha1/scss/forms/floating-labels";
35+
@import"./bootstrap-5.3.0-alpha1/scss/forms/input-group";
36+
@import"./bootstrap-5.3.0-alpha1/scss/forms/validation";
37+
3238
@import"./bootstrap-5.3.0-alpha1/scss/buttons";
3339
@import"./bootstrap-5.3.0-alpha1/scss/transitions";
3440
@import"./bootstrap-5.3.0-alpha1/scss/dropdown";

‎pgml-dashboard/static/css/modules.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// There is no need to edit it manually.
33

44
@import"../../src/components/dropdown/dropdown.scss";
5+
@import"../../src/components/inputs/range_group/range_group.scss";
56
@import"../../src/components/left_nav_menu/left_nav_menu.scss";
67
@import"../../src/components/left_nav_web_app/left_nav_web_app.scss";
78
@import"../../src/components/modal/modal.scss";

‎pgml-dashboard/templates/content/playground.html

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
<% use crate::components::*;
22
use crate::components::tables::large::*;
33
use crate::components::navigation::tabs::*;
4+
use crate::components::inputs::range_group::RangeGroup;
45
%>
56

67
<divclass="min-height: 100vh;"data-controller="playground">
7-
<h3class="h3">Playground</h3>
8+
<h1class="h1">Playground</h1>
9+
<p>This is a space to display components.</p>
810

9-
<divclass="mb-3">
11+
<h3class="h3">icons</h3>
12+
<divclass="mb-5">
1013
<%+ GithubIcon::new() %>
1114
</div>
12-
1315
<divclass="mb-3">
16+
<%+ ProfileIcon %>
17+
</div>
18+
19+
<h3class="h3">Dropdowns</h3>
20+
<divclass="mb-5">
1421
<divclass="row">
1522
<divclass="col-6"style="min-height: 400px;">
1623
<%+ Dropdown::new(
@@ -39,7 +46,10 @@ <h3 class="h3">Playground</h3>
3946
</div>
4047
</div>
4148
</div>
42-
<divclass="mb-3">
49+
50+
51+
<h3class="h3">Navigation</h3>
52+
<divclass="mb-5">
4353
<%+ Tabs::new(
4454
&[
4555
Tab::new(
@@ -85,7 +95,26 @@ <h3 class="h3">Playground</h3>
8595
)
8696
.active_tab("Test tab") %>
8797
</div>
88-
<divclass="mb-3">
8998

99+
<h3class="h3">Inputs</h3>
100+
<divstyle="background: #17181A; padding: 2rem; border-radius: 16px;">
101+
<divclass="mb-5">
102+
<divclass="my-5">
103+
<%+ RangeGroup::new("Input 1")
104+
.initial_value(4.0)
105+
.identifier("my_test_input")
106+
.bounds(2, 38, 2.0)
107+
.units("T") %>
108+
</div>
109+
110+
<divclass="my-5">
111+
<%+ RangeGroup::new("Input 2: with hourly rate")
112+
.initial_value(3.0)
113+
.identifier("my_test input 2")
114+
.bounds(1, 20, 1.0)
115+
.units("GB")
116+
.cost_rate(0.144) %>
117+
</div>
118+
</div>
90119
</div>
91120
</div>

0 commit comments

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