From 3941c91e36ec74e03c3d3f23c8242c967138077c Mon Sep 17 00:00:00 2001 From: chrisgarrity Date: Wed, 15 Aug 2018 14:34:58 -0400 Subject: [PATCH 1/5] Get rid of double menu for language selection MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Overlay a transparent `select` over the language icon. When a user clicks there the options pops up. There’s no styling of the options, other than font and font size. --- .../language-selector/language-selector.css | 26 ++++---- .../language-selector/language-selector.jsx | 62 ++++++------------- src/components/menu-bar/menu-bar.css | 5 ++ src/components/menu-bar/menu-bar.jsx | 44 ++++--------- 4 files changed, 53 insertions(+), 84 deletions(-) diff --git a/src/components/language-selector/language-selector.css b/src/components/language-selector/language-selector.css index d8ae588ae..df53ddbd8 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 { + position: relative; + width: 3rem; + height: 3rem; + 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: 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 a6707bbce..e7fd2fda4 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 ( - -
- + { + 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 + 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..46e63cc53 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 115624110..1d28ad6ac 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 { />
- {/* @TODO: remove coming soon tooltip wrapper https://github.com/LLK/scratch-gui/issues/2664 */} - -
- - -
- - - - - + + +
+
Date: Thu, 16 Aug 2018 07:35:25 -0400 Subject: [PATCH 2/5] Fix localization test. --- test/integration/localization.test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/integration/localization.test.js b/test/integration/localization.test.js index abd8ee467..9c9193b97 100644 --- a/test/integration/localization.test.js +++ b/test/integration/localization.test.js @@ -25,8 +25,7 @@ describe('Localization', () => { test('Localization', async () => { await loadUri(uri); await clickXpath('//button[@title="Try It"]'); - await clickXpath('//*[@aria-label="language selector"]'); - await clickText('English'); + await clickXpath('//*[@aria-label="language selector"]/following-sibling::select'); await clickText('Deutsch'); await new Promise(resolve => setTimeout(resolve, 1000)); // wait for blocks refresh From 86a8dd36216ba58f175335ce5c34a155d4a8b815 Mon Sep 17 00:00:00 2001 From: chrisgarrity Date: Thu, 16 Aug 2018 17:12:53 -0400 Subject: [PATCH 3/5] Fixes for firefox on Windows --- src/components/language-selector/language-selector.css | 10 +++++++--- src/components/menu-bar/menu-bar.css | 2 +- src/components/menu-bar/menu-bar.jsx | 6 ++---- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/language-selector/language-selector.css b/src/components/language-selector/language-selector.css index df53ddbd8..219896103 100644 --- a/src/components/language-selector/language-selector.css +++ b/src/components/language-selector/language-selector.css @@ -7,7 +7,7 @@ /* Position the language select over the language icon, and make it transparent */ .language-select { - position: relative; + position: absolute; width: 3rem; height: 3rem; opacity: 0; @@ -17,11 +17,15 @@ } [dir="ltr"] .language-select { - right: 40px; + right: 0; } [dir="rtl"] .language-select { - left: 40px; + left: 0; +} + +.language-select option { + opacity: 1; } .language-select:focus { diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index 46e63cc53..74cbd5f22 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -49,7 +49,7 @@ } .language-caret { - vertical-align: text-top; + margin-bottom: .625rem; } .language-menu { diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 1d28ad6ac..98bf19bc5 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -167,9 +167,7 @@ class MenuBar extends React.Component {
-
+
- +
Date: Fri, 17 Aug 2018 08:07:31 -0400 Subject: [PATCH 4/5] move aria label onto languageSelector --- src/components/language-selector/language-selector.jsx | 4 +++- src/components/menu-bar/menu-bar.jsx | 2 +- test/integration/localization.test.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/language-selector/language-selector.jsx b/src/components/language-selector/language-selector.jsx index e7fd2fda4..fd4caef5f 100644 --- a/src/components/language-selector/language-selector.jsx +++ b/src/components/language-selector/language-selector.jsx @@ -7,8 +7,9 @@ import styles from './language-selector.css'; // supported languages to exclude from the menu, but allow as a URL option const ignore = ['he']; -const LanguageSelector = ({currentLocale, onChange}) => ( +const LanguageSelector = ({currentLocale, label, onChange}) => (