Reorder widgets by clicking on the sortable icon (#155)

cncjs · Apr 26, 2017 · 91fbcef · 91fbcef
1 parent 38c5524
commit 91fbcef
Show file tree

Hide file tree

Showing 18 changed files with 96 additions and 24 deletions.
diff --git a/src/web/components/Widget/Sortable.jsx 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 (
+        <div className={classNames(className, styles.widgetSortable)} style={style}>
+            <Anchor {...rest}>
+                {children || <i className="fa fa-bars" />}
+            </Anchor>
+        </div>
+    );
+};
+
+export default Sortable;
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -563,8 +563,12 @@ class AxesWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
-                    <Widget.Title>{i18n._('Axes')}</Widget.Title>
+                <Widget.Header>
+                    <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
+                        {i18n._('Axes')}
+                    </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={i18n._('Edit')}

diff --git a/src/web/widgets/Connection/index.jsx b/src/web/widgets/Connection/index.jsx
@@ -32,8 +32,12 @@ class ConnectionWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
-                    <Widget.Title>{i18n._('Connection')}</Widget.Title>
+                <Widget.Header>
+                    <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
+                        {i18n._('Connection')}
+                    </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={minimized ? i18n._('Open') : i18n._('Close')}

diff --git a/src/web/widgets/Console/index.jsx b/src/web/widgets/Console/index.jsx
@@ -153,8 +153,12 @@ class ConsoleWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
-                    <Widget.Title>{i18n._('Console')}</Widget.Title>
+                <Widget.Header>
+                    <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
+                        {i18n._('Console')}
+                    </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={minimized ? i18n._('Open') : i18n._('Close')}

diff --git a/src/web/widgets/GCode/index.jsx b/src/web/widgets/GCode/index.jsx
@@ -255,8 +255,12 @@ class GCodeWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
-                    <Widget.Title>{i18n._('G-code')}</Widget.Title>
+                <Widget.Header>
+                    <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
+                        {i18n._('G-code')}
+                    </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={minimized ? i18n._('Open') : i18n._('Close')}

diff --git a/src/web/widgets/Grbl/index.jsx b/src/web/widgets/Grbl/index.jsx
@@ -226,8 +226,10 @@ class GrblWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
+                <Widget.Header>
                     <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
                         Grbl
                     </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>

diff --git a/src/web/widgets/Laser/index.jsx b/src/web/widgets/Laser/index.jsx
@@ -204,8 +204,12 @@ class LaserWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
-                    <Widget.Title>{i18n._('Laser')}</Widget.Title>
+                <Widget.Header>
+                    <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
+                        {i18n._('Laser')}
+                    </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={minimized ? i18n._('Open') : i18n._('Close')}

diff --git a/src/web/widgets/Macro/index.jsx b/src/web/widgets/Macro/index.jsx
@@ -281,8 +281,12 @@ class MacroWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
-                    <Widget.Title>{i18n._('Macro')}</Widget.Title>
+                <Widget.Header>
+                    <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
+                        {i18n._('Macro')}
+                    </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={i18n._('New Macro')}

diff --git a/src/web/widgets/Probe/index.jsx b/src/web/widgets/Probe/index.jsx
@@ -496,8 +496,12 @@ class ProbeWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
-                    <Widget.Title>{i18n._('Probe')}</Widget.Title>
+                <Widget.Header>
+                    <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
+                        {i18n._('Probe')}
+                    </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={minimized ? i18n._('Open') : i18n._('Close')}

diff --git a/src/web/widgets/Smoothie/index.jsx b/src/web/widgets/Smoothie/index.jsx
@@ -226,8 +226,10 @@ class SmoothieWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
+                <Widget.Header>
                     <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
                         Smoothie
                     </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>

diff --git a/src/web/widgets/Spindle/index.jsx b/src/web/widgets/Spindle/index.jsx
@@ -246,8 +246,12 @@ class SpindleWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
-                    <Widget.Title>{i18n._('Spindle')}</Widget.Title>
+                <Widget.Header>
+                    <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
+                        {i18n._('Spindle')}
+                    </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={minimized ? i18n._('Open') : i18n._('Close')}

diff --git a/src/web/widgets/TinyG/index.jsx b/src/web/widgets/TinyG/index.jsx
@@ -226,8 +226,10 @@ class TinyGWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
+                <Widget.Header>
                     <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
                         TinyG
                     </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>

diff --git a/src/web/widgets/Webcam/index.jsx b/src/web/widgets/Webcam/index.jsx
@@ -122,8 +122,12 @@ class WebcamWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={this.props.sortable.handleClassName}>
-                    <Widget.Title>{i18n._('Webcam')}</Widget.Title>
+                <Widget.Header>
+                    <Widget.Title>
+                        <Widget.Sortable className={this.props.sortable.handleClassName} />
+                        <span className="space" />
+                        {i18n._('Webcam')}
+                    </Widget.Title>
                     <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={i18n._('Edit')}