RomanNum3ral
/
tubearchivist
mirror of https://github.com/tubearchivist/tubearchivist.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add custom.css #884

This commit is contained in:
MerlinScheurer 2025-04-05 13:16:30 +02:00
parent 253571b5ac
commit 68a69185fe
20 changed files with 102 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/common/src/helper.py
View File

@ -231,7 +231,7 @@ def ta_host_parser(ta_host: str) -> tuple[list[str], list[str]]:
def get_stylesheets() -> list:
"""Get all valid stylesheets from /static/css"""
stylesheets = ["dark.css", "light.css", "matrix.css", "midnight.css"]
stylesheets = ["dark.css", "light.css", "matrix.css", "midnight.css", "custom.css"]
return stylesheets

0
frontend/src/configuration/colours/components/css/dark.css → frontend/public/css/custom.css
View File

16
frontend/public/css/dark.css Normal file
View File

@ -0,0 +1,16 @@
:root {
--main-bg: #00202f;
--highlight-bg: #00293b;
--highlight-error: #990202;
--highlight-error-light: #c44343;
--highlight-bg-transparent: #00293baf;
--main-font: #eeeeee;
--accent-font-dark: #259485;
--accent-font-light: #97d4c8;
--img-filter: invert(50%) sepia(9%) saturate(2940%) hue-rotate(122deg) brightness(94%)
contrast(90%);
--img-filter-error: invert(16%) sepia(60%) saturate(3717%) hue-rotate(349deg) brightness(86%)
contrast(120%);
--banner: url('/img/banner-tube-archivist-dark.png');
--logo: url('/img/logo-tube-archivist-dark.png');
}

0
frontend/src/configuration/colours/components/css/light.css → frontend/public/css/light.css
View File

0
frontend/src/configuration/colours/components/css/matrix.css → frontend/public/css/matrix.css
View File

0
frontend/src/configuration/colours/components/css/midnight.css → frontend/public/css/midnight.css
View File

7
frontend/src/api/actions/updateUserConfig.ts
View File

@ -1,7 +1,12 @@
import { SortByType, SortOrderType, ViewLayoutType } from '../../pages/Home';
import APIClient from '../../functions/APIClient';
export type ColourVariants = 'dark.css' | 'light.css' | 'matrix.css' | 'midnight.css';
export type ColourVariants =
| 'dark.css'
| 'light.css'
| 'matrix.css'
| 'midnight.css'
| 'custom.css';
export const FileSizeUnits = {
Binary: 'binary',

34
frontend/src/configuration/colours/Colours.tsx Normal file
View File

@ -0,0 +1,34 @@
import { useUserConfigStore } from '../../stores/UserConfigStore';
import { ColourConstant } from './colourConstant';
import CustomStylesheet from './components/Custom';
import DarkStylesheet from './components/Dark';
import LightStylesheet from './components/Light';
import MatrixStylesheet from './components/Matrix';
import MidnightStylesheet from './components/Midnight';
const Colours = () => {
const { userConfig } = useUserConfigStore();
const stylesheet = userConfig?.stylesheet;
switch (stylesheet) {
case ColourConstant.Dark:
return <DarkStylesheet />;
case ColourConstant.Matrix:
return <MatrixStylesheet />;
case ColourConstant.Midnight:
return <MidnightStylesheet />;
case ColourConstant.Light:
return <LightStylesheet />;
case ColourConstant.Custom:
return <CustomStylesheet />;
default:
return <DarkStylesheet />;
}
};
export default Colours;

7
frontend/src/configuration/colours/colourConstant.ts Normal file
View File

@ -0,0 +1,7 @@
export const ColourConstant = {
Dark: 'dark.css',
Light: 'light.css',
Matrix: 'matrix.css',
Midnight: 'midnight.css',
Custom: 'custom.css',
};

9
frontend/src/configuration/colours/components/Custom.tsx Normal file
View File

@ -0,0 +1,9 @@
const CustomStylesheet = () => {
return (
<head>
<link rel="stylesheet" href="/css/custom.css" />
</head>
);
};
export default CustomStylesheet;

8
frontend/src/configuration/colours/components/Dark.tsx
View File

@ -1,7 +1,9 @@
import './css/dark.css';
const DarkStylesheet = () => {
return <></>;
return (
<head>
<link rel="stylesheet" href="/css/dark.css" />
</head>
);
};
export default DarkStylesheet;

8
frontend/src/configuration/colours/components/Light.tsx
View File

@ -1,7 +1,9 @@
import './css/light.css';
const LightStylesheet = () => {
return <></>;
return (
<head>
<link rel="stylesheet" href="/css/light.css" />
</head>
);
};
export default LightStylesheet;

8
frontend/src/configuration/colours/components/Matrix.tsx
View File

@ -1,7 +1,9 @@
import './css/matrix.css';
const MatrixStylesheet = () => {
return <></>;
return (
<head>
<link rel="stylesheet" href="/css/matrix.css" />
</head>
);
};
export default MatrixStylesheet;

8
frontend/src/configuration/colours/components/Midnight.tsx
View File

@ -1,7 +1,9 @@
import './css/midnight.css';
const MidnightStylesheet = () => {
return <></>;
return (
<head>
<link rel="stylesheet" href="/css/midnight.css" />
</head>
);
};
export default MidnightStylesheet;

32
frontend/src/configuration/colours/useColours.ts
View File

@ -1,32 +0,0 @@
import { useUserConfigStore } from '../../stores/UserConfigStore';
export const ColourConstant = {
Dark: 'dark.css',
Light: 'light.css',
Matrix: 'matrix.css',
Midnight: 'midnight.css',
};
const useColours = () => {
const { userConfig } = useUserConfigStore();
const stylesheet = userConfig?.stylesheet;
switch (stylesheet) {
case ColourConstant.Dark:
return import('./components/Dark');
case ColourConstant.Matrix:
return import('./components/Matrix');
case ColourConstant.Midnight:
return import('./components/Midnight');
case ColourConstant.Light:
return import('./components/Light');
default:
return import('./components/Dark');
}
};
export default useColours;

5
frontend/src/pages/Base.tsx
View File

@ -1,6 +1,6 @@
import { Outlet, useLoaderData, useLocation, useSearchParams } from 'react-router-dom';
import Footer from '../components/Footer';
import useColours from '../configuration/colours/useColours';
import Colours from '../configuration/colours/Colours';
import { UserConfigType } from '../api/actions/updateUserConfig';
import { useEffect, useState } from 'react';
import Navigation from '../components/Navigation';
@ -94,10 +94,9 @@ const Base = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentPage]);
useColours();
return (
<>
<Colours />
<div className="main-content">
<Navigation />
{/** Outlet: https://reactrouter.com/en/main/components/outlet */}

4
frontend/src/pages/ErrorPage.tsx
View File

@ -1,5 +1,5 @@
import { useRouteError } from 'react-router-dom';
import useColours from '../configuration/colours/useColours';
import Colours from '../configuration/colours/Colours';
// This is not always the correct response
type ErrorType = {
@ -9,13 +9,13 @@ type ErrorType = {
const ErrorPage = () => {
const error = useRouteError() as ErrorType;
useColours();
console.error('ErrorPage', error);
return (
<>
<title>TA | Oops!</title>
<Colours />
<div id="error-page" style={{ margin: '10%' }}>
<h1>Oops!</h1>

5
frontend/src/pages/Login.tsx
View File

@ -1,14 +1,12 @@
import { useEffect, useState } from 'react';
import Routes from '../configuration/routes/RouteList';
import { useNavigate } from 'react-router-dom';
import useColours from '../configuration/colours/useColours';
import Colours from '../configuration/colours/Colours';
import Button from '../components/Button';
import signIn from '../api/actions/signIn';
import loadAuth from '../api/loader/loadAuth';
const Login = () => {
useColours();
const navigate = useNavigate();
const [username, setUsername] = useState('');
@ -76,6 +74,7 @@ const Login = () => {
return (
<>
<title>TA | Welcome</title>
<Colours />
<div className="boxed-content login-page">
<img alt="tube-archivist-logo" />
<h1>Tube Archivist</h1>

5
frontend/src/pages/NotFound.tsx
View File

@ -1,13 +1,12 @@
import { Link } from 'react-router-dom';
import useColours from '../configuration/colours/useColours';
import Colours from '../configuration/colours/Colours';
import Routes from '../configuration/routes/RouteList';
const NotFound = ({ failType = 'page' }) => {
useColours();
return (
<>
<title>404 | Not found</title>
<Colours />
<div id="error-page" style={{ margin: '10%' }}>
<h1>Oops!</h1>
<p>

12
frontend/src/pages/SettingsUser.tsx
View File

@ -1,10 +1,8 @@
import { useNavigate } from 'react-router-dom';
import updateUserConfig, {
ColourVariants,
FileSizeUnits,
UserConfigType,
} from '../api/actions/updateUserConfig';
import { ColourConstant } from '../configuration/colours/useColours';
import SettingsNavigation from '../components/SettingsNavigation';
import Notifications from '../components/Notifications';
import Button from '../components/Button';
@ -12,14 +10,13 @@ import useIsAdmin from '../functions/useIsAdmin';
import { useUserConfigStore } from '../stores/UserConfigStore';
import { useEffect, useState } from 'react';
import ToggleConfig from '../components/ToggleConfig';
import { ColourConstant } from '../configuration/colours/colourConstant';
const SettingsUser = () => {
const { userConfig, setUserConfig } = useUserConfigStore();
const isAdmin = useIsAdmin();
const navigate = useNavigate();
const [styleSheet, setStyleSheet] = useState<ColourVariants>(userConfig.stylesheet);
const [styleSheetRefresh, setStyleSheetRefresh] = useState(false);
const [pageSize, setPageSize] = useState<number>(userConfig.page_size);
const [showHelpText, setShowHelpText] = useState(userConfig.show_help_text);
const [selectedFileSizeUnit, setSelectedFileSizeUnit] = useState(FileSizeUnits.Binary);
@ -41,7 +38,6 @@ const SettingsUser = () => {
const handleStyleSheetChange = async (selectedStyleSheet: ColourVariants) => {
handleUserConfigUpdate({ stylesheet: selectedStyleSheet });
setStyleSheet(selectedStyleSheet);
setStyleSheetRefresh(true);
};
const handlePageSizeChange = async () => {
@ -65,11 +61,6 @@ const SettingsUser = () => {
}
};
const handlePageRefresh = () => {
navigate(0);
setStyleSheetRefresh(false);
};
return (
<>
<title>TA | User Settings</title>
@ -104,7 +95,6 @@ const SettingsUser = () => {
);
})}
</select>
{styleSheetRefresh && <button onClick={handlePageRefresh}>Refresh</button>}
</div>
</div>