Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitafd92c3

Browse files
authored
Dropdown + ellipsis fix (#974)
1 parentb55d4a5 commitafd92c3

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
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:8px12px;
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:8px12px;
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+
@mixindropdown-menu($primary-color: null) {
94+
padding:20px0px40px0px;
95+
overflow-y:auto;
96+
97+
@if ($primary-color) {
98+
background-color:#{$primary-color};
99+
}
100+
}
101+
102+
.dropdown-menu {
103+
@includedropdown-menu($gray-600);
104+
max-height:$dropdown-menu-height;
105+
overflow:hidden;
106+
}
107+
108+
.sub-menu-dropdown {
109+
@includedropdown-menu();
110+
border-radius:0px;
111+
box-shadow:1px1px8px0pxrgba(0,0,0,0.30);
112+
}
Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
usecrate::components::component;
2+
usecrate::components::component::Component;
3+
use sailfish::TemplateOnce;
4+
5+
usecrate::components::StaticNavLink;
6+
7+
pubenumDropdownValue{
8+
Icon(Component),
9+
Text(Component),
10+
}
11+
12+
implDefaultforDropdownValue{
13+
fndefault() ->Self{
14+
DropdownValue::Text("Menu".into())
15+
}
16+
}
17+
18+
#[derive(TemplateOnce,Default)]
19+
#[template(path ="dropdown/template.html")]
20+
pubstructDropdown{
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+
implDropdown{
40+
pubfnnew(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 =ifletSome(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+
pubfntext(mutself,value:Component) ->Self{
62+
self.value =DropdownValue::Text(value);
63+
self
64+
}
65+
66+
pubfnicon(mutself,icon:Component) ->Self{
67+
self.value =DropdownValue::Icon(icon);
68+
self
69+
}
70+
71+
pubfncollapsable(mutself) ->Self{
72+
self.collapsable =true;
73+
self
74+
}
75+
76+
pubfnmenu_end(mutself) ->Self{
77+
self.menu_position ="dropdown-menu-end".to_owned();
78+
self
79+
}
80+
81+
pubfnmenu_start(mutself) ->Self{
82+
self.menu_position ="dropdown-menu-start".to_owned();
83+
self
84+
}
85+
86+
pubfnoffset(mutself,offset:&str) ->Self{
87+
self.offset = offset.to_owned();
88+
self
89+
}
90+
91+
pubfnoffset_collapsed(mutself,offset:&str) ->Self{
92+
self.offset_collapsed = offset.to_owned();
93+
self
94+
}
95+
96+
pubfnexpandable(mutself) ->Self{
97+
self.expandable =true;
98+
self
99+
}
100+
}
101+
102+
component!(Dropdown);
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+
<divclass="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+
<spanclass="btn-dropdown-text"><%+ text %></span>
24+
<spanclass="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+
<aclass="d-flex align-items-center justify-content-start gap-2">
39+
<spanclass="material-symbols-outlined">grid_view</span>
40+
</a>
41+
</div>
42+
<% } %>
43+
44+
<ulclass="dropdown-menu <%= menu_position %>">
45+
<% for link in links { %>
46+
<liclass="menu-item d-flex align-items-center <% if link.disabled { %>disabled<% } %>">
47+
<% if link.disabled { %>
48+
<atype="button"class="dropdown-item"disabledhref="#"><%= link.name %></a>
49+
<% } else { %>
50+
<atype="button"class="dropdown-item"href="<%- link.href %>"><%= link.name %></a>
51+
<% } %>
52+
</li>
53+
<% } %>
54+
</ul>
55+
</div>
56+
<!-- /Dropdown component -->
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+
@includemedia-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
<navclass="leftnav nav-pills h-100"data-controller="extend-bs-collapse"data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
33
<divclass="d-flex flex-column justify-content-between h-100 w-100">
44
<divclass="d-flex flex-column">
@@ -11,29 +11,10 @@
1111
</span>
1212
</button>
1313

14-
<divclass="dropdown nav-item d-flex w-100 mb-4 show">
15-
<buttonclass="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-
<spanclass="material-symbols-outlined">
18-
expand_more
19-
</span>
20-
</button>
21-
22-
<divclass="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-
<aclass="d-flex align-items-center justify-content-start gap-2">
24-
<spanclass="material-symbols-outlined">grid_view</span>
25-
</a>
26-
</div>
27-
28-
<ulclass="dropdown-menu w-100">
29-
<% for link in dropdown_nav.links { %>
30-
<liclass="menu-item d-flex align-items-center">
31-
<ahref="<%- link.href %>"><%- link.name %></a>
32-
</li>
33-
<% } %>
34-
</ul>
14+
<divclass="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
pubmod confirm_modal;
1414
pubuse confirm_modal::ConfirmModal;
1515

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

56+
// src/components/profile_icon
57+
pubmod profile_icon;
58+
pubuse profile_icon::ProfileIcon;
59+
5260
// src/components/static_nav
5361
pubmod static_nav;
5462
pubuse 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
<divclass="fixed-top-nav">
56
<navclass="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-
<liclass="d-none d-lg-flex nav-item align-items-center dropdown">
61-
<aclass="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-
<ulclass="dropdown-menu dropdown-menu-end">
66-
<% for item in account_management_nav.links.clone() { %>
67-
<liclass="menu-item rounded-0 d-flex align-items-center <% if item.disabled { %>disabled<% } %>">
68-
<aclass="<% 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+
<liclass="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
<liclass="nav-item d-flex d-lg-none align-items-center">
7869
<aclass="nav-link p-lg-0"data-bs-toggle="collapse"data-bs-target=".horizontal-collapse">Account Management</a>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp