From 3941c91e36ec74e03c3d3f23c8242c967138077c Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Wed, 15 Aug 2018 14:34:58 -0400
Subject: [PATCH] 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 | 24 ++++---
.../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, 52 insertions(+), 83 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 {
- 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 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 (
- <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 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 {
/>
</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, {
--
GitLab