Fix for #2420, changed how devices are displayed in devices view.
Ylian Saint-Hilaire committed
Mar 25, 2021 at 12:12 UTC
0302d30c226622132be61f1bdab723dbda870c2a
2 files changed
+76
-12
public/styles/style.css
+55
-2
@@ -850,8 +850,8 @@ NoMeshesPanel img {
850
851
.deviceBatterySmall {
852
position:absolute;
853
- left:20px;
854
- top:28px;
853
+ left:26px;
854
+ top:32px;
855
width:14px;
856
height:24px;
857
border:none;
@@ -1929,6 +1929,23 @@ a {
1929
width: 180px;
1930
}
1931
1932
+.g1t {
1933
+ background-position: 0% 0%;
1934
+ width: 14px;
1935
+ height: 100%;
1936
+ /* fallback (Opera) */
1937
+ /* Mozilla: */
1938
+ /* Chrome, Safari:*/
1939
+ background-image: linear-gradient(to right, #fff 0%, #c9c9c9 100%);
1940
+ background-color: #c9c9c9;
1941
+ background-repeat: repeat;
1942
+ background-attachment: scroll;
1943
+}
1944
+
1945
+.night .g1t {
1946
+ background-image: linear-gradient(to right, #000 0%, #333 100%);
1947
+}
1948
+
1949
.g1 {
1950
background-position: 0% 0%;
1951
width: 14px;
@@ -1972,6 +1989,23 @@ a {
1989
background-image: linear-gradient(to right, #000 0%, #444 100%);
1990
}
1991
1992
+.g2t {
1993
+ background-position: 0% 0%;
1994
+ width: 14px;
1995
+ height: 100%;
1996
+ /* fallback (Opera) */
1997
+ /* Mozilla: */
1998
+ /* Chrome, Safari:*/
1999
+ background-image: linear-gradient(to right, #c9c9c9 0%, #fff 100%);
2000
+ background-color: #c9c9c9;
2001
+ background-repeat: repeat;
2002
+ background-attachment: scroll;
2003
+}
2004
+
2005
+.night .g2t {
2006
+ background-image: linear-gradient(to right, #333 0%, #000 100%);
2007
+}
2008
+
2009
.g2 {
2010
background-position: 0% 0%;
2011
width: 14px;
@@ -2068,6 +2102,15 @@ a {
2102
background-image: linear-gradient(to right, #333 0%, #000 100%);
2103
}
2104
2105
+.e1t {
2106
+ font-size: large;
2107
+ margin-bottom: 3px;
2108
+ overflow: hidden;
2109
+ word-wrap: hyphenate;
2110
+ white-space: nowrap;
2111
+ text-overflow: ellipsis;
2112
+}
2113
+
2114
.e1 {
2115
font-size: large;
2116
margin-top: 4px;
@@ -2089,6 +2132,16 @@ a {
2132
background-color: #333;
2133
}
2134
2135
+.e2t {
2136
+ height: 100%;
2137
+ background-color: #c9c9c9;
2138
+}
2139
+
2140
+.night .e2t {
2141
+ color: #CCC;
2142
+ background-color: #333;
2143
+}
2144
+
2145
.e2s {
2146
background-color: #b9b9b9;
2147
}
views/default.handlebars
+21
-10
@@ -3509,14 +3509,14 @@
3509
setSessionActivity();
3510
var view = Q('viewselect').value;
3511
if (view == 1) {
3512
- var e = element.children[1].children[1];
3513
- e.children[0].classList.remove('g1s');
3514
- e.children[1].classList.remove('e2s');
3515
- e.children[2].classList.remove('g2s');
3512
+ var e = element.children[0].children[0].children[1].children[0].children[0].children[0];
3513
+ e.children[1].classList.remove('g1s');
3514
+ e.children[2].classList.remove('e2s');
3515
+ e.children[3].classList.remove('g2s');
3516
if (over == 1) {
3517
- e.children[0].classList.add('g1s');
3518
- e.children[1].classList.add('e2s');
3519
- e.children[2].classList.add('g2s');
3517
+ e.children[1].classList.add('g1s');
3518
+ e.children[2].classList.add('e2s');
3519
+ e.children[3].classList.add('g2s');
3520
}
3521
} else if (view == 2) {
3522
var e = element;
@@ -3978,7 +3978,7 @@
3978
if ((!node.conn) || (node.conn == 0)) { icon += ' gray'; }
3979
3980
if (view == 1) {
3981
- div.innerHTML = '<div id=devs cmenu=devsContentMenu onmouseover=devMouseHover(this,1) onmouseout=devMouseHover(this,0) style=width:100%;height:100%><div style=width:22px;height:50%;float:left;padding-top:12px><input class="' + node.meshid + ' DeviceCheckbox" onchange=p1devcheck(event) value=devid_' + node._id + ' type=checkbox ' + (checkedNodeids[node._id]?' checked':'') + '></div><div style=height:100%;cursor:pointer tabindex=0 onclick=gotoDevice(\'' + node._id + '\',null,null,event) onkeypress="if (event.key==\'Enter\') gotoDevice(\'' + node._id + '\',null,null,event)"><div class="i' + icon + '" style=width:50px;float:left></div><div style=height:100%><div class=g1></div><div class=e2 style=width:' + ((div.clientWidth) - 100) + 'px><div class=e1 title="' + title + '">' + name + '</div><div>' + NodeStateStr(node) + '</div></div><div class=g2></div></div></div>' + devNotify + '</div>';
3981
+ div.innerHTML = '<table id=devs cmenu=devsContentMenu onmouseover=devMouseHover(this,1) onmouseout=devMouseHover(this,0) style=width:100%;height:100%><tr><td style=width:22px><input class="' + node.meshid + ' DeviceCheckbox" onchange=p1devcheck(event) value=devid_' + node._id + ' type=checkbox ' + (checkedNodeids[node._id]?' checked':'') + '></td><td><table onclick=gotoDevice(\'' + node._id + '\',null,null,event) border=0 cellspacing=0 style=width:100%;height:100%;cursor:pointer><tr><td style=width:50px tabindex=0 onkeypress="if (event.key==\'Enter\') gotoDevice(\'' + node._id + '\',null,null,event)"><div class="i' + icon + '" style=width:50px></div></td><td class=g1t></td><td class=e2t><div class=e1t title="' + title + '">' + name + '</div><div>' + NodeStateStr(node) + '</div></td><td class=g2t></td></tr></table></td></tr></table>' + devNotify;
3982
} else if (view == 2) {
3983
var states = [];
3984
if (node.conn) {
@@ -4600,6 +4600,7 @@
4600
if ((node.conn & 16) != 0) { states.push('<span title="' + "MQTT connection to the device is active." + '">' + "MQTT" + '</span>'); }
4601
}
4602
if ((node.pwr != null) && (node.pwr != 0)) { states.push(powerStateStrings[node.pwr]); }
4603
+ if (states.length == 0) return ' ';
4604
return states.join(', ');
4605
}
4606
@@ -5017,7 +5018,12 @@
5018
showContextMenuDiv(contextmenudiv, event.pageX, event.pageY);
5019
5020
// Get the node and set the menu options
5020
- var nodeid = contextelement.children[1].attributes.onclick.value;
5021
+ var nodeid;
5022
+ if (Q('viewselect').value == 1) {
5023
+ nodeid = contextelement.children[0].children[0].children[1].children[0].attributes.onclick.value;
5024
+ } else {
5025
+ nodeid = contextelement.children[1].attributes.onclick.value;
5026
+ }
5027
var node = getNodeFromId(nodeid.substring(12, nodeid.length - 18));
5028
var mesh = meshes[node.meshid];
5029
var rights = GetNodeRights(node);
@@ -5059,7 +5065,12 @@
5065
}
5066
5067
function cmaction(action,event) {
5062
- var nodeid = contextelement.children[1].attributes.onclick.value;
5068
+ var nodeid;
5069
+ if (Q('viewselect').value == 1) {
5070
+ nodeid = contextelement.children[0].children[0].children[1].children[0].attributes.onclick.value;
5071
+ } else {
5072
+ nodeid = contextelement.children[1].attributes.onclick.value;
5073
+ }
5074
nodeid = nodeid.substring(12, nodeid.length - 18);
5075
if (action == 9) { Q('viewselect').value = 3; Q('viewselect').onchange(); Q('autoConnectDesktopCheckbox').checked = true; Q('autoConnectDesktopCheckbox').onclick(); } // Multi-Desktop
5076
if ((action > 0) && (action < 9)) {