From a189517ba2b73019335820177d00c645919aea9e Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 08:51:08 -0700 Subject: [PATCH 01/18] Dropdown + ellipsis fix --- .../src/components/dropdown/dropdown.scss | 80 +++++++++++++++++++ pgml-dashboard/src/components/dropdown/mod.rs | 33 ++++++++ .../src/components/dropdown/template.html | 22 +++++ .../left_nav_web_app/left_nav_web_app.scss | 12 +++ .../components/left_nav_web_app/template.html | 27 +------ pgml-dashboard/src/components/mod.rs | 4 + pgml-dashboard/static/css/modules.scss | 1 + .../static/css/scss/components/_buttons.scss | 51 ------------ .../static/css/scss/components/_dropdown.scss | 1 + .../static/css/scss/components/_navs.scss | 17 +--- 10 files changed, 161 insertions(+), 87 deletions(-) create mode 100644 pgml-dashboard/src/components/dropdown/dropdown.scss create mode 100644 pgml-dashboard/src/components/dropdown/mod.rs create mode 100644 pgml-dashboard/src/components/dropdown/template.html diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss new file mode 100644 index 000000000..72a1081df --- /dev/null +++ b/pgml-dashboard/src/components/dropdown/dropdown.scss @@ -0,0 +1,80 @@ +.dropdown { + @extend .d-flex; + width: 100%; + + .dropdown-toggle { + a { + padding: 8px 12px; + } + + &:hover { + cursor: pointer; + } + + &:after { + content: none; + } + } + + .dropdown-menu { + width: 100%; + } +} + +.btn-dropdown { + border-radius: $border-radius; + background: #{$gray-700}; + color: #{$gray-100}; + display: flex; + justify-content: space-between; + font-weight: $font-weight-normal; + + --bs-btn-border-color: transparent; + --bs-btn-border-width: 1px; + --bs-btn-hover-border-color: #{$neon-shade-100}; + --bs-btn-active-border-color: #{$neon-shade-100}; + --bs-btn-active-bg: #{$gray-700}; + --bs-btn-active-color: #{$gray-100}; + --bs-btn-hover-color: #{$gray-100}; + + .material-symbols-outlined { + color: #{$neon-shade-100}; + } + + &:after { + content: None; + } + + &.show { + .material-symbols-outlined { + transform: rotate(-180deg); + } + } + + .collapase { + width: 100%; + } + + .btn-dropdown-text { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; + } + + .menu-item { + a { + padding: 8px 12px; + } + + &:hover { + cursor: pointer; + } + + &:after { + content: None; + } + } +} + + diff --git a/pgml-dashboard/src/components/dropdown/mod.rs b/pgml-dashboard/src/components/dropdown/mod.rs new file mode 100644 index 000000000..bdc17eae4 --- /dev/null +++ b/pgml-dashboard/src/components/dropdown/mod.rs @@ -0,0 +1,33 @@ +use crate::components::component; +use sailfish::TemplateOnce; + +use crate::components::StaticNavLink; + +#[derive(TemplateOnce, Default)] +#[template(path = "dropdown/template.html")] +pub struct Dropdown { + value: String, + links: Vec, +} + +impl Dropdown { + pub fn new(links: Vec) -> Dropdown { + let binding = links + .iter() + .filter(|link| link.active) + .collect::>(); + let active = binding.first(); + let value = if let Some(active) = active { + active.name.to_owned() + } else { + "Menu".to_owned() + }; + Dropdown { + links, + value, + ..Default::default() + } + } +} + +component!(Dropdown); diff --git a/pgml-dashboard/src/components/dropdown/template.html b/pgml-dashboard/src/components/dropdown/template.html new file mode 100644 index 000000000..f6b02e3c1 --- /dev/null +++ b/pgml-dashboard/src/components/dropdown/template.html @@ -0,0 +1,22 @@ +
+ + + + + +
diff --git a/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss b/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss index e69de29bb..beb4aac9e 100644 --- a/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss +++ b/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss @@ -0,0 +1,12 @@ +.leftnav { + @extend .navbar; + max-width: 260px; + + border: none; + align-items: start; + background-color: inherit; + + @include media-breakpoint-down(lg) { + background-color: #{$gray-900} + } +} diff --git a/pgml-dashboard/src/components/left_nav_web_app/template.html b/pgml-dashboard/src/components/left_nav_web_app/template.html index c2713ba37..4360e5f4b 100644 --- a/pgml-dashboard/src/components/left_nav_web_app/template.html +++ b/pgml-dashboard/src/components/left_nav_web_app/template.html @@ -1,4 +1,4 @@ -<% use crate::components::LeftNavMenu; %> +<% use crate::components::{LeftNavMenu, Dropdown}; %>