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 ( +
+ + {children || } + +
+ ); +}; + +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')} +