Browse as Parse.User

src/components/BrowserMenu/BrowserMenu.react.js

@@ -28,10 +28,14 @@ export default class BrowserMenu extends React.Component {
     let menu = null;
     if (this.state.open) {
       let position = Position.inDocument(this.node);
+      let titleStyle = [styles.title];
+      if (this.props.active) {
+        titleStyle.push(styles.active);
+      }
       menu = (
         <Popover fixed={true} position={position} onExternalClick={() => this.setState({ open: false })}>
           <div className={styles.menu}>
-            <div className={styles.title} onClick={() => this.setState({ open: false })}>
+            <div className={titleStyle.join(' ')} onClick={() => this.setState({ open: false })}>
               <Icon name={this.props.icon} width={14} height={14} />
               <span>{this.props.title}</span>
             </div>
@@ -48,6 +52,9 @@ export default class BrowserMenu extends React.Component {
       );
     }
     const classes = [styles.entry];
+    if (this.props.active) {
+      classes.push(styles.active);
+    }
     if (this.props.disabled) {
       classes.push(styles.disabled);
     }

src/components/BrowserMenu/BrowserMenu.scss

@@ -12,8 +12,8 @@
 }
 
 .entry {
-  height: 22px;
-  padding: 8px 8px 0 8px;
+  height: 30px;
+  padding: 8px;
 
   svg {
     fill: #66637A;
@@ -33,6 +33,15 @@
       fill: #66637A;
     }
   }
+
+  &.active {
+    background: $orange;
+    border-radius: 5px;
+
+    svg {
+      fill: white;
+    }
+  }
 }
 
 .title {
@@ -43,21 +52,28 @@
   svg {
     fill: white;
   }
+
+  &.active {
+    background: $orange;
+    border-radius: 5px;
+  }
 }
 
 .entry, .title {
   @include NotoSansFont;
+  position: relative;
+  bottom: -4px;
   font-size: 14px;
   color: #ffffff;
   cursor: pointer;
 
   svg {
-    vertical-align: middle;
+    vertical-align: top;
     margin-right: 4px;
   }
 
   span {
-    vertical-align: middle;
+    vertical-align: top;
     height: 14px;
     line-height: 14px;
   }

src/components/BrowserMenu/MenuItem.react.js

@@ -8,11 +8,17 @@
 import React  from 'react';
 import styles from 'components/BrowserMenu/BrowserMenu.scss';
 
-let MenuItem = ({ text, disabled, onClick }) => {
+let MenuItem = ({ text, disabled, active, greenActive, onClick }) => {
   let classes = [styles.item];
   if (disabled) {
     classes.push(styles.disabled);
   }
+  if (active) {
+    classes.push(styles.active);
+  }
+  if (greenActive) {
+    classes.push(styles.greenActive);
+  }
   return <div className={classes.join(' ')} onClick={disabled ? undefined : onClick}>{text}</div>;
 };
 

src/components/GeoPointEditor/GeoPointEditor.react.js

@@ -33,6 +33,17 @@ export default class GeoPointEditor extends React.Component {
     this.refs.longitude.addEventListener('keypress', this.handleKeyLongitude);
   }
 
+  componentWillReceiveProps(props) {
+    if (props.value) {
+      if (props.value.latitude !== this.state.latitude) {
+        this.setState({ latitude: props.value.latitude });
+      }
+      if (props.value.longitude !== this.state.longitude) {
+        this.setState({ longitude: props.value.longitude });
+      }
+    }
+  }
+
   componentWillUnmount() {
     this.refs.latitude.removeEventListener('keypress', this.handleKeyLatitude);
     this.refs.longitude.removeEventListener('keypress', this.handleKeyLongitude);

src/components/TextInput/TextInput.react.js

@@ -48,7 +48,8 @@ export default class TextInput extends React.Component {
           id={this.props.id}
           disabled={!!this.props.disabled}
           className={classes.join(' ')}
-          style={{height: this.props.height || 80}}
+          rows={this.props.rows && this.props.rows > 3 ? this.props.rows : null}
+          style={this.props.rows && this.props.rows > 3 ? null : {height: this.props.height || 80}}
           placeholder={this.props.placeholder}
           value={this.props.value}
           onChange={this.changeValue.bind(this)}

src/components/Toggle/Toggle.react.js

@@ -80,6 +80,10 @@ export default class Toggle extends React.Component {
         left = this.props.value === this.props.optionLeft;
         colored = this.props.colored;
         break;
+      case Toggle.Types.HIDE_LABELS:
+        colored = true;
+        left = !this.props.value;
+        break;
       default:
         labelLeft = 'No';
         labelRight = 'Yes';
@@ -90,7 +94,10 @@ export default class Toggle extends React.Component {
 
     let switchClasses = [styles.switch];
     if (colored) {
-      switchClasses.push(styles.colored)
+      switchClasses.push(styles.colored);
+    }
+    if (this.props.switchNoMargin) {
+      switchClasses.push(styles.switchNoMargin);
     }
     let toggleClasses = [styles.toggle, unselectable, input];
     if (left) {
@@ -101,9 +108,9 @@ export default class Toggle extends React.Component {
     }
     return (
       <div className={toggleClasses.join(' ')} style={this.props.additionalStyles || {}}>
-        <span className={styles.label} onClick={this.toLeft.bind(this)}>{labelLeft}</span>
+        {labelLeft && <span className={styles.label} onClick={this.toLeft.bind(this)}>{labelLeft}</span>}
         <span className={switchClasses.join(' ')} onClick={this.toggle.bind(this)}></span>
-        <span className={styles.label} onClick={this.toRight.bind(this)}>{labelRight}</span>
+        {labelRight && <span className={styles.label} onClick={this.toRight.bind(this)}>{labelRight}</span>}
       </div>
     );
   }

src/components/Toggle/Toggle.scss

@@ -60,6 +60,10 @@
   transition: background-position 0.15s ease-out;
 }
 
+.switchNoMargin {
+  margin: 0;
+}
+
 .left {
   .label {
     &:first-of-type {