diff --git a/src/components/language-selector/language-selector.css b/src/components/language-selector/language-selector.css index d8ae588ae13fd05fc9d6b07eb6316de7427a4613..df53ddbd85ad367b1aab53afff4a1491d0a304ad 100644 --- a/src/components/language-selector/language-selector.css +++ b/src/components/language-selector/language-selector.css @@ -5,19 +5,23 @@ height: 1.5rem; } -.disabled { - opacity: .5; -} - +/* Position the language select over the language icon, and make it transparent */ .language-select { - margin: .5rem; - height: 1.85rem; - border: 1px solid $motion-primary; + position: relative; + width: 3rem; + height: 3rem; + opacity: 0; user-select: none; - outline: none; - background: rgba(255, 255, 255, 0.5); - color: $motion-tertiary; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: .875rem; +} + +[dir="ltr"] .language-select { + right: 40px; +} + +[dir="rtl"] .language-select { + left: 40px; } .language-select:focus { diff --git a/src/components/language-selector/language-selector.jsx b/src/components/language-selector/language-selector.jsx index a6707bbced246129ee8d464694b6a117ec833555..e7fd2fda46f95edc3605fefe76c2eae0dad66637 100644 --- a/src/components/language-selector/language-selector.jsx +++ b/src/components/language-selector/language-selector.jsx @@ -1,58 +1,36 @@ import PropTypes from 'prop-types'; import React from 'react'; -import Box from '../box/box.jsx'; import locales from 'scratch-l10n'; import styles from './language-selector.css'; // supported languages to exclude from the menu, but allow as a URL option const ignore = ['he']; -class LanguageSelector extends React.Component { - render () { - const { - componentRef, - currentLocale, - onChange, - ...componentProps - } = this.props; - return ( - <Box - {...componentProps} - > - <div - className={styles.group} - ref={componentRef} - > - <select - className={styles.languageSelect} - value={currentLocale} - onChange={onChange} +const LanguageSelector = ({currentLocale, onChange}) => ( + <select + className={styles.languageSelect} + value={currentLocale} + onChange={onChange} + > + { + Object.keys(locales) + .filter(l => !ignore.includes(l)) + .map(locale => ( + <option + key={locale} + value={locale} > - { - Object.keys(locales) - .filter(l => !ignore.includes(l)) - .map(locale => ( - <option - key={locale} - value={locale} - > - {locales[locale].name} - </option> - )) - } - </select> - </div> - </Box> - ); - } -} + {locales[locale].name} + </option> + )) + } + </select> +); LanguageSelector.propTypes = { - componentRef: PropTypes.func, currentLocale: PropTypes.string, - onChange: PropTypes.func, - open: PropTypes.bool + onChange: PropTypes.func }; export default LanguageSelector; diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index c1ae3f9fa2144059547841170b555535081062f8..46e63cc5305295b62cf1ae7a2c6755af3eda0ce2 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -48,8 +48,13 @@ height: 1.5rem; } +.language-caret { + vertical-align: text-top; +} + .language-menu { display: inline-flex; + width: 3rem; } .menu { diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 11562411086b5cb47d97300f424d6494a1fd7000..1d28ad6ac5c8793751a8bb12e2997ccee41bcb00 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -165,39 +165,21 @@ class MenuBar extends React.Component { /> </div> <div - className={classNames(styles.menuBarItem, styles.hoverable, { - [styles.active]: this.props.languageMenuOpen - })} - onMouseUp={this.handleLanguageMouseUp} + className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)} > - {/* @TODO: remove coming soon tooltip wrapper https://github.com/LLK/scratch-gui/issues/2664 */} - <MenuBarItemTooltip - enable - id="menubar-selector" - place="right" + <div + aria-label={this.props.intl.formatMessage(ariaMessages.language)} > - <div - aria-label={this.props.intl.formatMessage(ariaMessages.language)} - className={classNames(styles.languageMenu)} - > - <img - className={styles.languageIcon} - src={languageIcon} - /> - <img - className={styles.dropdownCaret} - src={dropdownCaret} - /> - </div> - <MenuBarMenu - open={this.props.languageMenuOpen} - place={this.props.isRtl ? 'left' : 'right'} - onRequestClose={this.props.onRequestCloseLanguage} - > - <LanguageSelector /> - </MenuBarMenu> - - </MenuBarItemTooltip> + <img + className={styles.languageIcon} + src={languageIcon} + /> + <img + className={styles.languageCaret} + src={dropdownCaret} + /> + </div> + <LanguageSelector /> </div> <div className={classNames(styles.menuBarItem, styles.hoverable, {