Skip to content

Commit 9eff8b1

Browse files
noisysocksnoisysocks
authored
Refactor TabSwitcher to use CSS for blob and CSS grid for sizing (#1840)
1 parent d2404f1 commit 9eff8b1

File tree

2 files changed

+23
-104
lines changed

2 files changed

+23
-104
lines changed

‎special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.js‎

Lines changed: 7 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { h } from 'preact';
2-
import { useContext } from 'preact/hooks';
32
import { AiChatColorIcon, AiChatIcon, SearchColorIcon, SearchIcon } from '../../components/Icons.js';
4-
import { CustomizerThemesContext } from '../../customizer/CustomizerProvider.js';
53
import { useTypedTranslationWith } from '../../types';
64
import styles from './TabSwitcher.module.css';
75

@@ -17,11 +15,14 @@ import styles from './TabSwitcher.module.css';
1715
*/
1816
export function TabSwitcher({ mode, onChange }) {
1917
const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
20-
const { main } = useContext(CustomizerThemesContext);
21-
const Blob = main.value === 'light' ? BlobLight : BlobDark;
2218
return (
23-
<div class={styles.tabSwitcher} role="tablist" aria-label={t('omnibar_tabSwitcherLabel')}>
24-
<Blob class={styles.blob} style={{ translate: mode === 'search' ? 0 : 92 }} />
19+
<div
20+
class={styles.tabSwitcher}
21+
style={{ '--tab-count': 2, '--tab-index': mode === 'search' ? 0 : 1 }}
22+
role="tablist"
23+
aria-label={t('omnibar_tabSwitcherLabel')}
24+
>
25+
<div class={styles.blob} />
2526
<button class={styles.tab} role="tab" aria-selected={mode === 'search'} onClick={() => onChange('search')}>
2627
{mode === 'search' ? <SearchColorIcon /> : <SearchIcon />}
2728
<span class={styles.tabLabel}>{t('omnibar_searchTabLabel')}</span>
@@ -33,97 +34,3 @@ export function TabSwitcher({ mode, onChange }) {
3334
</div>
3435
);
3536
}
36-
37-
/**
38-
* @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
39-
*/
40-
function BlobLight(props) {
41-
return (
42-
<svg xmlns="http://www.w3.org/2000/svg" width="102" height="36" viewBox="0 0 102 36" fill="none" {...props}>
43-
<g filter="url(#filter0_ddi_9483_24565)">
44-
<path
45-
d="M2 18C2 9.16344 9.16344 2 18 2H78C86.8366 2 94 9.16344 94 18C94 26.8366 86.8366 34 78 34H18C9.16345 34 2 26.8366 2 18Z"
46-
fill="white"
47-
/>
48-
</g>
49-
<defs>
50-
<filter
51-
id="filter0_ddi_9483_24565"
52-
x="-6"
53-
y="-2"
54-
width="108"
55-
height="48"
56-
filterUnits="userSpaceOnUse"
57-
color-interpolation-filters="sRGB"
58-
>
59-
<feFlood flood-opacity="0" result="BackgroundImageFix" />
60-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
61-
<feOffset dy="4" />
62-
<feGaussianBlur stdDeviation="4" />
63-
<feComposite in2="hardAlpha" operator="out" />
64-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
65-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9483_24565" />
66-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
67-
<feOffset dy="1" />
68-
<feGaussianBlur stdDeviation="2" />
69-
<feComposite in2="hardAlpha" operator="out" />
70-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
71-
<feBlend mode="normal" in2="effect1_dropShadow_9483_24565" result="effect2_dropShadow_9483_24565" />
72-
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_9483_24565" result="shape" />
73-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
74-
<feOffset dy="1" />
75-
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
76-
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.48 0" />
77-
<feBlend mode="normal" in2="shape" result="effect3_innerShadow_9483_24565" />
78-
</filter>
79-
</defs>
80-
</svg>
81-
);
82-
}
83-
84-
/**
85-
* @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
86-
*/
87-
function BlobDark(props) {
88-
return (
89-
<svg xmlns="http://www.w3.org/2000/svg" width="102" height="36" viewBox="0 0 102 36" fill="none" {...props}>
90-
<g filter="url(#filter0_ddi_9483_35175)">
91-
<path
92-
d="M2 18C2 9.16344 9.16344 2 18 2H78C86.8366 2 94 9.16344 94 18C94 26.8366 86.8366 34 78 34H18C9.16345 34 2 26.8366 2 18Z"
93-
fill="#6B6B6B"
94-
/>
95-
</g>
96-
<defs>
97-
<filter
98-
id="filter0_ddi_9483_35175"
99-
x="-6"
100-
y="-2"
101-
width="108"
102-
height="48"
103-
filterUnits="userSpaceOnUse"
104-
color-interpolation-filters="sRGB"
105-
>
106-
<feFlood flood-opacity="0" result="BackgroundImageFix" />
107-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
108-
<feOffset dy="4" />
109-
<feGaussianBlur stdDeviation="4" />
110-
<feComposite in2="hardAlpha" operator="out" />
111-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
112-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9483_35175" />
113-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
114-
<feOffset dy="1" />
115-
<feGaussianBlur stdDeviation="2" />
116-
<feComposite in2="hardAlpha" operator="out" />
117-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
118-
<feBlend mode="normal" in2="effect1_dropShadow_9483_35175" result="effect2_dropShadow_9483_35175" />
119-
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_9483_35175" result="shape" />
120-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
121-
<feOffset dy="1" />
122-
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
123-
<feColorMatrix type="matrix" values="0 0 0 0 0.976471 0 0 0 0 0.976471 0 0 0 0 0.976471 0 0 0 0.06 0" />
124-
<feBlend mode="normal" in2="shape" result="effect3_innerShadow_9483_35175" />
125-
</filter>
126-
</defs>
127-
</svg>
128-
);
129-
}

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
background: var(--ntp-controls-raised-backdrop);
33
border-radius: 99px;
44
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) inset;
5-
display: flex;
5+
display: grid;
6+
grid-template-columns: repeat(var(--tab-count), 1fr);
7+
overflow: hidden;
68
padding: var(--sp-0_5);
79
position: relative;
810
}
@@ -17,8 +19,7 @@
1719
gap: 6px;
1820
height: var(--sp-8);
1921
justify-content: center;
20-
padding: 0;
21-
width: 92px;
22+
padding: 0 var(--sp-3);
2223
z-index: 1;
2324
}
2425

@@ -27,13 +28,24 @@
2728
}
2829

2930
.blob {
31+
background-color: var(--color-white);
32+
border-radius: 18px;
33+
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.48);
3034
color: var(--ntp-controls-raised-fill-primary);
35+
height: var(--sp-8);
3136
left: 0;
3237
position: absolute;
33-
top: 0;
38+
top: 2px;
3439
transition: translate 200ms ease;
40+
translate: calc(2px + var(--tab-index) * 100%);
41+
width: calc((100% - 4px) / var(--tab-count));
3542
will-change: translate;
3643

44+
[data-theme="dark"] & {
45+
background-color: #6B6B6B;
46+
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
47+
}
48+
3749
@media (prefers-reduced-motion: reduce) {
3850
transition: none;
3951
}

0 commit comments

Comments
 (0)