From 1effc9eb6781dd3bb4876237871999cbb360d665 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Wed, 9 Sep 2020 22:20:51 -0700 Subject: [PATCH] Add Upload button behind FF --- src/App.css | 11 +++- src/App.js | 19 ++++--- src/Header.js | 80 ++++++++++++++++-------------- src/UploadButton.js | 37 ++++++++++++++ src/components/icons/CloseIcon.js | 14 ++++++ src/components/icons/UploadIcon.js | 14 ++++++ src/constants.js | 1 + src/redux/actionCreators.js | 3 ++ src/redux/reducer.js | 4 ++ 9 files changed, 138 insertions(+), 45 deletions(-) create mode 100644 src/UploadButton.js create mode 100644 src/components/icons/CloseIcon.js create mode 100644 src/components/icons/UploadIcon.js diff --git a/src/App.css b/src/App.css index 8edbe29b..f41507b7 100644 --- a/src/App.css +++ b/src/App.css @@ -51,7 +51,7 @@ h1 a { } #search h1 .name { - margin: 0 30px 0 0px; + margin: 0 15px 0 0px; } button { @@ -77,6 +77,13 @@ button { border-right: 1px solid rgb(58, 71, 88); } +button:active { + border-right: 1px solid rgb(235, 255, 255); + border-bottom: 1px solid rgb(235, 255, 255); + border-top: 1px solid rgb(58, 71, 88); + border-left: 1px solid rgb(58, 71, 88); +} + /* We need to move the text before we can enable this. button:active { @@ -165,7 +172,7 @@ body.webamp-loaded #webamp { visibility: visible; } -@media (max-width: 800px) { +@media (max-width: 870px) { #search h1 .name { display: none; } diff --git a/src/App.js b/src/App.js index 4faca54f..d52222b5 100644 --- a/src/App.js +++ b/src/App.js @@ -35,13 +35,17 @@ function App(props) {
- + {props.uploadViewOpen ? ( + "UPLOAD" + ) : ( + + )} {props.aboutPage ? ( @@ -67,6 +71,7 @@ const mapStateToProps = (state) => ({ overlayShouldAnimate: Selectors.overlayShouldAnimate(state), aboutPage: Selectors.getActiveContentPage(state) === ABOUT_PAGE, scale: state.scale, + uploadViewOpen: state.uploadViewOpen, }); export default connect(mapStateToProps)(App); diff --git a/src/Header.js b/src/Header.js index c90b1d57..22233419 100644 --- a/src/Header.js +++ b/src/Header.js @@ -7,6 +7,8 @@ import Disposable from "./Disposable"; import { useWindowSize } from "./hooks"; import { ReactComponent as AlgoliaLogo } from "./searchByAlgoliaDarkbBackground.svg"; import algoliaLogoSmallUrl from "./searchByAlgoliaSmall.png"; +import { SHOW_UPLOAD } from "./constants"; +import UploadButton from "./UploadButton"; function SearchLogo() { const { windowWidth } = useWindowSize(); @@ -69,18 +71,20 @@ class Header extends React.Component { - - - - {/* + {this.props.uploadViewOpen || ( + <> + + + + {/* */} - this.props.setSearchQuery(e.target.value)} - value={this.props.searchQuery || ""} - placeholder={"Search..."} - ref={(node) => { - this._inputRef = node; - }} - /> - - + this.props.setSearchQuery(e.target.value)} + value={this.props.searchQuery || ""} + placeholder={"Search..."} + ref={(node) => { + this._inputRef = node; + }} + /> + + + + )} +
); } @@ -128,6 +135,7 @@ class Header extends React.Component { const mapStateToProps = (state) => ({ searchQuery: Selectors.getSearchQuery(state), scale: state.scale, + uploadViewOpen: state.uploadViewOpen, }); const mapDispatchToProps = (dispatch) => ({ diff --git a/src/UploadButton.js b/src/UploadButton.js new file mode 100644 index 00000000..3c954acb --- /dev/null +++ b/src/UploadButton.js @@ -0,0 +1,37 @@ +import * as React from "react"; +import { connect } from "react-redux"; +import * as Actions from "./redux/actionCreators"; +import { SHOW_UPLOAD } from "./constants"; +import UploadIcon from "./components/icons/UploadIcon"; +import CloseIcon from "./components/icons/CloseIcon"; + +function UploadButton({ toggleUploadView, uploadViewOpen }) { + if (!SHOW_UPLOAD) { + return null; + } + return ( + + ); +} + +const mapStateToProps = (state) => ({ + uploadViewOpen: state.uploadViewOpen, +}); + +const mapDispatchToProps = (dispatch) => ({ + toggleUploadView() { + dispatch(Actions.toggleUploadView()); + }, +}); +export default connect(mapStateToProps, mapDispatchToProps)(UploadButton); diff --git a/src/components/icons/CloseIcon.js b/src/components/icons/CloseIcon.js new file mode 100644 index 00000000..9211c88f --- /dev/null +++ b/src/components/icons/CloseIcon.js @@ -0,0 +1,14 @@ +import * as React from "react"; + +function CloseIcon(props) { + return ( + + + + ); +} + +export default CloseIcon; diff --git a/src/components/icons/UploadIcon.js b/src/components/icons/UploadIcon.js new file mode 100644 index 00000000..dff12d2f --- /dev/null +++ b/src/components/icons/UploadIcon.js @@ -0,0 +1,14 @@ +import React from "react"; + +function UploadIcon(props) { + return ( + + + + ); +} + +export default UploadIcon; diff --git a/src/constants.js b/src/constants.js index 31320a02..ed18377d 100644 --- a/src/constants.js +++ b/src/constants.js @@ -7,3 +7,4 @@ export const ABOUT_PAGE = "ABOUT_PAGE"; export const SCREENSHOT_CDN = "https://cdn.webampskins.org"; export const SKIN_CDN = "https://cdn.webampskins.org"; export const API_URL = "https://api.webampskins.org"; +export const SHOW_UPLOAD = window.location.hash.includes("upload"); diff --git a/src/redux/actionCreators.js b/src/redux/actionCreators.js index 9dc0df91..9d88f155 100644 --- a/src/redux/actionCreators.js +++ b/src/redux/actionCreators.js @@ -30,6 +30,9 @@ export function concentsToNswf() { return { type: "CONCENTS_TO_NSFW" }; } +export function toggleUploadView() { + return { type: "TOGGLE_UPLOAD_VIEW" }; +} export function selectSkinFile(fileName) { const ext = fileName.split(".").pop().toLowerCase(); diff --git a/src/redux/reducer.js b/src/redux/reducer.js index 9f0dfd98..9e02b38e 100644 --- a/src/redux/reducer.js +++ b/src/redux/reducer.js @@ -9,6 +9,7 @@ const defaultState = { skinZip: null, focusedSkinFile: null, fileExplorerOpen: false, + uploadViewOpen: false, activeContentPage: null, totalNumberOfSkins: null, scale: 0.5, @@ -22,6 +23,9 @@ export default function reducer(state = defaultState, action) { case "SET_SCALE": { return { ...state, scale: action.scale }; } + case "TOGGLE_UPLOAD_VIEW": { + return { ...state, uploadViewOpen: !state.uploadViewOpen }; + } case "CONCENTS_TO_NSFW": { return { ...state, showNsfw: true }; }