Skip to content

feat: add parameter overlay toggle button with responsive behavior #49

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
ankitsejwal merged 1 commit into from
Nov 23, 2025
Merged

feat: add parameter overlay toggle button with responsive behavior #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 17 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
## Changelog

Current [release](https://github.com/flowbi/pgweb/releases) is `0.16.14`.
Current [release](https://github.com/flowbi/pgweb/releases) is `0.16.17`.

## 0.16.17 - 2025-11-23

- `NEW` Add parameter overlay toggle button with localStorage persistence and responsive behavior
- `NEW` Toggle automatically hides overlay when window width < 1400px
- `FIX` Parameter overlay toggle button positioned to avoid overlap with connection buttons

## 0.16.16 - 2025-11-23

- `FIX` Unwanted gap between cursor and typed character in ACE editor

## 0.16.15 - 2025-11-23

- `NEW` Enhance development script and documentation for PostgreSQL setup
- `FIX` Issue with custom fonts
- `FIX` Docker compose file name and command in development script

## 0.16.14 - 2025-09-01

Expand Down
20 changes: 19 additions & 1 deletion static/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -749,18 +749,36 @@ body, html {
}

.connection-actions {
position: fixed;
position: absolute;
right: 8px;
top: 10px;
display: none;
}

.parameter-toggle-action {
position: absolute;
right: 8px;
top: 10px;
display: none;
}

/* When both are visible, shift parameter toggle to the left */
.connection-actions:not([style*="display: none"]) ~ .parameter-toggle-action {
right: 200px;
}

#edit_connection, #close_connection {
background: var(--pgweb-primary-color);
color: var(--pgweb-primary-text);
border-color: var(--pgweb-primary-text);
}

#toggle_param_overlay {
background: var(--pgweb-primary-color);
color: var(--pgweb-primary-text);
border-color: var(--pgweb-primary-text);
}

#edit_connection i {
margin-right: 4px;
}
Expand Down
6 changes: 6 additions & 0 deletions static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@
<a href="#" id="edit_connection" class="btn btn-default btn-sm"><i class="fa fa-database"></i> Connect</a>
<a href="#" id="close_connection" class="btn btn-default btn-sm">Disconnect</a>
</div>

<div class="parameter-toggle-action">
<a href="#" id="toggle_param_overlay" class="btn btn-default btn-sm" title="Toggle parameter overlay">
<i class="fa fa-toggle-off"></i>
</a>
</div>
</div>
<div id="sidebar">
<div class="current-database">
Expand Down
115 changes: 104 additions & 11 deletions static/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -792,11 +792,16 @@ function setCurrentTab(id) {

// Persist tab selection into the session storage
sessionStorage.setItem("tab", id);

// Update parameter overlay visibility based on new tab
if (typeof updateParameterOverlay === 'function') {
updateParameterOverlay(id);
}

// Update parameter toggle button visibility based on new tab
if (typeof updateParamToggleVisibility === 'function') {
updateParamToggleVisibility(id);
}
}

function showQueryHistory() {
Expand Down Expand Up @@ -1408,6 +1413,62 @@ function addShortcutTooltips() {
// Global variables for parameter overlay management
var globalSqlParamsForOverlay = {};
var shouldShowParamIndicator = false;
var paramOverlayManuallySet = false; // Track if user manually toggled

// Get parameter overlay preference from localStorage
function getParamOverlayPreference() {
var pref = localStorage.getItem("param_overlay_enabled");
return pref === null ? null : pref === "true";
}

// Set parameter overlay preference to localStorage
function setParamOverlayPreference(enabled) {
localStorage.setItem("param_overlay_enabled", enabled.toString());
}

// Check if screen width is >= 1400px
function isWideScreen() {
return window.innerWidth >= 1400;
}

// Determine if overlay should be visible based on toggle state and screen size
function shouldShowOverlay() {
var preference = getParamOverlayPreference();

// If user has set a preference, use it
if (preference !== null) {
return preference;
}

// Default: show on wide screens, hide on narrow screens
return isWideScreen();
}

// Update toggle button icon and overlay visibility
function updateParamToggleState() {
var showOverlay = shouldShowOverlay();
var currentTab = $('#nav ul li.selected').attr('id') || 'table_query';

// Update toggle button icon
if (showOverlay) {
$('#toggle_param_overlay i').removeClass('fa-toggle-off').addClass('fa-toggle-on');
} else {
$('#toggle_param_overlay i').removeClass('fa-toggle-on').addClass('fa-toggle-off');
}

// Update overlay visibility based on toggle state
shouldShowParamIndicator = showOverlay && Object.keys(globalSqlParamsForOverlay).length > 0;
updateParameterOverlay(currentTab);
}

// Show/hide toggle button based on current tab
function updateParamToggleVisibility(currentTabId) {
if (currentTabId === 'table_query' && Object.keys(globalSqlParamsForOverlay).length > 0) {
$('.parameter-toggle-action').show();
} else {
$('.parameter-toggle-action').hide();
}
}

function updateParameterOverlay(currentTabId) {
// Remove existing indicator
Expand All @@ -1429,24 +1490,23 @@ function updateParameterOverlay(currentTabId) {

function displayURLParameters() {
var urlParams = new URLSearchParams(window.location.search);
var hideIndicator = urlParams.get('hideParamIndicator') === 'true';

// Extract SQL parameters and store them globally (always do this for substitution to work)
var sqlParams = extractSqlParameters();
var hasParams = Object.keys(sqlParams).length > 0;

// Store parameters and indicator preference globally
// Store parameters globally
globalSqlParamsForOverlay = sqlParams;
shouldShowParamIndicator = hasParams && !hideIndicator;

// Show overlay for current tab (will be managed by setCurrentTab from now on)
if (shouldShowParamIndicator) {
var currentTab = $('#nav ul li.selected').attr('id') || 'table_query';
updateParameterOverlay(currentTab);
}


if (hasParams) {
console.log('URL parameters available for query substitution:', sqlParams);

// Initialize toggle state and overlay visibility
updateParamToggleState();

// Show toggle button if on query tab
var currentTab = $('#nav ul li.selected').attr('id') || 'table_query';
updateParamToggleVisibility(currentTab);
}
}

Expand Down Expand Up @@ -2262,6 +2322,39 @@ $(document).ready(function() {
addShortcutTooltips();
bindDatabaseObjectsFilter();

// Parameter overlay toggle button click handler
$("#toggle_param_overlay").on("click", function(e) {
e.preventDefault();

// Toggle the preference
var currentPreference = shouldShowOverlay();
var newPreference = !currentPreference;

// Save to localStorage
setParamOverlayPreference(newPreference);

// Update toggle state and overlay visibility
updateParamToggleState();
});

// Window resize handler for responsive behavior
$(window).on("resize", function() {
// Only update if there are parameters
if (Object.keys(globalSqlParamsForOverlay).length > 0) {
var preference = getParamOverlayPreference();

// If preference is set to ON but screen is now narrow, turn it OFF
if (preference && !isWideScreen()) {
setParamOverlayPreference(false);
updateParamToggleState();
}
// If no preference is set (null), update based on screen size
else if (preference === null) {
updateParamToggleState();
}
}
});

// Set session from the url
var reqUrl = new URL(window.location);
var sessionId = reqUrl.searchParams.get("session");
Expand Down
Loading