Visitar URL original
Replace system monitor setting popup with a collapse button · phpmyadmin/phpmyadmin@826b1c7 · GitHub
Skip to content

Commit 826b1c7

Browse files
MauricioFauthMauricioFauth
committed
Replace system monitor setting popup with a collapse button
Also replace settings links with buttons. Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
1 parent ddbc1af commit 826b1c7

7 files changed

Lines changed: 79 additions & 177 deletions

File tree

‎js/src/server/status/monitor.ts‎

Lines changed: 23 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,6 @@ AJAX.registerOnload('server/status/monitor.js', function () {
9999
*/
100100
AJAX.registerTeardown('server/status/monitor.js', function () {
101101
$('#emptyDialog').remove();
102-
$('#monitorSettingsButton').off('click');
103-
$('body').off('click');
104102
});
105103

106104
/**
@@ -110,38 +108,17 @@ AJAX.registerOnload('server/status/monitor.js', function () {
110108
$('<div></div>')
111109
.attr('id', 'emptyDialog')
112110
.appendTo('#page_content');
113-
114-
$('#monitorSettingsButton').on('click', function () {
115-
var $link = $(this);
116-
$('div.settingsPopup')
117-
.show()
118-
.offset({ top: $link.offset().top + $link.height() + 5, left: $link.offset().left })
119-
.addClass('openedPopup');
120-
});
121-
122-
$('body').on('click', function (event) {
123-
$('div.openedPopup').each(function () {
124-
var $cnt = $(this);
125-
var pos = $cnt.offset();
126-
// Hide if the mouseclick is outside the popupcontent
127-
if (event.pageX > pos.left + $cnt.outerWidth() ||
128-
event.pageY > pos.top + $cnt.outerHeight()
129-
) {
130-
$cnt.hide().removeClass('openedPopup');
131-
}
132-
});
133-
});
134111
});
135112

136113
AJAX.registerTeardown('server/status/monitor.js', function () {
137-
$('a[href="#rearrangeCharts"]').off('click');
138114
$('#monitorRearrangeChartButton').off('click');
139-
$('div.popupContent select[name="chartColumns"]').off('change');
140-
$('div.popupContent select[name="gridChartRefresh"]').off('change');
141-
$('a[href="#addNewChart"]').off('click');
142-
$('a[href="#exportMonitorConfig"]').off('click');
143-
$('a[href="#importMonitorConfig"]').off('click');
144-
$('a[href="#clearMonitorConfig"]').off('click');
115+
$('#monitorDoneRearrangeChartButton').off('click');
116+
$('#monitorChartColumnsSelect').off('change');
117+
$('#monitorChartRefreshRateSelect').off('change');
118+
$('#monitorAddNewChartButton').off('click');
119+
$('#monitorExportConfigButton').off('click');
120+
$('#monitorImportConfigButton').off('click');
121+
$('#monitorResetConfigButton').off('click');
145122
$('#monitorPauseResumeButton').off('click');
146123
$('#monitorInstructionsButton').off('click');
147124
$('input[name="chartType"]').off('click');
@@ -480,14 +457,12 @@ AJAX.registerOnload('server/status/monitor.js', function () {
480457
defaultChartGrid.c5 = presetCharts.swap;
481458
}
482459

483-
$('a[href="#rearrangeCharts"]').on('click', function (event) {
460+
$('#monitorRearrangeChartButton').on('click', function (event) {
484461
event.preventDefault();
485462
editMode = true;
486463

487-
$('#monitorRearrangeChartButton').removeClass('d-none');
488-
489-
// Close the settings popup
490-
$('div.popupContent').hide().removeClass('openedPopup');
464+
$('#monitorRearrangeChartButton').addClass('d-none');
465+
$('#monitorDoneRearrangeChartButton').removeClass('d-none');
491466

492467
$('#chartGrid').sortableTable({
493468
ignoreRect: {
@@ -503,15 +478,16 @@ AJAX.registerOnload('server/status/monitor.js', function () {
503478
return false;
504479
});
505480

506-
$('#monitorRearrangeChartButton').on('click', function (event) {
481+
$('#monitorDoneRearrangeChartButton').on('click', function (event) {
507482
editMode = false;
508483
$('#chartGrid').sortableTable('destroy');
509484
saveMonitor();
510-
$('#monitorRearrangeChartButton').addClass('d-none');
485+
$('#monitorRearrangeChartButton').removeClass('d-none');
486+
$('#monitorDoneRearrangeChartButton').addClass('d-none');
511487
});
512488

513489
// global settings
514-
($('div.popupContent select[name="chartColumns"]') as JQuery<HTMLSelectElement>).on('change', function () {
490+
($('#monitorChartColumnsSelect') as JQuery<HTMLSelectElement>).on('change', function () {
515491
monitorSettings.columns = parseInt(this.value, 10);
516492

517493
calculateChartSize();
@@ -577,7 +553,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
577553
saveMonitor(); // Save settings
578554
});
579555

580-
($('div.popupContent select[name="gridChartRefresh"]') as JQuery<HTMLSelectElement>).on('change', function () {
556+
($('#monitorChartRefreshRateSelect') as JQuery<HTMLSelectElement>).on('change', function () {
581557
monitorSettings.gridRefresh = parseInt(this.value, 10) * 1000;
582558
clearTimeout(runtime.refreshTimeout);
583559

@@ -593,9 +569,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
593569
saveMonitor(); // Save settings
594570
});
595571

596-
$('a[href="#addNewChart"]').on('click', function (event) {
597-
event.preventDefault();
598-
572+
$('#monitorAddNewChartButton').on('click', function (event) {
599573
$('#addChartButton').on('click', function () {
600574
var type = $('input[name="chartType"]:checked').val();
601575

@@ -666,12 +640,9 @@ AJAX.registerOnload('server/status/monitor.js', function () {
666640
$('#addChartModal').modal('show');
667641

668642
$('#seriesPreview').html('<i>' + window.Messages.strNone + '</i>');
669-
670-
return false;
671643
});
672644

673-
$('a[href="#exportMonitorConfig"]').on('click', function (event) {
674-
event.preventDefault();
645+
$('#monitorExportConfigButton').on('click', function () {
675646
var gridCopy = {};
676647
$.each(runtime.charts, function (key, elem) {
677648
gridCopy[key] = {};
@@ -710,8 +681,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
710681
}, 100);
711682
});
712683

713-
$('a[href="#importMonitorConfig"]').on('click', function (event) {
714-
event.preventDefault();
684+
$('#monitorImportConfigButton').on('click', function () {
715685
$('#emptyDialog').dialog({
716686
classes: {
717687
'ui-dialog-titlebar-close': 'btn-close'
@@ -806,8 +776,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
806776
});
807777
});
808778

809-
$('a[href="#clearMonitorConfig"]').on('click', function (event) {
810-
event.preventDefault();
779+
$('#monitorResetConfigButton').on('click', function () {
811780
if (isStorageSupported('localStorage')) {
812781
window.localStorage.removeItem('monitorCharts');
813782
window.localStorage.removeItem('monitorSettings');
@@ -1112,7 +1081,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
11121081
monitorSettings = JSON.parse(window.localStorage.monitorSettings);
11131082
}
11141083

1115-
$('a[href="#clearMonitorConfig"]').toggle(runtime.charts !== null);
1084+
$('#monitorResetConfigButton').toggle(runtime.charts !== null);
11161085

11171086
if (runtime.charts !== null
11181087
&& typeof window.localStorage.monitorVersion !== 'undefined'
@@ -1156,8 +1125,8 @@ AJAX.registerOnload('server/status/monitor.js', function () {
11561125
monitorSettings = defaultMonitorSettings;
11571126
}
11581127

1159-
$('select[name="gridChartRefresh"]').val(monitorSettings.gridRefresh / 1000);
1160-
$('select[name="chartColumns"]').val(monitorSettings.columns);
1128+
$('#monitorChartRefreshRateSelect').val(monitorSettings.gridRefresh / 1000);
1129+
$('#monitorChartColumnsSelect').val(monitorSettings.columns);
11611130

11621131
if (monitorSettings.gridMaxPoints === 'auto') {
11631132
runtime.gridMaxPoints = Math.round((monitorSettings.chartSize.width - 40) / 12);
@@ -2454,7 +2423,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
24542423
window.localStorage.monitorVersion = monitorProtocolVersion;
24552424
}
24562425

2457-
$('a[href="#clearMonitorConfig"]').show();
2426+
$('#monitorResetConfigButton').show();
24582427
}
24592428
});
24602429

‎public/themes/bootstrap/scss/_common.scss‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@ textarea {
3030
clear: both;
3131
}
3232

33-
.paddingtop {
34-
padding-top: 1em;
35-
}
36-
3733
.separator {
3834
color: $white;
3935
text-shadow: 0 1px 0 $black;
@@ -514,17 +510,6 @@ div.tabLinks {
514510
}
515511
}
516512

517-
.popupContent {
518-
display: none;
519-
position: absolute;
520-
border: 1px solid #ccc;
521-
margin: 0;
522-
padding: 3px;
523-
background-color: $white;
524-
z-index: 2;
525-
box-shadow: 2px 2px 3px #666;
526-
}
527-
528513
div {
529514
&#logTable {
530515
padding-top: 10px;

‎public/themes/metro/scss/_common.scss‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -347,10 +347,6 @@ select {
347347
clear: both;
348348
}
349349

350-
.paddingtop {
351-
padding-top: 1em;
352-
}
353-
354350
.separator {
355351
color: #fff;
356352
}
@@ -766,16 +762,6 @@ div.tabLinks {
766762
}
767763
}
768764

769-
.popupContent {
770-
display: none;
771-
position: absolute;
772-
border: 1px solid #ccc;
773-
margin: 0;
774-
padding: 3px;
775-
background-color: #fff;
776-
z-index: 2;
777-
}
778-
779765
div {
780766
&#logTable {
781767
padding-top: 10px;

‎public/themes/original/scss/_common.scss‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,6 @@ button {
7777
clear: both;
7878
}
7979

80-
.paddingtop {
81-
padding-top: 1em;
82-
}
83-
8480
div.null_div {
8581
height: 20px;
8682
text-align: center;
@@ -553,17 +549,6 @@ div.tabLinks {
553549
}
554550
}
555551

556-
.popupContent {
557-
display: none;
558-
position: absolute;
559-
border: 1px solid #ccc;
560-
margin: 0;
561-
padding: 3px;
562-
box-shadow: 2px 2px 3px #666;
563-
background-color: white;
564-
z-index: 2;
565-
}
566-
567552
div#logTable {
568553
padding-top: 10px;
569554
clear: both;

‎public/themes/pmahomme/scss/_common.scss‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -237,10 +237,6 @@ select {
237237
clear: both;
238238
}
239239

240-
.paddingtop {
241-
padding-top: 1em;
242-
}
243-
244240
.separator {
245241
color: #fff;
246242
text-shadow: 0 1px 0 #000;
@@ -700,17 +696,6 @@ div.tabLinks {
700696
}
701697
}
702698

703-
.popupContent {
704-
display: none;
705-
position: absolute;
706-
border: 1px solid #ccc;
707-
margin: 0;
708-
padding: 3px;
709-
background-color: #fff;
710-
z-index: 2;
711-
box-shadow: 2px 2px 3px #666;
712-
}
713-
714699
div {
715700
&#logTable {
716701
padding-top: 10px;

0 commit comments

Comments
 (0)