Skip to content

Modernize connection management dialogs #103

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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
bifrost0x merged 2 commits into from
Aug 13, 2026
Merged

Modernize connection management dialogs #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b67c47a
Modernize connection management dialogs
bifrost0x Aug 13, 2026
794161c
Fix modal focus and browser test contracts
bifrost0x Aug 13, 2026
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
147 changes: 147 additions & 0 deletions static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2475,7 +2475,15 @@ body.broadcast-active .terminal-wrapper:not(.unassigned) {
}

.close {
display: inline-grid;
width: 36px;
height: 36px;
flex: 0 0 auto;
place-items: center;
border: 0;
background: transparent;
font-size: 28px;
font-family: inherit;
color: var(--text-secondary);
cursor: pointer;
line-height: 1;
Expand All @@ -2491,6 +2499,11 @@ body.broadcast-active .terminal-wrapper:not(.unassigned) {
transform: rotate(90deg);
}

.close:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}

.modal-body {
padding: 24px;
overflow-y: auto;
Expand Down Expand Up @@ -2729,6 +2742,61 @@ textarea.form-control {
margin-bottom: 32px;
}

.manager-card {
min-width: 0;
padding: 20px;
border: 1px solid var(--border-color);
border-radius: 12px;
background: var(--bg-secondary);
background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.manager-card-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
margin-bottom: 20px;
}

.manager-card-header > .material-icons {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border-radius: 9px;
background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
color: var(--accent-primary);
font-size: 20px;
}

.manager-card-header :is(h3, p) {
margin: 0;
}

.manager-card-header p {
margin-top: 3px;
color: var(--text-secondary);
font-size: 12px;
line-height: 1.45;
}

.connection-asset-layout {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
align-items: start;
gap: 18px;
}

.connection-asset-layout .manager-card {
margin-bottom: 0;
}

.connection-asset-layout .keys-list {
max-height: 440px;
}

.key-upload-section h3,
.keys-list-section h3,
.transfer-section h3 {
Expand All @@ -2740,6 +2808,12 @@ textarea.form-control {
border-left: 3px solid var(--accent-primary);
}

.manager-card .manager-card-header h3 {
margin: 0;
padding-left: 0;
border-left: 0;
}

.keys-list {
max-height: 320px;
overflow-y: auto;
Expand Down Expand Up @@ -5048,6 +5122,16 @@ body.keyboard-open.notepad-focused .notepad-panel {
}
}

@media (max-width: 820px) {
.connection-asset-layout {
grid-template-columns: minmax(0, 1fr);
}

.manager-card {
padding: 16px;
}
}

@media (max-width: 480px) {
.quick-connect-scroll-region {
padding: 16px;
Expand Down Expand Up @@ -5207,6 +5291,69 @@ body.keyboard-open.notepad-focused .notepad-panel {
transform: translateY(0);
}

.profile-management-modal-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
Comment thread
bifrost0x marked this conversation as resolved.
}

.profile-management-modal-body > .connection-asset-nav {
flex: 0 0 auto;
}

#profileManagementView:not(.hidden) {
flex: 1;
min-height: 0;
overflow-y: auto;
scrollbar-gutter: stable;
}

#profileEditorView:not(.hidden) {
display: flex;
flex: 1;
min-height: 0;
}

.profile-editor-form {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
width: 100%;
min-height: 0;
}

.profile-editor-scroll-region {
min-height: 0;
padding-right: 10px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}

.profile-editor-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
align-items: start;
gap: 18px;
}

.profile-editor-actions {
margin-top: 18px;
padding-top: 18px;
background: var(--bg-modal);
}

@media (max-width: 820px) {
.profile-editor-grid {
grid-template-columns: minmax(0, 1fr);
}

.profile-editor-scroll-region {
padding-right: 6px;
}
}

.profile-management-toolbar,
.profile-management-actions {
display: flex;
Expand Down
1 change: 1 addition & 0 deletions static/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1965,6 +1965,7 @@
render();
e.preventDefault();
} else if (e.key === 'Enter') {
e.preventDefault();
activateItem(filtered[activeIndex]);
} else if (e.key === 'Escape') {
closePalette();
Expand Down
4 changes: 3 additions & 1 deletion static/js/profile-manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -746,7 +746,9 @@ const ProfileManager = {
this.loadProfiles();
this.loadKeys();
window.JumpHostManager?.load();
window.ModalManager?.open(document.getElementById('profileManagementModal'));
const modal = document.getElementById('profileManagementModal');
window.ModalManager?.open(modal);
modal?.querySelector('[data-connection-asset="hosts"]')?.focus();
},

showManagementList() {
Expand Down
4 changes: 2 additions & 2 deletions static/js/sftp-file-manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ class SFTPFileManager {
<div class="modal-content fm-modal-fullwidth">
<div class="modal-header">
<h2 id="fmModalTitle"><span class="material-icons">folder_open</span> <span data-i18n="fm.title">File Manager</span></h2>
<span class="close" id="fmClose" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
<button type="button" class="close" id="fmClose" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
</div>
<div class="modal-body">
<!-- Toolbar -->
Expand Down Expand Up @@ -279,7 +279,7 @@ class SFTPFileManager {
<div class="modal-content fm-qc-modal">
<div class="modal-header">
<h2 id="fmQcModalTitle" data-i18n="fm.qc.title">Connect to Server</h2>
<span class="close" id="fmQcClose" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
<button type="button" class="close" id="fmQcClose" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
</div>
<div class="modal-body">
<form id="fmQcForm">
Expand Down
4 changes: 2 additions & 2 deletions templates/admin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ <h2 data-i18n="backup.validation">Validation result</h2>
<div class="modal-content">
<div class="modal-header">
<h2 id="addUserModalTitle" data-i18n="admin.addUser">Add User</h2>
<span class="close" id="closeAddUser" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
<button type="button" class="close" id="closeAddUser" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
</div>
<div class="modal-body">
<div class="form-group">
Expand All @@ -203,7 +203,7 @@ <h2 id="addUserModalTitle" data-i18n="admin.addUser">Add User</h2>
<div class="modal-content">
<div class="modal-header">
<h2 id="securityActionTitle" data-i18n="admin.accountRecovery">Account recovery</h2>
<span class="close" id="closeSecurityAction" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
<button type="button" class="close" id="closeSecurityAction" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
</div>
<div class="modal-body">
<p id="securityActionHint" class="admin-muted"></p>
Expand Down
Loading
Loading