💄 Beautifying Archive ops tab

2021-10-06 22:35:39 -07:00
parent fce8551731
commit 3051680a85
6 changed files with 88 additions and 44 deletions
--- 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",
--- 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;
--- 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: <i className="fas fa-layer-group"></i>,
+      icon: <i className="fa-regular fa-layer-group"></i>,
      content: isComicBookMetadataAvailable ? (
        <div key={1}>
          <div className="columns">
@@ -239,15 +239,25 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
    },
    {
      id: 2,
-      icon: <i className="fas fa-file-archive"></i>,
+      icon: <i className="fa-regular fa-file-archive"></i>,
      name: "Archive Operations",
      content: (
        <div key={2}>
-          <button className="button is-warning" onClick={unpackComicArchive}>
-            Unpack comic archive
+          <button
+            className={
+              isComicBookExtractionInProgress
+                ? "button is-loading is-warning"
+                : "button is-warning"
+            }
+            onClick={unpackComicArchive}
+          >
+            <span className="icon is-small">
+              <i className="fa-regular fa-box-open"></i>
+            </span>
+            <span>Unpack comic archive</span>
          </button>
          <div className="columns">
-            <div className="mt-4">
+            <div className="mt-5">
              {!isEmpty(extractedComicBookArchive) ? (
                <DnD data={extractedComicBookArchive} />
              ) : (
@@ -255,12 +265,20 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
              )}
            </div>
            {!isEmpty(extractedComicBookArchive) ? (
-              <div className="column">
-                <div className="card">
-                  <div className="card-content">
-                    {extractedComicBookArchive.length} pages
+              <div className="column mt-5">
+                <Sticky enabled={true} top={70} bottomBoundary={3000}>
+                  <div className="card">
+                    <div className="card-content">
+                      {extractedComicBookArchive.length} pages
+                      <button className="button is-small is-light is-primary is-outlined">
+                        <span className="icon is-small">
+                          <i className="fa-regular fa-compress"></i>
+                        </span>
+                        <span>Convert to CBZ</span>
+                      </button>
+                    </div>
                  </div>
-                </div>
+                </Sticky>
              </div>
            ) : null}
          </div>
@@ -269,7 +287,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
    },
    {
      id: 3,
-      icon: <i className="fas fa-download"></i>,
+      icon: <i className="fa-regular fa-download"></i>,
      name: "Acquisition",
      content: (
        <AcquisitionPanel comicBookMetadata={comicBookDetailData} key={3} />
@@ -311,7 +329,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                  !isNil(comicBookDetailData) &&
                  !isEmpty(comicBookDetailData) ? (
                    <span className="download-icon-labels">
-                      <i className="fas fa-cloud-download-alt"></i>
+                      <i className="fa-regular fa-cloud-arrow-down"></i>
                      <span className="tag downloads-count">
                        {comicBookDetailData.acquisition.directconnect.length}
                      </span>
@@ -460,24 +478,18 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
  //  Actions menu options and handler
  const CVMatchLabel = (
    <span>
-      <i className="fas fa-magic"></i> Match on ComicVine
-    </span>
-  );
-
-  const editArchive = (
-    <span>
-      <i className="fas fa-file-archive"></i> Edit Comic Archive
+      <i className="fa-regular fa-magic"></i> Match on ComicVine
    </span>
  );

  const editLabel = (
    <span>
-      <i className="fas fa-pencil-alt"></i> Edit Metadata
+      <i className="fa-regular fa-pen-to-square"></i> Edit Metadata
    </span>
  );
  const deleteLabel = (
    <span>
-      <i className="fas fa-trash-alt"></i> Delete Comic
+      <i className="fa-regular fa-trash-alt"></i> Delete Comic
    </span>
  );
  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={
                    <span>
-                      <i className="fas fa-list"></i> Actions
+                      <i className="fa-solid fa-list"></i> Actions
                    </span>
                  }
                  name="actions"
--- a/src/client/components/VolumeGroups.tsx
+++ b/src/client/components/VolumeGroups.tsx
@@ -35,7 +35,7 @@ export const VolumeGroups = (): ReactElement => {
                <div className="stack" key={group.results.id}>
                  <img src={group.results.image.small_url} />
                  <div className="content">
-                    <div className="stack-title">
+                    <div className="stack-title is-size-8">
                      {ellipsize(group.results.name, 18)}
                    </div>
                    <div className="control">
--- a/src/client/components/photos.json
+++ b/src/client/components/photos.json
@@ -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"
-  ]
-  
--- 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"