🌐 AI搜索 & 代理 主页
Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions pgml-dashboard/src/components/inputs/select/mod.rs
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
use crate::components::stimulus::stimulus_action::{StimulusAction, StimulusEvents};
use crate::components::stimulus::stimulus_target::StimulusTarget;
use pgml_components::component;
use pgml_components::Component;
use sailfish::TemplateOnce;
use crate::types::CustomOption;

#[derive(TemplateOnce, Default)]
#[template(path = "inputs/select/template.html")]
Expand All @@ -14,6 +16,8 @@ pub struct Select {
menu_position: String,
expandable: bool,
name: String,
value_target: StimulusTarget,
action: CustomOption<StimulusAction>,
}

impl Select {
Expand All @@ -34,13 +38,13 @@ impl Select {
])
}

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

for value in values {
let item = Option::new(
value,
value.to_string(),
StimulusAction::new()
.controller("inputs-select")
.method("choose")
Expand Down Expand Up @@ -92,6 +96,16 @@ impl Select {
self.expandable = true;
self
}

pub fn value_target(mut self, value_target: StimulusTarget) -> Self {
self.value_target = value_target;
self
}

pub fn action(mut self, action: StimulusAction) -> Self {
self.action = action.into();
self
}
}

#[derive(TemplateOnce)]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ export default class extends Controller {
choose(e) {
this.inputTarget.value = e.target.innerHTML
this.valueTarget.innerHTML = e.target.innerHTML
this.inputTarget.dispatchEvent(new Event('change'))
}

}
2 changes: 1 addition & 1 deletion pgml-dashboard/src/components/inputs/select/template.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,5 @@

<%+ dropdown %>

<input type="hidden" name="<%= name %>" value="<%= value %>" data-inputs-select-target="input">
<input type="hidden" name="<%= name %>" value="<%= value %>" data-inputs-select-target="input" <%- value_target %> data-action="<%- action %>" />
</div>
1 change: 1 addition & 0 deletions pgml-dashboard/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ use sailfish::TemplateOnce;
use sqlx::PgPool;
use std::collections::HashMap;

pub mod types;
pub mod api;
pub mod components;
pub mod fairings;
Expand Down
46 changes: 46 additions & 0 deletions pgml-dashboard/src/types.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
use sailfish::runtime::{Buffer, Render};
use std::ops::{Deref, DerefMut};

// This is a custom wrapper around Option so we can implement render for it
pub struct CustomOption<T>(Option<T>);

impl<T> Default for CustomOption<T> {
fn default() -> Self {
Self(None)
}
}

impl<T> CustomOption<T> {
pub fn new(value: T) -> Self {
Self(Some(value))
}
}

impl<T> From<T> for CustomOption<T> {
fn from(value: T) -> Self {
Self(Some(value))
}
}

impl<T> Deref for CustomOption<T> {
type Target = Option<T>;

fn deref(&self) -> &Self::Target {
&self.0
}
}

impl<T> DerefMut for CustomOption<T> {
fn deref_mut(&mut self) -> &mut Self::Target {
&mut self.0
}
}

impl<T: Render> Render for CustomOption<T> {
fn render(&self, b: &mut Buffer) -> Result<(), sailfish::RenderError> {
match &self.0 {
Some(value) => value.render(b),
None => Ok(()),
}
}
}
70 changes: 61 additions & 9 deletions pgml-dashboard/static/css/scss/base/_typography.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@


// all other displays are default bootstrap styling
.display-2 {font-weight: 700; font-size: 4rem; line-height: 80px;}
.display-2 {
font-weight: 700;
font-size: 4rem;
line-height: 80px;
}

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

.subcopy-text {font-size: 18px; line-height: 22px}
.body-text {font-size: 16px; line-height: 20px}
.legal-text {font-size: 12px; line-height: 16px;}
.subcopy-text {
font-size: 18px;
line-height: 22px;
}
.body-text {
font-size: 16px;
line-height: 20px;
}
.legal-text {
font-size: 12px;
line-height: 16px;
}

.text-black {color: #{$gray-900} !important;}
.text-white {color: #{$gray-100} !important;}
.text-soft-white { color: #{$gray-200} !important; }
.text-black {
color: #{$gray-900} !important;
}
.text-white {
color: #{$gray-100} !important;
}
.text-gradient-blue {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using a mixin for this would prevent the repetition.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me update this. I haven't used mixins before

Copy link
Contributor

@levkk levkk Oct 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

classes are better than mixins, mixings generate a ton of repetitive css code, while classes inherit and cascade. That's why bootstrap has .btn and .btn-primary classes separately. .btn styles a lot of the button while .btn-primary just changes the color, which is just one or two lines of css.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@extend is also an option that minimizes css code (same as having two classes) and reduces the number of classes an element needs to take. If we do go with two classes here we should have the _typographic class .text-gradient then a utility class for all the gradients so they can be applies as text color, background color, border color ect.

background: #{$gradient-blue};
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.text-gradient-green {
background: #{$gradient-green};
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.text-gradient-orange {
background: #{$gradient-orange};
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.text-gradient-pink {
background: #{$gradient-pink};
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.text-gradient-purple {
background: #{$gradient-purple};
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.text-soft-white {
color: #{$gray-200} !important;
}
58 changes: 33 additions & 25 deletions pgml-dashboard/static/css/scss/components/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
text-align: center;
gap: 8px;

&[disabled], &:disabled {
&[disabled],
&:disabled {
cursor: not-allowed;
}
}
Expand Down Expand Up @@ -52,20 +53,20 @@
--bs-btn-font-size: 18px;

// the attached canvas for border in secondary-btn.js
&> .secondary-btn-canvas {
& > .secondary-btn-canvas {
position: absolute;
border: None;
display: None;
}

&:hover {
&> .secondary-btn-canvas {
& > .secondary-btn-canvas {
display: block;
}
}

&:active {
&> .secondary-btn-canvas {
& > .secondary-btn-canvas {
filter: brightness(65%);
display: block;
}
Expand All @@ -80,7 +81,7 @@
--bs-btn-hover-bg: transparent;
--bs-btn-hover-color: #{$gray-100};
--bs-btn-hover-border-color: transparent;

--bs-btn-active-bg: transparent;
--bs-btn-active-color: #{$gray-100};
--bs-btn-active-border-color: transparent;
Expand Down Expand Up @@ -115,18 +116,22 @@

border: 0px;

&:disabled, &.disabled {
&:disabled,
&.disabled {
color: #{$neon-shade-400};
background-color: #{$neon-shade-700};
}

&:hover, &:active {
&:hover,
&:active {
@include bold_by_shadow(var(--bs-btn-hover-color));
}
&:active {
@include bold_by_shadow(var(--bs-btn-active-color));
}
&:focus, &:focus-visible, &:focus-within {
&:focus,
&:focus-visible,
&:focus-within {
@include bold_by_shadow(var(--bs-btn-focus-color));
}
}
Expand All @@ -153,7 +158,9 @@
&:active {
@include bold_by_shadow(var(--bs-btn-active-color));
}
&:focus, &:focus-visible, &:focus-within {
&:focus,
&:focus-visible,
&:focus-within {
@include bold_by_shadow(var(--bs-btn-focus-color));
}
}
Expand Down Expand Up @@ -182,14 +189,14 @@

&.with-icon {
&::after {
content: ">"
content: ">";
}
}
}

.btn-code-toolbar {
@extend .btn;
@extend .btn-tertiary;
@extend .btn;
@extend .btn-tertiary;
@extend .noselect;

@extend .z-1;
Expand All @@ -202,14 +209,15 @@
text-shadow: none;
}

&:disabled, &[disabled] {
&:disabled,
&[disabled] {
color: #{$slate-shade-700} !important;
}
}

.btn-copy {
@extend .btn-code-toolbar;
position: absolute;
position: absolute;
top: 4px;
right: 4px;
}
Expand All @@ -221,7 +229,7 @@
border-bottom: 2px solid #{$gray-300};
color: #{$gray-100};
padding: 0 0 calc($spacer / 2) 0;

&:hover {
border-bottom-color: #{$neon-shade-100};
}
Expand All @@ -231,7 +239,7 @@
border-bottom: #{$gray-500};
}

&> span {
& > span {
color: #{$neon-shade-100};
}
}
Expand All @@ -258,15 +266,15 @@
border-left: 0px;
border-right: 0px;
border-bottom: 1px solid #{$gray-100} !important;

--bs-btn-active-color: #{$gray-100};
--bs-btn-hover-color: #{$gray-100};
}

.left-nav-toggle-icon {
margin-left: calc($left-nav-w - 9rem);
margin-right: 0px;

&.expanding {
animation-name: expand-margin;
animation-duration: $animation-timer;
Expand All @@ -279,7 +287,7 @@
}

&.expanded {
margin-left: calc($left-nav-w - 9rem);
margin-left: calc($left-nav-w - 9rem);
margin-right: 0px;
}

Expand All @@ -296,21 +304,21 @@

@keyframes collapse-margin {
from {
margin-left: calc($left-nav-w - 9rem);
margin-left: calc($left-nav-w - 9rem);
margin-right: 0px;
}
to {
margin-left: calc($left-nav-w-collapsed/2 - 32px);
margin-right: calc($left-nav-w-collapsed/2 - 32px);
margin-left: calc($left-nav-w-collapsed/2 - 32px);
margin-right: calc($left-nav-w-collapsed/2 - 32px);
}
}
@keyframes expand-margin {
from {
margin-left: calc($left-nav-w-collapsed/2 - 32px);
margin-left: calc($left-nav-w-collapsed/2 - 32px);
margin-right: calc($left-nav-w-collapsed/2 - 32px);
}
to {
margin-left: calc($left-nav-w - 9rem);
margin-left: calc($left-nav-w - 9rem);
margin-right: 0px;
}
}