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

🌜 Initial Dark Mode support

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-03 15:28:05 -05:00
parent 57b713aca1
commit 29e0772a10
9 changed files with 45 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@@ -1,16 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="dark">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Three Two!</title> <title>Three Two!</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/client/index.tsx"></script> <script type="module" src="/src/client/index.tsx"></script>
</body> </body>
</html>
</html>

1
package.json
View File

@@ -31,6 +31,7 @@
"axios-cache-interceptor": "^1.0.1", "axios-cache-interceptor": "^1.0.1",
"axios-rate-limit": "^1.3.0", "axios-rate-limit": "^1.3.0",
"babel-plugin-styled-components": "^2.1.4", "babel-plugin-styled-components": "^2.1.4",
"bulma-prefers-dark": "^0.1.0-beta.1",
"date-fns": "^2.28.0", "date-fns": "^2.28.0",
"dayjs": "^1.10.6", "dayjs": "^1.10.6",
"ellipsize": "^0.5.1", "ellipsize": "^0.5.1",

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

@@ -1,4 +1,5 @@
@import "/node_modules/bulma/bulma.sass"; @import "/node_modules/bulma/bulma.sass";
@import "/node_modules/bulma-prefers-dark/bulma-prefers-dark.sass";
$fa-font-path: "/node_modules/@fortawesome/fontawesome-free/webfonts"; $fa-font-path: "/node_modules/@fortawesome/fontawesome-free/webfonts";
@import "/node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"; @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/regular.scss";
@@ -14,8 +15,9 @@ $flexSize: 4em;
$boxSpacing: 1em; $boxSpacing: 1em;
$colorText: #404646; $colorText: #404646;
body { body {
background: #fffcc; background: #20292f;
} }
.is-size-8 { .is-size-8 {
font-size: $size-8; font-size: $size-8;
} }
@@ -72,10 +74,6 @@ pre {
background: #454a59; background: #454a59;
} }
body {
background: #454a59;
}
.pulsating-circle { .pulsating-circle {
position: relative; position: relative;
left: -120%; left: -120%;
@@ -358,7 +356,7 @@ pre {
// raw file details // raw file details
.raw-file-details { .raw-file-details {
padding: 1rem; padding: 1rem;
background-color: beige; background: #30475e;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
@@ -374,12 +372,11 @@ pre {
} }
.issue-metadata { .issue-metadata {
background-color: #fbffee; background-color: #30475e;
padding: 0.8em; padding: 0.8em;
border-radius: 0.5rem; border-radius: 0.5rem;
.name { .name {
font-size: 0.95rem; font-size: 0.95rem;
color: #4a4f50;
} }
} }
@@ -421,17 +418,17 @@ pre {
} }
// Library // Library
.header-area { .header-area {
background: #20292f;
width: 100%; width: 100%;
padding: 25px 0 15px 0; padding: 25px 0 15px 0;
position: sticky; position: sticky;
z-index: 9999; z-index: 9;
background: #fffffc; top: 57px;
top: 50px;
} }
.library { .library {
.table-controls { .table-controls {
background: #fffffc; background: #20292f;
justify-content: space-between; justify-content: space-between;
position: sticky; position: sticky;
top: 126px; top: 126px;
@@ -439,17 +436,17 @@ pre {
} }
.pagination { .pagination {
margin: 0; margin: 0;
background: #fffffc;
} }
table { table {
background: #20292f;
border-collapse: separate; border-collapse: separate;
width: 100%; width: 100%;
thead { thead {
background: #20292f;
position: sticky; position: sticky;
top: 250px; top: 250px;
z-index: 1; z-index: 1;
background: #fffffc;
min-height: 130px; min-height: 130px;
} }
tr { tr {

13
src/client/components/ComicDetail/DownloadProgressTick.tsx
View File

@@ -3,10 +3,10 @@ import React, { ReactElement } from "react";
export const DownloadProgressTick = (props): ReactElement => { export const DownloadProgressTick = (props): ReactElement => {
return ( return (
<div > <div>
<h4 className="is-size-6">{props.data.name}</h4> <h4 className="is-size-5">{props.data.name}</h4>
<div> <div>
<span className="is-size-3 has-text-weight-semibold"> <span className="is-size-4 has-text-weight-semibold">
{prettyBytes(props.data.downloaded_bytes)} of{" "} {prettyBytes(props.data.downloaded_bytes)} of{" "}
{prettyBytes(props.data.size)}{" "} {prettyBytes(props.data.size)}{" "}
</span> </span>
@@ -20,13 +20,12 @@ export const DownloadProgressTick = (props): ReactElement => {
% %
</progress> </progress>
</div> </div>
<div className="is-size-5"> <div className="is-size-6 mt-1 mb-2">
{prettyBytes(props.data.speed)} per second. <p>{prettyBytes(props.data.speed)} per second.</p>
</div>
<div className="is-size-5">
Time left: Time left:
{Math.round(parseInt(props.data.seconds_left) / 60)} {Math.round(parseInt(props.data.seconds_left) / 60)}
</div> </div>
<div>{props.data.target}</div> <div>{props.data.target}</div>
</div> </div>
); );

4
src/client/components/ComicDetail/RawFileDetails.tsx
View File

@@ -7,7 +7,7 @@ export const RawFileDetails = (props): ReactElement => {
const { rawFileDetails, inferredMetadata } = props.data; const { rawFileDetails, inferredMetadata } = props.data;
return ( return (
<> <>
<div className="comic-detail raw-file-details column is-three-fifths"> <div className="comic-detail raw-file-details column is-three-quarters">
<dl> <dl>
<dt>Raw File Details</dt> <dt>Raw File Details</dt>
<dd className="is-size-7"> <dd className="is-size-7">
@@ -103,4 +103,4 @@ RawFileDetails.propTypes = {
}), }),
}), }),
}), }),
}; };

26
src/client/components/Downloads/Downloads.tsx
View File

@@ -1,13 +1,5 @@
import React, { import React, { ReactElement, useEffect, useState } from "react";
ReactElement,
useCallback,
useContext,
useEffect,
useState,
} from "react";
import { getTransfers } from "../../actions/airdcpp.actions"; import { getTransfers } from "../../actions/airdcpp.actions";
import { useDispatch, useSelector } from "react-redux";
import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
import { isEmpty, isNil, isUndefined } from "lodash"; import { isEmpty, isNil, isUndefined } from "lodash";
import { determineCoverFile } from "../../shared/utils/metadata.utils"; import { determineCoverFile } from "../../shared/utils/metadata.utils";
import MetadataPanel from "../shared/MetadataPanel"; import MetadataPanel from "../shared/MetadataPanel";
@@ -17,18 +9,18 @@ interface IDownloadsProps {
} }
export const Downloads = (props: IDownloadsProps): ReactElement => { export const Downloads = (props: IDownloadsProps): ReactElement => {
const airDCPPConfiguration = useContext(AirDCPPSocketContext); // const airDCPPConfiguration = useContext(AirDCPPSocketContext);
const { const {
airDCPPState: { settings, socket }, airDCPPState: { settings, socket },
} = airDCPPConfiguration; } = airDCPPConfiguration;
const dispatch = useDispatch(); // const dispatch = useDispatch();
const airDCPPTransfers = useSelector( // const airDCPPTransfers = useSelector(
(state: RootState) => state.airdcpp.transfers, // (state: RootState) => state.airdcpp.transfers,
); // );
const issueBundles = useSelector( // const issueBundles = useSelector(
(state: RootState) => state.airdcpp.issue_bundles, // (state: RootState) => state.airdcpp.issue_bundles,
); // );
const [bundles, setBundles] = useState([]); const [bundles, setBundles] = useState([]);
// Make the call to get all transfers from AirDC++ // Make the call to get all transfers from AirDC++
useEffect(() => { useEffect(() => {

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

@@ -226,7 +226,7 @@ export const Import = (props: IProps): ReactElement => {
{!isLoading && !isEmpty(data?.data) && ( {!isLoading && !isEmpty(data?.data) && (
<> <>
<h3 className="subtitle is-4 mt-5">Past Imports</h3> <h3 className="subtitle is-4 mt-5">Past Imports</h3>
<table className="table"> <table className="table is-striped">
<thead> <thead>
<tr> <tr>
<th>Time Started</th> <th>Time Started</th>

1
src/client/store/index.ts
View File

@@ -23,6 +23,7 @@ export const useStore = create((set, get) => ({
airDCPPSocketConnected: value, airDCPPSocketConnected: value,
})), })),
airDCPPDownloadTick: {}, airDCPPDownloadTick: {},
airDCPPTransfers: {},
// Socket.io state // Socket.io state
socketIOInstance: {}, socketIOInstance: {},

5
yarn.lock
View File

@@ -4310,6 +4310,11 @@ builtin-modules@^3.3.0:
resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6" resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw== integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
bulma-prefers-dark@^0.1.0-beta.1:
version "0.1.0-beta.1"
resolved "https://registry.yarnpkg.com/bulma-prefers-dark/-/bulma-prefers-dark-0.1.0-beta.1.tgz#074aa71899f389a0137dd3753f0d89e96ab1e59b"
integrity sha512-ti4sKxIIrTAvGtsYc9Rk66SUZSH/j63EU1hApQijQVlKFF0qBLGSb8E16HhI83KJaIeYP4aAHQv2tj0ara831A==
bulma@^0.9.4: bulma@^0.9.4:
version "0.9.4" version "0.9.4"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1" resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"