Skip to content

Commit ff02581

Browse files
SilasMarvinSilasMarvin
authored
Added a custom Option type and extended the select and added a few new classes for typography (#1060)
1 parent 3d9800c commit ff02581

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
use crate::components::stimulus::stimulus_action::{StimulusAction, StimulusEvents};
2+
use crate::components::stimulus::stimulus_target::StimulusTarget;
23
use pgml_components::component;
34
use pgml_components::Component;
45
use sailfish::TemplateOnce;
6+
use crate::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
impl Select {
@@ -34,13 +38,13 @@ impl Select {
3438
])
3539
}
3640

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

4145
for value in 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+
pub fn value_target(mut self, value_target: StimulusTarget) -> Self {
101+
self.value_target = value_target;
102+
self
103+
}
104+
105+
pub fn action(mut self, 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(new Event('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-
<input type="hidden" name="<%= name %>" value="<%= value %>" data-inputs-select-target="input">
32+
<input type="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+
pub mod types;
1617
pub mod api;
1718
pub mod components;
1819
pub mod 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+
pub struct CustomOption<T>(Option<T>);
6+
7+
impl<T> Default for CustomOption<T> {
8+
fn default() -> Self {
9+
Self(None)
10+
}
11+
}
12+
13+
impl<T> CustomOption<T> {
14+
pub fn new(value: T) -> Self {
15+
Self(Some(value))
16+
}
17+
}
18+
19+
impl<T> From<T> for CustomOption<T> {
20+
fn from(value: T) -> Self {
21+
Self(Some(value))
22+
}
23+
}
24+
25+
impl<T> Deref for CustomOption<T> {
26+
type Target = Option<T>;
27+
28+
fn deref(&self) -> &Self::Target {
29+
&self.0
30+
}
31+
}
32+
33+
impl<T> DerefMut for CustomOption<T> {
34+
fn deref_mut(&mut self) -> &mut Self::Target {
35+
&mut self.0
36+
}
37+
}
38+
39+
impl<T: Render> Render for CustomOption<T> {
40+
fn render(&self, b: &mut Buffer) -> Result<(), sailfish::RenderError> {
41+
match &self.0 {
42+
Some(value) => value.render(b),
43+
None => Ok(()),
44+
}
45+
}
46+
}

‎pgml-dashboard/static/css/scss/base/_typography.scss

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+
@mixin text-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+
@include text-gradient($gradient-blue);
48+
}
49+
.text-gradient-green {
50+
@include text-gradient($gradient-green);
51+
}
52+
.text-gradient-orange {
53+
@include text-gradient($gradient-orange);
54+
}
55+
.text-gradient-pink {
56+
@include text-gradient($gradient-pink);
57+
}
58+
.text-gradient-purple {
59+
@include text-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
@include bold_by_shadow(var(--bs-btn-hover-color));
125128
}
126129
&:active {
127130
@include bold_by_shadow(var(--bs-btn-active-color));
128131
}
129-
&:focus, &:focus-visible, &:focus-within {
132+
&:focus,
133+
&:focus-visible,
134+
&:focus-within {
130135
@include bold_by_shadow(var(--bs-btn-focus-color));
131136
}
132137
}
@@ -153,7 +158,9 @@
153158
&:active {
154159
@include bold_by_shadow(var(--bs-btn-active-color));
155160
}
156-
&:focus, &:focus-visible, &:focus-within {
161+
&:focus,
162+
&:focus-visible,
163+
&:focus-within {
157164
@include bold_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: 2px solid #{$gray-300};
222230
color: #{$gray-100};
223231
padding: 0 0 calc($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: 1px solid #{$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
@keyframes collapse-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
@keyframes expand-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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy