Refine controller status view

cncjs · Jun 18, 2017 · 2011554 · 2011554
1 parent 4becbed
commit 2011554
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 24 deletions.
diff --git a/src/web/widgets/Grbl/Controller.jsx b/src/web/widgets/Grbl/Controller.jsx
@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Button } from '../../components/Buttons';
 import Modal from '../../components/Modal';
 import { Nav, NavItem } from '../../components/Navs';
+import controller from '../../lib/controller';
 import i18n from '../../lib/i18n';
 import styles from './index.styl';
 
@@ -34,20 +36,34 @@ const Controller = (props) => {
                     </pre>
                     }
                     {activeTab === 'settings' &&
-                    <pre className={styles.pre}>
-                        <code>{JSON.stringify(state.controller.settings, null, 4)}</code>
-                    </pre>
+                    <div>
+                        <Button
+                            btnSize="xs"
+                            btnStyle="flat"
+                            style={{
+                                position: 'absolute',
+                                right: 10,
+                                top: 10
+                            }}
+                            onClick={event => {
+                                controller.writeln('$#'); // Parameters
+                                controller.writeln('$$'); // Settings
+                            }}
+                        >
+                            <i className="fa fa-refresh" />
+                            {i18n._('Refresh')}
+                        </Button>
+                        <pre className={styles.pre}>
+                            <code>{JSON.stringify(state.controller.settings, null, 4)}</code>
+                        </pre>
+                    </div>
                     }
                 </div>
             </Modal.Body>
             <Modal.Footer>
-                <button
-                    type="button"
-                    className="btn btn-default"
-                    onClick={actions.closeModal}
-                >
+                <Button onClick={actions.closeModal}>
                     {i18n._('Close')}
-                </button>
+                </Button>
             </Modal.Footer>
         </Modal>
     );

diff --git a/src/web/widgets/Grbl/index.styl b/src/web/widgets/Grbl/index.styl
@@ -78,6 +78,7 @@
 }
 
 .nav-content {
+    position: relative;
     overflow-y: auto;
     background: #000;
     color: #fff;
@@ -91,5 +92,6 @@
         border: 0;
         border-radius: 0;
         margin: 0;
+        padding: 10px;
     }
 }
diff --git a/src/web/widgets/Smoothie/Controller.jsx b/src/web/widgets/Smoothie/Controller.jsx
@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Button } from '../../components/Buttons';
 import Modal from '../../components/Modal';
 import { Nav, NavItem } from '../../components/Navs';
+import controller from '../../lib/controller';
 import i18n from '../../lib/i18n';
 import styles from './index.styl';
 
@@ -34,20 +36,33 @@ const Controller = (props) => {
                     </pre>
                     }
                     {activeTab === 'settings' &&
-                    <pre className={styles.pre}>
-                        <code>{JSON.stringify(state.controller.settings, null, 4)}</code>
-                    </pre>
+                    <div>
+                        <Button
+                            btnSize="xs"
+                            btnStyle="flat"
+                            style={{
+                                position: 'absolute',
+                                right: 10,
+                                top: 10
+                            }}
+                            onClick={event => {
+                                controller.writeln('$#'); // Settings
+                            }}
+                        >
+                            <i className="fa fa-refresh" />
+                            {i18n._('Refresh')}
+                        </Button>
+                        <pre className={styles.pre}>
+                            <code>{JSON.stringify(state.controller.settings, null, 4)}</code>
+                        </pre>
+                    </div>
                     }
                 </div>
             </Modal.Body>
             <Modal.Footer>
-                <button
-                    type="button"
-                    className="btn btn-default"
-                    onClick={actions.closeModal}
-                >
+                <Button onClick={actions.closeModal}>
                     {i18n._('Close')}
-                </button>
+                </Button>
             </Modal.Footer>
         </Modal>
     );

diff --git a/src/web/widgets/Smoothie/index.styl b/src/web/widgets/Smoothie/index.styl
@@ -78,6 +78,7 @@
 }
 
 .nav-content {
+    position: relative;
     overflow-y: auto;
     background: #000;
     color: #fff;
@@ -91,5 +92,6 @@
         border: 0;
         border-radius: 0;
         margin: 0;
+        padding: 10px;
     }
 }
diff --git a/src/web/widgets/TinyG/Controller.jsx b/src/web/widgets/TinyG/Controller.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Button } from '../../components/Buttons';
 import Modal from '../../components/Modal';
 import { Nav, NavItem } from '../../components/Navs';
 import i18n from '../../lib/i18n';
@@ -41,13 +42,9 @@ const Controller = (props) => {
                 </div>
             </Modal.Body>
             <Modal.Footer>
-                <button
-                    type="button"
-                    className="btn btn-default"
-                    onClick={actions.closeModal}
-                >
+                <Button onClick={actions.closeModal}>
                     {i18n._('Close')}
-                </button>
+                </Button>
             </Modal.Footer>
         </Modal>
     );

diff --git a/src/web/widgets/TinyG/index.styl b/src/web/widgets/TinyG/index.styl
@@ -78,6 +78,7 @@
 }
 
 .nav-content {
+    position: relative;
     overflow-y: auto;
     background: #000;
     color: #fff;
@@ -91,5 +92,6 @@
         border: 0;
         border-radius: 0;
         margin: 0;
+        padding: 10px;
     }
 }