UX changes in main nav bar for browse as user;

Toggle new type added - HIDE_LABELS;
italkco · May 26, 2020 · 0f4f23c · 0f4f23c
1 parent f2e5295
commit 0f4f23c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 37 deletions.
diff --git a/src/components/BrowserMenu/BrowserMenu.scss b/src/components/BrowserMenu/BrowserMenu.scss
@@ -35,7 +35,7 @@
  }
 
  &.active {
- background: $blue;
+ background: $orange;
  border-radius: 5px;
 
  svg {
@@ -54,7 +54,7 @@
  }
 
  &.active {
- background: $blue;
+ background: $orange;
  border-radius: 5px;
  }
 }
@@ -108,24 +108,6 @@
  background: none;
  }
  }
-
- &.active {
- background: $blue;
-
- &:hover {
- background: white;
- color: $blue;
- }
- }
-
- &.greenActive {
- background: $green;
-
- &:hover {
- background: white;
- color: $blue;
- }
- }
 }
 
 .separator {

diff --git a/src/components/Toggle/Toggle.react.js b/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>
  );
  }

diff --git a/src/components/Toggle/Toggle.scss b/src/components/Toggle/Toggle.scss
@@ -60,6 +60,10 @@
  transition: background-position 0.15s ease-out;
 }
 
+.switchNoMargin {
+ margin: 0;
+}
+
 .left {
  .label {
  &:first-of-type {

diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
@@ -18,6 +18,7 @@ import SecurityDialog from 'dashboard/Data/Browser/SecurityDialog.react';
 import ColumnsConfiguration from 'components/ColumnsConfiguration/ColumnsConfiguration.react';
 import SecureFieldsDialog from 'dashboard/Data/Browser/SecureFieldsDialog.react';
 import LoginDialog from 'dashboard/Data/Browser/LoginDialog.react';
+import Toggle from 'components/Toggle/Toggle.react';
 
 let BrowserToolbar = ({
  className,
@@ -224,6 +225,23 @@ let BrowserToolbar = ({
  className={classNameForEditors}
  blacklistedFilters={onAddRow ? [] : ['unique']}
  />
+ <div className={styles.toolbarSeparator} />
+ <LoginDialog
+ ref={loginDialogRef}
+ currentUser={currentUser}
+ login={login}
+ logout={logout}
+ />
+ <BrowserMenu
+ setCurrent={setCurrent}
+ title={currentUser ? "Browsing" : "Browse"}
+ icon="users-solid"
+ active={!!currentUser}
+ >
+ <MenuItem text={currentUser ? 'Switch User' : 'As User'} onClick={showLogin} />
+ {currentUser ? <MenuItem text={<span>Use Master Key <Toggle type={Toggle.Types.HIDE_LABELS} value={useMasterKey} onChange={toggleMasterKeyUsage} switchNoMargin={true} additionalStyles={{ display: 'inline', lineHeight: 0, margin: 0, paddingLeft: 5 }} /></span>} onClick={toggleMasterKeyUsage} /> : <noscript />}
+ {currentUser ? <MenuItem text={<span>Stop browsing (<b>{currentUser.get('username')}</b>)</span>} onClick={logout} /> : <noscript />}
+ </BrowserMenu>
  {onAddRow && <div className={styles.toolbarSeparator} />}
  {perms && enableSecurityDialog ? (
  <SecurityDialog
@@ -253,26 +271,15 @@ let BrowserToolbar = ({
  icon='locked-solid'
  onEditPermissions={onEditPermissions}
  />
- <LoginDialog
- ref={loginDialogRef}
- currentUser={currentUser}
- login={login}
- logout={logout}
- />
  {enableSecurityDialog ? (
  <BrowserMenu
  setCurrent={setCurrent}
  title="Security"
  icon="locked-solid"
  disabled={!!relation || !!isUnique}
- active={!!currentUser}
  >
  <MenuItem text={'Class Level Permissions'} onClick={showCLP} />
  <MenuItem text={'Protected Fields'} onClick={showProtected} />
- <Separator />
- <MenuItem text={currentUser ? 'Switch Parse.User' : 'Browse as Parse.User'} onClick={showLogin} active={!!currentUser} />
- {currentUser ? <MenuItem text={useMasterKey ? <span>Browsing with <b>Master Key</b></span> : <span>Browse with <s>Master Key</s></span>} onClick={toggleMasterKeyUsage} active={!!currentUser} greenActive={useMasterKey} /> : <noscript />}
- {currentUser ? <MenuItem text={<span>Logout (<b>{currentUser.get('username')}</b>)</span>} onClick={logout} active={!!currentUser} /> : <noscript />}
  </BrowserMenu>
  ) : (
  <noscript />

diff --git a/src/dashboard/Data/Browser/LoginDialog.react.js b/src/dashboard/Data/Browser/LoginDialog.react.js
@@ -61,19 +61,19 @@ export default class LoginDialog extends React.Component {
  open && (
  <Modal
  type={Modal.Types.INFO}
- title={currentUser ? 'Switch Parse.User' : 'Login as Parse.User'}
+ title={currentUser ? 'Switch User' : 'Browse as User'}
  subtitle={
  <div style={{ paddingTop: '5px' }}>
  {currentUser && (
  <p>
- Logged in as <strong>{currentUser.get('username')}</strong>
+ Browsing as <strong>{currentUser.get('username')}</strong>
  </p>
  )}
  </div>
  }
  onCancel={this.handleClose}
  onConfirm={this.login}
- confirmText="Login"
+ confirmText="Browse"
  cancelText="Cancel"
  >
  <LoginRow