Skip to content

Commit 2012858

Browse files
shakyShaneshakyShane
authored
ntp: customizer drawer screens (#1303)
* ntp: customizer drawer * unused param
1 parent 735d634 commit 2012858

21 files changed

+1968
-61
lines changed

‎special-pages/pages/new-tab/app/components/BackgroundProvider.js‎

Lines changed: 88 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { h } from 'preact';
1+
import { Fragment, h } from 'preact';
22
import styles from './BackgroundReceiver.module.css';
3+
import { values } from '../customizer/values.js';
34
import { useContext } from 'preact/hooks';
45
import { CustomizerContext } from '../customizer/CustomizerProvider.js';
6+
import { detectThemeFromHex } from '../customizer/utils.js';
57

68
/**
79
* @import { BackgroundVariant, BrowserTheme } from "../../types/new-tab"
@@ -18,12 +20,22 @@ export function inferSchemeFrom(background, browserTheme, system) {
1820
switch (background.kind) {
1921
case 'default':
2022
return { bg: browser, browser };
21-
case 'gradient':
23+
case 'color': {
24+
const color = values.colors[background.value];
25+
return { bg: color.colorScheme, browser };
26+
}
27+
28+
case 'gradient': {
29+
const gradient = values.gradients[background.value];
30+
return { bg: gradient.colorScheme, browser };
31+
}
32+
2233
case 'userImage':
34+
return { bg: background.value.colorScheme, browser };
35+
2336
case 'hex':
24-
console.log('not supported yet!');
37+
return { bg: detectThemeFromHex(background.value), browser };
2538
}
26-
return { bg: browser, browser };
2739
}
2840

2941
/**
@@ -50,13 +62,79 @@ export function BackgroundConsumer({ browser }) {
5062
case 'default': {
5163
return <div className={styles.root} data-testid="BackgroundConsumer" data-background-kind="default" data-theme={browser} />;
5264
}
53-
case 'hex':
54-
case 'color':
55-
case 'gradient':
56-
case 'userImage':
65+
case 'hex': {
66+
return (
67+
<div
68+
class={styles.root}
69+
data-animate="true"
70+
data-testid="BackgroundConsumer"
71+
style={{
72+
backgroundColor: background.value,
73+
}}
74+
></div>
75+
);
76+
}
77+
case 'color': {
78+
const color = values.colors[background.value];
79+
return (
80+
<div
81+
class={styles.root}
82+
data-animate="true"
83+
data-background-color={color.hex}
84+
data-testid="BackgroundConsumer"
85+
style={{
86+
backgroundColor: color.hex,
87+
}}
88+
></div>
89+
);
90+
}
91+
case 'gradient': {
92+
const gradient = values.gradients[background.value];
93+
return (
94+
<Fragment key="gradient">
95+
<div
96+
class={styles.root}
97+
data-animate="false"
98+
data-testid="BackgroundConsumer"
99+
style={{
100+
backgroundColor: gradient.fallback,
101+
backgroundImage: `url(${gradient.path})`,
102+
backgroundSize: 'cover',
103+
backgroundRepeat: 'no-repeat',
104+
}}
105+
/>
106+
<div
107+
class={styles.root}
108+
data-animate="false"
109+
style={{
110+
backgroundImage: `url(gradients/grain.png)`,
111+
backgroundRepeat: 'repeat',
112+
opacity: 0.5,
113+
mixBlendMode: 'soft-light',
114+
}}
115+
></div>
116+
</Fragment>
117+
);
118+
}
119+
case 'userImage': {
120+
const img = background.value;
121+
return (
122+
<div
123+
class={styles.root}
124+
data-animate="true"
125+
data-testid="BackgroundConsumer"
126+
style={{
127+
backgroundImage: `url(${img.src})`,
128+
backgroundSize: 'cover',
129+
backgroundRepeat: 'no-repeat',
130+
backgroundPosition: 'center center',
131+
}}
132+
></div>
133+
);
134+
}
57135
default: {
58-
console.warn('not supported yet!');
59-
return <div className={styles.root} data-testid="BackgroundConsumer" data-background-kind="default" data-theme={browser} />;
136+
console.warn('Unreachable!');
137+
return <div className={styles.root}></div>;
60138
}
61139
}
62140
}

‎special-pages/pages/new-tab/app/customizer/CustomizerProvider.js‎

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import { createContext, h } from 'preact';
2-
import { signal, useSignal } from '@preact/signals';
2+
import { useCallback } from 'preact/hooks';
3+
import { effect, signal, useSignal } from '@preact/signals';
34
import { useThemes } from './themes.js';
45

56
/**
67
* @typedef {import('../../types/new-tab.js').CustomizerData} CustomizerData
8+
* @typedef {import('../../types/new-tab.js').BackgroundData} BackgroundData
9+
* @typedef {import('../../types/new-tab.js').ThemeData} ThemeData
10+
* @typedef {import('../../types/new-tab.js').UserImageData} UserImageData
11+
* @typedef {import('../service.hooks.js').State<CustomizerData, undefined>} State
12+
* @typedef {import('../service.hooks.js').Events<CustomizerData, undefined>} Events
713
*/
814

915
/**
@@ -24,6 +30,17 @@ export const CustomizerContext = createContext({
2430
userColor: null,
2531
theme: 'system',
2632
}),
33+
/** @type {(bg: BackgroundData) => void} */
34+
select: (bg) => {},
35+
upload: () => {},
36+
/**
37+
* @type {(theme: ThemeData) => void}
38+
*/
39+
setTheme: (theme) => {},
40+
/**
41+
* @type {(id: string) => void}
42+
*/
43+
deleteImage: (id) => {},
2744
});
2845

2946
/**
@@ -40,10 +57,56 @@ export function CustomizerProvider({ service, initialData, children }) {
4057
const data = useSignal(initialData);
4158
const { main, browser } = useThemes(data);
4259

43-
// todo: add data subscriptions here
60+
effect(() => {
61+
const unsub = service.onBackground((evt) => {
62+
data.value = { ...data.value, background: evt.data.background };
63+
});
64+
const unsub1 = service.onTheme((evt) => {
65+
data.value = { ...data.value, theme: evt.data.theme };
66+
});
67+
const unsub2 = service.onImages((evt) => {
68+
data.value = { ...data.value, userImages: evt.data.userImages };
69+
});
70+
const unsub3 = service.onColor((evt) => {
71+
data.value = { ...data.value, userColor: evt.data.userColor };
72+
});
73+
74+
return () => {
75+
unsub();
76+
unsub1();
77+
unsub2();
78+
unsub3();
79+
};
80+
});
81+
82+
/** @type {(bg: BackgroundData) => void} */
83+
const select = useCallback(
84+
(bg) => {
85+
service.setBackground(bg);
86+
},
87+
[service],
88+
);
89+
90+
const upload = useCallback(() => {
91+
service.upload();
92+
}, [service]);
93+
94+
const setTheme = useCallback(
95+
(theme) => {
96+
service.setTheme(theme);
97+
},
98+
[service],
99+
);
100+
101+
const deleteImage = useCallback(
102+
(id) => {
103+
service.deleteImage(id);
104+
},
105+
[service],
106+
);
44107

45108
return (
46-
<CustomizerContext.Provider value={{ data }}>
109+
<CustomizerContext.Provider value={{ data, select, upload, setTheme, deleteImage }}>
47110
<CustomizerThemesContext.Provider value={{ main, browser }}>{children}</CustomizerThemesContext.Provider>
48111
</CustomizerContext.Provider>
49112
);

0 commit comments

Comments
 (0)