aboutsummaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
authorlonkaars <l.leblansch@gmail.com>2021-04-22 12:35:53 +0200
committerlonkaars <l.leblansch@gmail.com>2021-04-22 12:35:53 +0200
commitfce651a618ca6d0d64fbcea757c3e0f582e1b437 (patch)
treeb49ff4a2e8b237b54fdc22f3c51e67af13d05c7f /components
parentb0d6721ba9c3cb0a74c376791d41e446a2f57d14 (diff)
beginnings of theme settings
Diffstat (limited to 'components')
-rw-r--r--components/preferencesContext.tsx22
-rw-r--r--components/themes.tsx61
-rw-r--r--components/ui.tsx20
3 files changed, 75 insertions, 28 deletions
diff --git a/components/preferencesContext.tsx b/components/preferencesContext.tsx
index a169be6..965b185 100644
--- a/components/preferencesContext.tsx
+++ b/components/preferencesContext.tsx
@@ -20,6 +20,8 @@ export function PreferencesContextWrapper(props: { children?: ReactNode; }) {
var [preferences, setPreferences] = useState<userPreferences>();
+ var [dummy, setDummy] = useState(false); //FIXME: janky fix to cause rerender
+
useEffect(() => {
(async () => {
if (!loggedIn) return;
@@ -31,31 +33,29 @@ export function PreferencesContextWrapper(props: { children?: ReactNode; }) {
applyPreferences(local_prefs_json);
}
- if (!preferences) {
- var preferencesReq = await axios.request<{ preferences: userPreferences; }>({
- method: 'get',
- url: `/api/user/preferences`,
- headers: { 'content-type': 'application/json' },
- });
+ var preferencesReq = await axios.request<{ preferences: userPreferences; }>({
+ method: 'get',
+ url: `/api/user/preferences`,
+ headers: { 'content-type': 'application/json' },
+ });
- window.localStorage.setItem('preferences', JSON.stringify(preferencesReq.data.preferences));
- setPreferences(preferencesReq.data.preferences);
- }
+ window.localStorage.setItem('preferences', JSON.stringify(preferencesReq.data.preferences));
+ setPreferences(preferencesReq.data.preferences);
})();
}, []);
- useEffect(() => applyPreferences(preferences), [preferences]);
+ applyPreferences(preferences);
function updatePreference(newPreference: userPreferences) {
var prefs: userPreferences = Object.assign(preferences, newPreference);
setPreferences(prefs);
- applyPreferences(prefs);
axios.request({
method: 'post',
url: `/api/user/preferences`,
headers: { 'content-type': 'application/json' },
data: { 'newPreferences': prefs },
});
+ setDummy(!dummy);
}
return <PreferencesContext.Provider value={{ preferences, updatePreference }}>
diff --git a/components/themes.tsx b/components/themes.tsx
new file mode 100644
index 0000000..be98685
--- /dev/null
+++ b/components/themes.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useState, CSSProperties } from 'react';
+import axios from 'axios';
+
+import { userPreferences } from '../api/api';
+import { Button } from './ui';
+
+type previewThemeColors = {
+ bg: string;
+ fg: string;
+ a: string;
+ b: string;
+}
+
+export type themeInfo = {
+ name: string;
+ url: string;
+ dark: previewThemeColors;
+ light: previewThemeColors;
+}
+
+export type themeJSON = themeInfo[];
+
+export default function ThemePicker(props: { preferences?: userPreferences }) {
+ var [ themes, setThemes ] = useState<themeJSON>([]);
+
+ useEffect(() => {
+ axios.request<themeJSON>({
+ method: 'get',
+ url: '/themes/themes.json',
+ }).then(response => {
+ setThemes(response.data);
+ }).catch(err => {
+ console.error(err)
+ })
+ }, []);
+
+ return <>
+ {themes.map(theme => <ThemeCard theme={theme} dark={props.preferences?.darkMode}/>)}
+ </>;
+}
+
+export function ThemeCard(props: { theme: themeInfo; dark?: boolean }) {
+ var mode = props.dark ? "dark" : "light";
+
+ return <div className="dispinbl themeCardWrapper" style={{
+ "--bg": props.theme[mode].bg,
+ "--fg": props.theme[mode].fg,
+ "--a": props.theme[mode].a,
+ "--b": props.theme[mode].b,
+ } as CSSProperties}>
+ <Button className="themeCard dispinbl drop-1" onclick={() => {
+ document.getElementById("theme").setAttribute("href", "/themes/" + props.theme.url)
+ }}>
+ <span className="name">{props.theme.name}</span>
+ <div className="posabs r0 v0 disks">
+ <div className="disk posabs a"/>
+ <div className="disk posabs b"/>
+ </div>
+ </Button>
+ </div>
+}
diff --git a/components/ui.tsx b/components/ui.tsx
index 1e9997a..c92ebfe 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -122,26 +122,12 @@ export function CheckBox(props: {
id?: string;
onclick?: (state: boolean) => void;
}) {
- var [gotDefaultState, setGotDefaultState] = useState(false);
- var [on, setOn] = useState(props.state);
-
- useEffect(() => {
- if (gotDefaultState) return;
- setOn(props.state);
- if (typeof props.state !== 'undefined') setGotDefaultState(true);
- });
-
- var toggle = () => {
- setOn(!on);
- props.onclick && props.onclick(!on);
- };
-
return <div
- onClick={toggle}
+ onClick={() => props.onclick && props.onclick(!props.state)}
id={props.id}
- className={'checkbox dispinbl ' + (on ? 'on' : 'off')}
+ className={'checkbox dispinbl ' + (props.state ? 'on' : 'off')}
>
- {on
+ {props.state
? <CheckBoxIcon />
: <CheckBoxOutlineBlankIcon />}
</div>;