🌐 AI搜索 & 代理 主页
Skip to content

Commit 4b0888b

Browse files
chillenbergerchillenberger
authored
Dan hp update components (#1394)
1 parent 913106a commit 4b0888b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+832
-103
lines changed

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// This file is automatically generated.
2+
// You shouldn't modify it manually.
3+
4+
// src/components/cards/marketing/slider
5+
pub mod slider;
6+
pub use slider::Slider;
7+
8+
// src/components/cards/marketing/twitter_testimonial
9+
pub mod twitter_testimonial;
10+
pub use twitter_testimonial::TwitterTestimonial;

‎pgml-dashboard/src/components/cards/marketing/slider/mod.rs‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
use pgml_components::component;
2+
use sailfish::TemplateOnce;
3+
4+
#[derive(TemplateOnce, Default, Clone)]
5+
#[template(path = "cards/marketing/slider/template.html")]
6+
pub struct Slider {
7+
title: String,
8+
link: String,
9+
image: String,
10+
bullets: Vec<String>,
11+
state: String,
12+
}
13+
14+
impl Slider {
15+
pub fn new() -> Slider {
16+
Slider {
17+
title: String::new(),
18+
link: String::new(),
19+
image: String::new(),
20+
bullets: Vec::new(),
21+
state: String::new(),
22+
}
23+
}
24+
25+
pub fn title(mut self, title: &str) -> Self {
26+
self.title = title.to_string();
27+
self
28+
}
29+
30+
pub fn link(mut self, link: &str) -> Self {
31+
self.link = link.to_string();
32+
self
33+
}
34+
35+
pub fn image(mut self, image: &str) -> Self {
36+
self.image = image.to_string();
37+
self
38+
}
39+
40+
pub fn bullets(mut self, bullets: Vec<String>) -> Self {
41+
self.bullets = bullets;
42+
self
43+
}
44+
45+
pub fn active(mut self) -> Self {
46+
self.state = String::from("active");
47+
self
48+
}
49+
50+
pub fn disabled(mut self) -> Self {
51+
self.state = String::from("disabled");
52+
self
53+
}
54+
}
55+
56+
component!(Slider);

‎pgml-dashboard/src/components/cards/marketing/slider/slider.scss‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
div[data-controller="cards-marketing-slider"] {
2+
.card {
3+
display: flex;
4+
max-width: 440px;
5+
padding: 38px 24px;
6+
flex-direction: column;
7+
align-items: flex-start;
8+
gap: 24px;
9+
border-radius: 20px;
10+
transition: transform 0.3s;
11+
12+
width: 440px;
13+
height: 100%;
14+
min-height: 550px;
15+
background: #{$gray-700};
16+
17+
&.disabled {
18+
transform: scale(0.9);
19+
background: #{$gray-800} !important;
20+
min-height: 492px;
21+
}
22+
}
23+
@include media-breakpoint-down(sm) {
24+
.card, .card.disabled {
25+
width: 100%;
26+
}
27+
}
28+
29+
.card-body {
30+
gap: 24px;
31+
}
32+
33+
.link {
34+
display: flex;
35+
width: fit-content;
36+
}
37+
}
38+
39+
.disabled {
40+
div[data-controller="cards-marketing-slider"] {
41+
.card {
42+
transform: scale(0.9);
43+
background: #{$gray-800} !important;
44+
min-height: 492px;
45+
46+
.card-body, .title {
47+
color: #{$gray-300};
48+
}
49+
50+
.link {
51+
visibility: hidden;
52+
}
53+
}
54+
}
55+
}
56+
57+

‎pgml-dashboard/src/components/cards/marketing/slider/template.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<%
2+
use crate::components::icons::Checkmark;
3+
%>
4+
<div data-controller="cards-marketing-slider">
5+
<div class="card <%- state %>">
6+
<div class="card-body d-flex flex-column p-0 w-100">
7+
<img class="img-fluid" src="<%- image %>" alt="feature image">
8+
<div class="d-flex gap-3 flex-column h-100">
9+
<h5 class="title"><%- title %></h5>
10+
<ul class="list-group gap-3">
11+
<% for bullet in bullets {%>
12+
<div class="d-flex flex-row align-items-center gap-2">
13+
<%+ Checkmark::new().active() %><div class="d-flex align-items-center gap-2"><%- bullet %></div>
14+
</div>
15+
<% } %>
16+
</ul>
17+
<% if link.len() > 0 {%>
18+
<a class="link mt-auto btn btn-tertiary goto-arrow-hover-trigger p-0" href="<%- link %>">Learn More <span class="material-symbols-outlined goto-arrow-shift-animation">arrow_forward</span></a>
19+
<% } %>
20+
</div>
21+
</div>
22+
</div>
23+
</div>

‎pgml-dashboard/src/components/cards/marketing/twitter_testimonial/mod.rs‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
use pgml_components::component;
2+
use sailfish::TemplateOnce;
3+
4+
#[derive(TemplateOnce, Default, Clone)]
5+
#[template(path = "cards/marketing/twitter_testimonial/template.html")]
6+
pub struct TwitterTestimonial {
7+
statement: String,
8+
image: String,
9+
name: String,
10+
handle: String,
11+
verified: bool,
12+
}
13+
14+
impl TwitterTestimonial {
15+
pub fn new() -> TwitterTestimonial {
16+
TwitterTestimonial {
17+
statement: String::from("src/components/cards/marketing/twitter_testimonial"),
18+
image: String::new(),
19+
name: String::new(),
20+
handle: String::new(),
21+
verified: false,
22+
}
23+
}
24+
25+
pub fn statement(mut self, statement: &str) -> Self {
26+
self.statement = statement.to_owned();
27+
self
28+
}
29+
30+
pub fn image(mut self, image: &str) -> Self {
31+
self.image = image.to_owned();
32+
self
33+
}
34+
35+
pub fn name(mut self, name: &str) -> Self {
36+
self.name = name.to_owned();
37+
self
38+
}
39+
40+
pub fn handle(mut self, handle: &str) -> Self {
41+
self.handle = handle.to_owned();
42+
self
43+
}
44+
45+
pub fn verified(mut self) -> Self {
46+
self.verified = true;
47+
self
48+
}
49+
}
50+
51+
component!(TwitterTestimonial);

‎pgml-dashboard/src/components/cards/marketing/twitter_testimonial/template.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<%
2+
use crate::components::icons::Twitter as twitter_icon;
3+
use crate::components::icons::Checkmark;
4+
%>
5+
6+
<div data-controller="cards-marketing-twitter-testimonial">
7+
<div class="card card-dark gap-2 rounded-4">
8+
<p class="text-soft-white"><%- statement %></p>
9+
<div class="d-flex flex-row justify-content-between align-items-center">
10+
<div class="d-flex flex-row gap-2">
11+
<img src="<%= image %>" alt="<%= name %>" class="rounded-circle" style="width: 42px; height: 42px;">
12+
<div class="d-flex flex-column text-white-300">
13+
<div class="d-flex flex-row gap-1"><p class="m-0"><%- name %></p><% if verified {%><%+ Checkmark::new().twitter() %><% } %></div>
14+
<p class="m-0">@<%- handle %></p>
15+
</div>
16+
</div>
17+
<%+ twitter_icon::new() %>
18+
</div>
19+
</div>
20+
</div>

‎pgml-dashboard/src/components/cards/marketing/twitter_testimonial/twitter_testimonial.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
div[data-controller="cards-marketing-twitter-testimonial"] {
2+
.card {
3+
padding: 32px 24px;
4+
min-width: 288px;
5+
}
6+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
// src/components/cards/blog
55
pub mod blog;
66

7+
// src/components/cards/marketing
8+
pub mod marketing;
9+
710
// src/components/cards/newsletter_subscribe
811
pub mod newsletter_subscribe;
912
pub use newsletter_subscribe::NewsletterSubscribe;

‎pgml-dashboard/src/components/carousel/carousel.scss‎

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,4 @@ div[data-controller="carousel"] {
44
transition-property: margin-left;
55
transition-duration: 700ms;
66
}
7-
8-
.carousel-indicator {
9-
display: flex;
10-
gap: 11px;
11-
justify-content: center;
12-
align-items: center;
13-
}
14-
15-
.timer-container {
16-
width: 1rem;
17-
height: 1rem;
18-
background-color: #{$gray-700};
19-
border-radius: 1rem;
20-
transition: width 0.25s;
21-
}
22-
23-
.timer-active {
24-
.timer {
25-
background-color: #00E0FF;
26-
animation: TimerGrow 5000ms;
27-
}
28-
}
29-
30-
.timer {
31-
width: 1rem;
32-
height: 1rem;
33-
border-radius: 1rem;
34-
background-color: #{$gray-700};
35-
animation-fill-mode: forwards;
36-
}
37-
38-
@keyframes TimerGrow {
39-
from {width: 1rem;}
40-
to {width: 4rem;}
41-
}
42-
43-
.timer-pause {
44-
.timer {
45-
animation-play-state: paused !important;
46-
}
47-
}
487
}

‎pgml-dashboard/src/components/carousel/carousel_controller.js‎

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { Controller } from "@hotwired/stimulus";
33
export default class extends Controller {
44
static targets = ["carousel", "carouselTimer", "template"];
55

6+
static values = {
7+
identifier: Number,
8+
};
9+
610
initialize() {
711
this.paused = false;
812
this.runtime = 0;
@@ -30,50 +34,32 @@ export default class extends Controller {
3034
}
3135
}
3236

33-
changeIndicator(current, next) {
34-
let timers = this.carouselTimerTargets;
35-
let currentTimer = timers[current];
36-
let nextTimer = timers[next];
37-
38-
if (currentTimer) {
39-
currentTimer.classList.remove("timer-active");
40-
currentTimer.style.width = "1rem";
41-
}
42-
if (nextTimer) {
43-
nextTimer.style.width = "4rem";
44-
nextTimer.classList.add("timer-active");
45-
}
46-
}
47-
4837
Pause() {
4938
this.paused = true;
39+
let pause = new CustomEvent("paginatePause", {
40+
detail: { identifier: this.identifierValue },
41+
});
42+
window.dispatchEvent(pause);
5043
}
5144

5245
Resume() {
5346
this.paused = false;
47+
let resume = new CustomEvent("paginateResume", {
48+
detail: { identifier: this.identifierValue },
49+
});
50+
window.dispatchEvent(resume);
5451
}
5552

5653
cycle() {
5754
this.interval = setInterval(() => {
5855
// maintain paused state through entire loop
5956
let paused = this.paused;
6057

61-
let activeTimer = document.getElementsByClassName("timer-active")[0];
62-
if (paused) {
63-
if (activeTimer) {
64-
activeTimer.classList.add("timer-pause");
65-
}
66-
} else {
67-
if (activeTimer && activeTimer.classList.contains("timer-pause")) {
68-
activeTimer.classList.remove("timer-pause");
69-
}
70-
}
71-
7258
if (!paused && this.runtime % 5 == 0) {
7359
let currentIndex = this.times % this.templateTargets.length;
7460
let nextIndex = (this.times + 1) % this.templateTargets.length;
7561

76-
this.changeIndicator(currentIndex, nextIndex);
62+
this.changePagination(currentIndex, nextIndex);
7763
this.changeFeatured(this.templateTargets[nextIndex]);
7864
this.times++;
7965
}
@@ -84,6 +70,17 @@ export default class extends Controller {
8470
}, 1000);
8571
}
8672

73+
changePagination(current, next) {
74+
let event = new CustomEvent("paginateNext", {
75+
detail: {
76+
current: current,
77+
next: next,
78+
identifier: this.identifierValue,
79+
},
80+
});
81+
window.dispatchEvent(event);
82+
}
83+
8784
disconnect() {
8885
clearInterval(this.interval);
8986
}

0 commit comments

Comments
 (0)