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

Dan product left nav update#1445

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
chillenberger merged 23 commits intomasterfromdan-product-left-nav-update
May 13, 2024
Merged
Show file tree
Hide file tree
Changes from1 commit
Commits
Show all changes
23 commits
Select commitHold shift + click to select a range
b01f9d7
fix current product nav to maintain state on FE
chillenbergerApr 24, 2024
8122f77
left nav works with shift checkpoint
chillenbergerApr 25, 2024
4bcb252
fixed left nav
chillenbergerApr 25, 2024
dcd197e
product mobile menu full length, change menu-item icon color
chillenbergerApr 25, 2024
b044163
Merge branch 'master' into dan-product-left-nav-update
chillenbergerApr 26, 2024
88ce70b
move product engines dropdown to topnav, set dropdown default formatt…
chillenbergerMay 6, 2024
d5d1ac7
Merge branch 'master' into dan-product-left-nav-update
chillenbergerMay 6, 2024
c1664d1
remove product lower left nav, remove account management nav, style u…
chillenbergerMay 6, 2024
79d0a74
make owl a font, default breadcrumb start is home, remove bc on mobile
chillenbergerMay 7, 2024
7656600
Merge branch 'master' into dan-product-left-nav-update
chillenbergerMay 7, 2024
4442192
fix icomoon 400
chillenbergerMay 7, 2024
66bda1d
reduce dropdown height in topnav
chillenbergerMay 7, 2024
0d815fe
fix left and top borders
chillenbergerMay 7, 2024
12725e3
change dashboard to home
chillenbergerMay 7, 2024
2f14bbf
keep left nav updated, reset dropdown on nav
chillenbergerMay 7, 2024
5d282af
reduce product left nav icon size, gap, images
chillenbergerMay 7, 2024
c9f0354
rename upper left nav to product left nav, add status and tier to das…
chillenbergerMay 8, 2024
0ecac2a
Fix dashboard urls
chillenbergerMay 10, 2024
2bdd96b
Merge branch 'master' into dan-product-left-nav-update
chillenbergerMay 10, 2024
9fb64b0
remove all hardcoded deployment urls, change dashboard url to engine,…
chillenbergerMay 10, 2024
082e942
fix warnings
chillenbergerMay 10, 2024
51a01ef
make left nave recursive
chillenbergerMay 13, 2024
1e49bc5
Merge branch 'master' into dan-product-left-nav-update
chillenbergerMay 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
PrevPrevious commit
NextNext commit
left nav works with shift checkpoint
  • Loading branch information
@chillenberger
chillenberger committedApr 25, 2024
commit8122f7772b9c44c1d177f4ca33abb8d4143b5e12
19 changes: 10 additions & 9 deletionspgml-dashboard/Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more abouthow customized files appear on GitHub.

2 changes: 1 addition & 1 deletionpgml-dashboard/src/components/dropdown/template.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@
<div class="dropdown <% if expandable { %>expandable<% } %>">
<% if let DropdownValue::Icon(icon) = value { %>
<a
class="topnav-controlls dropdown-toggle"
class="top-nav-controls dropdown-toggle"
role="button"
data-bs-toggle="dropdown"
data-bs-offset="<%= offset %>"
Expand Down
13 changes: 7 additions & 6 deletionspgml-dashboard/src/components/left_nav_menu/left-nav-menu.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,16 +17,16 @@ export default class extends Controller {
document.addEventListener("turbo:load", this.callback);
}

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

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

if (elements.length > 0) {
console.log("found element " + elements[0].href)
elements[0].classList.add("active");
if (element) {
element.classList.add("active");
}
}

Expand All@@ -37,6 +37,7 @@ export default class extends Controller {
}
}

// Remove event listener when controller is disconnected
disconnect() {
document.removeEventListener("turbo:load", this.callback);
}
Expand Down
4 changes: 2 additions & 2 deletionspgml-dashboard/src/components/left_nav_menu/template.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@
<ul class="nav flex-column justify-content-end">
<% for link in nav.links { %>
<% if !link.hide_for_lg_screens { %>
<li class="menu-item leftnav-collapse-affectexpanded <% if link.disabled { %>disabled<% } %>" >
<li class="menu-item leftnav-collapse-affectcollapsed <% if link.disabled { %>disabled<% } %>" >
<a
data-left-nav-menu-target="link"
class="d-flex align-items-center justify-content-start gap-2 <% if link.disabled { %> disabled <% } %> <% if link.active { %> active <% } %>"
Expand All@@ -11,7 +11,7 @@
<% if link.icon.as_ref().is_some() { %>
<span class="material-symbols-outlined"><%- link.icon.unwrap() %></span>
<% } %>
<span class="collapse collapse-horizontal leftnav-collapse show"><%= link.name %></span>
<span class="collapse collapse-horizontal leftnav-collapse"><%= link.name %></span>
</a>
</li>
<% } %>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@

<% use crate::components::{LeftNavMenu, Dropdown}; %>
<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"))%>'>
<nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
<div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect expanded">
<nav
class="leftnav nav-pills h-100"
data-controller="extend-bs-collapse"
data-extend-bs-collapse-affected-value=".leftnav-collapse-affect"
data-action="mousemove@document->navigation-left-nav-web-app#checkIfHover">
<div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect collapsed">
<div class="d-flex flex-column">
<button class="btn btn-left-nav-toggle mb-4" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">

<!-- <button class="btn btn-left-nav-toggle mb-4" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
<span class="left-nav-toggle-icon material-symbols-outlined leftnav-collapse-affect expanded">
keyboard_double_arrow_left
</span>
<span class="collapse collapse-horizontal leftnav-collapse show" data-extend-bs-collapse-target="stateReference"></span>
</button>
</button> -->

<div class="mb-4">
<%+ Dropdown::nav(dropdown_nav.links).collapsable() %>
</div>
<span class="leftnav-collapse collapse" data-extend-bs-collapse-target="stateReference" data-navigation-left-nav-web-app-target="stateReference"></span>
<%+ LeftNavMenu { nav: upper_nav } %>
</div>
<%+ LeftNavMenu { nav: lower_nav} %>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
static targets = [];
static targets = ['stateReference']
expand() {
if( !this.stateReferenceTarget.classList.contains("show")) {
const elements = this.element.getElementsByClassName('leftnav-collapse')
for( const element of elements) {
bootstrap.Collapse.getOrCreateInstance(element).show()
}
}
}

connect() {}
collapse() {
if( this.stateReferenceTarget.classList.contains("show")) {
const elements = this.element.getElementsByClassName('leftnav-collapse')
for( const element of elements) {
bootstrap.Collapse.getOrCreateInstance(element, {toggle: false}).hide()
}
}
}

checkIfHover() {
this.element.matches(':hover') ? this.expand() : this.collapse()
}
}
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,14 +9,16 @@ pub struct WebApp {
pub standalone_dashboard: bool,
pub links: Vec<StaticNavLink>,
pub account_management_nav: StaticNav,
pub deployment_controls: StaticNav,
}

impl WebApp {
pub fn new(links: Vec<StaticNavLink>,account_management_nav: StaticNav) -> WebApp {
pub fn new(links: Vec<StaticNavLink>,deployment_controls: StaticNav) -> WebApp {
WebApp {
standalone_dashboard: config::standalone_dashboard(),
links,
account_management_nav,
account_management_nav: StaticNav::default(),
deployment_controls,
}
}
}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,19 +9,23 @@

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

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

<!-- Button to toggle collapsed menu for less than lg screens -->
<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">
<%+ ProfileIcon::new() %>
<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">
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="18" viewBox="0 0 33 18" fill="none">
<line x1="8.04297" y1="17.25" x2="24.543" y2="17.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<line x1="5.04297" y1="9.25" x2="27.543" y2="9.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<line x1="1.04297" y1="1.25" x2="31.543" y2="1.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</button>
</div>

Expand All@@ -31,33 +35,31 @@
<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">
<ul class="navbar-nav flex-grow-1 ps-4 p-lg-0 d-none d-lg-block">
<li class="nav-item d-flex align-items-center">
<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">
Search
<span class="material-symbols-outlined">
search
</span>
</button>
<div class="deployment_controls">
<%+ Dropdown::nav(deployment_controls.links) %>
</div>
</li>
</ul>

<!-- Main nav links for lg screens -->
<ul class="navbar-nav gap-3 mb-0 d-none d-lg-flex">
<li class="align-items-center d-none d-lg-flex">
<%- GithubIcon{show_stars: false}.render_once().unwrap() %>
</li>
<li class="align-items-center d-flex d-lg-none">
<a class="nav-link p-lg-0" href="https://github.com/postgresml/postgresml">Open Source</a>
<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">
<span class="material-symbols-outlined">search</span>
</button>
</li>

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

<div class="vr my-2 opacity-100 d-lg-block d-none" style="width: 2px"></div>

<li class="nav-item d-flex align-items-center">
<a class="nav-link p-lg-0" href="/blog">Blog</a>
</li>

<li class="nav-item d-flex align-items-center">
<a class="nav-link p-lg-0" href="/support">Support</a>
</li>

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

<!-- Main nav links for less than lg screens -->
<ul class="sub-menu-dropdown mb-2 d-lg-none">
<li class="menu-item rounded-0 d-flex align-items-center">
<a href="https://github.com/postgresml/postgresml">Open Source</a>
<li class="nav-item d-flex align-items-center">
<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">
Search
<span class="material-symbols-outlined">
search
</span>
</button>
</li>

<li class="menu-item rounded-0 d-flex align-items-center">
Expand All@@ -86,12 +93,18 @@
<li class="menu-item rounded-0 d-flex align-items-center">
<a href="/blog">Blog</a>
</li>

<li class="menu-item rounded-0 d-flex align-items-center">
<a href="/support">Support</a>
</li>

<% if !standalone_dashboard { %>
<% if !account_management_nav.links.is_empty() { %>
<li class="menu-item rounded-0 d-flex align-items-center">
<a href="#" data-bs-toggle="collapse" data-bs-target=".horizontal-collapse">Account Management</a>
</li>
<% } %>
<% } %>
</ul>
</div>

Expand DownExpand Up@@ -123,14 +136,6 @@
<div class="collapse navbar-collapse" id="leftNavItems">
<div class="nav-item w-100 d-flex flex-column flex-lg-row collapse show drawer-submenu">
<ul class="sub-menu-dropdown mb-2 d-lg-none">
<li class="nav-item d-flex align-items-center">
<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">
Search
<span class="material-symbols-outlined">
search
</span>
</button>
</li>
<% for link in links { %>
<li class="menu-item rounded-0 d-flex align-items-center">
<a
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -45,4 +45,24 @@
}
}
}

.deployment_controls {
min-width: 300px;
}

.sub-menu-dropdown {
background-color: #{$gray-800};
}

.top-nav-controls {
&:not(.collapsed) {
.mobile-left-nav-controls {
background-color: #{$neon-tint-100};
}
}

.mobile-left-nav-controls {
background-color: #{$gray-700};
}
}
}
7 changes: 7 additions & 0 deletionspgml-dashboard/src/components/postgres_logo/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,20 +6,27 @@ use sailfish::TemplateOnce;
pub struct PostgresLogo {
link: String,
bigger: bool,
hide_owl: bool,
}

impl PostgresLogo {
pub fn new(link: &str) -> PostgresLogo {
PostgresLogo {
link: link.to_owned(),
bigger: false,
hide_owl: false,
}
}

pub fn bigger(mut self) -> PostgresLogo {
self.bigger = true;
self
}

pub fn hide_owl(mut self) -> PostgresLogo {
self.hide_owl = true;
self
}
}

component!(PostgresLogo);
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@
%>

<a class="postgres-logo navbar-brand" href="<%- link %>">
<img src="/dashboard/static/images/owl_gradient.svg" alt="PostgresML Logo" height="<%- image_dimensions%>" width="<%- image_dimensions%>">
<img<% if hide_owl {%>class="d-none"<% } %>"src="/dashboard/static/images/owl_gradient.svg" alt="PostgresML Logo" height="<%- image_dimensions%>" width="<%- image_dimensions%>">
<span class="position-relative overflow-visible text-white <%- postgres_size %> mb-0">
Postgres<span class="<%- ml_size %>">ML</span>
</span>
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp