diff --git a/src/web/components/Widget/Sortable.jsx b/src/web/components/Widget/Sortable.jsx
new file mode 100644
index 000000000..8791c424e
--- /dev/null
+++ b/src/web/components/Widget/Sortable.jsx
@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import React from 'react';
+import Anchor from '../Anchor';
+import styles from './index.styl';
+
+const Sortable = (props) => {
+ const { children, className, style, ...rest } = props;
+
+ return (
+
+ );
+};
+
+export default Sortable;
diff --git a/src/web/components/Widget/index.js b/src/web/components/Widget/index.js
index 802fbbe57..e7dcc2625 100644
--- a/src/web/components/Widget/index.js
+++ b/src/web/components/Widget/index.js
@@ -2,6 +2,7 @@ import Widget from './Widget';
import Header from './Header';
import Content from './Content';
import Footer from './Footer';
+import Sortable from './Sortable';
import Title from './Title';
import Button from './Button';
import Controls from './Controls';
@@ -10,6 +11,7 @@ import Toolbar from './Toolbar';
Widget.Header = Header;
Widget.Content = Content;
Widget.Footer = Footer;
+Widget.Sortable = Sortable;
Widget.Title = Title;
Widget.Button = Button;
Widget.Controls = Controls;
diff --git a/src/web/components/Widget/index.styl b/src/web/components/Widget/index.styl
index 4666d4f3c..bd3f85d76 100644
--- a/src/web/components/Widget/index.styl
+++ b/src/web/components/Widget/index.styl
@@ -45,13 +45,21 @@
.widget-header {
clearfix();
background-color: #f6f7f8;
- cursor: move;
border: 1px solid #ccc;
}
.widget-header-fixed {
cursor: default;
}
+ .widget-sortable {
+ display: inline-block;
+ cursor: move;
+
+ > a {
+ cursor: move;
+ }
+ }
+
.widget-title {
margin-top: 0;
font-size: 14px;
diff --git a/src/web/components/Widget/theme.styl b/src/web/components/Widget/theme.styl
index 65407f797..2bddc00b3 100644
--- a/src/web/components/Widget/theme.styl
+++ b/src/web/components/Widget/theme.styl
@@ -6,6 +6,8 @@
background-color: #fafafa;
color: #222;
}
+
+ .widget-sortable,
.widget-toolbar,
.widget-controls {
a {
diff --git a/src/web/containers/Workspace/PrimaryWidgets.jsx b/src/web/containers/Workspace/PrimaryWidgets.jsx
index 91ed694af..340f7ae79 100644
--- a/src/web/containers/Workspace/PrimaryWidgets.jsx
+++ b/src/web/containers/Workspace/PrimaryWidgets.jsx
@@ -77,7 +77,7 @@ class PrimaryWidgets extends Component {
className={classNames(className, styles.widgets)}
options={{
animation: 150,
- delay: 300, // Touch and hold delay
+ delay: 0, // Touch and hold delay
group: {
name: 'primary',
pull: true,
diff --git a/src/web/containers/Workspace/SecondaryWidgets.jsx b/src/web/containers/Workspace/SecondaryWidgets.jsx
index bc7ad07ae..b99bba130 100644
--- a/src/web/containers/Workspace/SecondaryWidgets.jsx
+++ b/src/web/containers/Workspace/SecondaryWidgets.jsx
@@ -77,7 +77,7 @@ class SecondaryWidgets extends Component {
className={classNames(className, styles.widgets)}
options={{
animation: 150,
- delay: 300, // Touch and hold delay
+ delay: 0, // Touch and hold delay
group: {
name: 'secondary',
pull: true,
diff --git a/src/web/widgets/Axes/index.jsx b/src/web/widgets/Axes/index.jsx
index 2afa9cf58..a31488f57 100644
--- a/src/web/widgets/Axes/index.jsx
+++ b/src/web/widgets/Axes/index.jsx
@@ -563,8 +563,12 @@ class AxesWidget extends Component {
return (
-
- {i18n._('Axes')}
+
+
+
+
+ {i18n._('Axes')}
+
-
- {i18n._('Connection')}
+
+
+
+
+ {i18n._('Connection')}
+
-
- {i18n._('Console')}
+
+
+
+
+ {i18n._('Console')}
+
-
- {i18n._('G-code')}
+
+
+
+
+ {i18n._('G-code')}
+
-
+
+
+
Grbl
diff --git a/src/web/widgets/Laser/index.jsx b/src/web/widgets/Laser/index.jsx
index b94f9ef20..1f47ae8f9 100644
--- a/src/web/widgets/Laser/index.jsx
+++ b/src/web/widgets/Laser/index.jsx
@@ -204,8 +204,12 @@ class LaserWidget extends Component {
return (
-
- {i18n._('Laser')}
+
+
+
+
+ {i18n._('Laser')}
+
-
- {i18n._('Macro')}
+
+
+
+
+ {i18n._('Macro')}
+
-
- {i18n._('Probe')}
+
+
+
+
+ {i18n._('Probe')}
+
-
+
+
+
Smoothie
diff --git a/src/web/widgets/Spindle/index.jsx b/src/web/widgets/Spindle/index.jsx
index 9f7bb355c..f6a946b0e 100644
--- a/src/web/widgets/Spindle/index.jsx
+++ b/src/web/widgets/Spindle/index.jsx
@@ -246,8 +246,12 @@ class SpindleWidget extends Component {
return (
-
- {i18n._('Spindle')}
+
+
+
+
+ {i18n._('Spindle')}
+
-
+
+
+
TinyG
diff --git a/src/web/widgets/Webcam/index.jsx b/src/web/widgets/Webcam/index.jsx
index 78e370db2..86f511749 100644
--- a/src/web/widgets/Webcam/index.jsx
+++ b/src/web/widgets/Webcam/index.jsx
@@ -122,8 +122,12 @@ class WebcamWidget extends Component {
return (
-
- {i18n._('Webcam')}
+
+
+
+
+ {i18n._('Webcam')}
+