1
0
Fork 0
mirror of https://github.com/Ylianst/MeshCentral.git synced 2025-03-09 15:40:18 +00:00

Web app improvements and support for high SPI screens.

This commit is contained in:
Ylian Saint-Hilaire 2020-12-07 19:13:31 -08:00
parent a7c7ee7e66
commit c99048be13
16 changed files with 184 additions and 208 deletions

View file

@ -52,6 +52,7 @@
.i1 {
background: url(../images/icons50.png) 0px 0px;
background-image: -webkit-image-set(url(../images/webp/icons50.webp) 1x, url(../images/webp/icons100.webp) 2x);
height: 50px;
width: 50px;
border: none;
@ -59,6 +60,7 @@
.i2 {
background: url(../images/icons50.png) -50px 0px;
background-image: -webkit-image-set(url(../images/webp/icons50.webp) 1x, url(../images/webp/icons100.webp) 2x);
height: 50px;
width: 50px;
border: none;
@ -66,6 +68,7 @@
.i3 {
background: url(../images/icons50.png) -100px 0px;
background-image: -webkit-image-set(url(../images/webp/icons50.webp) 1x, url(../images/webp/icons100.webp) 2x);
height: 50px;
width: 50px;
border: none;
@ -73,6 +76,7 @@
.i4 {
background: url(../images/icons50.png) -150px 0px;
background-image: -webkit-image-set(url(../images/webp/icons50.webp) 1x, url(../images/webp/icons100.webp) 2x);
height: 50px;
width: 50px;
border: none;
@ -80,6 +84,7 @@
.i5 {
background: url(../images/icons50.png) -200px 0px;
background-image: -webkit-image-set(url(../images/webp/icons50.webp) 1x, url(../images/webp/icons100.webp) 2x);
height: 50px;
width: 50px;
border: none;
@ -87,6 +92,7 @@
.i6 {
background: url(../images/icons50.png) -250px 0px;
background-image: -webkit-image-set(url(../images/webp/icons50.webp) 1x, url(../images/webp/icons100.webp) 2x);
height: 50px;
width: 50px;
border: none;
@ -94,6 +100,7 @@
.i7 {
background: url(../images/icons50.png) -300px 0px;
background-image: -webkit-image-set(url(../images/webp/icons50.webp) 1x, url(../images/webp/icons100.webp) 2x);
height: 50px;
width: 50px;
border: none;
@ -101,6 +108,7 @@
.i8 {
background: url(../images/icons50.png) -350px 0px;
background-image: -webkit-image-set(url(../images/webp/icons50.webp) 1x, url(../images/webp/icons100.webp) 2x);
height: 50px;
width: 50px;
border: none;
@ -146,15 +154,15 @@
float: left;
}
.NotifyIconSmall1 { width:24px; height:24px; background: url(../images/notify24.png) 0px 0px; }
.NotifyIconSmall2 { width:24px; height:24px; background: url(../images/notify24.png) -24px 0px; }
.NotifyIconSmall3 { width:24px; height:24px; background: url(../images/notify24.png) -48px 0px; }
.NotifyIconSmall4 { width:24px; height:24px; background: url(../images/notify24.png) -72px 0px; }
.NotifyIconSmall5 { width:24px; height:24px; background: url(../images/notify24.png) -96px 0px; }
.NotifyIconSmall6 { width:24px; height:24px; background: url(../images/notify24.png) -120px 0px; }
.NotifyIconSmall7 { width:24px; height:24px; background: url(../images/notify24.png) -144px 0px; }
.NotifyIconSmall8 { width:24px; height:24px; background: url(../images/notify24.png) -168px 0px; }
.NotifyIconSmall9 { width:24px; height:24px; background: url(../images/notify24.png) -192px 0px; }
.NotifyIconSmall1 { width:24px; height:24px; background: url(../images/notify24.png) 0px 0px; background-image: -webkit-image-set(url(../images/webp/notify24.webp) 1x, url(../images/webp/notify48.webp) 2x); }
.NotifyIconSmall2 { width:24px; height:24px; background: url(../images/notify24.png) -24px 0px; background-image: -webkit-image-set(url(../images/webp/notify24.webp) 1x, url(../images/webp/notify48.webp) 2x); }
.NotifyIconSmall3 { width:24px; height:24px; background: url(../images/notify24.png) -48px 0px; background-image: -webkit-image-set(url(../images/webp/notify24.webp) 1x, url(../images/webp/notify48.webp) 2x); }
.NotifyIconSmall4 { width:24px; height:24px; background: url(../images/notify24.png) -72px 0px; background-image: -webkit-image-set(url(../images/webp/notify24.webp) 1x, url(../images/webp/notify48.webp) 2x); }
.NotifyIconSmall5 { width:24px; height:24px; background: url(../images/notify24.png) -96px 0px; background-image: -webkit-image-set(url(../images/webp/notify24.webp) 1x, url(../images/webp/notify48.webp) 2x); }
.NotifyIconSmall6 { width:24px; height:24px; background: url(../images/notify24.png) -120px 0px; background-image: -webkit-image-set(url(../images/webp/notify24.webp) 1x, url(../images/webp/notify48.webp) 2x); }
.NotifyIconSmall7 { width:24px; height:24px; background: url(../images/notify24.png) -144px 0px; background-image: -webkit-image-set(url(../images/webp/notify24.webp) 1x, url(../images/webp/notify48.webp) 2x); }
.NotifyIconSmall8 { width:24px; height:24px; background: url(../images/notify24.png) -168px 0px; background-image: -webkit-image-set(url(../images/webp/notify24.webp) 1x, url(../images/webp/notify48.webp) 2x); }
.NotifyIconSmall9 { width:24px; height:24px; background: url(../images/notify24.png) -192px 0px; background-image: -webkit-image-set(url(../images/webp/notify24.webp) 1x, url(../images/webp/notify48.webp) 2x); }
.gray {
/*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");*/ /* Firefox 10+, Firefox on Android */
@ -442,7 +450,7 @@
<div id=xdevicesBar style="position:absolute;overflow-y:auto;height:34px;left:0;right:0;bottom:0px;background-color:#aaa">
<div style="margin:4px">
<span style="width:20px;display:inline-block;text-align:center;cursor:pointer;font-size:16px" onclick=clearSearchInput()><b>X</b></span>
<input id=SearchInput type=text placeholder=Filter onchange=onDeviceSearchChanged(event) onkeyup=onDeviceSearchChanged(event) autocomplete=off style="padding:2px;margin:0;height:20px" />&nbsp;
<input id=SearchInput autocomplete=off type=search placeholder=Filter onchange=onDeviceSearchChanged(event) onkeyup=onDeviceSearchChanged(event) style="padding:2px;margin:0;height:20px" />&nbsp;
<label class=noselect><input type=checkbox id=RealNameCheckBox onclick=onRealNameCheckBox() />OS Name</label>
<label class=noselect><input type=checkbox id=OnlineCheckBox onclick=onOnlineCheckBox(event) />Online</label>
</div>
@ -2359,9 +2367,7 @@
var onDevicesTouchActive = false;
var onDevicesScrollnagleTimer = null;
function onDevicesScroll() {
if (onDevicesScrollnagleTimer != null) { clearTimeout(onDevicesScrollnagleTimer); onDevicesScrollnagleTimer = null; }
if (onDevicesTouchActive) return;
onDevicesScrollnagleTimer = setTimeout(onDevicesScrollEx, 50);
if (onDevicesScrollnagleTimer == null) { onDevicesScrollnagleTimer = setTimeout(onDevicesScrollEx, 250); }
}
function onDeviceTouch(x) {
@ -4021,7 +4027,7 @@
var m = hardware.windows.osinfo;
if (m.OSArchitecture) { x += addDetailItem("Architecture", EscapeHtml(m.OSArchitecture), s); }
}
if (x != '') { sections.push({ name: "Operating System", html: x, img: 'software32.png' }); }
if (x != '') { sections.push({ name: "Operating System", html: x, img: 'software' }); }
}
// MeshAgent
@ -4052,7 +4058,7 @@
}
}
}
if (x != '') { sections.push({ name: "Mesh Agent", html: x, img: 'meshagent32.png' }); }
if (x != '') { sections.push({ name: "Mesh Agent", html: x, img: 'meshagent' }); }
}
// Networking
@ -4094,7 +4100,7 @@
x += '</div>';
}
x += '</table>';
if (x != '') { sections.push({ name: "Networking", html: x, img: 'networking64.png' }); }
if (x != '') { sections.push({ name: "Networking", html: x, img: 'networking' }); }
}
// Attribute: Intel AMT
@ -4107,7 +4113,7 @@
x += addDetailItem("Provisioning State", ((node.intelamt.state) ? (provisioningStates[node.intelamt.state]) : ('<i>' + "Unknown" + '</i>')) + provisioningMode, s);
x += addDetailItem("Security", (node.intelamt.tls == 1) ? "Secured using TLS" : "TLS is not setup", s);
x += addDetailItem("Admin Credentials", (node.intelamt.user == null || node.intelamt.user == '') ? "Not Known" : "Known", s);
if (x != '') { sections.push({ name: "Intel&reg; Active Management Technology (Intel&reg; AMT)", html: x, img: 'amt32.png' }); }
if (x != '') { sections.push({ name: "Intel&reg; Active Management Technology (Intel&reg; AMT)", html: x, img: 'amt' }); }
}
if (hardware.identifiers) {
@ -4115,7 +4121,7 @@
// BIOS
if (ident.bios_vendor) { x += addDetailItem("Vendor", EscapeHtml(ident.bios_vendor), s); }
if (ident.bios_version) { x += addDetailItem("Version", EscapeHtml(ident.bios_version), s); }
if (x != '') { sections.push({ name: "BIOS", html: x, img: 'chip32.png' }); }
if (x != '') { sections.push({ name: "BIOS", html: x, img: 'chip' }); }
// Motherboard
x = '';
@ -4126,7 +4132,7 @@
if (ident.product_uuid) { x += addDetailItem("Identifier", EscapeHtml(ident.product_uuid), s); }
if (ident.cpu_name) { x += addDetailItem("CPU", EscapeHtml(ident.cpu_name).split('(TM)').join('&trade;').split('(R)').join('&reg;'), s); }
if (ident.gpu_name) { for (var i in ident.gpu_name) { x += addDetailItem("GPU", EscapeHtml(ident.gpu_name[i]).split('(TM)').join('&trade;').split('(R)').join('&reg;'), s); } }
if (x != '') { sections.push({ name: "Motherboard", html: x, img: 'motherboard32.png' }); }
if (x != '') { sections.push({ name: "Motherboard", html: x, img: 'motherboard' }); }
}
if (hardware.windows) {
@ -4147,7 +4153,7 @@
}
x += '</table>';
if (x != '') { sections.push({ name: "Memory", html: x, img: 'ram32.png' }); }
if (x != '') { sections.push({ name: "Memory", html: x, img: 'ram' }); }
}
}
@ -4174,7 +4180,7 @@
}
x += '</table>';
if (x != '') { sections.push({ name: "Storage", html: x, img: 'storage32.png' }); }
if (x != '') { sections.push({ name: "Storage", html: x, img: 'storage' }); }
}
// Render the sections
@ -4184,7 +4190,7 @@
x += '<div class=DevSt style=margin-bottom:3px;margin-left:4px><b>' + sections[i].name + '</b></div><div style=margin-bottom:10px;margin-left:4px>' + sections[i].html + '</div>';
} else {
x += '<table style=width:100%><tr>';
x += '<td style=width:32px;vertical-align:top><img src=images/details/' + sections[i].img + ' border=0 width=32 /></td>'; // height=12
x += '<td style=width:32px;vertical-align:top><img src=images/details/' + sections[i].img + '32.png srcset="images/details/' + sections[i].img + '64.png 2x" border=0 width=32 /></td>'; // height=12
x += '<td><div class=DevSt style=margin-bottom:3px;margin-left:4px><b>' + sections[i].name + '</b></div><div style=margin-bottom:10px;margin-left:4px>' + sections[i].html + '</div></td>';
x += '</tr></table>';
}