Content-Length: 9562 | pFad | http://github.com/postgresml/postgresml/pull/1429.diff

thub.com diff --git a/pgml-dashboard/src/components/chatbot/chatbot_controller.js b/pgml-dashboard/src/components/chatbot/chatbot_controller.js index ea81b8492..c75bf9449 100644 --- a/pgml-dashboard/src/components/chatbot/chatbot_controller.js +++ b/pgml-dashboard/src/components/chatbot/chatbot_controller.js @@ -400,10 +400,13 @@ export default class extends Controller { showChatbotAlert(level, message) { const toastElement = createToast(message, level); - showToast(toastElement, { - autohide: true, - delay: 7000, - }); + + if (toastElement) { + showToast(toastElement, { + autohide: true, + delay: 7000, + }); + } } hideExampleQuestions() { diff --git a/pgml-dashboard/src/components/inputs/labels/mod.rs b/pgml-dashboard/src/components/inputs/labels/mod.rs new file mode 100644 index 000000000..8b199229f --- /dev/null +++ b/pgml-dashboard/src/components/inputs/labels/mod.rs @@ -0,0 +1,6 @@ +// This file is automatically generated. +// You shouldn't modify it manually. + +// src/components/inputs/labels/with_tooltip +pub mod with_tooltip; +pub use with_tooltip::WithTooltip; diff --git a/pgml-dashboard/src/components/inputs/labels/with_tooltip/mod.rs b/pgml-dashboard/src/components/inputs/labels/with_tooltip/mod.rs new file mode 100644 index 000000000..37d1f1c25 --- /dev/null +++ b/pgml-dashboard/src/components/inputs/labels/with_tooltip/mod.rs @@ -0,0 +1,44 @@ +use pgml_components::{component, Component}; +use sailfish::TemplateOnce; + +#[derive(TemplateOnce, Default)] +#[template(path = "inputs/labels/with_tooltip/template.html")] +pub struct WithTooltip { + component: Component, + tooltip: String, + icon: String, + html: bool, +} + +impl WithTooltip { + pub fn new(component: Component) -> WithTooltip { + WithTooltip { + component, + tooltip: String::new(), + icon: "info".to_string(), + html: false, + } + } + + pub fn tooltip(mut self, tooltip: impl ToString) -> Self { + self.tooltip = tooltip.to_string(); + self + } + + pub fn tooltip_text(self, tooltip: impl ToString) -> Self { + self.tooltip(tooltip) + } + + pub fn tooltip_html(mut self, tooltip: impl ToString) -> Self { + self.tooltip = tooltip.to_string(); + self.html = true; + self + } + + pub fn icon(mut self, icon: impl ToString) -> Self { + self.icon = icon.to_string(); + self + } +} + +component!(WithTooltip); diff --git a/pgml-dashboard/src/components/inputs/labels/with_tooltip/template.html b/pgml-dashboard/src/components/inputs/labels/with_tooltip/template.html new file mode 100644 index 000000000..9adcaacdb --- /dev/null +++ b/pgml-dashboard/src/components/inputs/labels/with_tooltip/template.html @@ -0,0 +1,15 @@ + + <%+ component %> + + <%= icon %> + + diff --git a/pgml-dashboard/src/components/inputs/labels/with_tooltip/with_tooltip.scss b/pgml-dashboard/src/components/inputs/labels/with_tooltip/with_tooltip.scss new file mode 100644 index 000000000..497309108 --- /dev/null +++ b/pgml-dashboard/src/components/inputs/labels/with_tooltip/with_tooltip.scss @@ -0,0 +1,6 @@ +span[data-controller="inputs-labels-with-tooltip enable-tooltip"] { + span[data-bs-toggle="tooltip"] { + color: #{$slate-tint-100}; + font-size: 1.2rem; + } +} diff --git a/pgml-dashboard/src/components/inputs/mod.rs b/pgml-dashboard/src/components/inputs/mod.rs index cd9cbffac..047cff00b 100644 --- a/pgml-dashboard/src/components/inputs/mod.rs +++ b/pgml-dashboard/src/components/inputs/mod.rs @@ -5,6 +5,9 @@ pub mod checkbox; pub use checkbox::Checkbox; +// src/components/inputs/labels +pub mod labels; + // src/components/inputs/radio pub mod radio; pub use radio::Radio; diff --git a/pgml-dashboard/src/components/inputs/text/input/input.scss b/pgml-dashboard/src/components/inputs/text/input/input.scss index 4eb19e14d..ace734703 100644 --- a/pgml-dashboard/src/components/inputs/text/input/input.scss +++ b/pgml-dashboard/src/components/inputs/text/input/input.scss @@ -1,7 +1,7 @@ div[data-controller="inputs-text-input"] { --bs-danger: #{$peach-shade-100}; - span.material-symbols-outlined { + span.inputs-text-input-icon{ margin-left: -40px; color: #{$slate-shade-100}; diff --git a/pgml-dashboard/src/components/inputs/text/input/template.html b/pgml-dashboard/src/components/inputs/text/input/template.html index 48576bcc4..6579ba210 100644 --- a/pgml-dashboard/src/components/inputs/text/input/template.html +++ b/pgml-dashboard/src/components/inputs/text/input/template.html @@ -26,7 +26,7 @@ <% if let Some(icon) = icon { %> <%= icon %> diff --git a/pgml-dashboard/src/components/pages/demo/template.html b/pgml-dashboard/src/components/pages/demo/template.html index e64f90b78..3929c2f05 100644 --- a/pgml-dashboard/src/components/pages/demo/template.html +++ b/pgml-dashboard/src/components/pages/demo/template.html @@ -8,6 +8,7 @@ <% use crate::components::inputs::select::{Select, Option}; %> <% use crate::components::inputs::{SwitchV2, Radio, Checkbox}; %> <% use crate::components::cards::{Rgb, Secondary, Primary}; %> +<% use crate::components::inputs::labels::WithTooltip; %>

@@ -59,8 +60,14 @@

+ <% + let label = WithTooltip::new("Name".into()) + .tooltip("Your full name.") + .icon("info"); + %> + <%+ Input::new() - .label("What is your name?".into()) + .label(label.into()) .icon("person") .placeholder("Enter your name") .name("name") @@ -201,4 +208,16 @@

+ +

+ <%+ WithTooltip::new("Model".into()) + .tooltip("A model is great, but two is better.") + .icon("help_outline") %> +

+ +

+ <%+ WithTooltip::new("Model".into()) + .tooltip_html("A model is great
, but
two
is better.") + .icon("help_outline") %> +

diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss index 7ad4b51fc..0ac9e1dab 100644 --- a/pgml-dashboard/static/css/modules.scss +++ b/pgml-dashboard/static/css/modules.scss @@ -21,6 +21,7 @@ @import "../../src/components/icons/checkmark/checkmark.scss"; @import "../../src/components/icons/twitter/twitter.scss"; @import "../../src/components/inputs/checkbox/checkbox.scss"; +@import "../../src/components/inputs/labels/with_tooltip/with_tooltip.scss"; @import "../../src/components/inputs/radio/radio.scss"; @import "../../src/components/inputs/range_group/range_group.scss"; @import "../../src/components/inputs/range_group_v_2/range_group_v_2.scss"; diff --git a/pgml-dashboard/static/css/scss/components/_tooltips.scss b/pgml-dashboard/static/css/scss/components/_tooltips.scss index d9318afcf..d391c0652 100644 --- a/pgml-dashboard/static/css/scss/components/_tooltips.scss +++ b/pgml-dashboard/static/css/scss/components/_tooltips.scss @@ -1,9 +1,10 @@ .tooltip { - --bs-tooltip-bg: #{$primary}; - --bs-tooltip-color: #fff; - --bs-tooltip-arrow-width: 0; - --bs-tooltip-arrow-height: 0; + --bs-tooltip-bg: #{$gray-800}; + --bs-tooltip-color:#{$white}; + --bs-tooltip-arrow-width: 29px; + --bs-tooltip-arrow-height: 14px; --bs-tooltip-margin: 0 0 1rem 0; - --bs-tooltip-padding-y: 16px; - --bs-tooltip-padding-x: 16px; + --bs-tooltip-padding-y: 10px; + --bs-tooltip-padding-x: 10px; + --bs-tooltip-opacity: 1.0; } diff --git a/pgml-dashboard/static/js/copy.js b/pgml-dashboard/static/js/copy.js index a5c9ba343..b51f3f552 100644 --- a/pgml-dashboard/static/js/copy.js +++ b/pgml-dashboard/static/js/copy.js @@ -31,7 +31,10 @@ export default class extends Controller { navigator.clipboard.writeText(text) const toastElement = createToast('Copied to clipboard'); - showToast(toastElement); + + if (toastElement) { + showToast(toastElement); + } } } diff --git a/pgml-dashboard/static/js/utilities/toast.js b/pgml-dashboard/static/js/utilities/toast.js index f2c0fb10f..31bc178f4 100644 --- a/pgml-dashboard/static/js/utilities/toast.js +++ b/pgml-dashboard/static/js/utilities/toast.js @@ -12,12 +12,17 @@ function createToast(message) { toastElement.appendChild(toastBodyElement); const container = document.getElementById("toast-container"); - container.appendChild(toastElement); - // remove from DOM when no longer needed - toastElement.addEventListener("hidden.bs.toast", (e) => e.target.remove()); + if (container) { + container.appendChild(toastElement); - return toastElement; + // remove from DOM when no longer needed + toastElement.addEventListener("hidden.bs.toast", (e) => e.target.remove()); + + return toastElement; + } else { + return null; + } } function showToast(toastElement, config) {

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