🌐 AI搜索 & 代理 主页
Skip to content

Commit 8122f77

Browse files
chillenbergerchillenberger
committed
left nav works with shift checkpoint
1 parent b01f9d7 commit 8122f77

File tree

13 files changed

+137
-71
lines changed

13 files changed

+137
-71
lines changed

‎pgml-dashboard/Cargo.lock‎

Lines changed: 10 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="dropdown <% if expandable { %>expandable<% } %>">
66
<% if let DropdownValue::Icon(icon) = value { %>
77
<a
8-
class="topnav-controlls dropdown-toggle"
8+
class="top-nav-controls dropdown-toggle"
99
role="button"
1010
data-bs-toggle="dropdown"
1111
data-bs-offset="<%= offset %>"

‎pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,16 @@ export default class extends Controller {
1717
document.addEventListener("turbo:load", this.callback);
1818
}
1919

20+
// Find link element in the left nav that matches the current window
21+
// location and set to active
2022
setLeftNavToLocation() {
2123
this.removeAllActive();
2224

23-
let tag = "a[href='" + window.location.pathname + "']";
24-
console.log("tag: " + tag)
25-
let elements = this.element.querySelectorAll(tag);
25+
let tag = "a[href='" + window.location.pathname + window.location.search + "']";
26+
let element = this.element.querySelector(tag);
2627

27-
if (elements.length > 0) {
28-
console.log("found element " + elements[0].href)
29-
elements[0].classList.add("active");
28+
if (element) {
29+
element.classList.add("active");
3030
}
3131
}
3232

@@ -37,6 +37,7 @@ export default class extends Controller {
3737
}
3838
}
3939

40+
// Remove event listener when controller is disconnected
4041
disconnect() {
4142
document.removeEventListener("turbo:load", this.callback);
4243
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ul class="nav flex-column justify-content-end">
33
<% for link in nav.links { %>
44
<% if !link.hide_for_lg_screens { %>
5-
<li class="menu-item leftnav-collapse-affect expanded <% if link.disabled { %>disabled<% } %>" >
5+
<li class="menu-item leftnav-collapse-affect collapsed <% if link.disabled { %>disabled<% } %>" >
66
<a
77
data-left-nav-menu-target="link"
88
class="d-flex align-items-center justify-content-start gap-2 <% if link.disabled { %> disabled <% } %> <% if link.active { %> active <% } %>"
@@ -11,7 +11,7 @@
1111
<% if link.icon.as_ref().is_some() { %>
1212
<span class="material-symbols-outlined"><%- link.icon.unwrap() %></span>
1313
<% } %>
14-
<span class="collapse collapse-horizontal leftnav-collapse show"><%= link.name %></span>
14+
<span class="collapse collapse-horizontal leftnav-collapse"><%= link.name %></span>
1515
</a>
1616
</li>
1717
<% } %>

‎pgml-dashboard/src/components/navigation/left_nav/web_app/template.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11

22
<% use crate::components::{LeftNavMenu, Dropdown}; %>
33
<div class="leftnav-container py-3 font-family-primary" data-controller="navigation-left-nav-web-app" data-turbo-permanent id='<%- id.unwrap_or_else(|| String::from("defaultId"))%>'>
4-
<nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
5-
<div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect expanded">
4+
<nav
5+
class="leftnav nav-pills h-100"
6+
data-controller="extend-bs-collapse"
7+
data-extend-bs-collapse-affected-value=".leftnav-collapse-affect"
8+
data-action="mousemove@document->navigation-left-nav-web-app#checkIfHover">
9+
<div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect collapsed">
610
<div class="d-flex flex-column">
7-
<button class="btn btn-left-nav-toggle mb-4" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
11+
12+
<!-- <button class="btn btn-left-nav-toggle mb-4" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
813
<span class="left-nav-toggle-icon material-symbols-outlined leftnav-collapse-affect expanded">
914
keyboard_double_arrow_left
1015
</span>
1116
<span class="collapse collapse-horizontal leftnav-collapse show" data-extend-bs-collapse-target="stateReference"></span>
12-
</button>
17+
</button> -->
1318

14-
<div class="mb-4">
15-
<%+ Dropdown::nav(dropdown_nav.links).collapsable() %>
16-
</div>
19+
<span class="leftnav-collapse collapse" data-extend-bs-collapse-target="stateReference" data-navigation-left-nav-web-app-target="stateReference"></span>
1720
<%+ LeftNavMenu { nav: upper_nav } %>
1821
</div>
1922
<%+ LeftNavMenu { nav: lower_nav} %>

‎pgml-dashboard/src/components/navigation/left_nav/web_app/web_app_controller.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
11
import { Controller } from "@hotwired/stimulus";
22

33
export default class extends Controller {
4-
static targets = [];
4+
static targets = ['stateReference']
5+
expand() {
6+
if( !this.stateReferenceTarget.classList.contains("show")) {
7+
const elements = this.element.getElementsByClassName('leftnav-collapse')
8+
for( const element of elements) {
9+
bootstrap.Collapse.getOrCreateInstance(element).show()
10+
}
11+
}
12+
}
513

6-
connect() {}
14+
collapse() {
15+
if( this.stateReferenceTarget.classList.contains("show")) {
16+
const elements = this.element.getElementsByClassName('leftnav-collapse')
17+
for( const element of elements) {
18+
bootstrap.Collapse.getOrCreateInstance(element, {toggle: false}).hide()
19+
}
20+
}
21+
}
722

23+
checkIfHover() {
24+
this.element.matches(':hover') ? this.expand() : this.collapse()
25+
}
826
}

‎pgml-dashboard/src/components/navigation/navbar/web_app/mod.rs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,16 @@ pub struct WebApp {
99
pub standalone_dashboard: bool,
1010
pub links: Vec<StaticNavLink>,
1111
pub account_management_nav: StaticNav,
12+
pub deployment_controls: StaticNav,
1213
}
1314

1415
impl WebApp {
15-
pub fn new(links: Vec<StaticNavLink>, account_management_nav: StaticNav) -> WebApp {
16+
pub fn new(links: Vec<StaticNavLink>, deployment_controls: StaticNav) -> WebApp {
1617
WebApp {
1718
standalone_dashboard: config::standalone_dashboard(),
1819
links,
19-
account_management_nav,
20+
account_management_nav: StaticNav::default(),
21+
deployment_controls,
2022
}
2123
}
2224
}

‎pgml-dashboard/src/components/navigation/navbar/web_app/template.html‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,23 @@
99

1010
<div class="controls">
1111
<!-- Toggles items that come from left nav -->
12-
<button class="navbar-toggler collapsed topnav-controlls" type="button" data-bs-toggle="collapse" data-bs-target="#leftNavItems" aria-controls="LeftNavItems" aria-expanded="false" aria-label="Toggle navigation">
13-
<span class="material-symbols-outlined" style="font-size: 44px">
14-
menu
15-
</span>
12+
<button class="navbar-toggler collapsed top-nav-controls" type="button" data-bs-toggle="collapse" data-bs-target="#leftNavItems" aria-controls="LeftNavItems" aria-expanded="false" aria-label="Toggle navigation">
13+
<div class="mobile-left-nav-controls rounded-1">
14+
<img class="m-2" src="/dashboard/static/images/owl_white.webp" alt="postgresml_owl" width="12" height="16">
15+
</div>
1616
</button>
1717

1818
<div class="web-app-left-nav-sized-container">
19-
<%+ PostgresLogo::new("/") %>
19+
<%+ PostgresLogo::new("/").hide_owl() %>
2020
</div>
2121

2222
<!-- Button to toggle collapsed menu for less than lg screens -->
23-
<button class="navbar-toggler collapsed topnav-controlls" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
24-
<%+ ProfileIcon::new() %>
23+
<button class="navbar-toggler collapsed top-nav-controls" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
24+
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="18" viewBox="0 0 33 18" fill="none">
25+
<line x1="8.04297" y1="17.25" x2="24.543" y2="17.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
26+
<line x1="5.04297" y1="9.25" x2="27.543" y2="9.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
27+
<line x1="1.04297" y1="1.25" x2="31.543" y2="1.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
28+
</svg>
2529
</button>
2630
</div>
2731

@@ -31,33 +35,31 @@
3135
<div class="nav-item w-100 d-flex flex-column flex-lg-row align-items-lg-center collapse collapse-horizontal horizontal-collapse show drawer-submenu">
3236
<ul class="navbar-nav flex-grow-1 ps-4 p-lg-0 d-none d-lg-block">
3337
<li class="nav-item d-flex align-items-center">
34-
<button type="text" class="btn-search d-flex justify-content-between" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
35-
Search
36-
<span class="material-symbols-outlined">
37-
search
38-
</span>
39-
</button>
38+
<div class="deployment_controls">
39+
<%+ Dropdown::nav(deployment_controls.links) %>
40+
</div>
4041
</li>
4142
</ul>
4243

4344
<!-- Main nav links for lg screens -->
4445
<ul class="navbar-nav gap-3 mb-0 d-none d-lg-flex">
4546
<li class="align-items-center d-none d-lg-flex">
46-
<%- GithubIcon{show_stars: false}.render_once().unwrap() %>
47-
</li>
48-
<li class="align-items-center d-flex d-lg-none">
49-
<a class="nav-link p-lg-0" href="https://github.com/postgresml/postgresml">Open Source</a>
47+
<button type="text" class="btn nav-link btn-search-input-webapp border-0 p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
48+
<span class="material-symbols-outlined">search</span>
49+
</button>
5050
</li>
5151

5252
<li class="nav-item d-flex align-items-center">
5353
<a class="nav-link p-lg-0" href="/docs">Docs</a>
5454
</li>
5555

56-
<div class="vr my-2 opacity-100 d-lg-block d-none" style="width: 2px"></div>
57-
5856
<li class="nav-item d-flex align-items-center">
5957
<a class="nav-link p-lg-0" href="/blog">Blog</a>
6058
</li>
59+
60+
<li class="nav-item d-flex align-items-center">
61+
<a class="nav-link p-lg-0" href="/support">Support</a>
62+
</li>
6163

6264
<% if !account_management_nav.links.is_empty() { %>
6365
<li class="d-none d-lg-flex nav-item align-items-center">
@@ -75,8 +77,13 @@
7577

7678
<!-- Main nav links for less than lg screens -->
7779
<ul class="sub-menu-dropdown mb-2 d-lg-none">
78-
<li class="menu-item rounded-0 d-flex align-items-center">
79-
<a href="https://github.com/postgresml/postgresml">Open Source</a>
80+
<li class="nav-item d-flex align-items-center">
81+
<button type="text" class="btn-search d-flex justify-content-between w-100 mx-4 mb-4" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
82+
Search
83+
<span class="material-symbols-outlined">
84+
search
85+
</span>
86+
</button>
8087
</li>
8188

8289
<li class="menu-item rounded-0 d-flex align-items-center">
@@ -86,12 +93,18 @@
8693
<li class="menu-item rounded-0 d-flex align-items-center">
8794
<a href="/blog">Blog</a>
8895
</li>
96+
97+
<li class="menu-item rounded-0 d-flex align-items-center">
98+
<a href="/support">Support</a>
99+
</li>
89100

90101
<% if !standalone_dashboard { %>
102+
<% if !account_management_nav.links.is_empty() { %>
91103
<li class="menu-item rounded-0 d-flex align-items-center">
92104
<a href="#" data-bs-toggle="collapse" data-bs-target=".horizontal-collapse">Account Management</a>
93105
</li>
94106
<% } %>
107+
<% } %>
95108
</ul>
96109
</div>
97110

@@ -123,14 +136,6 @@
123136
<div class="collapse navbar-collapse" id="leftNavItems">
124137
<div class="nav-item w-100 d-flex flex-column flex-lg-row collapse show drawer-submenu">
125138
<ul class="sub-menu-dropdown mb-2 d-lg-none">
126-
<li class="nav-item d-flex align-items-center">
127-
<button type="text" class="btn-search d-flex justify-content-between w-100 mx-4 mb-4" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
128-
Search
129-
<span class="material-symbols-outlined">
130-
search
131-
</span>
132-
</button>
133-
</li>
134139
<% for link in links { %>
135140
<li class="menu-item rounded-0 d-flex align-items-center">
136141
<a

‎pgml-dashboard/src/components/navigation/navbar/web_app/web_app.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,24 @@
4545
}
4646
}
4747
}
48+
49+
.deployment_controls {
50+
min-width: 300px;
51+
}
52+
53+
.sub-menu-dropdown {
54+
background-color: #{$gray-800};
55+
}
56+
57+
.top-nav-controls {
58+
&:not(.collapsed) {
59+
.mobile-left-nav-controls {
60+
background-color: #{$neon-tint-100};
61+
}
62+
}
63+
64+
.mobile-left-nav-controls {
65+
background-color: #{$gray-700};
66+
}
67+
}
4868
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,27 @@ use sailfish::TemplateOnce;
66
pub struct PostgresLogo {
77
link: String,
88
bigger: bool,
9+
hide_owl: bool,
910
}
1011

1112
impl PostgresLogo {
1213
pub fn new(link: &str) -> PostgresLogo {
1314
PostgresLogo {
1415
link: link.to_owned(),
1516
bigger: false,
17+
hide_owl: false,
1618
}
1719
}
1820

1921
pub fn bigger(mut self) -> PostgresLogo {
2022
self.bigger = true;
2123
self
2224
}
25+
26+
pub fn hide_owl(mut self) -> PostgresLogo {
27+
self.hide_owl = true;
28+
self
29+
}
2330
}
2431

2532
component!(PostgresLogo);

0 commit comments

Comments
 (0)