-
-
Notifications
You must be signed in to change notification settings - Fork 186
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1191 from streetmix/louh/sky-button
Jury-rig a button to make the supermoon optional
- Loading branch information
Showing
14 changed files
with
329 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import React, { Component } from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { connect } from 'react-redux' | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | ||
| import CloseButton from '../ui/CloseButton' | ||
| import { SUN_ICON, MOON_ICON } from '../ui/icons' | ||
| import { setEnvironment } from '../store/actions/street' | ||
| import './PaletteCommandsLeft.scss' | ||
|
|
||
| class PaletteCommandsLeft extends Component { | ||
| static propTypes = { | ||
| env: PropTypes.string, | ||
| setEnvironment: PropTypes.func.isRequired | ||
| } | ||
|
|
||
| constructor (props) { | ||
| super(props) | ||
|
|
||
| let tooltipDismissed | ||
| try { | ||
| tooltipDismissed = window.localStorage.getItem('supermoon-tooltip-dismissed') | ||
| } catch (e) { | ||
| console.log('Could not access localstorage') | ||
| } | ||
|
|
||
| this.state = { | ||
| tooltip: tooltipDismissed !== 'true' | ||
| } | ||
| } | ||
|
|
||
| setToDay = () => { | ||
| this.dismissTooltip() | ||
| this.props.setEnvironment('day') | ||
| } | ||
|
|
||
| setToMoon = () => { | ||
| this.dismissTooltip() | ||
| this.props.setEnvironment('supermoon') | ||
| } | ||
|
|
||
| dismissTooltip = () => { | ||
| this.setState({ | ||
| tooltip: false | ||
| }) | ||
|
|
||
| try { | ||
| window.localStorage.setItem('supermoon-tooltip-dismissed', 'true') | ||
| } catch (e) { | ||
| console.log('Could not access localstorage') | ||
| } | ||
| } | ||
|
|
||
| render () { | ||
| let Button | ||
| if (this.props.env === 'supermoon') { | ||
| Button = ( | ||
| <button | ||
| onClick={this.setToDay} | ||
| title={'Toggle supermoon'} | ||
| > | ||
| <FontAwesomeIcon icon={SUN_ICON} /> | ||
| </button> | ||
| ) | ||
| } else { | ||
| Button = ( | ||
| <button | ||
| onClick={this.setToMoon} | ||
| title={'Toggle supermoon'} | ||
| > | ||
| <FontAwesomeIcon icon={MOON_ICON} /> | ||
| </button> | ||
|
|
||
| ) | ||
| } | ||
|
|
||
| let Tooltip = (this.state.tooltip) ? ( | ||
| <div className="supermoon-tooltip"> | ||
| <CloseButton onClick={this.dismissTooltip} /> | ||
| <p> | ||
| <strong><a href="https://www.nationalgeographic.com/science/2019/01/how-to-watch-super-blood-wolf-moon-lunar-eclipse/" target="_blank" rel="noopener noreferrer">The “super blood wolf moon” lunar eclipse</a></strong> (external link) is visible in the Americas, | ||
| western Europe and in most of Africa from January 20-21, 2019. You can return to daytime sky with this button below.‎ | ||
| </p> | ||
| <div className="palette-tooltip-pointer-container"> | ||
| <div className="palette-tooltip-pointer" /> | ||
| </div> | ||
| </div> | ||
| ) : null | ||
|
|
||
| return ( | ||
| <div className="palette-commands-left"> | ||
| {Button} | ||
| {Tooltip} | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| const mapStateToProps = (state) => ({ | ||
| env: state.street.environment | ||
| }) | ||
|
|
||
| const mapDispatchToProps = { | ||
| setEnvironment | ||
| } | ||
|
|
||
| export default connect(mapStateToProps, mapDispatchToProps)(PaletteCommandsLeft) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| @import '../../css/variables.scss'; | ||
|
|
||
| .palette-commands-left { | ||
| position: absolute; | ||
| left: 10px; | ||
| top: 10px; | ||
| height: $palette-height - 50px; | ||
| vertical-align: top; | ||
| text-align: left; | ||
| z-index: $z-04-command-menu; | ||
|
|
||
| button { | ||
| height: $palette-height - 50px; | ||
| width: $palette-height - 50px; | ||
|
|
||
| // New style! | ||
| border: $button-border; | ||
| border-radius: 50%; | ||
|
|
||
| // Icon style | ||
| font-size: 1em; | ||
|
|
||
| &[disabled] { | ||
| border-color: desaturate($ui-colour, 100%); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| [dir="rtl"] { | ||
| .palette-commands-left { | ||
| right: 10px; | ||
| left: auto; | ||
| } | ||
| } | ||
|
|
||
| .supermoon-tooltip { | ||
| padding: 1.25em; | ||
| position: fixed; | ||
| bottom: 70px; | ||
| background-color: white; | ||
| border-radius: 6px; | ||
| font-size: 12px; | ||
| line-height: 1.4; | ||
| width: 230px; | ||
| left: 50px; | ||
| box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); | ||
| animation-duration: 1200ms; | ||
| animation-fill-mode: both; | ||
| animation-name: bounce; | ||
|
|
||
| [dir="rtl"] & { | ||
| left: auto; | ||
| right: 50px; | ||
| text-align: right; | ||
| } | ||
|
|
||
| p { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .close { | ||
| border: 0; | ||
| height: 16px; | ||
| width: 16px; | ||
| position: absolute; | ||
| right: 6px; | ||
| top: 5px; | ||
| padding: 0; | ||
| line-height: 16px; | ||
|
|
||
| [dir="rtl"] & { | ||
| right: auto; | ||
| left: 6px; | ||
| } | ||
| } | ||
|
|
||
| .palette-tooltip-pointer-container { | ||
| width: 40px; | ||
| position: absolute; | ||
| left: 33px; | ||
| margin-left: -20px; | ||
| overflow: hidden; | ||
| pointer-events: none; | ||
| bottom: -33px; | ||
| height: 33px; | ||
|
|
||
| [dir="rtl"] & { | ||
| left: auto; | ||
| right: 7px; | ||
| } | ||
| } | ||
|
|
||
| .palette-tooltip-pointer { | ||
| position: absolute; | ||
| height: 30px; | ||
| width: 30px; | ||
| left: 50%; | ||
| bottom: 22px; | ||
| margin-left: -18px; | ||
| border: 0; | ||
| transform: rotate(45deg); | ||
| background: #fff; | ||
| box-shadow: none; | ||
| box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); | ||
| } | ||
| } | ||
|
|
||
| @keyframes bounce { | ||
| 0%, | ||
| 20%, | ||
| 50%, | ||
| 80%, | ||
| 100% { | ||
| transform: translateY(0); | ||
| } | ||
|
|
||
| 40% { | ||
| transform: translateY(-20px); | ||
| } | ||
|
|
||
| 60% { | ||
| transform: translateY(-10px); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.