From 3051680a85118dd7ff4374e71ddfa2c8ded23ae2 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Wed, 6 Oct 2021 22:35:39 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Beautifying=20Archive=20ops=20ta?= =?UTF-8?q?b?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- src/client/assets/scss/App.scss | 1 + src/client/components/ComicDetail.tsx | 61 +++++++++++++++----------- src/client/components/VolumeGroups.tsx | 2 +- src/client/components/photos.json | 11 ----- yarn.lock | 54 ++++++++++++++++++++--- 6 files changed, 88 insertions(+), 44 deletions(-) delete mode 100644 src/client/components/photos.json diff --git a/package.json b/package.json index 8041d9f..b234fe5 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@bluelovers/fast-glob": "https://github.com/rishighan/fast-glob-v2-api.git", "@dnd-kit/core": "^4.0.0", "@dnd-kit/sortable": "^5.0.0", + "@fortawesome/fontawesome-free": "^6.0.0-beta2", "@types/mime-types": "^2.1.0", "@types/react": "^17.0.3", "@types/react-dom": "^17.0.2", @@ -60,6 +61,7 @@ "react-responsive-carousel": "^3.2.21", "react-select": "^4.3.1", "react-sliding-pane": "^7.0.0", + "react-stickynode": "^4.0.0", "react-table": "^7.7.0", "react-window-dynamic-list": "^2.3.5", "sharp": "^0.28.1", @@ -79,7 +81,6 @@ "@babel/preset-env": "^7.13.10", "@babel/preset-react": "^7.12.13", "@babel/preset-typescript": "^7.13.0", - "@fortawesome/fontawesome-free": "^5.15.3", "@teamsupercell/typings-for-css-modules-loader": "^2.5.1", "@tsconfig/node14": "^1.0.0", "@types/express": "^4.17.8", diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index e169315..5fa15d7 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -1,6 +1,7 @@ @import "../../../../node_modules/bulma/bulma.sass"; $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"; +@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss"; @import "../../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss"; $bg-color: yellow; $border-color: red; diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 6239df6..9fab909 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -28,6 +28,7 @@ import { removeLeadingPeriod, escapePoundSymbol, } from "../shared/utils/formatting.utils"; +import Sticky from "react-stickynode"; type ComicDetailProps = {}; /** @@ -59,7 +60,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { const comicBookDetailData = useSelector( (state: RootState) => state.comicInfo.comicBookDetail, ); - const comicBookExtractionInProgress = useSelector( + const isComicBookExtractionInProgress = useSelector( (state: RootState) => state.fileOps.comicBookExtractionInProgress, ); const extractedComicBookArchive = useSelector( @@ -74,7 +75,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { }, [page, dispatch]); const unpackComicArchive = useCallback(() => { - console.log("Asdas"); dispatch( extractComicArchive( comicBookDetailData.rawFileDetails.containedIn + @@ -180,7 +180,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { { id: 1, name: "Volume Information", - icon: , + icon: , content: isComicBookMetadataAvailable ? (
@@ -239,15 +239,25 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { }, { id: 2, - icon: , + icon: , name: "Archive Operations", content: (
-
-
+
{!isEmpty(extractedComicBookArchive) ? ( ) : ( @@ -255,12 +265,20 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { )}
{!isEmpty(extractedComicBookArchive) ? ( -
-
-
- {extractedComicBookArchive.length} pages +
+ +
+
+ {extractedComicBookArchive.length} pages + +
-
+
) : null}
@@ -269,7 +287,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { }, { id: 3, - icon: , + icon: , name: "Acquisition", content: ( @@ -311,7 +329,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) ? ( - + {comicBookDetailData.acquisition.directconnect.length} @@ -460,24 +478,18 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { // Actions menu options and handler const CVMatchLabel = ( - Match on ComicVine - - ); - - const editArchive = ( - - Edit Comic Archive + Match on ComicVine ); const editLabel = ( - Edit Metadata + Edit Metadata ); const deleteLabel = ( - Delete Comic + Delete Comic ); const Placeholder = (props) => { @@ -485,7 +497,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { }; const actionOptions = [ { value: "match-on-comic-vine", label: CVMatchLabel }, - { value: "edit-comic-archive", label: editArchive }, { value: "edit-metdata", label: editLabel }, { value: "delete-comic", label: deleteLabel }, ]; @@ -538,7 +549,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { components={{ Placeholder }} placeholder={ - Actions + Actions } name="actions" diff --git a/src/client/components/VolumeGroups.tsx b/src/client/components/VolumeGroups.tsx index 4e36c7d..0a8fc38 100644 --- a/src/client/components/VolumeGroups.tsx +++ b/src/client/components/VolumeGroups.tsx @@ -35,7 +35,7 @@ export const VolumeGroups = (): ReactElement => {
-
+
{ellipsize(group.results.name, 18)}
diff --git a/src/client/components/photos.json b/src/client/components/photos.json deleted file mode 100644 index cee9d99..0000000 --- a/src/client/components/photos.json +++ /dev/null @@ -1,11 +0,0 @@ -[ - "https://source.unsplash.com/WLUHO9A_xik/900x900", - "https://source.unsplash.com/R4K8S77qtwI/900x900", - "https://source.unsplash.com/jJGc21mEh8Q/900x900", - "https://source.unsplash.com/omNxg6JP6Fo/900x900", - "https://source.unsplash.com/-M1gkucIqkQ/900x900", - "https://source.unsplash.com/czOuPVsfHDw/900x900", - "https://source.unsplash.com/-vr0gMUM6Fk/900x900", - "https://source.unsplash.com/TsMuMM_qVec/900x900" - ] - \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 54d9ec1..6fdb5da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1146,10 +1146,10 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" -"@fortawesome/fontawesome-free@^5.15.3": - version "5.15.4" - resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz#ecda5712b61ac852c760d8b3c79c96adca5554e5" - integrity sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg== +"@fortawesome/fontawesome-free@^6.0.0-beta2": + version "6.0.0-beta2" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.0.0-beta2.tgz#d66c6e9aad085d003f2cf88244f6adce16e07f78" + integrity sha512-od2COSiBZ70dB5YgZuZEJ3Jy3RHFUhKKjN4dBxNVtmC8DYlyuI4q9wUSzmpLWXQVnRTADRoOLywA9E6SRaS6YQ== "@gar/promisify@^1.0.1": version "1.1.2" @@ -3669,7 +3669,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.5: +classnames@^2.0.0, classnames@^2.2.5: version "2.3.1" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== @@ -4136,6 +4136,11 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.3, core-js@^2.6.5: resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== +core-js@^3.6.5: + version "3.18.2" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.2.tgz#63a551e8a29f305cd4123754846e65896619ba5b" + integrity sha512-zNhPOUoSgoizoSQFdX1MeZO16ORRb9FFQLts8gSYbZU5FcgXhp24iMWMxnOQo5uIaIG7/6FA/IqJPwev1o9ZXQ== + core-util-is@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" @@ -5352,6 +5357,11 @@ etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= +eventemitter3@^3.0.0: + version "3.1.2" + resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7" + integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q== + eventemitter3@^4.0.0: version "4.0.7" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" @@ -5898,6 +5908,11 @@ follow-redirects@^1.0.0, follow-redirects@^1.14.0: resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379" integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g== +fontawesome-free@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.1.tgz#16b704143258a355b63978d38a83d3bbcf9fcd35" + integrity sha512-pmjY7xTuHSx4FRSHb9KuKEdJKdpCiGiXFykNPkYdPh5bVHIsQc1d7+YeAl9abIG95SSz2JTq+6+lyhojeEEr1A== + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -10745,6 +10760,13 @@ r2-utils-js@^1.0.26: yauzl "^2.10.0" yazl "^2.5.1" +raf@^3.0.0: + version "3.4.1" + resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" + integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== + dependencies: + performance-now "^2.1.0" + randombytes@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" @@ -11012,6 +11034,17 @@ react-sliding-pane@^7.0.0: prop-types "^15.7.2" react-modal "^3.12.1" +react-stickynode@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/react-stickynode/-/react-stickynode-4.0.0.tgz#ca1deeda866aeace3d522d01eb868f286cdb49d1" + integrity sha512-H6Ae6l8soAc188eFAmE4CGJz3oidQa88jNO/fnJWjpFw4DwGRS6boL9gHNE4DCvbMPgek1AAP85pUPIEKUMgtw== + dependencies: + classnames "^2.0.0" + core-js "^3.6.5" + prop-types "^15.6.0" + shallowequal "^1.0.0" + subscribe-ui-event "^2.0.6" + react-string-replace@^0.4.1: version "0.4.4" resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-0.4.4.tgz#24006fbe0db573d5be583133df38b1a735cb4225" @@ -11875,7 +11908,7 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" -shallowequal@^1.1.0: +shallowequal@^1.0.0, shallowequal@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== @@ -12585,6 +12618,15 @@ subjects-utils@0.0.2: dependencies: capitalize "0.5.0" +subscribe-ui-event@^2.0.6: + version "2.0.7" + resolved "https://registry.yarnpkg.com/subscribe-ui-event/-/subscribe-ui-event-2.0.7.tgz#8d18b6339c35b25246a5335775573f0e5dc461f8" + integrity sha512-Acrtf9XXl6lpyHAWYeRD1xTPUQHDERfL4GHeNuYAtZMc4Z8Us2iDBP0Fn3xiRvkQ1FO+hx+qRLmPEwiZxp7FDQ== + dependencies: + eventemitter3 "^3.0.0" + lodash "^4.17.15" + raf "^3.0.0" + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"