luci-mod-network: change port status layout in vlan filter config

[project/luci.git] / modules / luci-mod-network / htdocs / luci-static / resources / tools / network.js

diff --git a/modules/luci-mod-network/htdocs/luci-static/resources/tools/network.js b/modules/luci-mod-network/htdocs/luci-static/resources/tools/network.js
index ce6388b6cd79f5026a57e473490036ed8e11bae7..88d268e404b28f1a30b17c1df2751873c12e4252 100644 (file)
--- a/modules/luci-mod-network/htdocs/luci-static/resources/tools/network.js
+++ b/modules/luci-mod-network/htdocs/luci-static/resources/tools/network.js
@@ -108,25 +108,38 @@ function updatePortStatus(node, dev) {
        var carrier = dev.getCarrier(),
            duplex = dev.getDuplex(),
            speed = dev.getSpeed(),
-           desc;
-
-       if (carrier && speed > 0 && duplex != null)
-               desc = E('abbr', {
-                       'title': '%d MBit/s, %s'.format(speed, duplex == 'full' ? _('full-duplex') : _('half-duplex'))
-               }, [ '%d%s'.format(speed, duplex == 'full' ? 'FD' : 'HD') ]);
-       else if (carrier)
-               desc = document.createTextNode(_('Connected'));
-       else
-               desc = document.createTextNode(_('no link'));
+           desc, title;
+
+       if (carrier && speed > 0 && duplex != null) {
+               desc = '%d%s'.format(speed, duplex == 'full' ? 'FD' : 'HD');
+               title = '%s, %d MBit/s, %s'.format(_('Connected'), speed, duplex == 'full' ? _('full-duplex') : _('half-duplex'));
+       }
+       else if (carrier) {
+               desc = _('Connected');
+       }
+       else {
+               desc = _('no link');
+       }
+
+       dom.content(node, [
+               E('img', {
+                       'class': 'middle',
+                       'src': L.resource('icons/port_%s.png').format(carrier ? 'up' : 'down')
+               }),
+               '\x0a', desc
+       ]);
 
-       dom.content(node, [ desc ]);
+       if (title)
+               node.setAttribute('data-tooltip', title);
+       else
+               node.removeAttribute('data-tooltip');
 
        return node;
 }
 
 function renderPortStatus(dev) {
        return updatePortStatus(E('span', {
-               'class': 'port-status-link',
+               'class': 'ifacebadge port-status-link',
                'data-device': dev.getName()
        }), dev);
 }