Add Upload button behind FF

2026-07-23 18:17:38 +00:00 · 2020-09-09 22:20:51 -07:00 · 2020-09-09 22:20:51 -07:00 · 1effc9eb67
commit 1effc9eb67
parent 8ff8ac8d86
9 changed files with 138 additions and 45 deletions
--- 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;
  }
--- a/src/App.js
+++ b/src/App.js
@ -35,13 +35,17 @@ function App(props) {
    <div>
      <Head />
      <Header />
-      <SkinTable
-        columnCount={columnCount}
-        columnWidth={columnWidth}
-        rowHeight={rowHeight}
-        windowHeight={windowHeight}
-        windowWidth={windowWidthWithScrollabar}
-      />
+      {props.uploadViewOpen ? (
+        "UPLOAD"
+      ) : (
+        <SkinTable
+          columnCount={columnCount}
+          columnWidth={columnWidth}
+          rowHeight={rowHeight}
+          windowHeight={windowHeight}
+          windowWidth={windowWidthWithScrollabar}
+        />
+      )}
      {props.aboutPage ? (
        <Overlay>
          <About />
@ -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);
--- 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 {
          </a>
        </h1>
        <span style={{ flexGrow: 1 }} />
-        <a
-          href="https://www.algolia.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{
-            opacity: this.props.searchQuery ? 0.5 : 0,
-            transition: "opacity ease-in 300ms",
-          }}
-        >
-          <SearchLogo />
-        </a>
-        {/*
+        {this.props.uploadViewOpen || (
+          <>
+            <a
+              href="https://www.algolia.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{
+                opacity: this.props.searchQuery ? 0.5 : 0,
+                transition: "opacity ease-in 300ms",
+              }}
+            >
+              <SearchLogo />
+            </a>
+            {/*
        <button
          onClick={() => {
            this.props.setScale(this.props.scale + 0.1);
@ -96,30 +100,33 @@ class Header extends React.Component {
          -
        </button>
        */}
-        <input
-          type="search"
-          style={{ marginLeft: 10 }}
-          onChange={(e) => this.props.setSearchQuery(e.target.value)}
-          value={this.props.searchQuery || ""}
-          placeholder={"Search..."}
-          ref={(node) => {
-            this._inputRef = node;
-          }}
-        />
-        <button
-          onClick={() => {
-            this.props.requestRandomSkin();
-          }}
-        >
-          Random
-        </button>
-        <button
-          onClick={() => {
-            this.props.requestedAboutPage();
-          }}
-        >
-          ?
-        </button>
+            <input
+              type="search"
+              style={{ marginLeft: 10 }}
+              onChange={(e) => this.props.setSearchQuery(e.target.value)}
+              value={this.props.searchQuery || ""}
+              placeholder={"Search..."}
+              ref={(node) => {
+                this._inputRef = node;
+              }}
+            />
+            <button
+              onClick={() => {
+                this.props.requestRandomSkin();
+              }}
+            >
+              Random
+            </button>
+            <button
+              onClick={() => {
+                this.props.requestedAboutPage();
+              }}
+            >
+              ?
+            </button>
+          </>
+        )}
+        <UploadButton />
      </div>
    );
  }
@ -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) => ({
--- a/src/UploadButton.js
+++ 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 (
+    <button
+      onClick={() => {
+        toggleUploadView();
+      }}
+      style={{ paddingLeft: "0.2rem", paddingRight: "0.2rem" }}
+    >
+      {uploadViewOpen ? (
+        <CloseIcon style={{ height: "100%" }} alt="Close" />
+      ) : (
+        <UploadIcon style={{ height: "100%" }} alt="Upload" />
+      )}
+    </button>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  uploadViewOpen: state.uploadViewOpen,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleUploadView() {
+    dispatch(Actions.toggleUploadView());
+  },
+});
+export default connect(mapStateToProps, mapDispatchToProps)(UploadButton);
--- a/src/components/icons/CloseIcon.js
+++ b/src/components/icons/CloseIcon.js
@ -0,0 +1,14 @@
+import * as React from "react";
+
+function CloseIcon(props) {
+  return (
+    <svg viewBox="0 0 96 96" {...props}>
+      <path
+        fill="#333"
+        d="M70.2 30.3l-4.5-4.5L48 43.5 30.3 25.8l-4.5 4.5L43.5 48 25.8 65.7l4.5 4.5L48 52.5l17.7 17.7 4.5-4.5L52.5 48z"
+      />
+    </svg>
+  );
+}
+
+export default CloseIcon;
--- a/src/components/icons/UploadIcon.js
+++ b/src/components/icons/UploadIcon.js
@ -0,0 +1,14 @@
+import React from "react";
+
+function UploadIcon(props) {
+  return (
+    <svg viewBox="0 0 96 96" {...props}>
+      <path
+        d="M39.3 61.1h17.5V43.6h11.7L48 23.2 27.6 43.6h11.7v17.5zM27.6 67h40.8v5.8H27.6V67z"
+        fill="#23293c"
+      />
+    </svg>
+  );
+}
+
+export default UploadIcon;
--- 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");
--- 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();

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