Add unselectable style to widgets while editing

Add border to all widgets while editing

src/containers/widget.js

@@ -148,7 +148,7 @@ class Widget extends Component {
 
     // get widget element
     const widget = this.props.data;
-    var borderedWidget = false;
+    var borderedWidget = this.props.editing;
     var element = null;
 
     //console.log('render: ' + widget.x + ', ' + widget.y);
@@ -184,7 +184,8 @@ class Widget extends Component {
     let widgetClasses = classNames({
               'widget': !this.props.editing,
               'editing-widget': this.props.editing,
-              'border': borderedWidget
+              'border': borderedWidget,
+              'unselectable': this.props.editing
             });
 
     if (this.props.editing) {

src/styles/app.css

@@ -170,6 +170,16 @@ body {
   color: #888;
 }
 
+.unselectable {
+  -webkit-touch-callout: none !important; /* iOS Safari */
+    -webkit-user-select: none !important; /* Safari */
+     -khtml-user-select: none !important; /* Konqueror HTML */
+       -moz-user-select: none !important; /* Firefox */
+        -ms-user-select: none !important; /* Internet Explorer/Edge */
+            user-select: none !important; /* Non-prefixed version, currently
+                                             supported by Chrome and Opera */
+}
+
 /**
  * Toolbox
  */