Skip to content

Commit 31c40f8

Browse files
levkklevkk
authored
Dropdown + ellipsis fix (#974)
1 parent 3dd619c commit 31c40f8

File tree

17 files changed

+395
-130
lines changed

17 files changed

+395
-130
lines changed

‎pgml-dashboard/.editorconfig

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
[*.scss]
3+
indent_style = space
4+
indent_size = 4
5+
6+
[*.js]
7+
indent_style = space
8+
indent_size = 2
9+
10+
[*.rs]
11+
indent_style = space
12+
indent_size = 4
13+
14+
[*.html]
15+
ident_style = space
16+
indent_size = 4

‎pgml-dashboard/src/components/dropdown/dropdown.scss

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
.dropdown {
2+
@extend .d-flex;
3+
min-width: 100%;
4+
5+
.dropdown-toggle {
6+
a {
7+
padding: 8px 12px;
8+
}
9+
10+
&:hover {
11+
cursor: pointer;
12+
}
13+
14+
&:after {
15+
content: none;
16+
}
17+
}
18+
19+
.dropdown-menu {
20+
width: 100%;
21+
}
22+
23+
&.expandable {
24+
.dropdown-menu {
25+
width: auto;
26+
min-width: 100%;
27+
}
28+
}
29+
30+
.dropdown-item {
31+
overflow: hidden;
32+
text-overflow: ellipsis;
33+
}
34+
}
35+
36+
.btn-dropdown {
37+
border-radius: $border-radius;
38+
background: #{$gray-700};
39+
color: #{$gray-100};
40+
display: flex;
41+
justify-content: space-between;
42+
font-weight: $font-weight-normal;
43+
44+
--bs-btn-border-color: transparent;
45+
--bs-btn-border-width: 1px;
46+
--bs-btn-hover-border-color: #{$neon-shade-100};
47+
--bs-btn-active-border-color: #{$neon-shade-100};
48+
--bs-btn-active-bg: #{$gray-700};
49+
--bs-btn-active-color: #{$gray-100};
50+
--bs-btn-hover-color: #{$gray-100};
51+
52+
.material-symbols-outlined {
53+
color: #{$neon-shade-100};
54+
}
55+
56+
&:after {
57+
content: None;
58+
}
59+
60+
&.show {
61+
.material-symbols-outlined {
62+
transform: rotate(-180deg);
63+
}
64+
}
65+
66+
.collapase {
67+
width: 100%;
68+
}
69+
70+
.btn-dropdown-text {
71+
overflow: hidden;
72+
text-overflow: ellipsis;
73+
text-align: left;
74+
}
75+
76+
.menu-item {
77+
a {
78+
padding: 8px 12px;
79+
overflow: hidden;
80+
text-overflow: ellipsis;
81+
}
82+
83+
&:hover {
84+
cursor: pointer;
85+
}
86+
87+
&:after {
88+
content: None;
89+
}
90+
}
91+
}
92+
93+
@mixin dropdown-menu($primary-color: null) {
94+
padding: 20px 0px 40px 0px;
95+
overflow-y: auto;
96+
97+
@if ($primary-color) {
98+
background-color: #{$primary-color};
99+
}
100+
}
101+
102+
.dropdown-menu {
103+
@include dropdown-menu($gray-600);
104+
max-height: $dropdown-menu-height;
105+
overflow: hidden;
106+
}
107+
108+
.sub-menu-dropdown {
109+
@include dropdown-menu();
110+
border-radius: 0px;
111+
box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.30);
112+
}

‎pgml-dashboard/src/components/dropdown/mod.rs

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
use crate::components::component;
2+
use crate::components::component::Component;
3+
use sailfish::TemplateOnce;
4+
5+
use crate::components::StaticNavLink;
6+
7+
pub enum DropdownValue {
8+
Icon(Component),
9+
Text(Component),
10+
}
11+
12+
impl Default for DropdownValue {
13+
fn default() -> Self {
14+
DropdownValue::Text("Menu".into())
15+
}
16+
}
17+
18+
#[derive(TemplateOnce, Default)]
19+
#[template(path = "dropdown/template.html")]
20+
pub struct Dropdown {
21+
/// The currently selected value.
22+
value: DropdownValue,
23+
24+
/// The list of dropdown links to render.
25+
links: Vec<StaticNavLink>,
26+
27+
/// Position of the dropdown menu.
28+
offset: String,
29+
30+
/// Whether or not the dropdown is collapsble.
31+
collapsable: bool,
32+
offset_collapsed: String,
33+
34+
/// Where the dropdown menu should appear
35+
menu_position: String,
36+
expandable: bool,
37+
}
38+
39+
impl Dropdown {
40+
pub fn new(links: Vec<StaticNavLink>) -> Self {
41+
let binding = links
42+
.iter()
43+
.filter(|link| link.active)
44+
.collect::<Vec<&StaticNavLink>>();
45+
let active = binding.first();
46+
let value = if let Some(active) = active {
47+
active.name.to_owned()
48+
} else {
49+
"Menu".to_owned()
50+
};
51+
Dropdown {
52+
links,
53+
value: DropdownValue::Text(value.into()),
54+
offset: "0, 10".to_owned(),
55+
offset_collapsed: "68, -44".to_owned(),
56+
menu_position: "".to_owned(),
57+
..Default::default()
58+
}
59+
}
60+
61+
pub fn text(mut self, value: Component) -> Self {
62+
self.value = DropdownValue::Text(value);
63+
self
64+
}
65+
66+
pub fn icon(mut self, icon: Component) -> Self {
67+
self.value = DropdownValue::Icon(icon);
68+
self
69+
}
70+
71+
pub fn collapsable(mut self) -> Self {
72+
self.collapsable = true;
73+
self
74+
}
75+
76+
pub fn menu_end(mut self) -> Self {
77+
self.menu_position = "dropdown-menu-end".to_owned();
78+
self
79+
}
80+
81+
pub fn menu_start(mut self) -> Self {
82+
self.menu_position = "dropdown-menu-start".to_owned();
83+
self
84+
}
85+
86+
pub fn offset(mut self, offset: &str) -> Self {
87+
self.offset = offset.to_owned();
88+
self
89+
}
90+
91+
pub fn offset_collapsed(mut self, offset: &str) -> Self {
92+
self.offset_collapsed = offset.to_owned();
93+
self
94+
}
95+
96+
pub fn expandable(mut self) -> Self {
97+
self.expandable = true;
98+
self
99+
}
100+
}
101+
102+
component!(Dropdown);

‎pgml-dashboard/src/components/dropdown/template.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
2+
<% use crate::components::dropdown::DropdownValue; %>
3+
4+
<!-- Dropdown component -->
5+
<div class="dropdown <% if expandable { %>expandable<% } %>">
6+
<% if let DropdownValue::Icon(icon) = value { %>
7+
<a
8+
class="topnav-controlls dropdown-toggle"
9+
role="button"
10+
data-bs-toggle="dropdown"
11+
data-bs-offset="<%= offset %>"
12+
href="#"
13+
aria-expanded="false">
14+
<%+ icon %>
15+
</a>
16+
<% } else if let DropdownValue::Text(text) = value { %>
17+
<button
18+
class="horizontal-hide btn btn-dropdown dropdown-toggle <% if collapsable { %> leftnav-collapse-affect <% } %>"
19+
role="button"
20+
data-bs-toggle="dropdown"
21+
data-bs-offset="<%= offset %>"
22+
aria-expanded="false">
23+
<span class="btn-dropdown-text"><%+ text %></span>
24+
<span class="material-symbols-outlined">
25+
expand_more
26+
</span>
27+
</button>
28+
<% } %>
29+
30+
<% if collapsable { %>
31+
<div
32+
class="menu-item horizontal-hide dropdown-toggle collapsed <% if collapsable { %> leftnav-collapse-affect <% } %>"
33+
role="button"
34+
data-bs-toggle="dropdown"
35+
data-bs-offset="<%= offset_collapsed %>"
36+
aria-expanded="false"
37+
>
38+
<a class="d-flex align-items-center justify-content-start gap-2">
39+
<span class="material-symbols-outlined">grid_view</span>
40+
</a>
41+
</div>
42+
<% } %>
43+
44+
<ul class="dropdown-menu <%= menu_position %>">
45+
<% for link in links { %>
46+
<li class="menu-item d-flex align-items-center <% if link.disabled { %>disabled<% } %>">
47+
<% if link.disabled { %>
48+
<a type="button" class="dropdown-item" disabled href="#"><%= link.name %></a>
49+
<% } else { %>
50+
<a type="button" class="dropdown-item" href="<%- link.href %>"><%= link.name %></a>
51+
<% } %>
52+
</li>
53+
<% } %>
54+
</ul>
55+
</div>
56+
<!-- /Dropdown component -->

‎pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.leftnav {
2+
@extend .navbar;
3+
max-width: 260px;
4+
5+
border: none;
6+
align-items: start;
7+
background-color: inherit;
8+
9+
@include media-breakpoint-down(lg) {
10+
background-color: #{$gray-900}
11+
}
12+
}

‎pgml-dashboard/src/components/left_nav_web_app/template.html

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<% use crate::components::LeftNavMenu; %>
1+
<% use crate::components::{LeftNavMenu, Dropdown}; %>
22
<nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
33
<div class="d-flex flex-column justify-content-between h-100 w-100">
44
<div class="d-flex flex-column">
@@ -11,29 +11,10 @@
1111
</span>
1212
</button>
1313

14-
<div class="dropdown nav-item d-flex w-100 mb-4 show">
15-
<button class="horizontal-hide btn-dropdown dropdown-toggle leftnav-collapse-affect expanded" href="#" role="button" data-bs-toggle="dropdown" data-bs-offset="0, 10" aria-expanded="false">
16-
<%- dropdown_nav.clone().get_active().name %>
17-
<span class="material-symbols-outlined">
18-
expand_more
19-
</span>
20-
</button>
21-
22-
<div class="btn-dropdown-menu-item horizontal-hide m-auto dropdown-toggle leftnav-collapse-affect collapsed" href="#" role="button" data-bs-toggle="dropdown" data-bs-offset="68, -44" aria-expanded="false">
23-
<a class="d-flex align-items-center justify-content-start gap-2">
24-
<span class="material-symbols-outlined">grid_view</span>
25-
</a>
26-
</div>
27-
28-
<ul class="dropdown-menu w-100">
29-
<% for link in dropdown_nav.links { %>
30-
<li class="menu-item d-flex align-items-center">
31-
<a href="<%- link.href %>"><%- link.name %></a>
32-
</li>
33-
<% } %>
34-
</ul>
14+
<div class="mb-4">
15+
<%+ Dropdown::new(dropdown_nav.links).collapsable() %>
3516
</div>
36-
<%+ LeftNavMenu { nav: upper_nav } %>
17+
<%+ LeftNavMenu { nav: upper_nav } %>
3718
</div>
3819
<%+ LeftNavMenu { nav: lower_nav} %>
3920
</div>

‎pgml-dashboard/src/components/mod.rs

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ pub use breadcrumbs::Breadcrumbs;
1313
pub mod confirm_modal;
1414
pub use confirm_modal::ConfirmModal;
1515

16+
// src/components/dropdown
17+
pub mod dropdown;
18+
pub use dropdown::Dropdown;
19+
1620
// src/components/github_icon
1721
pub mod github_icon;
1822
pub use github_icon::GithubIcon;
@@ -49,6 +53,10 @@ pub use navbar_web_app::NavbarWebApp;
4953
pub mod postgres_logo;
5054
pub use postgres_logo::PostgresLogo;
5155

56+
// src/components/profile_icon
57+
pub mod profile_icon;
58+
pub use profile_icon::ProfileIcon;
59+
5260
// src/components/static_nav
5361
pub mod static_nav;
5462
pub use static_nav::StaticNav;

‎pgml-dashboard/src/components/navbar_web_app/template.html

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<% use crate::templates::components::GithubIcon; %>
22
<% use crate::templates::components::PostgresLogo; %>
3+
<% use crate::components::{Dropdown, ProfileIcon}; %>
34

45
<div class="fixed-top-nav">
56
<nav class="navbar-web-app horizontal navbar-expand-lg" data-controller="search topnav-web-app">
@@ -57,22 +58,12 @@
5758
</li>
5859

5960
<% if !account_management_nav.links.is_empty() { %>
60-
<li class="d-none d-lg-flex nav-item align-items-center dropdown">
61-
<a class="dropdown-toggle topnav-controlls" href="#" role="button" data-bs-toggle="dropdown" data-bs-offset="10, 15" aria-expanded="false">
62-
<% include!("../../../templates/components/profile_icon.html"); %>
63-
</a>
64-
<!-- Account management for lg and up screens -->
65-
<ul class="dropdown-menu dropdown-menu-end">
66-
<% for item in account_management_nav.links.clone() { %>
67-
<li class="menu-item rounded-0 d-flex align-items-center <% if item.disabled { %>disabled<% } %>">
68-
<a class="<% if item.disabled { %>disabled<% } %>" <% if item.disabled { %>
69-
href="" disabled <% } else { %>
70-
href="<%- item.href %>"<% } %>>
71-
<%- item.name %>
72-
</a>
73-
</li>
74-
<% } %>
75-
</ul>
61+
<li class="d-none d-lg-flex nav-item align-items-center">
62+
<%+
63+
Dropdown::new(account_management_nav.links.clone())
64+
.icon(ProfileIcon::new().into())
65+
.expandable()
66+
%>
7667
</li>
7768
<li class="nav-item d-flex d-lg-none align-items-center">
7869
<a class="nav-link p-lg-0" data-bs-toggle="collapse" data-bs-target=".horizontal-collapse">Account Management</a>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy