Apr 8, 2024 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024
diff --git a/pgml-dashboard/Cargo.lock b/pgml-dashboard/Cargo.lock
diff --git a/pgml-dashboard/src/components/cards/mod.rs b/pgml-dashboard/src/components/cards/mod.rs
 pubmod newsletter_subscribe;
 pubuse newsletter_subscribe::NewsletterSubscribe;

 // src/components/cards/primary
 pubmod primary;
 pubuse primary::Primary;

 // src/components/cards/rgb
 pubmod rgb;
 pubuse rgb::Rgb;

 // src/components/cards/secondary
 pubmod secondary;
 pubuse secondary::Secondary;
diff --git a/pgml-dashboard/src/components/cards/primary/mod.rs b/pgml-dashboard/src/components/cards/primary/mod.rs
 use pgml_components::{component,Component};
 use sailfish::TemplateOnce;

 #[derive(TemplateOnce,Default)]
 #[template(path ="cards/primary/template.html")]
 pubstructPrimary{
 component:Component,
 style:String,
 }

 implPrimary{
 pubfnnew(component:Component) ->Primary{
 Primary{
            component,
 style:"".into(),
 }
 }

 pubfnz_index(mutself,index:i64) ->Self{
 self.style =format!("position: relative; z-index: {};", index);
 self
 }
 }

 component!(Primary);
diff --git a/pgml-dashboard/src/components/cards/primary/primary.scss b/pgml-dashboard/src/components/cards/primary/primary.scss
 div[data-controller="cards-primary"] {
 border-radius:#{$card-border-radius};
 padding:#{$card-spacer-y}#{$card-spacer-x};
 box-shadow:#{$card-box-shadow};
 background-color:#{$gray-800};
 }
diff --git a/pgml-dashboard/src/components/cards/primary/template.html b/pgml-dashboard/src/components/cards/primary/template.html
 <div data-controller="cards-primary" style="<%- style %>">
  <%+ component %>
 </div>
diff --git a/pgml-dashboard/src/components/cards/rgb/mod.rs b/pgml-dashboard/src/components/cards/rgb/mod.rs
 use pgml_components::{component, Component};
 use sailfish::TemplateOnce;

 use crate::components::stimulus::StimulusAction;
 use crate::types::CustomOption;

 #[derive(TemplateOnce)]
 #[template(path = "cards/rgb/template.html")]
 pub struct Rgb {
    value: Component,
    active: bool,
    link: Option<String>,
    link_action: CustomOption<StimulusAction>,
    controller_classes: Vec<String>,
    card_classes: Vec<String>,
    body_classes: Vec<String>,
 }

 impl Default for Rgb {
    pub fn new(value: Component) -> Rgb {
        Rgb {
            value,
            active: false,
            link: None,
            link_action: CustomOption::default(),
            controller_classes: vec![],
            card_classes: vec![],
            body_classes: vec![],
        }
    }

    pub fn active(mut self) -> Self {
        self.active = true;
        self.card_classes.push("active".into());
        self.card_classes.push("main-gradient-border-card-1".into());
        self
    }

    pub fn is_active(mut self, active: bool) -> Self {
        if active {
            self.card_classes.push("active".into());
            self.card_classes.push("main-gradient-border-card-1".into());
        }

        self
    }

    pub fn link(mut self, link: &str) -> Self {
        self.link = Some(link.to_string());
        self
    }

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

    pub fn h_100(mut self) -> Self {
        self.controller_classes.push("h-100".into());
        self.card_classes.push("h-100".into());
        self
    }
 }

 component!(Rgb);
diff --git a/pgml-dashboard/src/components/cards/rgb/template.html b/pgml-dashboard/src/components/cards/rgb/template.html
 <% let active = if active { "main-gradient-border-card-1 active" } else { "" }; %>
 <div data-controller="cards-rgb">
  <div class="card <%= active %>">
    <div class="card-body">
 <%
  let controller_classes = controller_classes.join(" ");
  let card_classes = card_classes.join(" ");
  let body_classes = body_classes.join(" ");
 %>
 <div data-controller="cards-rgb" class="<%= controller_classes %>">
  <div class="card <%= card_classes %>">
    <div class="card-body <%= body_classes %>">
      <%+ value %>
      <% if let Some(link) = link { %>
        <a href="<%= link %>" class="stretched-link"></a>
        <a href="<%= link %>" class="stretched-link" data-action="<%= link_action %>"></a>
      <% } %>
    </div>
  </div>
diff --git a/pgml-dashboard/src/components/cards/secondary/mod.rs b/pgml-dashboard/src/components/cards/secondary/mod.rs
 use pgml_components::{component, Component};
 use sailfish::TemplateOnce;

 #[derive(TemplateOnce, Default)]
 #[template(path = "cards/secondary/template.html")]
 pub struct Secondary {
    value: Component,
 }

 impl Secondary {
    pub fn new(value: Component) -> Secondary {
        Secondary { value }
    }
 }

 component!(Secondary);
diff --git a/pgml-dashboard/src/components/cards/secondary/secondary.scss b/pgml-dashboard/src/components/cards/secondary/secondary.scss
 div[data-controller="cards-secondary"] {
 .card {
 --bs-card-bg:transparent;
 --bs-card-border-color:#{$neon-tint-100};
    }
 }
diff --git a/pgml-dashboard/src/components/cards/secondary/template.html b/pgml-dashboard/src/components/cards/secondary/template.html
 <divdata-controller="cards-secondary">
 <divclass="card">
 <divclass="card-body">
 <%+ value %>
 </div>
 </div>
 </div>
diff --git a/pgml-dashboard/src/components/headings/gray/gray.scss b/pgml-dashboard/src/components/headings/gray/gray.scss
 span[data-controller="headings-gray"] {
 color:#{$gray-400};
 }
diff --git a/pgml-dashboard/src/components/headings/gray/mod.rs b/pgml-dashboard/src/components/headings/gray/mod.rs
 use pgml_components::component;
 use sailfish::TemplateOnce;

 #[derive(TemplateOnce,Default)]
 #[template(path ="headings/gray/template.html")]
 pubstructGray{
 value:String,
 }

 implGray{
 pubfnnew(value:implToString) ->Gray{
 Gray{
 value: value.to_string(),
 }
 }
 }

 component!(Gray);
diff --git a/pgml-dashboard/src/components/headings/gray/template.html b/pgml-dashboard/src/components/headings/gray/template.html
 <span
 data-controller="headings-gray">
 <%= value %>
 </span>
diff --git a/pgml-dashboard/src/components/headings/mod.rs b/pgml-dashboard/src/components/headings/mod.rs
 pub mod blue;
 pub use blue::Blue;

 // src/components/headings/gray
 pub mod gray;
 pub use gray::Gray;

 // src/components/headings/green
 pub mod green;
 pub use green::Green;
diff --git a/pgml-dashboard/src/components/inputs/radio/radio_controller.js b/pgml-dashboard/src/components/inputs/radio/radio_controller.js

 e.currentTarget.classList.add("active");
 e.currentTarget.ariaPressed=true;
 e.currentTarget.querySelector("input").checked=true;

 constinput=e.currentTarget.querySelector("input");

 input.checked=true;
 input.dispatchEvent(newEvent("change"));
 }
 }
diff --git a/pgml-dashboard/src/components/inputs/range_group_v_2/mod.rs b/pgml-dashboard/src/components/inputs/range_group_v_2/mod.rs
 use sailfish::TemplateOnce;

 usecrate::components::stimulus::{stimulus_action::StimulusActions,StimulusAction};
 use std::collections::BTreeSet;

 #[derive(TemplateOnce,Default)]
 #[template(path ="inputs/range_group_v_2/template.html")]
 step:String,
 value:String,
 unit:String,
 input_unit:String,
 input_classes:BTreeSet<String>,
 cost_per_unit:String,
 cost_frequency:String,

 actions:StimulusActions,
 }

 implRangeGroupV2{
 pubfnnew() ->RangeGroupV2{
 Self::default()
 Self{
 input_classes:BTreeSet::from_iter(vec!["form-control".to_string()].into_iter()),
            ..Default::default()
 }
 .min("40")
 .max("16000")
 .unit("GB")
 .cost_per_unit("0.20")
 .value("40")
 .cost_frequency("h")
 }

 pubfnname(mutself,name:implToString) ->Self{

 pubfnunit(mutself,unit:implToString) ->Self{
 self.unit = unit.to_string();
 self
 self.input_unit = unit.to_string();

 self.with_input_classes()
 }

 pubfninput_unit(mutself,input_unit:implToString) ->Self{
 self.input_unit = input_unit.to_string();
 self.with_input_classes()
 }

 pubfncost_per_unit(mutself,cost_per_unit:implToString) ->Self{
 self.cost_per_unit = cost_per_unit.to_string();
 self
 }

 pubfncost_frequency(mutself,cost_frequency:implToString) ->Self{
 self.cost_frequency = cost_frequency.to_string();
 self
 }

 pubfnaction(mutself,action:StimulusAction) ->Self{
 self.actions.push(action);
 self
 }

 fnwith_input_classes(mutself) ->Self{
 if !self.input_unit.is_empty(){
 self.input_classes
 .insert("inputs-range-group-v-2-with-unit".to_string());
 }else{
 self.input_classes.remove("inputs-range-group-v-2-with-unit");
 }

 self
 }
 }

 component!(RangeGroupV2);
diff --git a/pgml-dashboard/src/components/inputs/range_group_v_2/range_group_v_2.scss b/pgml-dashboard/src/components/inputs/range_group_v_2/range_group_v_2.scss
  }

  input[type="text"] {
    padding-right: 30px;
    &.inputs-range-group-v-2-with-unit {
        padding-right: 0;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
  }

  .inputs-range-group-v-2-unit {
    margin-left: -33px;
  span.inputs-range-group-v-2-unit {
    color: #{$gray-400};
    background: #{$input-bg};
    height: 100%;
    padding: #{$input-padding-y} #{$input-padding-x};
    border: #{$input-border-width} solid #{$input-border-color};

    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
    transition: #{$input-transition};

    &.focused {
        background: #{$input-focus-bg};
        box-shadow: #{$input-focus-box-shadow};
        border-color: #{$input-focus-border-color};
        border-width: #{$input-border-width};
    }
  }
 }
diff --git a/pgml-dashboard/src/components/inputs/range_group_v_2/range_group_v_2_controller.js b/pgml-dashboard/src/components/inputs/range_group_v_2/range_group_v_2_controller.js
 import { Controller } from "@hotwired/stimulus";

 export default class extends Controller {
  static targets = ["input", "range"];
  static targets = ["input", "range", "unit"];

  onInputInput(e) {
    const value = parseInt(e.currentTarget.value);
    }
  }

  onInputFocusIn(e) {
    if (this.hasUnitTarget) {
      this.unitTarget.classList.add("focused");
    }
  }

  onInputBlur(e) {
    if (this.hasUnitTarget) {
      this.unitTarget.classList.remove("focused");
    }
  }

  onUnitClick(e) {
    this.inputTarget.focus();
  }

  onRangeInput(e) {
    this.inputTarget.value = e.currentTarget.value;
  }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,6 +11,14 @@ pub mod marketing;
		pubmod newsletter_subscribe;
		pubuse newsletter_subscribe::NewsletterSubscribe;

		// src/components/cards/primary
		pubmod primary;
		pubuse primary::Primary;

		// src/components/cards/rgb
		pubmod rgb;
		pubuse rgb::Rgb;

		// src/components/cards/secondary
		pubmod secondary;
		pubuse secondary::Secondary;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,25 @@
		use pgml_components::{component,Component};
		use sailfish::TemplateOnce;

		#[derive(TemplateOnce,Default)]
		#[template(path ="cards/primary/template.html")]
		pubstructPrimary{
		component:Component,
		style:String,
		}

		implPrimary{
		pubfnnew(component:Component) ->Primary{
		Primary{
		component,
		style:"".into(),
		}
		}

		pubfnz_index(mutself,index:i64) ->Self{
		self.style =format!("position: relative; z-index: {};", index);
		self
		}
Comment on lines +19 to +22 Copy link Contributor chillenbergerApr 4, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Same thing as the next comment, is it possible to solve this with a wrapper? Copy link ContributorAuthor levkkApr 5, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Same issue as above. The wrapper would have to modify the style of its child.
		}

		component!(Primary);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,6 @@
		div[data-controller="cards-primary"] {
		border-radius:#{$card-border-radius};
		padding:#{$card-spacer-y}#{$card-spacer-x};
		box-shadow:#{$card-box-shadow};
		background-color:#{$gray-800};
		}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<div data-controller="cards-primary" style="<%- style %>">
		<%+ component %>
		</div>
Original file line number	Diff line number	Diff line change
		@@ -1,12 +1,18 @@
		use pgml_components::{component, Component};
		use sailfish::TemplateOnce;

		use crate::components::stimulus::StimulusAction;
		use crate::types::CustomOption;

		#[derive(TemplateOnce)]
		#[template(path = "cards/rgb/template.html")]
		pub struct Rgb {
		value: Component,
		active: bool,
		link: Option<String>,
		link_action: CustomOption<StimulusAction>,
		controller_classes: Vec<String>,
		card_classes: Vec<String>,
		body_classes: Vec<String>,
		}

		impl Default for Rgb {
Expand All		@@ -19,20 +25,44 @@ impl Rgb {
		pub fn new(value: Component) -> Rgb {
		Rgb {
		value,
		active: false,
		link: None,
		link_action: CustomOption::default(),
		controller_classes: vec![],
		card_classes: vec![],
		body_classes: vec![],
		}
		}

		pub fn active(mut self) -> Self {
		self.active = true;
		self.card_classes.push("active".into());
		self.card_classes.push("main-gradient-border-card-1".into());
		self
		}

		pub fn is_active(mut self, active: bool) -> Self {
		if active {
		self.card_classes.push("active".into());
		self.card_classes.push("main-gradient-border-card-1".into());
		}

		self
		}

		pub fn link(mut self, link: &str) -> Self {
		self.link = Some(link.to_string());
		self
		}

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

		pub fn h_100(mut self) -> Self {
		self.controller_classes.push("h-100".into());
		self.card_classes.push("h-100".into());
		self
Comment on lines +61 to +64 Copy link Contributor chillenbergerApr 4, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. for something like this is it possible to just always have the h-100 on and for instances where you need to limit the height, place it in a wrapper that does not have h-100? Just brainstorming, this could turn into a slippery slope of having a function for every specific situation. I think if it is possible to solve problems like this with wrappers, we should. levkk reacted with thumbs up emoji Copy link ContributorAuthor levkkApr 5, 2024• edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. By default, the card occupies as much space as it needs to render its contents. The`.h-100` here helps cards look uniform when placed inside a grid. Our cards don't have the same contents, so their heights will vary when placed inside a grid like`.row` or`.d-flex`. If we have`.h-100` by default, the card will always occupy the full height of its container which is not desired when the card is used by itself inside something like a`<div>`. So`.h-100` is a special case that we just happen to use quite often, but not always. A wrapper can't make its child occupy 100% of its space unless we add additional CSS to the wrapper knowing that the child needs to do this. For example, here we could do something like: .card-wrapper-h-100 { @extend.h-100.card { @extend.h-100.card-body { @extend.h-100 } }} which now that I'm writing this isn't too bad. One issue with this is more of a theoretical technicality, where a component "reaches inside" another component and modifies its state which could cause weird bugs later on. It's typically best to have the component use public methods to modify its state in a predicable way. Maybe if we name this slightly differently, it could be better? I'm not leaning strongly one way or the other.
		}
		}

		component!(Rgb);
Original file line number	Diff line number	Diff line change
		@@ -1,10 +1,14 @@
		<% let active = if active { "main-gradient-border-card-1 active" } else { "" }; %>
		<div data-controller="cards-rgb">
		<div class="card <%= active %>">
		<div class="card-body">
		<%
		let controller_classes = controller_classes.join(" ");
		let card_classes = card_classes.join(" ");
		let body_classes = body_classes.join(" ");
		%>
		<div data-controller="cards-rgb" class="<%= controller_classes %>">
		<div class="card <%= card_classes %>">
		<div class="card-body <%= body_classes %>">
		<%+ value %>
		<% if let Some(link) = link { %>
		<a href="<%= link %>" class="stretched-link"></a>
		<a href="<%= link %>" class="stretched-link" data-action="<%= link_action %>"></a>
		<% } %>
		</div>
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,16 @@
		use pgml_components::{component, Component};
		use sailfish::TemplateOnce;

		#[derive(TemplateOnce, Default)]
		#[template(path = "cards/secondary/template.html")]
		pub struct Secondary {
		value: Component,
		}

		impl Secondary {
		pub fn new(value: Component) -> Secondary {
		Secondary { value }
		}
		}

		component!(Secondary);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,6 @@
		div[data-controller="cards-secondary"] {
		.card {
		--bs-card-bg:transparent;
		--bs-card-border-color:#{$neon-tint-100};
		}
		}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,7 @@
		<divdata-controller="cards-secondary">
		<divclass="card">
		<divclass="card-body">
		<%+ value %>
		</div>
		</div>
		</div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		span[data-controller="headings-gray"] {
		color:#{$gray-400};
		}
Comment on lines +1 to +3 Copy link Contributor chillenbergerApr 4, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. You could add color = gray-400 to the typography.scss file and just use the class here. Utility classes for the gray scale is always nice. levkk reacted with thumbs up emoji