[RFC yew-comp/yew-widget-toolkit/yew-widget-toolkit-assets 0/3] minor ui/ux tweaks for pwt and yew-comp

[RFC yew-comp/yew-widget-toolkit/yew-widget-toolkit-assets 0/3] minor ui/ux tweaks for pwt and yew-comp

[Shannon Sterz]

this series includes two minor tweaks that should improve the usability and
user experience of some yew components.

dropdowns should now render their pickers below or above the component
depending on the size of the picker and available screen space. a dropup mode
improves usability for filter fields when the picker is rendered above the
dropdown.

the log view in the syslog and task log components was slightly tweaked to avoid
interference between scrollbars and drag handles.

mainly sending this as rfc for now to get feedback on how the dropdown/dropup
is handled here.


pwt-assets:

Shannon Sterz (1):
  dropdown: add class for dropup mode

 scss/_dropdown.scss | 4 ++++
 1 file changed, 4 insertions(+)


pwt:

Shannon Sterz (1):
  dropdown/align: make the picker render above or below a dropdown

 src/dom/align.rs       |  6 +++-
 src/widget/dropdown.rs | 62 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 57 insertions(+), 11 deletions(-)


yew-comp:

Shannon Sterz (1):
  task_viewer/syslog: make padding margin to improve ux

 src/syslog.rs      | 2 +-
 src/task_viewer.rs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)


Summary over all repositories:
  5 files changed, 63 insertions(+), 13 deletions(-)

-- 
Generated by murpp 0.10.0

[PATCH yew-widget-toolkit-assets 1/3] dropdown: add class for dropup mode

[Shannon Sterz]

a dropup is a dropdown that is rendered above the corresponding input
element. in such scenarios reversing the column flex direction is
desirable for better ux. for example, if a `Combobox` specifies a
filter, this would now render the filter box closer to the dropdown's
input element instead of on top of the dropdown list.

this is part of the fix outlined in [1] and makes dropdowns more
adaptive respective to how they can be rendered. the `!important` is
needed to override `.pwt-flex-direction-column` as it also uses
`!important` already.

[1]:
https://git.proxmox.com/?p=proxmox-datacenter-manager.git;a=commit;f=ui/css/desktop-yew-style.scss;h=dafa21a3

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---

Notes:
    this came up in peat which now also has a couple of really long
    comboboxes. affecting ux detrimentally. so move the stop-gap here to
    at least have a consistent experience.

 scss/_dropdown.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 671b872..ca113e2 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -15,3 +15,7 @@
 .pwt-dropdown[data-show] {
     display: flex;
 }
+
+.pwt-dropup > .pwt-flex-direction-column {
+  flex-direction: column-reverse !important;
+}
-- 
2.47.3

[PATCH yew-widget-toolkit 2/3] dropdown/align: make the picker render above or below a dropdown

[Shannon Sterz]

and detect dropup mode. this allows better ux restricting the height
of the picker to the maximum of the space below or above a `Dropdown`.
by setting the `pwt-dropup` class the picker can also set the proper
flex direction for its content. for example, rendering filter input
fields closer to the `Dropdown` itself, further improving usability.

this implements the fix outlined in [1].

[1]:
https://git.proxmox.com/?p=proxmox-datacenter-manager.git;a=commit;f=ui/css/desktop-yew-style.scss;h=dafa21a3

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 src/dom/align.rs       |  6 +++-
 src/widget/dropdown.rs | 62 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/src/dom/align.rs b/src/dom/align.rs
index 603a5b8d..a20cc6ed 100644
--- a/src/dom/align.rs
+++ b/src/dom/align.rs
@@ -456,7 +456,11 @@ where
         style.remove_property("overflow")?;
     }
     let padding = 2.0 * options.viewport_padding;
-    style.set_property("max-height", &format!("calc(100dvh - {padding}px)"))?;
+
+    if style.get_property_value("max-height")? == "" {
+        style.set_property("max-height", &format!("calc(100dvh - {padding}px)"))?;
+    }
+
     style.set_property("max-width", &format!("calc(100dvw - {padding}px)"))?;
 
     if options.align_width {
diff --git a/src/widget/dropdown.rs b/src/widget/dropdown.rs
index 1af09633..64db380a 100644
--- a/src/widget/dropdown.rs
+++ b/src/widget/dropdown.rs
@@ -1,7 +1,11 @@
+use std::cmp;
+
 use html::Scope;
 use wasm_bindgen::JsCast;
 use web_sys::HtmlInputElement;
 
+use crate::dom::IntoHtmlElement;
+
 use yew::html::{IntoEventCallback, IntoPropValue};
 use yew::prelude::*;
 
@@ -155,15 +159,18 @@ impl PwtDropdown {
     }
 
     fn update_picker_placer(&mut self, _props: &Dropdown) {
-        let align_options = _props.align_options.clone().unwrap_or(
-            AlignOptions::new(
-                Point::BottomStart,
-                Point::TopStart,
-                GrowDirection::TopBottom,
-            )
-            .viewport_padding(5.0)
-            .align_width(true),
-        );
+        let align_options =
+            AlignOptions::new(Point::BottomStart, Point::TopStart, GrowDirection::None)
+                .viewport_padding(5.0)
+                .align_width(true)
+                .with_fallback_placement(Point::TopStart, Point::BottomStart, GrowDirection::None)
+                .with_fallback_placement(
+                    Point::BottomStart,
+                    Point::TopStart,
+                    GrowDirection::TopBottom,
+                );
+
+        let align_options = _props.align_options.clone().unwrap_or(align_options);
         self.picker_placer = match AutoFloatingPlacement::new(
             self.dropdown_ref.clone(),
             self.picker_ref.clone(),
@@ -497,7 +504,6 @@ impl Component for PwtDropdown {
     fn rendered(&mut self, ctx: &Context<Self>, first_render: bool) {
         if first_render {
             let props = ctx.props();
-
             self.update_picker_placer(props);
 
             if props.input_props.autofocus {
@@ -525,6 +531,42 @@ impl Component for PwtDropdown {
             }
         }
 
+        // intentionally fail silently here; if any of these values aren't available here, falling
+        // back to the default logic is fine, this should just provide improved ui/ux.
+        let dropdown_rect = self
+            .dropdown_ref
+            .clone()
+            .into_html_element()
+            .map(|e| e.get_bounding_client_rect());
+
+        let window_height = web_sys::window()
+            .and_then(|w| w.inner_height().ok())
+            .and_then(|h| h.as_f64().map(|h| h as i64));
+
+        if let Some(dropdown_rect) = dropdown_rect
+            && let Some(window_height) = window_height
+        {
+            let top = dropdown_rect.y() as i64;
+            let bottom = window_height - (top + (dropdown_rect.height() as i64));
+            let height = cmp::max(top, bottom) - 5;
+
+            if let Some(picker) = self.picker_ref.clone().into_html_element() {
+                let _ = picker
+                    .style()
+                    .set_property("max-height", &format!("{height}px"))
+                    .ok();
+
+                let height = picker.get_bounding_client_rect().height() as i64;
+                let class_list = picker.class_list();
+
+                if height > bottom && height <= top {
+                    let _ = class_list.add_1("pwt-dropup");
+                } else {
+                    let _ = class_list.remove_1("pwt-dropup");
+                }
+            }
+        }
+
         // update picker placement after we opened/closed to cope with a bug that only seems to
         // affect webkit based browsers like Safari
         if let Some(placer) = &self.picker_placer {
-- 
2.47.3

[PATCH yew-comp 3/3] task_viewer/syslog: make padding margin to improve ux

[Shannon Sterz]

previously, using padding here meant that potential scrolbars would
overlap with the resize handles. by switching to margin the scrolbars
overlap the content of the `LogView` instead. improving usability by
no longer having interference between the scrollbars and the drag
handles.

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 src/syslog.rs      | 2 +-
 src/task_viewer.rs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/syslog.rs b/src/syslog.rs
index 03926d1..d034f80 100644
--- a/src/syslog.rs
+++ b/src/syslog.rs
@@ -173,7 +173,7 @@ impl ProxmoxSyslog {
                 .into()
         } else {
             LogView::new(props.base_url.clone())
-                .padding(2)
+                .margin(2)
                 .class("pwt-flex-fill")
                 .service(props.service.clone())
                 .since(date_time_to_epoch(&self.since, &self.since_time))
diff --git a/src/task_viewer.rs b/src/task_viewer.rs
index e78454e..648d20b 100644
--- a/src/task_viewer.rs
+++ b/src/task_viewer.rs
@@ -290,7 +290,7 @@ impl PwtTaskViewer {
             .with_child(toolbar)
             .with_child(
                 LogView::new(url)
-                    .padding(2)
+                    .margin(2)
                     .class("pwt-flex-fill")
                     .active(active),
             )
-- 
2.47.3