Move ShareButton to Fab floating Button & Add Language Switcher

web/src/App.js

@@ -18,13 +18,15 @@ import './App.css'
 import Box from '@material-ui/core/Box'
 import styled from 'styled-components'
 import MobileAppBar from 'components/organisms/MobileAppBar'
+import ShareButton from 'components/organisms/ShareButton'
 import Footer from 'components/organisms/Footer'
 import { ContextStoreProvider } from 'ContextStore'
 import withTracker from './WithTracker'
 import SearchDrawer from 'components/pages/SearchDrawer'
 import DistrictOverviewPage from 'components/pages/district/overview'
 import DistrictAllPage from 'components/pages/district/all'
 import GlobalDisclaimer from 'components/organisms/GlobalDisclaimer'
+import { fireEvent } from 'utils/ga_fireevent'
 import i18n from 'i18n'
 
 const client = new ApolloClient({
@@ -165,6 +167,15 @@ const App = props => {
                   </Switch>
                 </main>
               </Wrapper>
+              <ShareButton
+                onClick={() =>
+                  fireEvent({
+                    ca: 'general',
+                    ac: 'click',
+                    lb: 'share_button',
+                  })
+                }
+              />
               <Footer />
             </ContentContainer>
             <SearchDrawer />

web/src/components/organisms/LanguageSwitcher.js

@@ -0,0 +1,77 @@
+import React from 'react'
+import IconButton from '@material-ui/core/IconButton'
+import styled from 'styled-components'
+import Menu from '@material-ui/core/Menu'
+import MenuItem from '@material-ui/core/MenuItem'
+import LanguageIcon from '@material-ui/icons/Language'
+import { useTranslation } from 'react-i18next'
+
+const RightIconButton = styled(IconButton)`
+  && {
+    position: absolute;
+    right: 0;
+  }
+`
+
+function LanguageSwitcher(props) {
+  const [anchorEl, setAnchorEl] = React.useState(null)
+
+  const handleButtonClick = event => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleButtonClose = () => {
+    setAnchorEl(null)
+  }
+
+  const changeLanguage = lng => {
+    var path = window.location.pathname
+    if (path.includes('/en/') && lng === 'zh') {
+      path = path.replace('/en/', '/zh/')
+      window.location.pathname = path
+    } else if (path.includes('/zh/') && lng === 'en') {
+      path = path.replace('/zh/', '/en/')
+      window.location.pathname = path
+    } else if (!path.includes('/en/') && !path.includes('/zh/')) {
+      path = `${lng}${path}`
+      window.location.pathname = path
+    } else {
+      handleButtonClose()
+    }
+  }
+
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <RightIconButton
+        color="inherit"
+        component="span"
+        aria-label="Language Switcher"
+        aria-controls="lang-menu"
+        aria-haspopup="true"
+        onClick={handleButtonClick}
+      >
+        <LanguageIcon />
+      </RightIconButton>
+      <Menu
+        id="lang-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleButtonClose}
+      >
+        <MenuItem onClick={() => changeLanguage('zh')}>
+          {/* 中文 */}
+          {t('lang.zh')}
+        </MenuItem>
+        <MenuItem onClick={() => changeLanguage('en')}>
+          {/* English */}
+          {t('lang.en')}
+        </MenuItem>
+      </Menu>
+    </>
+  )
+}
+
+export default LanguageSwitcher

web/src/components/organisms/MobileAppBar.js

@@ -8,7 +8,7 @@ import styled from 'styled-components'
 import ContextStore from 'ContextStore'
 import { DRAWER_OPEN } from '../../reducers/drawer'
 import { UnstyledNavLink } from '../atoms/Link'
-import ShareButton from './ShareButton'
+import LanguageSwitcher from './LanguageSwitcher'
 import { fireEvent } from 'utils/ga_fireevent'
 
 const StyledAppBar = styled(AppBar)`
@@ -59,12 +59,12 @@ function MobileAppBar(props) {
           >
             <MenuIcon />
           </IconButton>
-          <ShareButton
+          <LanguageSwitcher
             onClick={() =>
               fireEvent({
                 ca: 'general',
                 ac: 'click',
-                lb: 'share_button',
+                lb: 'lang_switcher_button', //TODO: do we need that?
               })
             }
           />

web/src/components/organisms/ShareButton.js

@@ -1,11 +1,13 @@
 import React from 'react'
 import IconButton from '@material-ui/core/IconButton'
-import ShareIcon from '@material-ui/icons/Share'
 import CopyIcon from '@material-ui/icons/Link'
 import styled from 'styled-components'
 import Menu from '@material-ui/core/Menu'
 import MenuItem from '@material-ui/core/MenuItem'
+import Fab from '@material-ui/core/Fab'
+import AddIcon from '@material-ui/icons/Add'
 import { getCurrentUrl } from 'utils/helper'
+import { COLORS } from 'ui/theme'
 import {
   FacebookShareButton,
   TelegramShareButton,
@@ -17,17 +19,22 @@ import {
   TwitterIcon,
 } from 'react-share'
 
-const RightIconButton = styled(IconButton)`
+const StyledCopyIcon = styled(CopyIcon)`
   && {
-    position: absolute;
-    right: 0;
+    width: 32px;
+    height: 32px;
   }
 `
 
-const StyledCopyIcon = styled(CopyIcon)`
+const StyledFab = styled(Fab)`
   && {
-    width: 32px;
-    height: 32px;
+    margin: 0px;
+    top: auto;
+    right: 20px;
+    bottom: 20px;
+    left: auto;
+    position: fixed;
+    color: ${COLORS.main.background};
   }
 `
 
@@ -80,16 +87,15 @@ function ShareButton(props) {
 
   return (
     <>
-      <RightIconButton
-        color="inherit"
-        component="span"
+      <StyledFab
+        color="primary"
         aria-label="Share"
         aria-controls="share-menu"
         aria-haspopup="true"
         onClick={handleShareButtonClick}
       >
-        <ShareIcon />
-      </RightIconButton>
+        <AddIcon />
+      </StyledFab>
       <Menu
         id="share-menu"
         anchorEl={anchorEl}

web/src/locales/en/translation.json

@@ -30,7 +30,7 @@
   "voteStats.text1": "Not allowed to vote",
   "voteStats.text2": "Did not vote",
   "voteStats.text3": "Invalid vote",
-  "voteStats.text4": "Vote for <name>",
+  "voteStats.text4": "Vote for {{name}}",
   "metrics.text1": "Demographics",
   "camp.democracy": "Pro-democratic",
   "camp.establishment": "Pro-establishment",
@@ -153,5 +153,7 @@
   "summary.tag.clash": "Two or more same camp candidates running in the same constituency - {{n}} districts",
   "summary.tag.highlight": "Highlighted districts - {{n}} districts",
   "summary.tag.highlight_text": "是次選舉，該選區有超過2個候選人。另外，該選區於2015區議會選舉競爭激烈（當選者得票與第二高得票者相差少於10個百分比）或自動當選。",
-  "summary.tag.uncontested": "Uncontested in last election - {{n}} districts"
+  "summary.tag.uncontested": "Uncontested in last election - {{n}} districts",
+  "lang.en": "English",
+  "lang.zh": "中文"
 }

web/src/locales/zh/translation.json

@@ -30,7 +30,7 @@
   "voteStats.text1": "不能投票",
   "voteStats.text2": "沒有投票",
   "voteStats.text3": "投票失效",
-  "voteStats.text4": "投給<name>",
+  "voteStats.text4": "投給{{name}}",
   "metrics.text1": "人口資料",
   "camp.democracy": "民主",
   "camp.establishment": "建制",
@@ -153,5 +153,7 @@
   "summary.tag.clash": "撞區 - {{n}}區",
   "summary.tag.highlight": "焦點選區 - {{n}}區",
   "summary.tag.highlight_text": "是次選舉，該選區有超過2個候選人。另外，該選區於2015區議會選舉競爭激烈（當選者得票與第二高得票者相差少於10個百分比）或自動當選。",
-  "summary.tag.uncontested": "上屆自動當選 - {{n}}區"
+  "summary.tag.uncontested": "上屆自動當選 - {{n}}區",
+  "lang.en": "English",
+  "lang.zh": "中文"
 }