From 94aed7b2be4e6d7fe88090ac678616b9aa752e68 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Mon, 3 Jan 2022 12:59:39 -0800 Subject: [PATCH 01/11] Don't do debug logs in prod --- src/constants.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/constants.js b/src/constants.js index 8ca0255b..0adc6824 100644 --- a/src/constants.js +++ b/src/constants.js @@ -1,6 +1,5 @@ const urlSearchParams = new URLSearchParams(window.location.search); const params = Object.fromEntries(urlSearchParams.entries()); -console.log(params) export const SCREENSHOT_WIDTH = 275; export const SCREENSHOT_HEIGHT = 348; From 1a0e293bf3716c5c70a64faa4b1bb65bea840f86 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 8 Jan 2022 15:25:24 -0800 Subject: [PATCH 02/11] Add tooltip to random button --- src/Header.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Header.js b/src/Header.js index 97b922e5..9018d1cd 100644 --- a/src/Header.js +++ b/src/Header.js @@ -122,6 +122,7 @@ function Header() { onClick={() => { requestRandomSkin(); }} + title="Random Skin" style={{ paddingLeft: "0.2rem", paddingRight: "0.2rem", From be1513ee479b929cac159b121d5d3b8e617891ab Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 8 Jan 2022 16:54:26 -0800 Subject: [PATCH 03/11] Add zoom feature --- src/Header.js | 1 - src/SkinTable.js | 34 ++++++++++-------- src/Zoom.js | 94 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 113 insertions(+), 16 deletions(-) create mode 100644 src/Zoom.js diff --git a/src/Header.js b/src/Header.js index 9018d1cd..13f7a20b 100644 --- a/src/Header.js +++ b/src/Header.js @@ -60,7 +60,6 @@ function Header() { const showFeedbackForm = useActionCreator(Actions.showFeedbackForm); const requestRandomSkin = useActionCreator(Actions.requestedRandomSkin); const requestedAboutPage = useActionCreator(Actions.requestedAboutPage); - // const setScale = useActionCreator((scale) => ({ type: "SET_SCALE", scale })); const setInput = useFocusOnSlash(); return ( diff --git a/src/SkinTable.js b/src/SkinTable.js index 306882f1..f6fc582e 100644 --- a/src/SkinTable.js +++ b/src/SkinTable.js @@ -6,6 +6,7 @@ import * as Actions from "./redux/actionCreators"; import { FixedSizeGrid as Grid } from "react-window"; import Cell from "./Cell"; import { HEADING_HEIGHT } from "./constants"; +import Zoom from "./Zoom"; const SkinTable = ({ columnCount, @@ -40,21 +41,24 @@ const SkinTable = ({ return (
{showGrid ? ( - - {Cell} - + <> + + {Cell} + + + ) : (
{ + const scaleUp = getScaleForColumnCount(columnCount - 1, windowWidth); + const scaleDown = getScaleForColumnCount(columnCount + 1, windowWidth); + const zoom = useActionCreator((scale) => ({ type: "SET_SCALE", scale })); + const zoomIn = () => zoom(scaleUp); + const zoomOut = () => zoom(scaleDown); + + return ( +
+ +
+ +
+ ); +}; + +function Button({ ...props }) { + return ( + @@ -59,11 +59,15 @@ const Zoom = ({ columnCount, windowWidth }) => { marginBottom: 0, marginLeft: 3, marginRight: 3, - padding: 0 + padding: 0, }} /> -
); @@ -76,7 +80,7 @@ function Button({ ...props }) { title={props.disabled ? `${props.title} (disabled)` : props.title} style={{ margin: 0, - color: props.disabled ? "grey": COLOR, + color: props.disabled ? "grey" : COLOR, border: "none", cursor: props.disabled ? "default" : "pointer", font: "inherit", From eca586e11bd8ddaa5c4223f3e6a2265359468673 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 8 Jan 2022 17:55:43 -0800 Subject: [PATCH 06/11] Increase touch target size of zoom --- src/Zoom.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Zoom.js b/src/Zoom.js index c5bfe547..7c34272e 100644 --- a/src/Zoom.js +++ b/src/Zoom.js @@ -86,10 +86,10 @@ function Button({ ...props }) { font: "inherit", outline: "inherit", background: "none", - paddingLeft: 10, - paddingRight: 10, - paddingTop: 7, - paddingBottom: 7, + paddingLeft: 14, + paddingRight: 14, + paddingTop: 9, + paddingBottom: 9, }} /> ); From 3bf958bcf4f6380b68203ce479d7052f0bd4d96e Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 8 Jan 2022 18:17:18 -0800 Subject: [PATCH 07/11] Preserve scroll when zooming/resizing --- src/SkinTable.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/SkinTable.js b/src/SkinTable.js index f6fc582e..05ba6912 100644 --- a/src/SkinTable.js +++ b/src/SkinTable.js @@ -31,12 +31,24 @@ const SkinTable = ({ return skin ? skin.hash : `unfectched-index-${requestToken}`; } const gridRef = React.useRef(); + const itemRef = React.useRef(); React.useLayoutEffect(() => { if (gridRef.current == null) { return; } gridRef.current.scrollTo({ scrollLeft: 0, scrollTop: 0 }); }, [skinCount]); + + React.useLayoutEffect(() => { + if (gridRef.current == null) { + return; + } + + const itemRow = Math.floor(itemRef.current / columnCount) + + gridRef.current.scrollTo({ scrollLeft: 0, scrollTop: rowHeight * itemRow }); + }, [rowHeight, columnCount]); + const showGrid = loadingSearchQuery || skinCount > 0 || searchQuery === ""; return (
@@ -53,6 +65,9 @@ const SkinTable = ({ rowHeight={rowHeight} width={windowWidth} overscanRowsCount={5} + onScroll={scrollData => { + itemRef.current = Math.round(scrollData.scrollTop / rowHeight) * columnCount + }} style={{ overflowY: "scroll" }} > {Cell} From 55b481f6a6580b88fc2858a1b8fdf7685f9f639a Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 8 Jan 2022 18:38:47 -0800 Subject: [PATCH 08/11] Improve scroll stability by keeping center skin in top row not left-most --- src/SkinTable.js | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/SkinTable.js b/src/SkinTable.js index 05ba6912..3ba05074 100644 --- a/src/SkinTable.js +++ b/src/SkinTable.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import "./App.css"; import { connect } from "react-redux"; import * as Selectors from "./redux/selectors"; @@ -44,12 +44,21 @@ const SkinTable = ({ return; } - const itemRow = Math.floor(itemRef.current / columnCount) + const itemRow = Math.floor(itemRef.current / columnCount); gridRef.current.scrollTo({ scrollLeft: 0, scrollTop: rowHeight * itemRow }); }, [rowHeight, columnCount]); - + const showGrid = loadingSearchQuery || skinCount > 0 || searchQuery === ""; + + const onScroll = useMemo(() => { + const half = Math.round(columnCount / 2); + return (scrollData) => { + itemRef.current = + Math.round(scrollData.scrollTop / rowHeight) * columnCount + half; + }; + }, [columnCount, rowHeight]); + return (
{showGrid ? ( @@ -65,14 +74,12 @@ const SkinTable = ({ rowHeight={rowHeight} width={windowWidth} overscanRowsCount={5} - onScroll={scrollData => { - itemRef.current = Math.round(scrollData.scrollTop / rowHeight) * columnCount - }} + onScroll={onScroll} style={{ overflowY: "scroll" }} > {Cell} - + ) : (
Date: Sat, 8 Jan 2022 18:49:49 -0800 Subject: [PATCH 09/11] Don't try to do hover opaciy on mobile --- src/App.css | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/App.css b/src/App.css index 1cb34b13..9b368085 100644 --- a/src/App.css +++ b/src/App.css @@ -199,15 +199,12 @@ body.webamp-loaded #webamp { width: 100%; } -#zoom { - opacity: 0.7; - transition: opacity 100ms ease-in-out; +@media (hover: hover) { + #zoom { + opacity: 0.7; + transition: opacity 200ms ease-in-out; + } + #zoom:hover { + opacity: 1; + } } - -#zoom:hover { - opacity: 1; -} - -#zoom.active { - opacity: 1; -} \ No newline at end of file From d69b7cc835786d448c6aed51504ee162d5268a97 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 8 Jan 2022 18:50:10 -0800 Subject: [PATCH 10/11] Make zoom text bold --- src/Zoom.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Zoom.js b/src/Zoom.js index 7c34272e..49e07b96 100644 --- a/src/Zoom.js +++ b/src/Zoom.js @@ -67,7 +67,7 @@ const Zoom = ({ columnCount, windowWidth }) => { title={"Zoom Out"} disabled={scaleDown * SCREENSHOT_WIDTH <= 100} > - – + {"–"}
); @@ -84,6 +84,7 @@ function Button({ ...props }) { border: "none", cursor: props.disabled ? "default" : "pointer", font: "inherit", + fontWeight: 'bold', outline: "inherit", background: "none", paddingLeft: 14, From de0f6454f7919c42d70c93eaa208fce700b1f7a8 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 8 Jan 2022 19:43:48 -0800 Subject: [PATCH 11/11] Improve styling of zoom buttons --- src/App.css | 7 +++++++ src/Zoom.js | 4 +--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index 9b368085..47604575 100644 --- a/src/App.css +++ b/src/App.css @@ -199,6 +199,13 @@ body.webamp-loaded #webamp { width: 100%; } +#zoom button { + color: rgba(255, 2550, 2550, 0.9); +} +#zoom button:active, #zoom button:disabled { + color: grey; +} + @media (hover: hover) { #zoom { opacity: 0.7; diff --git a/src/Zoom.js b/src/Zoom.js index 49e07b96..09e65c32 100644 --- a/src/Zoom.js +++ b/src/Zoom.js @@ -7,7 +7,6 @@ function getScaleForColumnCount(columnCount, windowWidth) { } const BACKGROUND_COLOR = "#000"; -const COLOR = "rgba(255, 2550, 2550, 0.9)"; const Zoom = ({ columnCount, windowWidth }) => { const scaleUp = getScaleForColumnCount(columnCount - 1, windowWidth); @@ -28,7 +27,7 @@ const Zoom = ({ columnCount, windowWidth }) => { rgba(40, 39, 66, 1) 66%, rgba(25, 25, 39, 1) 100% )`, - boxShadow: "0px 10px 15px 0px rgb(0 0 0 / 35%)", + boxShadow: "10px 10px 15px 0px rgb(0 0 0 / 85%)", bottom: 5, right: 5, display: "flex", @@ -80,7 +79,6 @@ function Button({ ...props }) { title={props.disabled ? `${props.title} (disabled)` : props.title} style={{ margin: 0, - color: props.disabled ? "grey" : COLOR, border: "none", cursor: props.disabled ? "default" : "pointer", font: "inherit",