frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

💅🏽 Refactoring UX on Library page

Browse Source
This commit is contained in:
Rishi Ghan
2022-03-20 02:31:25 -07:00
parent 4e2a91a1ce
commit 2c8e339e3b
9 changed files with 93 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -82,7 +82,7 @@
"slick-carousel": "^1.8.1",
"socket.io-client": "^4.3.2",
"styled-components": "^5.3.3",
"threetwo-ui-typings": "^1.0.13",
"threetwo-ui-typings": "^1.0.14",
"voca": "^1.4.0",
"websocket": "^1.0.34",
"ws": "^7.5.3",

31
src/client/assets/scss/App.scss
View File

@@ -187,23 +187,24 @@ pre {
}
}
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
column-gap: 0.5em;
row-gap: 1.2em;
// display: grid;
// grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
// column-gap: 0.5em;
// row-gap: 1.2em;
.card {
margin: 0 0 15px 0;
.partial-rounded-card-image {
img {
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
border-top-left-radius: 0.4rem;
border-top-right-radius: 0.4rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.rounded-card-image {
border-radius: 0.3rem;
border-radius: 0.4rem;
}
.is-horizontal {
@@ -225,24 +226,20 @@ pre {
}
}
.card-content {
align-self: center;
align-self: top;
flex: 1;
padding-left: 1em;
padding-top: 0;
padding-bottom: 0;
font-size: 0.8em;
padding-top: 0.5em;
padding-bottom: 0em;
.name {
font-size: 0.85em;
}
ul {
li.status {
margin-top: 10px;
}
}
.truncate {
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.is-divider {
margin-top: 1.5rem;

2
src/client/components/Import.tsx
View File

@@ -119,7 +119,7 @@ export const Import = (props: IProps): ReactElement => {
className="button is-warning is-light"
onClick={toggleImport}
>
{isImportQueuePaused ? pauseIconText : playIconText}
{!isImportQueuePaused ? pauseIconText : playIconText}
</button>
</div>
</div>

97
src/client/components/Library/Library.tsx
View File

@@ -8,12 +8,13 @@ import React, {
import PropTypes from "prop-types";
import { useNavigate } from "react-router-dom";
import { useTable, usePagination } from "react-table";
import { isEmpty, isNil, isUndefined } from "lodash";
import { flatten, isEmpty, isNil, isUndefined, map } from "lodash";
import RawFileDetails from "./RawFileDetails";
import ComicVineDetails from "./ComicVineDetails";
import SearchBar from "./SearchBar";
import { useDispatch } from "react-redux";
import { searchIssue } from "../../actions/fileops.actions";
import ellipsize from "ellipsize";
interface IComicBookLibraryProps {
data: {
@@ -37,9 +38,35 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
const ImportStatus = ({ value }) => {
return value ? (
<span className="tag is-info is-light">Imported</span>
<div className="box">
<dl>
<span className="tags has-addons is-size-7">
<span className="tag is-info">Series</span>
<span className="tag">{ellipsize(value.series[0], 25)}</span>
</span>
</dl>
<dl>
<div className="field is-grouped is-grouped-multiline">
<div className="control">
<span className="tags has-addons is-size-7 has-text-weight-bold mt-2">
<span className="tag is-info">Pages</span>
<span className="tag">{value.pagecount[0]}</span>
</span>
</div>
<div className="control">
<span className="tags has-addons is-size-7 has-text-weight-bold mt-2">
<span className="tag is-info">Issue</span>
{!isNil(value.number) && (
<span className="tag">{parseInt(value.number[0], 10)}</span>
)}
</span>
</div>
</div>
</dl>
</div>
) : (
"Not Imported"
<span className="is-size-7">No ComicInfo.xml</span>
);
};
@@ -59,11 +86,14 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
id: "fileDetails",
accessor: (row) =>
!isEmpty(row._source.rawFileDetails)
? row._source.rawFileDetails
? {
rawFileDetails: row._source.rawFileDetails,
inferredMetadata: row._source.inferredMetadata,
}
: row._source.sourcedMetadata,
Cell: ({ value }) => {
// If no CV info available, use raw file metadata
if (!isNil(value.cover)) {
if (!isNil(value.rawFileDetails.cover)) {
return <RawFileDetails data={value} />;
}
// If CV metadata available, show it
@@ -75,7 +105,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
},
{
Header: "Import Status",
accessor: "_source.importStatus.isImported",
accessor: "_source.sourcedMetadata.comicInfo",
Cell: ImportStatus,
},
],
@@ -83,23 +113,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
{
Header: "Additional Metadata",
columns: [
{
Header: "Issue #",
accessor: "_source.inferredMetadata.issue",
Cell(props) {
return (
!isUndefined(props.cell.value) && (
<div className="control">
<div className="tags has-addons">
<span className="tag is-light is-warning">Inferred</span>
<span className="tag">{props.cell.value.number}</span>
</div>
</div>
)
);
},
},
{
Header: "Publisher",
accessor:
@@ -110,44 +123,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
);
},
},
{
Header: "Type",
accessor: "_source.sourcedMetadata.comicvine",
Cell(props) {
return (
!isEmpty(props.cell.value) && (
<span className="tag is-info is-light">
{props.cell.value.resource_type}
</span>
)
);
},
},
{
Header: "Volume",
accessor: "_source.sourcedMetadata.comicvine.volumeInformation",
Cell(props) {
return (
!isNil(props.cell.value) && <h6>{props.cell.value.name}</h6>
);
},
},
{
Header: "Match Score",
accessor: "_source.sourcedMetadata.comicvine.score",
Cell(props) {
return (
!isNil(props.cell.value) && (
<span className="tag is-success is-light">
{parseInt(props.cell.value, 10)}
</span>
)
);
},
},
],
},
],

2
src/client/components/Library/LibraryContainer.tsx
View File

@@ -29,7 +29,7 @@ const LibraryContainer = () => {
return !isEmpty(searchResults) ? (
<Library data={{ searchResults }} />
) : (
"asdasd"
"No data found."
);
};

39
src/client/components/Library/RawFileDetails.tsx
View File

@@ -7,9 +7,9 @@ import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
// raw file details
export const RawFileDetails = (rawFileData): ReactElement => {
const { data } = rawFileData;
const { rawFileDetails, inferredMetadata } = rawFileData.data;
const encodedFilePath = encodeURI(
`${LIBRARY_SERVICE_HOST}/${data.cover.filePath}`,
`${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`,
);
const filePath = escapePoundSymbol(encodedFilePath);
return (
@@ -23,17 +23,34 @@ export const RawFileDetails = (rawFileData): ReactElement => {
</div>
<ul className="card-content">
<li className="name has-text-weight-medium">
{ellipsize(data.name, 28)}
{ellipsize(rawFileDetails.name, 49)}
</li>
<li>
<dl className="is-size-7">
<dd>
Series:{" "}
<span className="has-text-weight-medium">
{inferredMetadata.issue.name}
</span>
</dd>
</dl>
</li>
<li>
<div className="control">
<div className="tags has-addons">
<span className="tag is-primary is-light">
{data.extension}
</span>
<span className="tag is-info is-light">
{prettyBytes(data.fileSize)}
</span>
<div className="mt-1 field is-grouped is-grouped-multiline">
<div className="control">
<div className="tags">
<span className="tag is-warning is-light">
{inferredMetadata.issue.number}
</span>
<span className="tag is-success is-light">
{rawFileDetails.extension}
</span>
<span className="tag">
{prettyBytes(rawFileDetails.fileSize)}
</span>
</div>
</div>
</div>
</li>

1
src/client/constants/action-types.ts
View File

@@ -14,6 +14,7 @@ export const IMS_RAW_IMPORT_FAILED = "IMS_RAW_IMPORT_FAILED";
export const LS_IMPORT_CALL_IN_PROGRESS = "LS_IMPORT_CALL_IN_PROGRESS";
// Library import bull mq queue control
export const LS_TOGGLE_IMPORT_QUEUE = "LS_TOGGLE_IMPORT_QUEUE";
export const LS_QUEUE_DRAINED = "LS_QUEUE_DRAINED";
// ComicVine Metadata
export const IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS =

7
src/client/reducers/fileops.reducer.ts
View File

@@ -15,6 +15,7 @@ import {
IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
LS_IMPORT,
LS_COVER_EXTRACTED,
LS_QUEUE_DRAINED,
LS_COMIC_ADDED,
IMG_ANALYSIS_CALL_IN_PROGRESS,
IMG_ANALYSIS_DATA_FETCH_SUCCESS,
@@ -147,6 +148,12 @@ function fileOpsReducer(state = initialState, action) {
librarySearchResultCount: state.librarySearchResultCount + 1,
};
}
case LS_QUEUE_DRAINED: {
console.log("drained", action);
return {
...state,
};
}
case LS_COMIC_ADDED: {
console.log("ADDED na anna", action);
return {

8
yarn.lock
View File

@@ -12789,10 +12789,10 @@ text-table@^0.2.0, text-table@~0.2.0:
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
threetwo-ui-typings@^1.0.13:
version "1.0.13"
resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.13.tgz#9437a8c08a6984ebd1dcdf308e06e404dee11c81"
integrity sha512-AQiY8/hbp+TobBoehNTEoNco97AoiKYQjAANSFDR3pSD5jFn5qjLlKntvqdNF9Fg5tcS0ReYe0AjsvKshKpixQ==
threetwo-ui-typings@^1.0.14:
version "1.0.14"
resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.14.tgz#39cb8115cd311af2569504a6d32f401827de5c0a"
integrity sha512-nfOi2T9Pr35Bry7Y9q0r6ZnuLdGqfJY45Xu0lDGJl/oA8RLBS19FZtxsVQzYnm5jfm0tO2Q6t/JY7JnU8a9olw==
dependencies:
typescript "^4.3.2"