Skip to content

Commit b2fd6ff

Browse files
shakyShanevkraucunas
shakyShane
and
vkraucunas
authored
ntp: customizer globals (#1329)
* ntp: customizer globals * adding support * more support for incremental merge * fixed hover * remove some future stuff * dark mode fix * fix: test * fixed scrolling favorites --------- Co-authored-by: Valerie Kraucunas <[email protected]>
1 parent 5a9524c commit b2fd6ff

33 files changed

+680
-191
lines changed

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

Lines changed: 50 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { h } from 'preact';
1+
import { Fragment, h } from 'preact';
22
import cn from 'classnames';
33
import styles from './App.module.css';
44
import { useCustomizerDrawerSettings, usePlatformName } from '../settings.provider.js';
@@ -7,30 +7,52 @@ import { useGlobalDropzone } from '../dropzone.js';
77
import { Customizer, CustomizerButton, CustomizerMenuPositionedFixed, useContextMenu } from '../customizer/components/Customizer.js';
88
import { useDrawer, useDrawerControls } from './Drawer.js';
99
import { CustomizerDrawer } from '../customizer/components/CustomizerDrawer.js';
10+
import { BackgroundConsumer } from './BackgroundProvider.js';
11+
import { useComputed } from '@preact/signals';
12+
import { CustomizerThemesContext } from '../customizer/CustomizerProvider.js';
13+
import { useContext } from 'preact/hooks';
1014

1115
/**
1216
* Renders the App component.
1317
*
1418
* @param {Object} props - The properties of the component.
1519
* @param {import("preact").ComponentChild} [props.children] - The child components to be rendered within the App component.
1620
*/
17-
export function App({ children }) {
21+
export function App() {
1822
const platformName = usePlatformName();
19-
const settings = useCustomizerDrawerSettings();
23+
const customizerDrawer = useCustomizerDrawerSettings();
2024

21-
const customizerKind = settings.state === 'enabled' ? 'drawer' : 'menu';
25+
const customizerKind = customizerDrawer.state === 'enabled' ? 'drawer' : 'menu';
2226

2327
useGlobalDropzone();
2428
useContextMenu();
2529

26-
const { buttonRef, wrapperRef, visibility, displayChildren, hidden, buttonId, drawerId } = useDrawer();
27-
const { toggle, close } = useDrawerControls();
30+
// prettier-ignore
31+
const {
32+
buttonRef,
33+
wrapperRef,
34+
visibility,
35+
displayChildren,
36+
animating,
37+
hidden,
38+
buttonId,
39+
drawerId
40+
} = useDrawer();
41+
42+
const tabIndex = useComputed(() => (hidden.value ? -1 : 0));
43+
const { toggle } = useDrawerControls();
44+
const { main, browser } = useContext(CustomizerThemesContext);
2845

2946
return (
30-
<div class={cn(styles.layout)} ref={wrapperRef} data-drawer-visibility={visibility}>
31-
<main class={cn(styles.main)} data-main-scroller data-customizer-kind={customizerKind}>
32-
<div class={styles.tube} data-platform={platformName}>
33-
<WidgetList />
47+
<Fragment>
48+
<BackgroundConsumer browser={browser} />
49+
<div class={styles.layout} ref={wrapperRef} data-animating={animating} data-drawer-visibility={visibility}>
50+
<main class={cn(styles.main, styles.mainScroller)} data-main-scroller data-theme={main}>
51+
<div class={styles.content}>
52+
<div className={styles.tube} data-content-tube data-platform={platformName}>
53+
<WidgetList />
54+
</div>
55+
</div>
3456
<CustomizerMenuPositionedFixed>
3557
{customizerKind === 'menu' && <Customizer />}
3658
{customizerKind === 'drawer' && (
@@ -43,16 +65,23 @@ export function App({ children }) {
4365
/>
4466
)}
4567
</CustomizerMenuPositionedFixed>
46-
{children}
47-
</div>
48-
</main>
49-
{customizerKind === 'drawer' && (
50-
<aside id={drawerId} class={styles.aside} aria-hidden={hidden}>
51-
<div class={styles.asideContent}>
52-
<CustomizerDrawer onClose={close} wrapperRef={wrapperRef} displayChildren={displayChildren} />
53-
</div>
54-
</aside>
55-
)}
56-
</div>
68+
</main>
69+
{customizerKind === 'drawer' && (
70+
<aside
71+
class={cn(styles.aside, styles.asideScroller)}
72+
tabindex={tabIndex}
73+
aria-hidden={hidden}
74+
data-theme={browser}
75+
data-browser-panel
76+
>
77+
<div class={styles.asideContent}>
78+
<div class={styles.asideContentInner}>
79+
<CustomizerDrawer displayChildren={displayChildren} />
80+
</div>
81+
</div>
82+
</aside>
83+
)}
84+
</div>
85+
</Fragment>
5786
);
5887
}

‎special-pages/pages/new-tab/app/components/App.module.css‎

Lines changed: 60 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
@import url("../styles/ntp-theme.css");
44

55
body {
6-
background: var(--ntp-background-color);
7-
color: var(--ntp-text-normal);
86
font-size: var(--body-font-size);
97
font-weight: var(--body-font-weight);
108
line-height: var(--body-line-height);
9+
overflow: hidden;
10+
height: 100vh;
1111
}
1212

1313
.tube {
@@ -34,40 +34,85 @@ body:has([data-reset-layout="true"]) .tube {
3434

3535
.layout {
3636
display: grid;
37-
grid-template-columns: auto 0;
38-
transition: all ease .3s;
37+
grid-template-columns: auto 0 0;
38+
grid-template-areas: "main gap aside";
39+
transition: all .3s ease-in-out;
3940
position: relative;
41+
z-index: 1;
4042

4143
&[data-drawer-visibility='visible'] {
42-
grid-template-columns: auto var(--ntp-drawer-width);
44+
grid-template-columns: auto 4px var(--ntp-combined-width);
4345
}
4446
}
4547

4648
.main {
47-
&[data-customizer-kind="drawer"] {
48-
overflow: hidden;
49-
height: 100vh;
49+
height: 100vh;
50+
overflow: auto;
51+
grid-area: main;
52+
color: var(--ntp-text-normal);
53+
}
54+
55+
.mainScroller {
56+
&::-webkit-scrollbar {
57+
width: 4px;
58+
}
59+
60+
&::-webkit-scrollbar-track {
61+
border-radius: 6px;
62+
}
63+
64+
&::-webkit-scrollbar-thumb {
65+
background: rgb(108, 108, 108);
66+
border-radius: 6px;
5067
}
5168
}
5269

53-
.active {}
70+
.content {
71+
width: 100%;
72+
}
5473

5574
.aside {
56-
overflow: hidden;
57-
height: 100vh;
75+
color: var(--ntp-text-normal);
5876
background: var(--ntp-surfaces-panel-background-color);
77+
grid-area: aside;
78+
height: 100vh;
5979
z-index: 1;
80+
overflow: auto;
6081

6182
/** todo: is this re-usable in any way, or unique? */
6283
box-shadow: 0px 0px 1px 0px #FFF inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12);
63-
@media screen and (prefers-color-scheme: dark) {
84+
85+
&[data-theme=dark] {
6486
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.60) inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.16), 0px 8px 12px 0px rgba(0, 0, 0, 0.24);
6587
}
88+
89+
.layout[data-animating="true"] & {
90+
overflow: hidden;
91+
}
6692
}
6793

6894
.asideContent {
69-
box-sizing: border-box;
70-
height: 100vh;
95+
opacity: 1;
7196
width: var(--ntp-drawer-width);
72-
padding: var(--sp-2);
97+
}
98+
99+
.asideContentInner {
100+
padding: 1rem;
101+
padding-right: calc(1rem - var(--ntp-drawer-scroll-width));
102+
}
103+
104+
.asideScroller {
105+
&::-webkit-scrollbar {
106+
width: var(--ntp-drawer-scroll-width);
107+
}
108+
109+
&::-webkit-scrollbar-track {
110+
border-radius: 6px;
111+
}
112+
113+
&::-webkit-scrollbar-thumb {
114+
background: rgb(108, 108, 108);
115+
border: 4px solid var(--ntp-surfaces-panel-background-color);
116+
border-radius: 6px;
117+
}
73118
}

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { h } from 'preact';
2+
import styles from './BackgroundReceiver.module.css';
3+
import { useContext } from 'preact/hooks';
4+
import { CustomizerContext } from '../customizer/CustomizerProvider.js';
5+
6+
/**
7+
* @import { BackgroundVariant, BrowserTheme } from "../../types/new-tab"
8+
*/
9+
10+
/**
11+
* @param {BackgroundVariant} background
12+
* @param {BrowserTheme} browserTheme
13+
* @param {'light' | 'dark'} system
14+
* @return {{bg: 'light' | 'dark', browser: 'light' | 'dark'}}
15+
*/
16+
export function inferSchemeFrom(background, browserTheme, system) {
17+
const browser = themeFromBrowser(browserTheme, system);
18+
switch (background.kind) {
19+
case 'default':
20+
return { bg: browser, browser };
21+
case 'gradient':
22+
case 'userImage':
23+
case 'hex':
24+
console.log('not supported yet!');
25+
}
26+
return { bg: browser, browser };
27+
}
28+
29+
/**
30+
* @param {BrowserTheme} browserTheme
31+
* @param {'light' | 'dark'} system
32+
* @return {'light' | 'dark'}
33+
*/
34+
export function themeFromBrowser(browserTheme, system) {
35+
if (browserTheme === 'system') {
36+
return system;
37+
}
38+
return browserTheme;
39+
}
40+
41+
/**
42+
* @param {object} props
43+
* @param {import("@preact/signals").Signal<'light' | 'dark'>} props.browser
44+
*/
45+
export function BackgroundConsumer({ browser }) {
46+
const { data } = useContext(CustomizerContext);
47+
const background = data.value.background;
48+
49+
switch (background.kind) {
50+
case 'default': {
51+
return <div className={styles.root} data-testid="BackgroundConsumer" data-background-kind="default" data-theme={browser} />;
52+
}
53+
case 'hex':
54+
case 'color':
55+
case 'gradient':
56+
case 'userImage':
57+
default: {
58+
console.warn('not supported yet!');
59+
return <div className={styles.root} data-testid="BackgroundConsumer" data-background-kind="default" data-theme={browser} />;
60+
}
61+
}
62+
}

‎special-pages/pages/new-tab/app/components/BackgroundReceiver.module.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.root {
2+
position: fixed;
3+
z-index: 0;
4+
inset: 0;
5+
width: 100vw;
6+
height: 100vh;
7+
pointer-events: none;
8+
9+
&[data-animate="true"] {
10+
transition: all .3s ease-in-out;
11+
}
12+
13+
&[data-background-kind="default"][data-theme=dark] {
14+
background: var(--default-dark-bg);
15+
}
16+
&[data-background-kind="default"][data-theme=light] {
17+
background: var(--default-light-bg);
18+
}
19+
}

‎special-pages/pages/new-tab/app/components/Components.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ body[data-display="components"] {
4444
background: var(--color-gray-20);
4545
}
4646

47-
@media screen and (prefers-color-scheme: dark) {
47+
[data-theme=dark] & {
4848
&:hover {
4949
background: var(--color-gray-90);
5050
}

‎special-pages/pages/new-tab/app/components/DismissButton.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { Cross } from './Icons';
44
import { useTypedTranslation } from '../types';
55
import styles from './DismissButton.module.css';
66

7-
/*
7+
/**
88
* @param {object} props
99
* @param {string} [props.className]
10-
* @param {() => void} props.onClick
10+
* @param {() => void} [props.onClick]
1111
*/
1212
export function DismissButton({ className, onClick }) {
1313
const { t } = useTypedTranslation();

‎special-pages/pages/new-tab/app/components/DismissButton.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
outline: none;
3737
}
3838

39-
@media screen and (prefers-color-scheme: dark) {
39+
[data-theme=dark] & {
4040
&:hover {
4141
background-color: var(--color-black-at-9);
4242
}
@@ -55,4 +55,4 @@
5555
background-color: var(--color-white-at-12);
5656
}
5757
}
58-
}
58+
}

0 commit comments

Comments
 (0)