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 };
}