fix menu bar and swap icons in bootstrap
Signed-off-by: si458 <simonsmith5521@gmail.com>
si458 committed
Oct 28, 2024 at 13:35 UTC
aa7767f37cb91aeb6f3511c03877c92c9e3dfe62
1 file changed
+65
-54
views/default3.handlebars
+65
-54
@@ -429,40 +429,47 @@
429
</div>
430
</div>
431
</div>
432
- <div class="d-flex align-items-center" id="devListToolbar" style="background: linear-gradient(180deg,#fff,#fff,#e9ecef);padding:5px;">
433
- <div>
434
- <img style="cursor:pointer;margin-top:4px;display:none;" title="Collapse All" id="CollapseAllButton" class="mb-1 me-1" src="images/icon-collapse.png" loading=lazy width=9 height=11 onclick="cmexpandaction(2)" />
435
- <img style="cursor:pointer;margin-top:4px;display:none;" title="Expand All" id="ExpandAllButton" class="mb-1 me-1" src="images/icon-expand.png" loading=lazy width=9 height=11 onclick="cmexpandaction(1)" />
436
- <input type=button class="btn btn-outline-primary me-2 mb-1 btn-sm" id=SelectAllButton onclick="selectallButtonFunction();" value="Select All" />
437
- <input type=button class="btn btn-outline-primary me-2 mb-1 btn-sm" id=GroupActionButton disabled="disabled" value="Group Action" onclick=groupActionFunction() />
438
- <input type=button id=ScrollToTopButton onclick="onDevicesScroll(true);" class="btn btn-outline-primary me-2 mb-1 btn-sm" value="Scroll To Top" />
439
- <input type="text" id=SearchInput class="form-control-sm me-2 mb-1 btn-sm" style="width: auto;" placeholder="Filter">
440
- <select class="form-select-sm me-2 mb-1" style="width: auto;" id=DevFilterSelect onchange=onOnlineCheckBox(event) title="Device Filter">
441
- <option value=0 selected>All</option>
442
- <option value=1>Online</option>
443
- <option value=5>Offline</option>
444
- <option value=2>Sessions</option>
445
- <option value=3>Starred</option>
446
- <option value=4>Intel® AMT</option>
447
- <option value=6>Help</option>
448
- <option value=7>Tagged</option>
449
- <option value=8>Untagged</option>
450
- </select>
451
- <label><input class="form-check-input me-2" type=checkbox id=RealNameCheckBox onclick=onRealNameCheckBox() /> <span title="Show devices operating system name">OS Name</span></label>
452
- <label style="display:none"><input type=checkbox id=OnlineCheckBox class="form-check-input me-2" onclick=onOnlineCheckBox(event) /><span title="Only show devices that are online">Online</span></label>
453
- <span id="devsCustomUIBar"></span>
454
- </div>
455
- </div>
432
<table id="devListToolbarSpan" class="noselect">
433
<tr>
458
- {{!-- <td class=h1></td> --}}
434
+ <td id="devListToolbar" style="background: linear-gradient(180deg,#fff,#fff,#e9ecef);padding:5px;">
435
+ <div>
436
+ <span class="fa-layers fa-fw" role="button" style="display:none" title="Collapse All" id="CollapseAllButton" onclick="cmexpandaction(2)">
437
+ <i class="fa-solid fa-chevron-up" data-fa-transform="down-6"></i>
438
+ <i class="fa-solid fa-chevron-down" data-fa-transform="up-6"></i>
439
+ </span>
440
+ <span class="fa-layers fa-fw" role="button" style="display:none" title="Expand All" id="ExpandAllButton" onclick="cmexpandaction(1)">
441
+ <i class="fa-solid fa-chevron-up" data-fa-transform="up-6"></i>
442
+ <i class="fa-solid fa-chevron-down" data-fa-transform="down-6"></i>
443
+ </span>
444
+ <input type=button class="btn btn-outline-primary me-2 mb-1 btn-sm" id=SelectAllButton onclick="selectallButtonFunction();" value="Select All" />
445
+ <input type=button class="btn btn-outline-primary me-2 mb-1 btn-sm" id=GroupActionButton disabled="disabled" value="Group Action" onclick=groupActionFunction() />
446
+ <input type=button id=ScrollToTopButton onclick="onDevicesScroll(true);" class="btn btn-outline-primary me-2 mb-1 btn-sm" value="Scroll To Top" />
447
+ <input type="text" id=SearchInput class="form-control-sm me-2 mb-1 btn-sm" style="width: auto;" placeholder="Filter">
448
+ <select class="form-select-sm me-2 mb-1" style="width: auto;" id=DevFilterSelect onchange=onOnlineCheckBox(event) title="Device Filter">
449
+ <option value=0 selected>All</option>
450
+ <option value=1>Online</option>
451
+ <option value=5>Offline</option>
452
+ <option value=2>Sessions</option>
453
+ <option value=3>Starred</option>
454
+ <option value=4>Intel® AMT</option>
455
+ <option value=6>Help</option>
456
+ <option value=7>Tagged</option>
457
+ <option value=8>Untagged</option>
458
+ </select>
459
+ <label><input class="form-check-input me-2" type=checkbox id=RealNameCheckBox onclick=onRealNameCheckBox() /> <span title="Show devices operating system name">OS Name</span></label>
460
+ <label style="display:none"><input type=checkbox id=OnlineCheckBox class="form-check-input me-2" onclick=onOnlineCheckBox(event) /><span title="Only show devices that are online">Online</span></label>
461
+ <span id="devsCustomUIBar"></span>
462
+ </div>
463
+ </td>
464
<td id=kvmListToolbar class=style14 style="display:none">
460
- <img style="cursor:pointer;margin-top:4px;display:none" title="Collapse All"
461
- id="CollapseAllButton2" src="images/icon-collapse.png" loading=lazy width=9 height=11
462
- onclick="cmexpandaction(2)" />
463
- <img style="cursor:pointer;margin-top:4px;display:none" title="Expand All"
464
- id="ExpandAllButton2" src="images/icon-expand.png" loading=lazy width=9 height=11
465
- onclick="cmexpandaction(1)" />
465
+ <span class="fa-layers fa-fw" role="button" style="display:none" title="Collapse All" id="CollapseAllButton2" onclick="cmexpandaction(2)">
466
+ <i class="fa-solid fa-chevron-up" data-fa-transform="down-6"></i>
467
+ <i class="fa-solid fa-chevron-down" data-fa-transform="up-6"></i>
468
+ </span>
469
+ <span class="fa-layers fa-fw" role="button" style="display:none" title="Expand All" id="ExpandAllButton2" onclick="cmexpandaction(1)">
470
+ <i class="fa-solid fa-chevron-up" data-fa-transform="up-6"></i>
471
+ <i class="fa-solid fa-chevron-down" data-fa-transform="down-6"></i>
472
+ </span>
473
<input type="button" onclick="connectAllKvmFunction()" value="Connect All" />
474
<input type="button" onclick="disconnectAllKvmFunction()" value="Disconnect All" />
475
<input type="button" onclick="onDevicesScroll(true);" value="Scroll To Top" />
@@ -485,9 +492,7 @@
492
<input type=button id=refreshmap title="Reset map view" value=Reset
493
onclick=refreshMap(false,true) />
494
</td>
488
- <td class="auto-style1" style=height:100%>
489
- <i class="fa-solid fa-gear" style="display:none;cursor:pointer;margin-top:3px"
490
- id=devListToolbarSettings onclick="onDeviceViewSettings()"></i>
495
+ <td class="d-flex justify-content-end align-items-center" style=height:100%>
496
<div style="display:none" id=devListToolbarView>
497
View
498
<select id=viewselect onchange=onDeviceViewChange()>
@@ -498,6 +503,15 @@
503
<option value=5>Desktops</option>
504
</select>
505
</div>
506
+ <div style="display:none" id=devListToolbarSize>
507
+ Size
508
+ <select id=sizeselect class="form-select-sm me-2" onchange=onDeviceViewChange()>
509
+ <option value=0>Small</option>
510
+ <option value=1>Medium</option>
511
+ <option value=2>Large</option>
512
+ </select>
513
+
514
+ </div>
515
<div style="display:none" id=devListToolbarSort>
516
Sort
517
<select id=sortselect class="form-select-sm me-2" onchange=mainUpdate(6)>
@@ -510,17 +524,8 @@
524
</select>
525
526
</div>
513
- <div style="display:none" id=devListToolbarSize>
514
- Size
515
- <select id=sizeselect class="form-select-sm me-2" onchange=onDeviceViewChange()>
516
- <option value=0>Small</option>
517
- <option value=1>Medium</option>
518
- <option value=2>Large</option>
519
- </select>
520
-
521
- </div>
527
+ <i class="fa-solid fa-gear" role="button" id=devListToolbarSettings onclick="onDeviceViewSettings()"></i>
528
</td>
523
- {{!-- <td class=h2></td> --}}
529
</tr>
530
</table>
531
<div id=NoMeshesPanel style="display:none">
@@ -5099,7 +5104,7 @@
5104
r += '</span>';
5105
if ((view == 1) || (view == 2) || (view == 3) || (view == 5)) {
5106
var collapsed = CollapsedGroups[node.meshid];
5102
- r += '<img class=collapseImage cmenu=expandAllContextMenu id="DevxColImg' + deviceHeaderId + '" src=images/c' + ((collapsed === true) ? '1' : '2') + '.png height=8 width=8 style=margin-left:2px;margin-right:2px;cursor:pointer onclick=toggleCollapseGroup("' + deviceHeaderId + '","' + node.meshid + '",' + view + ')></img>'; // Collapse action
5107
+ r += '<i role="button" cmenu=expandAllContextMenu onclick=toggleCollapseGroup("' + deviceHeaderId + '","' + node.meshid + '",' + view + ') class="fa-fw fa-solid ' + ((collapsed === true) ? 'fa-chevron-right' : 'fa-chevron-down') + '" id="DevxColImg' + deviceHeaderId + '"></i>';
5108
}
5109
if (meshes[node.meshid]) {
5110
r += '<span id=MxMESH cmenu=meshContextMenu tabindex=0 style=cursor:pointer onclick=gotoMesh("' + node.meshid + '") onkeypress="if (event.key==\'Enter\') gotoMesh(\'' + node.meshid + '\')">' + EscapeHtml(meshes[node.meshid].name) + '</span>' + getMeshActions(mesh2, meshrights) + '</div>';
@@ -5125,7 +5130,7 @@
5130
r += '<div class=DevSt style=width:100%;padding-top:4px><span id=DevxHeader' + deviceHeaderId + ' class=devHeaderx style=float:right></span>';
5131
if ((view == 1) || (view == 2) || (view == 3) || (view == 5)) {
5132
var collapsed = CollapsedGroups['pwr:' + pwr];
5128
- r += '<img class=collapseImage cmenu=expandAllContextMenu id="DevxColImg' + deviceHeaderId + '" src=images/c' + ((collapsed === true) ? '1' : '2') + '.png height=8 width=8 style=margin-left:2px;margin-right:2px;cursor:pointer onclick=toggleCollapseGroup("' + deviceHeaderId + '","pwr:' + pwr + '",' + view + ')></img>'; // Collapse action
5133
+ r += '<i role="button" cmenu=expandAllContextMenu onclick=toggleCollapseGroup("' + deviceHeaderId + '","pwr:' + pwr + '",' + view + ') class="fa-fw fa-solid ' + ((collapsed === true) ? 'fa-chevron-right' : 'fa-chevron-down') + '" id="DevxColImg' + deviceHeaderId + '"></i>'; // Collapse action
5134
}
5135
r += '<span>' + PowerStateStr2(node.pwr) + '</span></div>';
5136
@@ -5201,12 +5206,12 @@
5206
if (view == 2) {
5207
r += '<tr><td colspan=' + colcount + '><div class=DevSt style=width:100%;padding-top:4px>';
5208
var collapsed = CollapsedGroups['tag:' + encodeURIComponentEx(i)];
5204
- r += '<img class=collapseImage cmenu=expandAllContextMenu id="DevxColImg' + tagDeviceHeaderId + '" src=images/c' + ((collapsed === true) ? '1' : '2') + '.png height=8 width=8 style=margin-left:2px;margin-right:2px;cursor:pointer onclick=toggleCollapseGroup("' + tagDeviceHeaderId + '","tag:' + encodeURIComponentEx(i) + '",2)></img>'; // Collapse action
5209
+ r += '<i role="button" cmenu=expandAllContextMenu onclick=toggleCollapseGroup("' + tagDeviceHeaderId + '","tag:' + encodeURIComponentEx(i) + '",2) class="fa-fw fa-solid ' + ((collapsed === true) ? 'fa-chevron-right' : 'fa-chevron-down') + '" id="DevxColImg' + tagDeviceHeaderId + '"></i>'; // Collapse action
5210
r += '<span class=devHeaderx style=float:right>' + groupCount[i] + ' node' + ((groupCount[i] > 1) ? 's' : '') + '</span><span>' + EscapeHtml(i).split('|').join(' → ').split('**INDV*~*DEVS**').join('<i>' + "Individual Devices" + '</i>') + '</span></div>' + groups[i];
5211
} else {
5212
r += '<div class=DevSt style=width:100%;padding-top:4px><span class=devHeaderx style=float:right>' + format(((groupCount[i] > 1) ? '{0} nodes' : '{0} node'), groupCount[i]) + '</span>';
5213
var collapsed = CollapsedGroups['tag:' + encodeURIComponentEx(i)];
5209
- r += '<img class=collapseImage cmenu=expandAllContextMenu id="DevxColImg' + tagDeviceHeaderId + '" src=images/c' + ((collapsed === true) ? '1' : '2') + '.png height=8 width=8 style=margin-left:2px;margin-right:2px;cursor:pointer onclick=toggleCollapseGroup("' + tagDeviceHeaderId + '","tag:' + encodeURIComponentEx(i) + '")></img>'; // Collapse action
5214
+ r += '<i role="button" cmenu=expandAllContextMenu onclick=toggleCollapseGroup("' + tagDeviceHeaderId + '","tag:' + encodeURIComponentEx(i) + '") class="fa-fw fa-solid ' + ((collapsed === true) ? 'fa-chevron-right' : 'fa-chevron-down') + '" id="DevxColImg' + tagDeviceHeaderId + '"></i>'; // Collapse action
5215
r += '<span>' + EscapeHtml(i).split('|').join(' → ').split('**INDV*~*DEVS**').join('<i>' + "Individual Devices" + '</i>') + '</span></div>';
5216
r += '<div id=DevxCol' + tagDeviceHeaderId + ((collapsed === true) ? ' style=display:none' : '') + '>' + groups[i] + '</div>'; // Open collapse div
5217
}
@@ -5241,7 +5246,7 @@
5246
// Collapsing header & start collapsing area
5247
deviceHeaderId2++;
5248
var collapsed = CollapsedGroups[mesh._id];
5244
- r += '<img class=collapseImage cmenu=expandAllContextMenu id="DevxColImg' + deviceHeaderId2 + '" src=images/c' + ((collapsed === true) ? '1' : '2') + '.png height=8 width=8 style=margin-left:2px;margin-right:2px;cursor:pointer onclick=toggleCollapseGroup("' + deviceHeaderId2 + '","' + mesh._id + '")></img>'; // Collapse action
5249
+ r += '<i role="button" cmenu=expandAllContextMenu onclick=toggleCollapseGroup("' + deviceHeaderId2 + '","' + mesh._id + '") class="fa-fw fa-solid ' + ((collapsed === true) ? 'fa-chevron-right' : 'fa-chevron-down') + '" id="DevxColImg' + deviceHeaderId2 + '"></i>'; // Collapse action
5250
5251
r += '<span id=MxMESH style=cursor:pointer onclick=gotoMesh("' + mesh._id + '")>' + EscapeHtml(mesh.name) + '</span><span>';
5252
r += getMeshActions(mesh, meshrights);
@@ -5827,7 +5832,13 @@
5832
if (x) { delete CollapsedGroups[id2]; } else { CollapsedGroups[id2] = true; }
5833
QV('DevxCol' + id, x);
5834
}
5830
- Q('DevxColImg' + id).src = x ? 'images/c2.png' : 'images/c1.png';
5835
+ if (x) {
5836
+ QC('DevxColImg' + id).remove('fa-chevron-right');
5837
+ QC('DevxColImg' + id).add('fa-chevron-down');
5838
+ } else {
5839
+ QC('DevxColImg' + id).remove('fa-chevron-down');
5840
+ QC('DevxColImg' + id).add('fa-chevron-right');
5841
+ }
5842
putstore('_collapse', JSON.stringify(CollapsedGroups));
5843
updateCollapseAllButton();
5844
onDevicesScrollEx();
@@ -9645,7 +9656,7 @@
9656
// Add the language and timezone of the browser to the server so the server can localize the time correctly.
9657
var tz = '';
9658
try { tz = '&tz=' + encodeURIComponentEx(Intl.DateTimeFormat().resolvedOptions().timeZone); } catch (ex) { }
9648
- QH('p10html2', '<table class="table table-striped align-middle text-center" cellpadding=2 cellspacing=0><thead><tr><th scope=col style=width:150px>' + "Day" + '</th><th scope=col>' + "7 Day Power State" + '<div class="float-end pe-1"><i role="button" onclick=downloadFile("devicepowerevents.ashx?id=' + currentNode._id + '&tf=' + new Date().getTimezoneOffset() + '&l=' + encodeURIComponentEx(getLang()) + tz + (urlargs.key ? ('&key=' + urlargs.key) : '') + '",null,true) title="' + "Download power events" + '" class="fas fa-download"></i></div></th></tr></thead><tbody>' + x + '</tbody></table>');
9659
+ QH('p10html2', '<table class="table table-striped align-middle text-center" cellpadding=2 cellspacing=0><thead><tr><th scope=col style=width:150px>' + "Day" + '</th><th scope=col>' + "7 Day Power State" + '<div class="float-end pe-1"><i role="button" onclick=downloadFile("devicepowerevents.ashx?id=' + currentNode._id + '&tf=' + new Date().getTimezoneOffset() + '&l=' + encodeURIComponentEx(getLang()) + tz + (urlargs.key ? ('&key=' + urlargs.key) : '') + '",null,true) title="' + "Download power events" + '" class="fa-solid fa-download"></i></div></th></tr></thead><tbody>' + x + '</tbody></table>');
9660
}
9661
9662
// Return a color for the given power state
@@ -16853,7 +16864,7 @@
16864
if (userdomain != '') { username += ', <span style=color:#26F>' + userdomain + '</span>'; }
16865
}
16866
16856
- if ((user.otpsecret > 0) || (user.otphkeys > 0) || ((user.otpekey == 1) && (features & 0x00800000)) || ((user.phone != null) && (features & 0x04000000))) { username += ' <i class="fas fa-key" title="' + "2nd factor authentication enabled" + '" style="margin-top:2px"></i>'; }
16867
+ if ((user.otpsecret > 0) || (user.otphkeys > 0) || ((user.otpekey == 1) && (features & 0x00800000)) || ((user.phone != null) && (features & 0x04000000))) { username += ' <i class="fa-solid fa-key" title="' + "2nd factor authentication enabled" + '" style="margin-top:2px"></i>'; }
16868
if (user.phone != null) { username += ' <i class="fa-solid fa-mobile-screen" title="' + "Verified phone number" + '" style="margin-top:2px"></i>'; }
16869
if ((user.siteadmin != null) && ((user.siteadmin & 32) != 0) && (user.siteadmin != 0xFFFFFFFF)) { username += ' <img src="images/padlock12.png" height=12 width=8 title="' + "Account is locked" + '" style="margin-top:2px" />'; }
16870
if ((user.msghandle != null) && (features2 & 0x02000000)) { username += ' <img src="images/messaging12.png" height=12 width=12 title="' + "Verified messaging account" + '" style="margin-top:2px" />'; }
@@ -18039,7 +18050,7 @@
18050
}
18051
18052
if ((features2 & 0x02000000) || (user.msghandle != null)) { // If user messaging is enabled on the server or user has a messaging handle
18042
- x += addDeviceAttribute("Messaging", '<span role=button onclick=p30editMessaging()><i class="fas fa-comment fa-xs" title="' + "Messaging enabled" + '" style="margin-top:2px"></i> ' + (user.msghandle ? user.msghandle : ('<i>' + "None" + '</i>')) + ' <i class="fa-solid fa-pencil fa-xs"></i></span>');
18053
+ x += addDeviceAttribute("Messaging", '<span role=button onclick=p30editMessaging()><i class="fa-solid fa-comment fa-xs" title="' + "Messaging enabled" + '" style="margin-top:2px"></i> ' + (user.msghandle ? user.msghandle : ('<i>' + "None" + '</i>')) + ' <i class="fa-solid fa-pencil fa-xs"></i></span>');
18054
}
18055
18056
// Display features
@@ -18111,7 +18122,7 @@
18122
if (user.otpdev > 0) { factors.push("Device Push"); }
18123
if ((user.phone != null) && (features & 0x04000000)) { factors.push("SMS"); }
18124
if ((user.msghandle != null) && (features2 & 0x04000000)) { factors.push("Messaging"); }
18114
- x += addDeviceAttribute("Security", '<i class="fas fa-key" title="' + "2nd factor authentication enabled" + '" style="margin-top:2px"></i> ' + factors.join(', '));
18125
+ x += addDeviceAttribute("Security", '<i class="fa-solid fa-key" title="' + "2nd factor authentication enabled" + '" style="margin-top:2px"></i> ' + factors.join(', '));
18126
}
18127
18128
x += '</table></div><br />';