diff --git a/src/components/language-selector/language-selector.css b/src/components/language-selector/language-selector.css index d8ae588ae..25b995160 100644 --- a/src/components/language-selector/language-selector.css +++ b/src/components/language-selector/language-selector.css @@ -5,19 +5,27 @@ height: 1.5rem; } -.disabled { - opacity: .5; +/* Position the language select over the language icon, and make it transparent */ +.language-select { + position: absolute; + width: $language-selector-width; + height: $menu-bar-height; + opacity: 0; + user-select: none; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: .875rem; } -.language-select { - margin: .5rem; - height: 1.85rem; - border: 1px solid $motion-primary; - user-select: none; - outline: none; - background: rgba(255, 255, 255, 0.5); - color: $motion-tertiary; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +[dir="ltr"] .language-select { + right: 0; +} + +[dir="rtl"] .language-select { + left: 0; +} + +.language-select option { + opacity: 1; } .language-select:focus { diff --git a/src/components/language-selector/language-selector.jsx b/src/components/language-selector/language-selector.jsx index a6707bbce..fd4caef5f 100644 --- a/src/components/language-selector/language-selector.jsx +++ b/src/components/language-selector/language-selector.jsx @@ -1,58 +1,38 @@ 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 ( - -
- + { + Object.keys(locales) + .filter(l => !ignore.includes(l)) + .map(locale => ( + - )) - } - -
-
- ); - } -} + {locales[locale].name} + + )) + } + +); LanguageSelector.propTypes = { - componentRef: PropTypes.func, currentLocale: PropTypes.string, - onChange: PropTypes.func, - open: PropTypes.bool + label: PropTypes.string, + 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 c1ae3f9fa..de2854c50 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 { + margin-bottom: .625rem; +} + .language-menu { display: inline-flex; + width: $language-selector-width; } .menu { diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 115624110..67e026edd 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -165,39 +165,19 @@ class MenuBar extends React.Component { />
- {/* @TODO: remove coming soon tooltip wrapper https://github.com/LLK/scratch-gui/issues/2664 */} - -
- - -
- - - - -
+
+ + +
+
{ await loadUri(uri); await clickXpath('//button[@title="Try It"]'); await clickXpath('//*[@aria-label="language selector"]'); - await clickText('English'); await clickText('Deutsch'); await new Promise(resolve => setTimeout(resolve, 1000)); // wait for blocks refresh