iobroker.zigbee 1.5.5 → 1.6.6

package/.github/FUNDING.yml

@@ -1,3 +1,3 @@
 # These are supported funding model platforms
 
-custom: ['https://www.paypal.me/goofyk', 'https://paypal.me/pools/c/8gWlKqAfIF']
+custom: ['https://www.paypal.me/goofyk', 'https://paypal.me/ArthurRupp']

package/.github/workflows/test-and-release.yml

@@ -50,8 +50,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
-        os: [ubuntu-latest, windows-latest, macos-latest]
+        node-version: [12.x, 14.x, 16.x]
+        os: [ubuntu-latest, macos-latest]
 
     steps:
       - name: Checkout code
@@ -115,13 +115,13 @@ jobs:
 
 #     If you like, activate automated version publish to NPM
 #     Only if commit contains a version, see : https://github.com/AlCalzone/release-script
-#
-#      - name: Publish package to npm
-#        run: |
-#          npm config set //registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}
-#          npm whoami
-#          npm publish
-#
+
+      - name: Publish package to npm
+        run: |
+          npm config set //registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}
+          npm whoami
+          npm publish
+
 #      - name: Create Github Release
 #        uses: actions/create-release@v1
 #        env:
@@ -148,4 +148,4 @@ jobs:
 #        # sentry-cli releases set-commits $SENTRY_VERSION --auto
 #
 #        # Add the following line BEFORE finalize if sourcemap uploads are needed
-#        # sentry-cli releases files $SENTRY_VERSION upload-sourcemaps build/
+#        # sentry-cli releases files $SENTRY_VERSION upload-sourcemaps build/

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2020 Kirov Ilya <kirovilya@gmail.com>
+Copyright (c) 2018-2021 Kirov Ilya <kirovilya@gmail.com>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,11 +1,13 @@
 ![Logo](admin/zigbee.png)
 # ioBroker.zigbee
 
-![Number of Installations](http://iobroker.live/badges/zigbee-installed.svg) ![Number of Installations](http://iobroker.live/badges/zigbee-stable.svg) [![NPM version](http://img.shields.io/npm/v/iobroker.zigbee.svg)](https://www.npmjs.com/package/iobroker.zigbee)
-[![Downloads](https://img.shields.io/npm/dm/iobroker.zigbee.svg)](https://www.npmjs.com/package/iobroker.zigbee)
-[![Tests](https://travis-ci.org/ioBroker/ioBroker.zigbee.svg?branch=master)](https://travis-ci.org/ioBroker/ioBroker.zigbee)
+![Number of Installations](http://iobroker.live/badges/zigbee-installed.svg)
+![Number of Installations](http://iobroker.live/badges/zigbee-stable.svg)
+[![NPM version](http://img.shields.io/npm/v/iobroker.zigbee.svg)](https://www.npmjs.com/package/iobroker.zigbee)
 
-[![NPM](https://nodei.co/npm/iobroker.zigbee.png?downloads=true)](https://nodei.co/npm/iobroker.zigbee/)
+![Test and Release](https://github.com/ioBroker/iobroker.zigbee/workflows/Test%20and%20Release/badge.svg)
+[![Translation status](https://weblate.iobroker.net/widgets/adapters/-/zigbee/svg-badge.svg)](https://weblate.iobroker.net/engage/adapters/?utm_source=widget)
+[![Downloads](https://img.shields.io/npm/dm/iobroker.zigbee.svg)](https://www.npmjs.com/package/iobroker.zigbee)
 
 ## ioBroker adapter for Zigbee devices via TI cc2531/cc2530/cc26x2r/cc2538 and deCONZ ConBee/RaspBee.
 
@@ -15,7 +17,7 @@ With the Zigbee-coordinator based on Texas Instruments SoC cc253x (and others mo
 
 ### Texas Instruments SoC
 ..
-For work, you need one of the following devices, flashed with a special ZNP firmware: [cc2531, cc2530, cc26x2r, cc2538](https://github.com/Koenkk/Z-Stack-firmware)
+For work, you need one of the following Adapters [all are listed here](https://www.zigbee2mqtt.io/information/supported_adapters.html) , flashed with a special ZNP firmware: [cc2531, cc2530, cc26x2r, cc2538](https://github.com/Koenkk/Z-Stack-firmware)
 
 <span><img src="https://ae01.alicdn.com/kf/HTB1Httue3vD8KJjSsplq6yIEFXaJ/Wireless-Zigbee-CC2531-Sniffer-Bare-Board-Packet-Protocol-Analyzer-Module-USB-Interface-Dongle-Capture-Packet.jpg_640x640.jpg" width="100"></span>
 <span><img src="http://img.dxcdn.com/productimages/sku_429478_2.jpg" width="100"></span>
@@ -95,15 +97,45 @@ Works with devices from this list https://github.com/ioBroker/ioBroker.zigbee/wi
 
 You can thank the authors by these links:
 * to Kirov Ilya https://www.paypal.me/goofyk
-* to Arthur Rupp https://paypal.me/pools/c/8gWlKqAfIF
+* to Arthur Rupp https://paypal.me/ArthurRupp
 
 <!--
     Placeholder for the next version (at the beginning of the line):
-    ### __WORK IN PROGRESS__
+    
+    https://github.com/AlCalzone/release-script#usage
+    npm run release minor -- --all 0.9.8 -> 0.10.0
+    npm run release patch -- --all 0.9.8 -> 0.9.9
+    npm run release prerelease beta -- --all v0.2.1 -> v0.2.2-beta.0
+    Placeholder for the next version (at the beginning of the line):
+    ### **WORK IN PROGRESS**
 -->
 
 ## Changelog
 
+### 1.6.1 (2021-08)
+* (kirovilya) herdsman compatibility
+
+
+### 1.6.0 (2021-08-09)
+## Attention! Attention! Attention! Attention! Attention! Attention! Attention!
+
+After introducing a new z-stack startup procedure into zigbee-herdsman, we got some problems with our adapter in version 1.5.6.
+This was discussed [here](https://github.com/ioBroker/ioBroker.zigbee/issues/1110) and [here](https://github.com/Koenkk/zigbee-herdsman/issues/376)
+
+Unfortunately, not all user sticks were able to work successfully with this new init routine. This mainly affected the TI cc2538 based sticks with the 2019 year's firmware. All subsequent firmwares and sticks have no problems when starting the adapter or they can be fixed.
+
+At the moment, there is no working solution to this problem, except for updating the firmware of such sticks to a newer one.
+As a fallback, it is proposed to use the old version of zigbee-herdsman 0.13.93, but some of the devices and functionality may not work.
+Therefore, we made a separate version 1.6.0o especially for this case. It can be installed from github at https://github.com/ioBroker/ioBroker.zigbee/tarball/old_herdsman
+
+* Update to latest zigbee-herdsman and zigbee-herdsman-converters
+* (PeterVoronov) Update support composite exposes
+* (kirovilya) UI fixes
+* (kirovilya) Sentry support
+
+### 1.5.6 (2021-05-26)
+* (kirovilya) new UI add
+
 ### 1.5.5 (2021-05-05)
 * Fixes for new zigbee-herdsman-converters
 * UI fixes
@@ -332,7 +364,7 @@ new Zigbee-herdsman features:
 ## License
 The MIT License (MIT)
 
-Copyright (c) 2018-2020 Kirov Ilya <kirovilya@gmail.com>
+Copyright (c) 2018-2021 Kirov Ilya <kirovilya@gmail.com>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/admin/adapter-settings.js

@@ -3,8 +3,33 @@ const path = location.pathname;
 const parts = path.split('/');
 parts.splice(-3);
 
-const socket   = io.connect('/', {path: parts.join('/') + '/socket.io'});
-const instance = window.location.search.slice(-1) || 0;
+const socket = io.connect('/', { path: parts.join('/') + '/socket.io' });
+var query = (window.location.search || '').replace(/^\?/, '').replace(/#.*$/, '');
+var args = {};
+let theme = null;
+
+// parse parameters
+query.trim().split('&').filter(function (t) { return t.trim(); }).forEach(function (b, i) {
+    const parts = b.split('=');
+    if (!i && parts.length === 1 && !isNaN(parseInt(b, 10))) {
+        args.instance = parseInt(b, 10);
+    }
+    var name = parts[0];
+    args[name] = parts.length === 2 ? parts[1] : true;
+
+    if (name === 'instance') {
+        args.instance = parseInt(args.instance, 10) || 0;
+    }
+
+    if (args[name] === 'true') {
+        args[name] = true;
+    } else if (args[name] === 'false') {
+        args[name] = false;
+    }
+});
+
+var instance = args.instance;
+
 let common   = null; // common information of adapter
 const host     = null; // host object on which the adapter runs
 const changed  = false;
@@ -71,6 +96,17 @@ function loadSettings(callback) {
             if (typeof load === 'undefined') {
                 alert('Please implement save function in your admin/index.html');
             } else {
+				// detect, that we are now in react container (themeNames = ['dark', 'blue', 'colored', 'light'])
+
+				const _query = query.split('&');
+
+				for (var q = 0; q < _query.length; q++) {
+					if (_query[q].indexOf('react=') !== -1) {
+						$('.adapter-container').addClass('react-' + _query[q].substring(6));
+						theme = 'react-' + _query[q].substring(6);
+					}
+                }
+
                 load(res.native, onChange);
             }
             if (typeof callback === 'function') {
@@ -205,4 +241,4 @@ function showMessage(message, title, icon) {
     }
     $dialogMessage.find('.dialog-text').html(message);
     $dialogMessage.modal().modal('open');
-}
+}

package/admin/admin.js

@@ -31,7 +31,7 @@ const updateCardInterval = setInterval(updateCardTimer, 6000);
 
 const savedSettings = [
     'port', 'panID', 'channel', 'disableLed', 'countDown', 'groups', 'extPanID', 'precfgkey', 'transmitPower',
-    'adapterType', 'debugHerdsman', 'disablePing', 'external',
+    'adapterType', 'debugHerdsman', 'disablePing', 'external', 'startWithInconsistent',
 ];
 
 function getDeviceByID(ID) {
@@ -154,10 +154,10 @@ function getGroupCard(dev) {
                 </div>`);
     const image = `<img src="img/group_${memberCount}.png" width="80px" onerror="this.onerror=null;this.src='img/unavailable.png';">`;
     const dashCard = getDashCard(dev,`img/group_${memberCount}.png` );
-    const card = `<div id="${id}" class="device">
-                  <div class="card hoverable">
+    const card = `<div id="${id}" class="device group">
+                  <div class="card hoverable flipable">
                     <div class="front face">${dashCard}</div>
-                    <div class="back face hide">
+                    <div class="back face">
                         <div class="card-content zcard">
                             <div class="flip" style="cursor: pointer">
                             <span class="top right small" style="border-radius: 50%">
@@ -187,12 +187,16 @@ function getGroupCard(dev) {
     return card;
 }
 
-
+function sanitizeModelParameter(parameter) {
+    const replaceByUnderscore = /[\s/]/g;
+    return parameter.replace(replaceByUnderscore, '_');
+}
 
 function getCard(dev) {
     const title = dev.common.name,
         id = dev._id,
-        type = (dev.common.type ? dev.common.type.replace('/','_'):'unknown'),
+        type = (dev.common.type ? dev.common.type : 'unknown'),
+        type_url = (dev.common.type ? sanitizeModelParameter(dev.common.type) : 'unknown'),
         img_src = dev.icon || dev.common.icon,
         rooms = [],
         lang = systemLang  || 'en';
@@ -206,7 +210,7 @@ function getCard(dev) {
     const room = rooms.join(',') || '&nbsp';
     const paired = (dev.paired) ? '' : '<i class="material-icons right">leak_remove</i>';
     const rid = id.split('.').join('_');
-    const modelUrl = (!type) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${type}.html" target="_blank" rel="noopener noreferrer">${type}</a>`;
+    const modelUrl = (!type) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${type_url}.html" target="_blank" rel="noopener noreferrer">${type}</a>`;
     const image = `<img src="${img_src}" width="80px" onerror="this.onerror=null;this.src='img/unavailable.png';">`,
         nwk = (dev.info && dev.info.device) ? dev.info.device._networkAddress : undefined,
         battery_cls = getBatteryCls(dev.battery),
@@ -226,9 +230,9 @@ function getCard(dev) {
         infoBtn = (nwk) ? `<button name="info" class="left btn-flat btn-small"><i class="material-icons icon-blue">info</i></button>` : '';
     const dashCard = getDashCard(dev);
     const card = `<div id="${id}" class="device">
-                  <div class="card hoverable">
+                  <div class="card hoverable flipable">
                     <div class="front face">${dashCard}</div>
-                    <div class="back face hide">
+                    <div class="back face">
                         <div class="card-content zcard">
                             <div class="flip" style="cursor: pointer">
                             <span class="top right small" style="border-radius: 50%">
@@ -442,14 +446,13 @@ function showDevices() {
             {
                 const card = getGroupCard(d);
                 html += card;
+                continue;
             }
-            continue;
         };
-        if (d.info.device._type == 'Coordinator') {
+        if (d.info && d.info.device._type == 'Coordinator') {
             const card = getCoordinatorCard(d);
             html += card;
-        }
-        else {
+        } else {
         //if (d.groups && d.info && d.info.device._type == "Router") {
             if (d.groups) {
                 devGroups[d._id] = d.groups;
@@ -489,23 +492,10 @@ function showDevices() {
     });
     $(".flip").click(function(){
         const card = $(this).parents(".card");
-        const flipped = card.hasClass("flipped");
         card.toggleClass("flipped");
-        if (flipped) {
-            card.children(".front").removeClass("hide");
-        } else {
-            card.children(".back").removeClass("hide");
-        }
-        setTimeout(function() {
-            const flipped = card.hasClass("flipped");
-            if (flipped) {
-                card.children(".back").removeClass("hide");
-                card.children(".front").addClass("hide");
-            } else {
-                card.children(".front").removeClass("hide");
-                card.children(".back").addClass("hide");
-            }
-        }, 500);
+    });
+    $('#rotate_btn').click(function () {
+        $('.card.flipable').toggleClass("flipped");
     });
 
     shuffleInstance = new Shuffle($("#devices"), {
@@ -670,7 +660,7 @@ function getDevices() {
 }
 
 function getDeviceCards() {
-    return $('#devices .device');
+    return $('#devices .device').not(".group");
 }
 
 function getDeviceCard(devId) {
@@ -2199,7 +2189,7 @@ function genDevInfo(device) {
             }).join('');
         }
     };
-    const modelUrl = (!mapped) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${mapped.model}.html" target="_blank" rel="noopener noreferrer">${mapped.model}</a>`;
+    const modelUrl = (!mapped) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${sanitizeModelParameter(mapped.model)}.html" target="_blank" rel="noopener noreferrer">${mapped.model}</a>`;
     const mappedInfo = (!mapped) ? '' :
         `<div style="font-size: 0.9em">
             <ul>
@@ -2441,10 +2431,10 @@ function showExclude() {
         const exclude_dev = devices.find((d) => d.common.type == exclude_id) || {common: {name: exclude_id}};
         // exclude_icon = (exclude_dev.icon) ? `<img src="${exclude_dev.icon}" width="64px">` : '';
 
-        const modelUrl = (!exclude_id) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${exclude_id}.html" target="_blank" rel="noopener noreferrer">${exclude_id}</a>`;
+        const modelUrl = (!exclude_id) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${sanitizeModelParameter(exclude_id)}.html" target="_blank" rel="noopener noreferrer">${exclude_id}</a>`;
 
         const card = `
-                    <div id="${exclude_id}" class="exclude col s12 m6 l4 xl3">
+                    <div id="${exclude_id}" class="exclude col s12 m6 l4 xl3" style="height: 135px;padding-bottom: 10px;">
                         <div class="card hoverable">
                             <div class="card-content zcard">
                                 <i class="left"><img src="${exclude_dev.icon}" width="64px" onerror="this.onerror=null;this.src='img/unavailable.png';"></i>

package/admin/index_m.html

@@ -105,19 +105,34 @@
         width: 100%;
         height: 100%;
         position: relative;
-        transition: transform .5s;
-        -webkit-transition: -webkit-transform .5s;
-        transform-style: preserve-3d;
+        -webkit-transition: -webkit-transform 0.5s;
+        -moz-transition: -moz-transform 0.5s;
+        -o-transition: -o-transform 0.5s;
+        transition: transform 0.5s;
         -webkit-transform-style: preserve-3d;
+        -moz-transform-style: preserve-3d;
+        -o-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+        -webkit-transform-origin: 50% 50%;
+        transform-origin: 50% 50%;
     }
     .m .card .zcard {
         padding: 10px;
     }
+    .m .card div {
+        -webkit-backface-visibility: hidden;
+        -moz-backface-visibility: hidden;
+        -o-backface-visibility: hidden;
+        backface-visibility: hidden;
+    }
     .device {
         padding: 5px;
         width: 330px;
         height: 200px;
-        perspective: 600px;
+        -webkit-perspective: 800px;
+        -moz-perspective: 800px;
+        -o-perspective: 800px;
+        perspective: 800px;
     }
     .m .zcard .card-title {
         font-size: 16px;
@@ -129,7 +144,7 @@
         border: none;
         bottom: 0;
         height: 50px;
-        background: #fff;
+        /*background: #fff;*/
         right: 0;
         /*text-align: right;*/
         padding: 10px;
@@ -228,19 +243,35 @@
         margin-bottom: 0;
     }
     .face {
-        position: absolute;
+        overflow:hidden;
+        position:absolute;
         height: 100%;
         width: 100%;
-        backface-visibility: hidden;
-        -webkit-backface-visibility: hidden;
+        /*background: #fff;*/
+        z-index: 2;
+        -webkit-transform: rotateY( 0deg );
+        -moz-transform: rotateY( 0deg );
+        -o-transform: rotateY( 0deg );
+        transform: rotateY( 0deg );
     }
     .back {
-        transform: rotateY( 180deg );
-        -webkit-transform: rotateY(180deg);
+        overflow:hidden;
+        position:absolute;
+        display: block;
+        box-sizing: border-box;
+        height: 100%;
+        width: 100%;
+        /*background: #fff;*/
+        -webkit-transform: rotateY( -180deg );
+        -moz-transform: rotateY( -180deg );
+        -o-transform: rotateY( -180deg );
+        transform: rotateY( -180deg );
     }
     .card.flipped {
-        transform: rotateY(180deg);
-        -webkit-transform: rotateY(180deg);
+        -webkit-transform: rotateY( 180deg );
+        -moz-transform: rotateY( 180deg );
+        -o-transform: rotateY( 180deg );
+        transform: rotateY( 180deg );
     }
     .m .switch label .lever {
         width: 30px;
@@ -332,29 +363,41 @@
         </div>
         <div id="tabs" class="tabs-content row">
             <div id="tab-main" class="col s12 page active">
-                <div class="navbar-fixed" style="height: 36px">
-                    <nav style="height: 36px; margin-left: -12px">
-                        <div class="nav-wrapper main-toolbar-table">
-                            <div class="col s4 m4 l4 xl3 main-toolbar-table-types-tools main-toolbar-table-filter input-field" style="line-height: 24px;">
-                                <i class="material-icons prefix" style="line-height: 24px; height: 30px;">search</i>
-                                <input id="device-search" class="filter-input translateP" placeholder="Искать" autocomplete="new-password" readonly="readonly" onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly'); this.blur(); this.focus();}" data-lang-placeholder="Filter">
-                                <a class="filter-clear btn-floating btn-very-small translateT red lighten-3" title="Очистить" data-lang-title="clear" style="display: none;"><i class="material-icons">clear</i></a>
-                            </div>
-                            <div class="col s4 m4 l4 xl3 input-field" style="line-height: 24px;">
-                                <i class="material-icons left" style="line-height: 24px; margin-top: 5px;">sort</i>
-                                <a id="device-order-btn" class="dropdown-trigger btn" href="#" data-target="device-order">Default</a>
-                                <ul id="device-order" class="dropdown-content" tabindex="0">
-                                    <li class="device-order-item" data-type="a-z" tabindex="0"><a class="translate" data-lang="A-Z">A-Z</a></li>
-                                    <li class="device-order-item" data-type="default" tabindex="0"><a class="translate" data-lang="Default">Default</a></li>
-                                </ul>
-                            </div>
-                            <div class="col s4 m4 l4 xl3 input-field" style="line-height: 24px;">
-                                <i class="material-icons left" style="line-height: 24px; margin-top: 5px;">art_track</i>
-                                <a id="room-filter-btn" class="dropdown-trigger btn" href="#" data-target="room-filter">All</a>
-                                <ul id="room-filter" class="dropdown-content" tabindex="0">
-                                </ul>
-                            </div>
-                        </div>
+                <div class="navbar-fixed" style="height: 36px;">
+                    <nav style="height: 36px; margin-left: -12px; line-height: 24px;">
+                        <ul id="nav-mobile" class="left">
+                            <li>
+                                <a id="rotate_btn" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Rotate cards">
+                                    <i class="material-icons large icon-blue">3d_rotation</i>
+                                </a>
+                            </li>
+                            <li>
+                                <div class="col main-toolbar-table-types-tools main-toolbar-table-filter input-field" style="line-height: 24px;">
+                                    <i class="material-icons prefix" style="line-height: 24px;">search</i>
+                                    <input id="device-search" class="filter-input translateP" placeholder="Искать" autocomplete="new-password" readonly="readonly" onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly'); this.blur(); this.focus();}" data-lang-placeholder="Filter">
+                                    <a class="filter-clear btn-floating btn-very-small translateT red lighten-3" title="Очистить" data-lang-title="clear" style="display: none;"><i class="material-icons">clear</i></a>
+                                </div>
+                                
+                            </li>
+                            <li>
+                                <div class="col input-field" style="line-height: 24px;">
+                                    <i class="material-icons left" style="line-height: 24px; margin-top: 5px;">sort</i>
+                                    <a id="device-order-btn" class="dropdown-trigger btn" href="#" data-target="device-order">Default</a>
+                                    <ul id="device-order" class="dropdown-content" tabindex="0">
+                                        <li class="device-order-item" data-type="a-z" tabindex="0"><a class="translate" data-lang="A-Z">A-Z</a></li>
+                                        <li class="device-order-item" data-type="default" tabindex="0"><a class="translate" data-lang="Default">Default</a></li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="col input-field" style="line-height: 24px;">
+                                    <i class="material-icons left" style="line-height: 24px; margin-top: 5px;">art_track</i>
+                                    <a id="room-filter-btn" class="dropdown-trigger btn" href="#" data-target="room-filter">All</a>
+                                    <ul id="room-filter" class="dropdown-content" tabindex="0">
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
                     </nav>
                 </div>
                 <div id="devices" class="row">
@@ -491,6 +534,10 @@
                         <label class="translate" for="external">Paths to files, semicolon (;) splitted</label>
                     </div>
                 </div>
+                <div class="input-field col s12 m12 l12 col-disableLed">
+                    <input id="startWithInconsistent" type="checkbox" class="value" />
+                    <label class="translate" for="startWithInconsistent">Force start adapter with inconsistent configuration (not recommended). Please update the adapter to compatible firmware and recreate your network as soon as possible.</label>
+                </div>
             </div>
 
             <div id="tab-expos" class="col s12 page">
@@ -705,8 +752,8 @@
                 </div>
             </div>
             <div id="tab-exclude" class="col s12 page">
-                <div class="col s4">
-                    <p class="translate">ExcludeTextTranslation</p>&nbsp;
+                <div class="row">
+                    <p class="translate">ExcludeTextTranslation</p>
                 </div>
                 <div class="fixed-action-btn" style="margin-bottom: 100px">
                     <a id="add_exclude" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Add exlude"><i class="material-icons large">add</i></a>