💅🏽 Beautifying the import UI
This commit is contained in:
@@ -43,7 +43,7 @@ export const getWeeklyPullList = (options) => async (dispatch) => {
|
||||
url: `${COMICVINE_SERVICE_URI}/getWeeklyPullList`,
|
||||
method: "get",
|
||||
params: {
|
||||
startDate: "2022-3-7",
|
||||
startDate: "2022-3-21",
|
||||
pageSize: "15",
|
||||
currentPage: "1",
|
||||
},
|
||||
|
||||
6
src/client/assets/img/comicinfoxml.svg
Normal file
6
src/client/assets/img/comicinfoxml.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="384" height="512" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path id="Path" fill="#ff634d" fill-rule="evenodd" stroke="#646464" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" d="M 215.786591 23.351563 C 215.786591 23.351563 98.801674 21.473022 81.803864 21.200073 C 21.811596 20.236725 23.297552 52.264709 22.462652 104.258026 C 21.073503 190.766876 22.587183 312.129272 22.115429 437.295349 C 21.974922 474.574432 57.495609 491.702881 94.239006 492.460449 C 172.222427 494.068359 287.278351 491.559753 287.278351 491.559753 C 287.278351 491.559753 361.530945 494.731964 361.601563 409.742523 C 361.689667 303.742554 361.407318 172.708862 361.407318 172.708862 L 215.786591 23.351563 L 215.786591 23.351563 Z"/>
|
||||
<path id="Shape" fill="none" stroke="#ffffff" stroke-width="32" stroke-linecap="round" stroke-linejoin="round" d="M 110 270 L 264 270 M 162 321 L 220 321"/>
|
||||
<path id="Line" fill="none" stroke="#ffffff" stroke-width="33" stroke-linecap="round" stroke-linejoin="round" d="M 110 375 L 264 374.999084"/>
|
||||
<path id="path1" fill="none" stroke="#646464" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" d="M 207 23 L 208 175 L 349 175"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -80,6 +80,12 @@ export const RecentlyImported = ({
|
||||
<img src="/img/missing-file.svg" />
|
||||
</span>
|
||||
)}
|
||||
{/* ComicInfo.xml presence */}
|
||||
{!isNil(sourcedMetadata.comicInfo) && (
|
||||
<span className="icon custom-icon is-small has-text-danger">
|
||||
<img src="/img/comicinfoxml.svg" />
|
||||
</span>
|
||||
)}
|
||||
{/* Issue type */}
|
||||
{isComicBookMetadataAvailable &&
|
||||
!isNil(
|
||||
|
||||
@@ -51,7 +51,16 @@ export const Import = (props: IProps): ReactElement => {
|
||||
dispatch(toggleImportQueueStatus({ action: "pause" }));
|
||||
}
|
||||
}, [isImportQueuePaused]);
|
||||
|
||||
const pauseIconText = (
|
||||
<>
|
||||
<i className="fa-solid fa-pause mr-2"></i> Pause Import
|
||||
</>
|
||||
);
|
||||
const playIconText = (
|
||||
<>
|
||||
<i className="fa-solid fa-play mr-2"></i> Resume Import
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="section is-small">
|
||||
@@ -96,11 +105,27 @@ export const Import = (props: IProps): ReactElement => {
|
||||
<span>Import and Tag</span>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<pre>{JSON.stringify(libraryQueueResults, null, 2)}</pre>
|
||||
<button className="button is-warning" onClick={toggleImport}>
|
||||
Pause Queue
|
||||
</button>
|
||||
<div className="columns is-multiline">
|
||||
<div className="column is-one-fifth">
|
||||
<div className="box control-palette">
|
||||
<span className="is-size-2 has-text-weight-bold">
|
||||
{JSON.stringify(libraryQueueResults, null, 2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="is-half">
|
||||
<div className="content">
|
||||
<div className="control">
|
||||
<button
|
||||
className="button is-warning is-light"
|
||||
onClick={toggleImport}
|
||||
>
|
||||
{isImportQueuePaused ? pauseIconText : playIconText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user