From de2dd786ee80297ddd5445d9d368a76df3ef19e0 Mon Sep 17 00:00:00 2001 From: Al Cheung Date: Sat, 18 Apr 2020 22:29:30 +0800 Subject: [PATCH] style(popup): added custom scrollbar. --- package.json | 3 +- .../perk-showcase/style.module.scss | 9 ++-- src/modules/popup/index.js | 27 +++++++--- src/modules/popup/style.module.scss | 1 + yarn.lock | 51 ++++++++++++++++++- 5 files changed, 74 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 1cfba6a3..0235badd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "champ-r", - "version": "0.9.0-pre.9", + "version": "0.9.0-pre.10", "license": "MIT", "description": "Get champion items for lol, Windows only.", "productName": "ChampR", @@ -45,6 +45,7 @@ "normalize.css": "^8.0.1", "os-locale": "^5.0.0", "react": "16.13.1", + "react-custom-scrollbars": "^4.2.1", "react-dom": "16.13.1", "react-feather": "^2.0.3", "react-i18next": "^11.3.4", diff --git a/src/components/perk-showcase/style.module.scss b/src/components/perk-showcase/style.module.scss index 50be0617..ed9be991 100644 --- a/src/components/perk-showcase/style.module.scss +++ b/src/components/perk-showcase/style.module.scss @@ -12,6 +12,8 @@ display: flex; flex-direction: column; justify-content: center; + flex-grow: 1; + padding-left: 2em; .detail { font-size: 12px; @@ -23,6 +25,7 @@ width: 48px; border-radius: 10px; //margin-right: 1em; + display: flex; justify-content: center; align-items: center; background: #ffffff; @@ -34,12 +37,6 @@ } } - &:hover { - .apply { - display: flex; - } - } - .preview { display: flex; align-items: center; diff --git a/src/modules/popup/index.js b/src/modules/popup/index.js index 882a5a0e..38570587 100644 --- a/src/modules/popup/index.js +++ b/src/modules/popup/index.js @@ -3,6 +3,7 @@ import s from './style.module.scss'; import { ipcRenderer } from 'electron'; import React, { useCallback, useEffect, useState, useRef } from 'react'; +import { Scrollbars } from 'react-custom-scrollbars'; import config from 'src/native/config'; import { getChampions, DDragonCDNUrl } from 'src/service/ddragon'; @@ -75,14 +76,24 @@ export default function Popup() { return
loading...
; } - return perks - .map((p, idx) => - apply(p)} - />, - ); + return ( + + { + perks + .map((p, idx) => + apply(p)} + />, + ) + } + + ); }, [championMap, perks, championId]); return
diff --git a/src/modules/popup/style.module.scss b/src/modules/popup/style.module.scss index 9ce05774..1f2e8887 100644 --- a/src/modules/popup/style.module.scss +++ b/src/modules/popup/style.module.scss @@ -1,6 +1,7 @@ body { -webkit-user-select: none; -webkit-app-region: drag; + overflow-y: hidden; } .list { diff --git a/yarn.lock b/yarn.lock index 2295ded2..e4914ebb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1936,6 +1936,11 @@ acorn@^7.1.0: resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c" integrity sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ== +add-px-to-style@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a" + integrity sha1-0ME1RB+oAUqBN5BFMQlvZ/KPJjo= + address@1.1.2, address@^1.0.1: version "1.1.2" resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6" @@ -4381,6 +4386,15 @@ dom-converter@^0.2: dependencies: utila "~0.4" +dom-css@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202" + integrity sha1-/bwtWgFdCj4YcuEUcrvQ57nmogI= + dependencies: + add-px-to-style "1.0.0" + prefix-style "2.0.1" + to-camel-case "1.0.0" + dom-helpers@^5.0.0: version "5.1.3" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821" @@ -10266,6 +10280,11 @@ postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, po source-map "^0.6.1" supports-color "^6.1.0" +prefix-style@2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06" + integrity sha1-ZrupqHDP2jCKXcIOhekSCTLJWgY= + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -10357,7 +10376,7 @@ prop-types-extra@^1.1.0: react-is "^16.3.2" warning "^4.0.0" -prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -10501,7 +10520,7 @@ quick-lru@^1.0.0: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8" integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g= -raf@^3.4.1: +raf@^3.1.0, raf@^3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== @@ -10567,6 +10586,15 @@ react-clientside-effect@^1.2.2: dependencies: "@babel/runtime" "^7.0.0" +react-custom-scrollbars@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db" + integrity sha1-gw/ZUCkn6X6KeMIIaBOJmyqLZts= + dependencies: + dom-css "^2.0.0" + prop-types "^15.5.10" + raf "^3.1.0" + react-dev-utils@^10.0.0: version "10.0.0" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.0.0.tgz#bd2d16426c7e4cbfed1b46fb9e2ac98ec06fcdfa" @@ -12558,11 +12586,23 @@ to-arraybuffer@^1.0.0: resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43" integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M= +to-camel-case@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46" + integrity sha1-GlYFSy+daWKYzmamCJcyK29CPkY= + dependencies: + to-space-case "^1.0.0" + to-fast-properties@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= +to-no-case@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a" + integrity sha1-xyKQcWTvaxeBMsjmmTAhLRtKoWo= + to-object-path@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af" @@ -12600,6 +12640,13 @@ to-regex@^3.0.1, to-regex@^3.0.2: regex-not "^1.0.2" safe-regex "^1.1.0" +to-space-case@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17" + integrity sha1-sFLar7Gysp3HcM6gFj5ewOvJ/Bc= + dependencies: + to-no-case "^1.0.0" + toidentifier@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"