Content-Length: 9851 | pFad | http://github.com/postgresml/postgresml/pull/1024.diff

thub.com diff --git a/pgml-dashboard/src/components/inputs/mod.rs b/pgml-dashboard/src/components/inputs/mod.rs index 51c02dbec..4036ea229 100644 --- a/pgml-dashboard/src/components/inputs/mod.rs +++ b/pgml-dashboard/src/components/inputs/mod.rs @@ -4,3 +4,6 @@ // src/components/inputs/range_group pub mod range_group; pub use range_group::RangeGroup; + +// src/components/inputs/text +pub mod text; diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/editable_header.scss b/pgml-dashboard/src/components/inputs/text/editable_header/editable_header.scss new file mode 100644 index 000000000..49b36cad9 --- /dev/null +++ b/pgml-dashboard/src/components/inputs/text/editable_header/editable_header.scss @@ -0,0 +1,36 @@ +div[data-controller="inputs-text-editable-header"] { + .editable-header-container { + span.material-symbols-outlined { + color: #{$slate-shade-500}; + font-size: inherit; + text-overflow: ellipsis; + &.active { + color: #{$slate-tint-500}; + } + } + + &:hover { + span.material-symbols-outlined { + color: #{$slate-shade-300} + } + } + + &:focus, &:focus-within { + span.material-symbols-outlined { + color: #{$slate-tint-500}; + } + } + + } + + input, input:focus { + border: none; + border-radius: 0; + border-bottom: 2px solid #{$slate-tint-500}; + background: transparent; + font-size: inherit; + line-height: inherit; + padding: 0px; + margin-bottom: -2px; // compensate for border space + } +} diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/editable_header_controller.js b/pgml-dashboard/src/components/inputs/text/editable_header/editable_header_controller.js new file mode 100644 index 000000000..9a72b59a5 --- /dev/null +++ b/pgml-dashboard/src/components/inputs/text/editable_header/editable_header_controller.js @@ -0,0 +1,35 @@ +import { Controller } from '@hotwired/stimulus' + +export default class extends Controller { + static targets = ["input", "header"] + + initialize() { + this.inputTarget.addEventListener("focusout", (e) => { + this.headerTarget.innerHTML = e.target.value + this.toggleEditor() + }) + + // blur input on enter + this.inputTarget.addEventListener("keydown", (e) => { + if(e.key == "Enter") { + this.inputTarget.blur() + } + }) + } + + toggleEditor(e) { + // dont toggle if click inside input + if( e && this.inputTarget.contains(e.target)) { + return + } + + if(this.inputTarget.style.display == "none") { + this.inputTarget.style.display = "block" + this.headerTarget.style.display = "none" + this.inputTarget.focus() + } else { + this.inputTarget.style.display = "none" + this.headerTarget.style.display = "flex" + } + } +} diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/mod.rs b/pgml-dashboard/src/components/inputs/text/editable_header/mod.rs new file mode 100644 index 000000000..36e0626d7 --- /dev/null +++ b/pgml-dashboard/src/components/inputs/text/editable_header/mod.rs @@ -0,0 +1,106 @@ +use pgml_components::component; +use sailfish::runtime::{Buffer, Render}; +use sailfish::TemplateOnce; +use std::fmt; + +pub enum Headers { + H1, + H2, + H3, + H4, + H5, + H6, +} + +impl fmt::Display for Headers { + fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { + match self { + Headers::H1 => write!(f, "h1"), + Headers::H2 => write!(f, "h2"), + Headers::H3 => write!(f, "h3"), + Headers::H4 => write!(f, "h4"), + Headers::H5 => write!(f, "h5"), + Headers::H6 => write!(f, "h6"), + } + } +} + +pub struct StimulusTarget { + controller: Option, + target_name: Option, +} + +impl StimulusTarget { + pub fn new() -> StimulusTarget { + StimulusTarget { + controller: None, + target_name: None, + } + } + + pub fn controller(mut self, controller: &str) -> Self { + self.controller = Some(controller.to_string()); + self + } + + pub fn target_name(mut self, target_name: &str) -> Self { + self.target_name = Some(target_name.to_string()); + self + } +} + +impl Render for StimulusTarget { + fn render(&self, b: &mut Buffer) -> Result<(), sailfish::RenderError> { + if self.controller.is_none() || self.target_name.is_none() { + return format!("").render(b); + } + format!( + "data-{}-target=\"{}\"", + self.controller.to_owned().unwrap(), + self.target_name.to_owned().unwrap() + ) + .render(b) + } +} + +#[derive(TemplateOnce)] +#[template(path = "inputs/text/editable_header/template.html")] +pub struct EditableHeader { + value: String, + header_type: Headers, + input_target: StimulusTarget, + input_name: Option, +} + +impl EditableHeader { + pub fn new() -> EditableHeader { + EditableHeader { + value: String::from("Title Goes Here"), + header_type: Headers::H3, + input_target: StimulusTarget::new(), + input_name: None, + } + } + + pub fn header_type(mut self, header_type: Headers) -> Self { + self.header_type = header_type; + self + } + + pub fn value(mut self, value: &str) -> Self { + self.value = value.to_string(); + self + } + + pub fn input_target(mut self, input_target: StimulusTarget) -> Self { + self.input_target = input_target; + self + } + + pub fn input_name(mut self, input_name: &str) -> Self { + self.input_name = Some(input_name.to_string()); + self + } +} + +component!(EditableHeader); diff --git a/pgml-dashboard/src/components/inputs/text/editable_header/template.html b/pgml-dashboard/src/components/inputs/text/editable_header/template.html new file mode 100644 index 000000000..c9586eda7 --- /dev/null +++ b/pgml-dashboard/src/components/inputs/text/editable_header/template.html @@ -0,0 +1,23 @@ +

+ + + +

diff --git a/pgml-dashboard/src/components/inputs/text/mod.rs b/pgml-dashboard/src/components/inputs/text/mod.rs new file mode 100644 index 000000000..beb4d1235 --- /dev/null +++ b/pgml-dashboard/src/components/inputs/text/mod.rs @@ -0,0 +1,6 @@ +// This file is automatically generated. +// You shouldn't modify it manually. + +// src/components/inputs/text/editable_header +pub mod editable_header; +pub use editable_header::EditableHeader; diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss index 9196a2486..a33a6fafe 100644 --- a/pgml-dashboard/static/css/modules.scss +++ b/pgml-dashboard/static/css/modules.scss @@ -3,6 +3,7 @@ @import "../../src/components/dropdown/dropdown.scss"; @import "../../src/components/inputs/range_group/range_group.scss"; +@import "../../src/components/inputs/text/editable_header/editable_header.scss"; @import "../../src/components/left_nav_menu/left_nav_menu.scss"; @import "../../src/components/left_nav_web_app/left_nav_web_app.scss"; @import "../../src/components/modal/modal.scss"; diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html index 760583639..ad77c829d 100644 --- a/pgml-dashboard/templates/content/playground.html +++ b/pgml-dashboard/templates/content/playground.html @@ -2,6 +2,7 @@ use crate::components::tables::large::*; use crate::components::navigation::tabs::*; use crate::components::inputs::range_group::RangeGroup; +use crate::components::inputs::text::editable_header::{EditableHeader, Headers, StimulusTarget}; %>

@@ -115,5 +116,37 @@

Inputs

.cost_rate(0.144) %>

+ +

+ <%+ EditableHeader::new() + .value("Size H1") + .header_type(Headers::H1) %> +

+ this is a thing that takes up space +

+ <%+ EditableHeader::new() + .value("Size H2") + .header_type(Headers::H2) %> +

+ this is a thing that takes up space +

+ <%+ EditableHeader::new() + .value("Size H3") + .header_type(Headers::H3) + .input_name("title") + .input_target( + StimulusTarget::new() + .controller("some-existing-controller") + .target_name("desired-target-name") + ) %> +

+ this is a thing that takes up space +

Inputs

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!