diff --git a/src/common/data/copy.json b/src/common/data/copy.json index e480786..d5054db 100644 --- a/src/common/data/copy.json +++ b/src/common/data/copy.json @@ -94,7 +94,9 @@ } }, "en": { + "language_label": "Language", "language_short": "Eng", + "language_long": "English", "tiles": { "default": "Map", "satellite": "Sat" @@ -212,9 +214,13 @@ } }, "ru": { - "language_short": "Рус" + "language_label": "Язык", + "language_short": "Рус", + "language_long": "Русский" }, "uk": { - "language_short": "Укр" + "language_label": "Мова", + "language_short": "Укр", + "language_long": "Українська" } } diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js index 9377713..3d555cc 100644 --- a/src/components/Toolbar.js +++ b/src/components/Toolbar.js @@ -24,18 +24,25 @@ import { import { ToolbarButton } from "./controls/atoms/ToolbarButton"; import { FullscreenToggle } from "./controls/FullScreenToggle"; import { LanguageSwitch } from "./controls/LanguageSwitch"; +import { ToolbarLanguageMenu } from "./controls/LanguageMenu"; import DownloadPanel from "./controls/DownloadPanel"; class Toolbar extends React.Component { constructor(props) { super(props); this.onSelectFilter = this.onSelectFilter.bind(this); - this.state = { _selected: -1 }; + this.state = { _selected: -1, isLanguageMenuActive: false }; } selectTab(selected) { const _selected = this.state._selected === selected ? -1 : selected; - this.setState({ _selected }); + this.setState({ _selected, isLanguageMenuActive: false }); + } + + setIsLanguageMenuActive(isActive) { + isActive + ? this.setState({ isLanguageMenuActive: true, _selected: -1 }) + : this.setState({ isLanguageMenuActive: false }); } onSelectFilter(key, matchingKeys) { @@ -210,6 +217,17 @@ class Toolbar extends React.Component { /> ); } + renderToolbarLanguageTab() { + return ( + this.setIsLanguageMenuActive(isActive)} + language={this.props.language} + languages={this.props.languages} + setLanguage={this.props.actions.toggleLanguage} + /> + ); + } renderToolbarCategoryTabs(idxs) { const { categories: panelCategories } = this.props.toolbarCopy.panels; @@ -304,6 +322,9 @@ class Toolbar extends React.Component {
+ {this.props.languages?.length > 1 + ? this.renderToolbarLanguageTab() + : null} {narrativesExist ? this.renderToolbarTab( narrativesIdx, diff --git a/src/components/controls/LanguageMenu.js b/src/components/controls/LanguageMenu.js new file mode 100644 index 0000000..301345c --- /dev/null +++ b/src/components/controls/LanguageMenu.js @@ -0,0 +1,59 @@ +import { ToolbarButton } from "./atoms/ToolbarButton"; +import copy from "../../common/data/copy.json"; + +export function LanguageMenu({ + isActive, + language: currentLanguage, + languages, + setLanguage, +}) { + return ( +
( +
setLanguage(language)} + className={ + language !== currentLanguage + ? "language-option" + : "language-option selected" + } + children={copy[language].language_long} + /> + ))} + /> + ); +} + +export function ToolbarLanguageMenu({ + isActive, + setIsActive, + language, + languages, + setLanguage, +}) { + return ( +
+ setIsActive(!isActive)} + iconKey="translate" + label={copy[language].language_label} + /> + { + setIsActive(false); + setLanguage(language); + }} + /> +
+ ); +} diff --git a/src/scss/languagemenu.scss b/src/scss/languagemenu.scss new file mode 100644 index 0000000..4def63b --- /dev/null +++ b/src/scss/languagemenu.scss @@ -0,0 +1,23 @@ +.language-menu { + color: $midwhite; + font-size: 1.25em; + .language-option:not(:first-child) { + border-top: solid 1px $midwhite; + } + .language-option { + cursor: pointer; + transition: 0.2s ease; + padding: 1em 1em; + background-color: $darkgrey; + &.selected { + background-color: $black; + color: $offwhite; + } + &:active { + background-color: $midgrey; + } + &:hover { + color: $offwhite; + } + } +} diff --git a/src/scss/main.scss b/src/scss/main.scss index 8329d12..3b82b66 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -15,3 +15,4 @@ @import "search"; @import "satelliteoverlaytoggle"; @import "languageswitch"; +@import "languagemenu"; diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss index 79405e2..acaa472 100644 --- a/src/scss/toolbar.scss +++ b/src/scss/toolbar.scss @@ -26,7 +26,6 @@ font-size: $normal; font-weight: 100; transition: 0.2s ease; - z-index: $header; button { background: #222222; @@ -277,6 +276,7 @@ } .toolbar-panels { + z-index: -1; width: 440px; top: 15px; bottom: 0; @@ -522,6 +522,27 @@ } } +// Toolbar-menu consists of a toolbar-button and a panel. +// Panel is positioned next to the button. +// Panel slides behind the toolbar. +.toolbar-menu { + position: relative; + .toolbar-panel { + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: -1; + visibility: hidden; + &.active { + left: 100%; + right: auto; + visibility: visible; + } + transition: 0.2s ease; + } +} + .search-content { .item { overflow: auto;