Move language selector to top right

src/components/Item.js

@@ -29,6 +29,9 @@ export default class Item extends React.Component {
 
   componentDidMount() {
     this.wait = setInterval(() => {
+      if (!this.imgRef) {
+        return;
+      }
       const width = this.imgRef.naturalWidth;
       const height = this.imgRef.naturalHeight;
       const offsetWidth = this.wrapper.offsetWidth;
@@ -43,6 +46,10 @@ export default class Item extends React.Component {
     }, 30);
   }
 
+  componentWillUnmount() {
+    this.wait && clearInterval(this.wait);
+  }
+
   onImageMouseMove(event) {
     event = event.nativeEvent;
     const target = event.target;

src/components/LanguageSelector.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import IconButton from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import DoneIcon from '@material-ui/icons/Done';
+import LanguageIcon from '@material-ui/icons/Language';
+import { FormattedMessage } from 'react-intl';
+
+import config from '@/config';
+import Storage from '@/utils/Storage';
+import chooseLocale from '@/locale/chooseLocale';
+
+@connect(state => ({ locale: state.locale }))
+export default class LanguageSelector extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      anchorEl: null
+    };
+  }
+
+  @autobind
+  onLanguageClick(value) {
+    Storage.set('lang', value);
+    chooseLocale(value, this.props.dispatch);
+  }
+
+  @autobind
+  onMenuOpen(event) {
+    this.setState({ anchorEl: event.currentTarget });
+  }
+
+  @autobind
+  onMenuClose() {
+    this.setState({ anchorEl: null });
+  }
+
+  renderLanguages() {
+    const languages = config.languages;
+
+    return (
+      <React.Fragment>
+        <MenuItem disabled>
+          <FormattedMessage id="Language" />
+        </MenuItem>
+        {languages.map(elem => {
+          const lang = Storage.get('lang');
+          const highlight = elem.value === lang;
+
+          return (
+            <MenuItem
+              key={elem.value}
+              onClick={() => {
+                this.onLanguageClick(elem.value);
+                this.onMenuClose();
+              }}>
+              {highlight && <DoneIcon style={{ color: '#4caf50' }} />}
+              {elem.name}
+            </MenuItem>
+          );
+        })}
+      </React.Fragment>
+    );
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <IconButton color="inherit" onClick={this.onMenuOpen}>
+          <LanguageIcon />
+        </IconButton>
+        <Menu
+          anchorEl={this.state.anchorEl}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right'
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right'
+          }}
+          open={Boolean(this.state.anchorEl)}
+          onClose={this.onMenuClose}>
+          {this.renderLanguages()}
+        </Menu>
+      </React.Fragment>
+    );
+  }
+}

src/containers/GalleryContainer.js

@@ -11,14 +11,12 @@ import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Drawer from '@material-ui/core/Drawer';
 import List from '@material-ui/core/List';
-import Divider from '@material-ui/core/Divider';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import DoneIcon from '@material-ui/icons/Done';
 import GithubIcon from '@material-ui/docs/svgIcons/Github';
-import shortid from 'shortid';
 import DocumentTitle from 'react-document-title';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
@@ -30,12 +28,11 @@ import GalleryList from '@/components/List';
 import Loading from '@/components/Loading';
 import Refresh from '@/components/Refresh';
 import Message from '@/components/Message';
+import LanguageSelector from '@/components/LanguageSelector';
 import ScrollContext from '@/components/ScrollContext';
 import scrollTo from '@/utils/scrollTo';
 import Storage from '@/utils/Storage';
 
-import chooseLocale from '@/locale/chooseLocale';
-
 @connect(state => ({ gallery: state.gallery }))
 @injectIntl
 @CSSModules(galleryStyles, { allowMultiple: true })
@@ -53,7 +50,7 @@ export default class GalleryContainer extends React.Component {
 
     const cachedTag = Storage.get('tag');
     this.props.dispatch(
-      GalleryActions.setTag(cachedTag === null ? 'ranking' : cachedTag)
+      GalleryActions.setTag(cachedTag ? 'ranking' : cachedTag)
     );
 
     if (this.props.gallery.items.length === 0) {
@@ -119,42 +116,13 @@ export default class GalleryContainer extends React.Component {
     document.body.removeChild(temp);
   }
 
-  @autobind
-  onLanguageClick(value) {
-    Storage.set('lang', value);
-    chooseLocale(value, this.props.dispatch);
-  }
-
   @autobind
   onKeywordClick(tag) {
     this.props.dispatch(GalleryActions.setTag(tag));
     this.reRenderContent(false);
     Storage.set('tag', tag);
   }
 
-  renderLanguages() {
-    const languages = config.languages;
-
-    return languages.map(elem => {
-      const lang = Storage.get('lang');
-      const highlight = elem.value === lang;
-
-      return (
-        <ListItem
-          key={shortid.generate()}
-          button
-          onClick={() => this.onLanguageClick(elem.value)}>
-          {highlight && (
-            <ListItemIcon>
-              <DoneIcon style={{ color: '#4caf50' }} />
-            </ListItemIcon>
-          )}
-          <ListItemText primary={elem.name} />
-        </ListItem>
-      );
-    });
-  }
-
   renderKeywords() {
     const keywords = config.keywords;
 
@@ -163,7 +131,7 @@ export default class GalleryContainer extends React.Component {
 
       return (
         <ListItem
-          key={shortid.generate()}
+          key={elem.en}
           button
           onClick={() => this.onKeywordClick(elem.en)}>
           {highlight && (
@@ -172,6 +140,7 @@ export default class GalleryContainer extends React.Component {
             </ListItemIcon>
           )}
           <ListItemText
+            style={{ fontWeight: 'bold' }}
             primary={
               elem.en === 'ranking'
                 ? this.props.intl.formatMessage({ id: 'Ranking' })
@@ -224,12 +193,8 @@ export default class GalleryContainer extends React.Component {
                   styleName="appbar-title">
                   {config.siteTitle}
                 </Typography>
-                <IconButton
-                  color="inherit"
-                  onClick={() =>
-                    (location.href =
-                      'https://github.com/LoveLiveSunshine/pixiv.moe')
-                  }>
+                <LanguageSelector />
+                <IconButton color="inherit" href={config.projectLink}>
                   <GithubIcon />
                 </IconButton>
               </Toolbar>
@@ -241,15 +206,6 @@ export default class GalleryContainer extends React.Component {
               role="button"
               onClick={this.onToggleDrawer}
               onKeyDown={this.onToggleDrawer}>
-              <List
-                subheader={
-                  <ListSubheader>
-                    <FormattedMessage id="Language" />
-                  </ListSubheader>
-                }>
-                {this.renderLanguages()}
-              </List>
-              <Divider />
               <List
                 subheader={
                   <ListSubheader>

src/index.ejs

@@ -54,12 +54,20 @@
     line-height: 0 !important;
   }
   </style>
+  <!--[if lte IE 10]>
+  <style>
+    #index-loading {
+      display: none;
+    }
+  </style>
+  <![endif]-->
+
 </head>
 
 <body>
-  <!--[if lte IE 8]>
+  <!--[if lte IE 10]>
   <div class="message">
-      <p>古いInternet Explorerにサ終了！</p>
+    <p>古いInternet Explorerにサ終了！</p>
   </div>
   <![endif]-->
   <noscript>