💅🏽 Beautifying the import UI

This commit is contained in:
2022-03-18 09:35:26 -07:00
parent f6ca91f530
commit b1b4070867
4 changed files with 44 additions and 7 deletions

View File

@@ -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",
},

View 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

View File

@@ -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(

View File

@@ -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>
);