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

Commitff02581

Browse files
authored
Added a custom Option type and extended the select and added a few new classes for typography (#1060)
1 parent3d9800c commitff02581

File tree

7 files changed

+148
-39
lines changed

7 files changed

+148
-39
lines changed

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
usecrate::components::stimulus::stimulus_action::{StimulusAction,StimulusEvents};
2+
usecrate::components::stimulus::stimulus_target::StimulusTarget;
23
use pgml_components::component;
34
use pgml_components::Component;
45
use sailfish::TemplateOnce;
6+
usecrate::types::CustomOption;
57

68
#[derive(TemplateOnce,Default)]
79
#[template(path ="inputs/select/template.html")]
@@ -14,6 +16,8 @@ pub struct Select {
1416
menu_position:String,
1517
expandable:bool,
1618
name:String,
19+
value_target:StimulusTarget,
20+
action:CustomOption<StimulusAction>,
1721
}
1822

1923
implSelect{
@@ -34,13 +38,13 @@ impl Select {
3438
])
3539
}
3640

37-
pubfnoptions(mutself,values:Vec<String>) ->Self{
41+
pubfnoptions<S:ToString>(mutself,values:Vec<S>) ->Self{
3842
letmut options =Vec::new();
39-
self.value = values.first().unwrap().to_owned();
43+
self.value = values.first().unwrap().to_string();
4044

4145
for valuein values{
4246
let item =Option::new(
43-
value,
47+
value.to_string(),
4448
StimulusAction::new()
4549
.controller("inputs-select")
4650
.method("choose")
@@ -92,6 +96,16 @@ impl Select {
9296
self.expandable =true;
9397
self
9498
}
99+
100+
pubfnvalue_target(mutself,value_target:StimulusTarget) ->Self{
101+
self.value_target = value_target;
102+
self
103+
}
104+
105+
pubfnaction(mutself,action:StimulusAction) ->Self{
106+
self.action = action.into();
107+
self
108+
}
95109
}
96110

97111
#[derive(TemplateOnce)]

‎pgml-dashboard/src/components/inputs/select/select_controller.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ export default class extends Controller {
66
choose(e){
77
this.inputTarget.value=e.target.innerHTML
88
this.valueTarget.innerHTML=e.target.innerHTML
9+
this.inputTarget.dispatchEvent(newEvent('change'))
910
}
10-
1111
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,5 @@
2929

3030
<%+ dropdown %>
3131

32-
<inputtype="hidden"name="<%= name %>"value="<%= value %>"data-inputs-select-target="input">
32+
<inputtype="hidden"name="<%= name %>"value="<%= value %>"data-inputs-select-target="input"<%- value_target %> data-action="<%- action %>"/>
3333
</div>

‎pgml-dashboard/src/lib.rs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ use sailfish::TemplateOnce;
1313
use sqlx::PgPool;
1414
use std::collections::HashMap;
1515

16+
pubmod types;
1617
pubmod api;
1718
pubmod components;
1819
pubmod fairings;

‎pgml-dashboard/src/types.rs

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
use sailfish::runtime::{Buffer,Render};
2+
use std::ops::{Deref,DerefMut};
3+
4+
// This is a custom wrapper around Option so we can implement render for it
5+
pubstructCustomOption<T>(Option<T>);
6+
7+
impl<T>DefaultforCustomOption<T>{
8+
fndefault() ->Self{
9+
Self(None)
10+
}
11+
}
12+
13+
impl<T>CustomOption<T>{
14+
pubfnnew(value:T) ->Self{
15+
Self(Some(value))
16+
}
17+
}
18+
19+
impl<T>From<T>forCustomOption<T>{
20+
fnfrom(value:T) ->Self{
21+
Self(Some(value))
22+
}
23+
}
24+
25+
impl<T>DerefforCustomOption<T>{
26+
typeTarget =Option<T>;
27+
28+
fnderef(&self) ->&Self::Target{
29+
&self.0
30+
}
31+
}
32+
33+
impl<T>DerefMutforCustomOption<T>{
34+
fnderef_mut(&mutself) ->&mutSelf::Target{
35+
&mutself.0
36+
}
37+
}
38+
39+
impl<T:Render>RenderforCustomOption<T>{
40+
fnrender(&self,b:&mutBuffer) ->Result<(), sailfish::RenderError>{
41+
match&self.0{
42+
Some(value) => value.render(b),
43+
None =>Ok(()),
44+
}
45+
}
46+
}
Lines changed: 49 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
2-
31
// all other displays are default bootstrap styling
4-
.display-2 {font-weight:700;font-size:4rem;line-height:80px;}
2+
.display-2 {
3+
font-weight:700;
4+
font-size:4rem;
5+
line-height:80px;
6+
}
57

68
// TODO: Go through html and ensure headers use appropriate header class, header and class do not need to match.
79
// .h1 {font-weight: 700; font-size: 64px; line-height: 72px;}
@@ -11,10 +13,48 @@
1113
// .h5 {font-weight: 700; font-size: 28px; line-height: 34px;}
1214
// .h6 {font-weight: 700; font-size: 24px; line-height: 30px;}
1315

14-
.subcopy-text {font-size:18px;line-height:22px}
15-
.body-text {font-size:16px;line-height:20px}
16-
.legal-text {font-size:12px;line-height:16px;}
16+
.subcopy-text {
17+
font-size:18px;
18+
line-height:22px;
19+
}
20+
.body-text {
21+
font-size:16px;
22+
line-height:20px;
23+
}
24+
.legal-text {
25+
font-size:12px;
26+
line-height:16px;
27+
}
28+
29+
.text-black {
30+
color:#{$gray-900}!important;
31+
}
32+
.text-white {
33+
color:#{$gray-100}!important;
34+
}
35+
.text-soft-white {
36+
color:#{$gray-200}!important;
37+
}
1738

18-
.text-black {color:#{$gray-900}!important;}
19-
.text-white {color:#{$gray-100}!important;}
20-
.text-soft-white {color:#{$gray-200}!important; }
39+
@mixintext-gradient($gradient) {
40+
background:#{$gradient};
41+
-webkit-background-clip:text;
42+
-webkit-text-fill-color:transparent;
43+
background-clip:text;
44+
text-fill-color:transparent;
45+
}
46+
.text-gradient-blue {
47+
@includetext-gradient($gradient-blue);
48+
}
49+
.text-gradient-green {
50+
@includetext-gradient($gradient-green);
51+
}
52+
.text-gradient-orange {
53+
@includetext-gradient($gradient-orange);
54+
}
55+
.text-gradient-pink {
56+
@includetext-gradient($gradient-pink);
57+
}
58+
.text-gradient-purple {
59+
@includetext-gradient($gradient-purple);
60+
}

‎pgml-dashboard/static/css/scss/components/_buttons.scss

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
text-align:center;
88
gap:8px;
99

10-
&[disabled],&:disabled {
10+
&[disabled],
11+
&:disabled {
1112
cursor:not-allowed;
1213
}
1314
}
@@ -52,20 +53,20 @@
5253
--bs-btn-font-size:18px;
5354

5455
// the attached canvas for border in secondary-btn.js
55-
&>.secondary-btn-canvas {
56+
&>.secondary-btn-canvas {
5657
position:absolute;
5758
border:None;
5859
display:None;
5960
}
60-
61+
6162
&:hover {
62-
&>.secondary-btn-canvas {
63+
&>.secondary-btn-canvas {
6364
display:block;
6465
}
6566
}
6667

6768
&:active {
68-
&>.secondary-btn-canvas {
69+
&>.secondary-btn-canvas {
6970
filter:brightness(65%);
7071
display:block;
7172
}
@@ -80,7 +81,7 @@
8081
--bs-btn-hover-bg:transparent;
8182
--bs-btn-hover-color:#{$gray-100};
8283
--bs-btn-hover-border-color:transparent;
83-
84+
8485
--bs-btn-active-bg:transparent;
8586
--bs-btn-active-color:#{$gray-100};
8687
--bs-btn-active-border-color:transparent;
@@ -115,18 +116,22 @@
115116

116117
border:0px;
117118

118-
&:disabled,&.disabled {
119+
&:disabled,
120+
&.disabled {
119121
color:#{$neon-shade-400};
120122
background-color:#{$neon-shade-700};
121123
}
122124

123-
&:hover,&:active {
125+
&:hover,
126+
&:active {
124127
@includebold_by_shadow(var(--bs-btn-hover-color));
125128
}
126129
&:active {
127130
@includebold_by_shadow(var(--bs-btn-active-color));
128131
}
129-
&:focus,&:focus-visible,&:focus-within {
132+
&:focus,
133+
&:focus-visible,
134+
&:focus-within {
130135
@includebold_by_shadow(var(--bs-btn-focus-color));
131136
}
132137
}
@@ -153,7 +158,9 @@
153158
&:active {
154159
@includebold_by_shadow(var(--bs-btn-active-color));
155160
}
156-
&:focus,&:focus-visible,&:focus-within {
161+
&:focus,
162+
&:focus-visible,
163+
&:focus-within {
157164
@includebold_by_shadow(var(--bs-btn-focus-color));
158165
}
159166
}
@@ -182,14 +189,14 @@
182189

183190
&.with-icon {
184191
&::after {
185-
content:">"
192+
content:">";
186193
}
187194
}
188195
}
189196

190197
.btn-code-toolbar {
191-
@extend.btn;
192-
@extend.btn-tertiary;
198+
@extend.btn;
199+
@extend.btn-tertiary;
193200
@extend.noselect;
194201

195202
@extend.z-1;
@@ -202,14 +209,15 @@
202209
text-shadow:none;
203210
}
204211

205-
&:disabled,&[disabled] {
212+
&:disabled,
213+
&[disabled] {
206214
color:#{$slate-shade-700}!important;
207215
}
208216
}
209217

210218
.btn-copy {
211219
@extend.btn-code-toolbar;
212-
position:absolute;
220+
position:absolute;
213221
top:4px;
214222
right:4px;
215223
}
@@ -221,7 +229,7 @@
221229
border-bottom:2pxsolid#{$gray-300};
222230
color:#{$gray-100};
223231
padding:00calc($spacer/2)0;
224-
232+
225233
&:hover {
226234
border-bottom-color:#{$neon-shade-100};
227235
}
@@ -231,7 +239,7 @@
231239
border-bottom:#{$gray-500};
232240
}
233241

234-
&>span {
242+
&>span {
235243
color:#{$neon-shade-100};
236244
}
237245
}
@@ -258,15 +266,15 @@
258266
border-left:0px;
259267
border-right:0px;
260268
border-bottom:1pxsolid#{$gray-100}!important;
261-
269+
262270
--bs-btn-active-color:#{$gray-100};
263271
--bs-btn-hover-color:#{$gray-100};
264272
}
265273

266274
.left-nav-toggle-icon {
267275
margin-left:calc($left-nav-w-9rem);
268276
margin-right:0px;
269-
277+
270278
&.expanding {
271279
animation-name: expand-margin;
272280
animation-duration:$animation-timer;
@@ -279,7 +287,7 @@
279287
}
280288

281289
&.expanded {
282-
margin-left:calc($left-nav-w-9rem);
290+
margin-left:calc($left-nav-w-9rem);
283291
margin-right:0px;
284292
}
285293

@@ -296,21 +304,21 @@
296304

297305
@keyframescollapse-margin {
298306
from {
299-
margin-left:calc($left-nav-w-9rem);
307+
margin-left:calc($left-nav-w-9rem);
300308
margin-right:0px;
301309
}
302310
to {
303-
margin-left:calc($left-nav-w-collapsed/2-32px);
304-
margin-right:calc($left-nav-w-collapsed/2-32px);
311+
margin-left:calc($left-nav-w-collapsed/2-32px);
312+
margin-right:calc($left-nav-w-collapsed/2-32px);
305313
}
306314
}
307315
@keyframesexpand-margin {
308316
from {
309-
margin-left:calc($left-nav-w-collapsed/2-32px);
317+
margin-left:calc($left-nav-w-collapsed/2-32px);
310318
margin-right:calc($left-nav-w-collapsed/2-32px);
311319
}
312320
to {
313-
margin-left:calc($left-nav-w-9rem);
321+
margin-left:calc($left-nav-w-9rem);
314322
margin-right:0px;
315323
}
316324
}

0 commit comments

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