1.7.2

Author: ReStartQ

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.7.2
+
+- Redesign of the tables for a more modern and clean look.
+- All media titles are now represented with the same color for consistency across the app.
+- Performance improvements for the table view.
+
 ## 1.7.1
 
 - Date format has single digit numbers now lead with a 0 in the text.

README.md

@@ -34,7 +34,7 @@ _Note:_
 **This app does not have a code signing certificate and will give a warning message on installation.**
 
 1. Download the setup file from the latest releases. The setup file is labeled as AniCour-Setup-x.x.x.exe, where x.x.x will denote the version.
-   <br> **Example: AniCour-Setup-1.7.1.exe**
+   <br> **Example: AniCour-Setup-1.7.2.exe**
    <br> _Some browsers may give a warning when downloading the setup file as it does not use a code signing certificate._
    <br> _In this case, to allow the download use the alternate option they provide. (Example: keep file)_
 2. Run the setup file, Windows will give a message like below, click on **"More info"** <p align="center"><a href="https://raw.githubusercontent.com/restartq/anicour/main/images/help/AniCourNoCodeSigningInitial.png"><img src="https://raw.githubusercontent.com/restartq/anicour/main/images/help/AniCourNoCodeSigningInitial.png" height="280"/></a></p>

release/app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "anicour",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "Anime, Manga, and Light Novel Tracker Desktop Application for Windows. A fast and interactive way for AniList users to track and manage their anime/manga lists. ",
   "license": "GPL-3.0",
   "author": {

release/app/package.json

@@ -3,7 +3,7 @@ import React from 'react';
 
 const TableScore = ({ row }: any) => {
   return (
-    <Typography fontSize={12} pl={1}>
+    <Typography fontSize={12} px={1}>
       {row.mediaListEntry.score === 0 ? '' : row.mediaListEntry.score}
     </Typography>
   );

src/renderer/components/app/etc/table/TableScore.tsx

@@ -14,7 +14,7 @@ const TableTitleMain = ({ row }: any) => {
   const mySidebar: any = useSidebarButton();
 
   return (
-    <Typography noWrap fontSize={12}>
+    <Typography noWrap fontSize={12} className="title">
       {row.mediaListEntry.notes !== null ? (
         <HtmlTooltip title={row.mediaListEntry.notes}>
           <MessageIcon fontSize="inherit" sx={{ mr: '5px' }} />

src/renderer/components/app/etc/table/TableTitleMain.tsx

@@ -35,7 +35,7 @@ const TableTitleOther = ({ row }: any) => {
   );
 
   return (
-    <Typography noWrap fontSize={12}>
+    <Typography noWrap fontSize={12} className="title">
       {row.mediaListEntry !== null ? (
         <HtmlTooltip title="On List">
           <PlaylistAddCheckCircleIcon fontSize="inherit" sx={{ mr: '5px' }} />

src/renderer/components/app/etc/table/TableTitleOther.tsx

@@ -117,7 +117,7 @@ const TanstackTableRow = ({
         position: 'absolute',
         transform: `translateY(${virtualRow.start}px)`, // this should always be a `style` as it changes on scroll
         width: '100%',
-        background: rowSelection === row.id ? ' #243341' : '#1e1e1e', // #1e1e1e rgba(8, 132, 186, 0.637) #38444c #243341
+        background: rowSelection === row.id ? '#202A36' : '#151617',
       }}
       onClick={onClickHandler}
       // context menu

src/renderer/components/app/etc/table/TanstackTableRow.tsx

@@ -54,7 +54,7 @@ function MainTanstackTable({ props, title }: any) {
         cell: (info: any) => info.getValue(),
         // header: () => <span>Title</span>,
         header: () => 'Title',
-        size: 290,
+        size: 270,
       },
       {
         accessorFn: (row: any) => {
@@ -86,7 +86,7 @@ function MainTanstackTable({ props, title }: any) {
         },
         header: 'Season',
         cell: (info: any) => info.getValue(),
-        size: 94, // 84
+        size: 110, // 94
       },
     ],
     [],
@@ -111,7 +111,7 @@ function MainTanstackTable({ props, title }: any) {
         cell: (info: any) => info.getValue(),
         // header: () => <span>Title</span>,
         header: () => 'Title',
-        size: 290,
+        size: 270,
       },
       {
         accessorFn: (row: any) => {
@@ -143,7 +143,7 @@ function MainTanstackTable({ props, title }: any) {
         },
         header: 'Released',
         cell: (info: any) => info.getValue(),
-        size: 82,
+        size: 102, // 82
       },
     ],
     [],
@@ -179,19 +179,19 @@ function MainTanstackTable({ props, title }: any) {
       navigator.userAgent.indexOf('Firefox') === -1
         ? (element) => element?.getBoundingClientRect().height
         : undefined,
-    overscan: 3,
+    overscan: 12,
   });
 
   // All important CSS styles are included as inline styles for this example. This is not recommended for your code.
   return (
-    <div className="media-table" style={{ marginTop: 0 }}>
+    <div className="media-table">
       <div
         className="container-table"
         ref={tableContainerRef}
         style={{
           overflowY: 'auto', // our scrollable table container
           position: 'relative', // needed for sticky header
-          height: 'calc(100vh - 124px)', // should be a fixed height 606 calc(100vh - 134px)
+          height: 'calc(100vh - 120px)', // should be a fixed height 606 calc(100vh - 134px)
           width: '100%',
           borderRadius: '3px',
         }}

src/renderer/components/app/main/tables/MainTanstackTable.tsx

@@ -55,7 +55,7 @@ function SearchTanstackTable({ props, title }: any) {
         cell: (info: any) => info.getValue(),
         // header: () => <span>Title</span>,
         header: () => 'Title',
-        size: 390,
+        size: 370,
       },
       {
         accessorFn: (row: any) => {
@@ -87,7 +87,7 @@ function SearchTanstackTable({ props, title }: any) {
         },
         header: 'Season',
         cell: (info: any) => info.getValue(),
-        size: 94, // 84
+        size: 109, // 94
       },
     ],
     [],
@@ -112,7 +112,7 @@ function SearchTanstackTable({ props, title }: any) {
         cell: (info: any) => info.getValue(),
         // header: () => <span>Title</span>,
         header: () => 'Title',
-        size: 390,
+        size: 370,
       },
       {
         accessorFn: (row: any) => {
@@ -144,7 +144,7 @@ function SearchTanstackTable({ props, title }: any) {
         },
         header: 'Released',
         cell: (info: any) => info.getValue(),
-        size: 82,
+        size: 102, // 82
       },
     ],
     [],
@@ -180,7 +180,7 @@ function SearchTanstackTable({ props, title }: any) {
       navigator.userAgent.indexOf('Firefox') === -1
         ? (element) => element?.getBoundingClientRect().height
         : undefined,
-    overscan: 3,
+    overscan: 12,
   });
 
   // All important CSS styles are included as inline styles for this example. This is not recommended for your code.
@@ -192,7 +192,7 @@ function SearchTanstackTable({ props, title }: any) {
         style={{
           overflowY: 'auto', // our scrollable table container
           position: 'relative', // needed for sticky header
-          height: 'calc(100vh - 124px)', // should be a fixed height 606 calc(100vh - 134px)
+          height: 'calc(100vh - 120px)', // should be a fixed height 606 calc(100vh - 134px)
           width: '100%',
           borderRadius: '3px',
         }}