UI enhancements

xingqianlilu · Aug 29, 2016 · dfc557d · dfc557d
1 parent 7d411c0
commit dfc557d
Show file tree

Hide file tree

Showing 11 changed files with 127 additions and 59 deletions.
diff --git a/src/web/components/common/Confirm/index.jsx b/src/web/components/common/Confirm/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Modal } from 'react-bootstrap';
+import Modal from '../Modal';
 import i18n from '../../../lib/i18n';
 
 class Confirm extends React.Component {
@@ -33,14 +33,13 @@ class Confirm extends React.Component {
  const {
  message,
  description,
- confirmLabel = i18n._('OK'),
+ confirmLabel = i18n._('Restore Defaults'),
  cancelLabel = i18n._('Cancel')
  } = this.props;
 
  return (
  <Modal
  backdrop="static"
- dialogClassName="modal-vertical-center"
  show={this.state.show}
  onHide={::this.handleCancel}
  >
@@ -51,16 +50,26 @@ class Confirm extends React.Component {
  </Modal.Header>
  {description &&
  <Modal.Body>
- {description}
+ <div style={{ lineHeight: '40px' }}>
+ {description}
+ </div>
  </Modal.Body>
  }
  <Modal.Footer>
- <Button bsStyle="default" onClick={::this.handleCancel}>
- {cancelLabel}
- </Button>
- <Button bsStyle="primary" onClick={::this.handleConfirm}>
+ <button
+ type="button"
+ className="btn btn-primary"
+ onClick={::this.handleConfirm}
+ >
  {confirmLabel}
- </Button>
+ </button>
+ <button
+ type="button"
+ className="btn btn-default"
+ onClick={::this.handleCancel}
+ >
+ {cancelLabel}
+ </button>
  </Modal.Footer>
  </Modal>
  );

diff --git a/src/web/components/widget-manager/WidgetList.jsx b/src/web/components/widget-manager/WidgetList.jsx
@@ -7,7 +7,7 @@ const WidgetList = (props) => {
  const { list, onChange } = props;
  const style = {
  maxHeight: Math.max(window.innerHeight / 2, 200),
- minWidth: 400,
+ maxWidth: Math.max(window.innerWidth * 0.8, 600),
  overflowY: 'scroll',
  padding: 15
  };

diff --git a/src/web/components/widget-manager/WidgetListItem.jsx b/src/web/components/widget-manager/WidgetListItem.jsx
@@ -24,8 +24,9 @@ class WidgetListItem extends React.Component {
  const styles = {
  thumbnail: {
  fontSize: 100,
- backgroundColor: checked ? '#4e69a2' : '#f5f6f7',
- color: checked ? '#fff' : '#ccc'
+ backgroundColor: '#f5f6f7',
+ color: checked ? 'rgba(64, 64, 64, 0.8)' : '#ccc',
+ textShadow: '2px 2px 2px #a0a0a0'
  },
  caption: {
  color: '#333',

diff --git a/src/web/components/widget-manager/WidgetManager.jsx b/src/web/components/widget-manager/WidgetManager.jsx
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React from 'react';
-import { Button, Modal } from 'react-bootstrap';
+import Modal from '../common/Modal';
 import i18n from '../../lib/i18n';
 import store from '../../store';
 import WidgetList from './WidgetList';
@@ -143,19 +143,30 @@ class WidgetManager extends React.Component {
  <Modal
  backdrop="static"
  bsSize="large"
- dialogClassName="modal-vertical-center"
  onHide={::this.handleCancel}
  show={this.state.show}
  >
  <Modal.Header closeButton>
  <Modal.Title>{i18n._('Widgets')}</Modal.Title>
  </Modal.Header>
- <Modal.Body className="nopadding">
+ <Modal.Body style={{ padding: 0 }}>
  <WidgetList list={this.widgetList} onChange={::this.handleChange} />
  </Modal.Body>
  <Modal.Footer>
- <Button onClick={::this.handleSave}>{i18n._('Save')}</Button>
- <Button onClick={::this.handleCancel}>{i18n._('Cancel')}</Button>
+ <button
+ type="button"
+ className="btn btn-primary"
+ onClick={::this.handleSave}
+ >
+ {i18n._('Save')}
+ </button>
+ <button
+ type="button"
+ className="btn btn-default"
+ onClick={::this.handleCancel}
+ >
+ {i18n._('Cancel')}
+ </button>
  </Modal.Footer>
  </Modal>
  );

diff --git a/src/web/components/widgets/axes/Settings.jsx b/src/web/components/widgets/axes/Settings.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Button, Modal } from 'react-bootstrap';
+import Modal from '../../common/Modal';
 import i18n from '../../../lib/i18n';
 import ShuttleSettings from './ShuttleSettings';
 
@@ -34,7 +34,6 @@ class Settings extends React.Component {
  return (
  <Modal
  backdrop="static"
- dialogClassName="modal-vertical-center"
  onHide={::this.handleCancel}
  show={show}
  >
@@ -45,8 +44,20 @@ class Settings extends React.Component {
  <ShuttleSettings ref="shuttleSettings" />
  </Modal.Body>
  <Modal.Footer>
- <Button onClick={::this.handleSave}>{i18n._('Save')}</Button>
- <Button onClick={::this.handleCancel}>{i18n._('Cancel')}</Button>
+ <button
+ type="button"
+ className="btn btn-primary"
+ onClick={::this.handleSave}
+ >
+ {i18n._('Save')}
+ </button>
+ <button
+ type="button"
+ className="btn btn-default"
+ onClick={::this.handleCancel}
+ >
+ {i18n._('Cancel')}
+ </button>
  </Modal.Footer>
  </Modal>
  );

diff --git a/src/web/components/widgets/macro/AddMacro.jsx b/src/web/components/widgets/macro/AddMacro.jsx
@@ -24,15 +24,26 @@ class AddMacro extends Component {
  </Modal.Title>
  </Modal.Header>
  <Modal.Body>
+ <form>
+ <div className="form-group">
+ <label>{i18n._('Name')}</label>
+ <input
+ type="text"
+ className="form-control"
+ placeholder={i18n._('Name')}
+ />
+ </div>
+ <div className="form-group">
+ <label>{i18n._('G-code')}</label>
+ <textarea
+ className="form-control"
+ rows="10"
+ placeholder={i18n._('G-code')}
+ />
+ </div>
+ </form>
  </Modal.Body>
  <Modal.Footer>
- <button
- type="button"
- className="btn btn-default"
- onClick={actions.closeModal}
- >
- {i18n._('Cancel')}
- </button>
  <button
  type="button"
  className="btn btn-primary"
@@ -43,6 +54,13 @@ class AddMacro extends Component {
  >
  {i18n._('Add')}
  </button>
+ <button
+ type="button"
+ className="btn btn-default"
+ onClick={actions.closeModal}
+ >
+ {i18n._('Cancel')}
+ </button>
  </Modal.Footer>
  </Modal>
  );

diff --git a/src/web/components/widgets/macro/EditMacro.jsx b/src/web/components/widgets/macro/EditMacro.jsx
@@ -28,6 +28,24 @@ class EditMacro extends Component {
  </Modal.Title>
  </Modal.Header>
  <Modal.Body>
+ <form>
+ <div className="form-group">
+ <label>{i18n._('Name')}</label>
+ <input
+ type="text"
+ className="form-control"
+ placeholder={i18n._('Name')}
+ />
+ </div>
+ <div className="form-group">
+ <label>{i18n._('G-code')}</label>
+ <textarea
+ className="form-control"
+ rows="10"
+ placeholder={i18n._('G-code')}
+ />
+ </div>
+ </form>
  </Modal.Body>
  <Modal.Footer>
  <button
@@ -42,21 +60,21 @@ class EditMacro extends Component {
  </button>
  <button
  type="button"
- className="btn btn-default"
+ className="btn btn-primary"
  onClick={() => {
  actions.closeModal();
  }}
  >
- {i18n._('Close')}
+ {i18n._('Save')}
  </button>
  <button
  type="button"
- className="btn btn-primary"
+ className="btn btn-default"
  onClick={() => {
  actions.closeModal();
  }}
  >
- {i18n._('Save')}
+ {i18n._('Cancel')}
  </button>
  </Modal.Footer>
  </Modal>

diff --git a/src/web/components/widgets/visualizer/index.styl b/src/web/components/widgets/visualizer/index.styl
@@ -21,7 +21,6 @@
 
  #wcs-dropdown {
  height: 26px;
- font-size: 14px;
  }
  }
 }
@@ -112,10 +111,8 @@
  }
  }
  .file-uploader-tips {
- font-size: 18px;
-
- @media (max-width: 991px) {
- font-size: 14px;
+ @media (min-width: 992px) {
+ font-size: 18px;
  }
  }
 

diff --git a/src/web/components/widgets/webcam/Settings.jsx b/src/web/components/widgets/webcam/Settings.jsx
@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
-import { Button, Modal } from 'react-bootstrap';
+import Modal from '../../common/Modal';
 import i18n from '../../../lib/i18n';
 
 const noop = () => {};
@@ -39,7 +39,6 @@ class Settings extends Component {
  return (
  <Modal
  backdrop="static"
- dialogClassName="modal-vertical-center"
  onHide={::this.handleCancel}
  show={show}
  >
@@ -61,8 +60,20 @@ class Settings extends Component {
  </form>
  </Modal.Body>
  <Modal.Footer>
- <Button onClick={::this.handleSave}>{i18n._('Save')}</Button>
- <Button onClick={::this.handleCancel}>{i18n._('Cancel')}</Button>
+ <button
+ type="button"
+ className="btn btn-primary"
+ onClick={::this.handleSave}
+ >
+ {i18n._('Save')}
+ </button>
+ <button
+ type="button"
+ className="btn btn-default"
+ onClick={::this.handleCancel}
+ >
+ {i18n._('Cancel')}
+ </button>
  </Modal.Footer>
  </Modal>
  );

diff --git a/src/web/styles/rc-switch.styl b/src/web/styles/rc-switch.styl
@@ -43,8 +43,8 @@
 .rc-switch-checked {
  border-width: 1px;
  border-style: solid;
- border-color: #435a8b #3c5488 #334c83;
- background-color: #4e69a2;
+ border-color: rgba(64, 64, 64, 0.8);
+ background-color: rgba(64, 64, 64, 0.8);
 }
 .rc-switch-checked .rc-switch-inner {
  font-size: 75%;

diff --git a/src/web/styles/theme.styl b/src/web/styles/theme.styl
@@ -3,17 +3,14 @@
 
 // Bootstrap Override
 body {
- font-size: 12px;
+ font-size: 13px;
 }
 th {
  font-weight: normal;
 }
 label {
  font-weight: normal;
 }
-.dropdown-menu {
- font-size: 12px;
-}
 .navbar-nav > li > a {
  font-size: 14px;
 }
@@ -23,12 +20,18 @@ label {
 .dropdown-header {
  font-weight: bold;
 }
+.btn,
+.dropdown-menu,
+.form-control {
+ font-size: 13px;
+}
 
 table thead > tr > th,
 table tbody > tr > td {
  text-align: left;
  padding: 2px 4px;
 }
+
 .table-bordered > thead > tr > td,
 .table-bordered > thead > tr > th {
  border-bottom-width: 1px;
@@ -74,7 +77,7 @@ table tbody > tr > td {
 .input-group-xs .input-group-btn .btn {
  height: 22px;
  padding: 1px 5px;
- font-size: 12px;
+ font-size: 13px;
  line-height: 1.5;
 }
 
@@ -92,17 +95,6 @@ table tbody > tr > td {
 
 // @stylint on
 
-// Modal
-.modal-header,
-.modal-footer {
-}
-.modal-body {
- font-size: 14px;
-}
-.modal-body.nopadding {
- padding: 0;
-}
-
 // .btn-default.btn-select
 .btn-default {
  &.btn-select {