Skip to content

Commit 217618d

Browse files
shakyShaneshakyShane
committed
making the favicon component re-usable
1 parent 9e5c692 commit 217618d

File tree

7 files changed

+62
-56
lines changed

7 files changed

+62
-56
lines changed

‎special-pages/pages/new-tab/app/activity/components/ActivityItem.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { h } from 'preact';
22
import { useTypedTranslationWith } from '../../types.js';
33
import cn from 'classnames';
44
import styles from './Activity.module.css';
5-
import { ImageWithState } from '../../components/ImageWithState.js';
5+
import { FaviconWithState } from '../../../../../shared/components/FaviconWithState.js';
66
import { ACTION_ADD_FAVORITE, ACTION_REMOVE, ACTION_REMOVE_FAVORITE } from '../constants.js';
77
import { Star, StarFilled } from '../../components/icons/Star.js';
88
import { Fire } from '../../components/icons/Fire.js';
@@ -12,6 +12,7 @@ import { memo } from 'preact/compat';
1212
import { useComputed } from '@preact/signals';
1313
import { NormalizedDataContext } from '../NormalizeDataProvider.js';
1414
import { ACTION_BURN } from '../../burning/BurnProvider.js';
15+
import { DDG_FALLBACK_ICON, DDG_FALLBACK_ICON_DARK } from '../../favorites/constants.js';
1516

1617
export const ActivityItem = memo(
1718
/**
@@ -32,14 +33,15 @@ export const ActivityItem = memo(
3233
<a class={styles.title} href={url} data-url={url}>
3334
<span className={styles.favicon} data-url={url}>
3435
{documentVisibility === 'visible' && (
35-
<ImageWithState
36+
<FaviconWithState
3637
faviconSrc={favoriteSrc}
3738
faviconMax={faviconMax}
38-
title={title}
3939
etldPlusOne={etldPlusOne}
4040
theme={'light'}
4141
displayKind={'history-favicon'}
4242
key={`${favoriteSrc}:${faviconMax}`}
43+
fallback={DDG_FALLBACK_ICON}
44+
fallbackDark={DDG_FALLBACK_ICON_DARK}
4345
/>
4446
)}
4547
</span>

‎special-pages/pages/new-tab/app/favorites/components/Tile.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import cn from 'classnames';
33
import { useId } from 'preact/hooks';
44
import { memo } from 'preact/compat';
55
import styles from './Tile.module.css';
6-
import { DDG_DEFAULT_ICON_SIZE } from '../constants.js';
6+
import { DDG_DEFAULT_ICON_SIZE, DDG_FALLBACK_ICON, DDG_FALLBACK_ICON_DARK } from '../constants.js';
77
import { useItemState } from './PragmaticDND.js';
88
import { useTypedTranslationWith } from '../../types.js';
99
import { PlusIcon } from '../../components/Icons.js';
10-
import { ImageWithState } from '../../components/ImageWithState.js';
10+
import { FaviconWithState } from '../../../../../shared/components/FaviconWithState.js';
1111

1212
/**
1313
* @import {Favorite} from '../../../types/new-tab'
@@ -51,13 +51,14 @@ export const Tile = memo(
5151
>
5252
<div class={cn(styles.icon, styles.draggable)}>
5353
{visibility === 'visible' && (
54-
<ImageWithState
54+
<FaviconWithState
5555
faviconSrc={faviconSrc}
5656
faviconMax={faviconMax || DDG_DEFAULT_ICON_SIZE}
57-
title={title}
5857
theme={theme}
5958
etldPlusOne={etldPlusOne}
6059
displayKind={'favorite-tile'}
60+
fallback={DDG_FALLBACK_ICON}
61+
fallbackDark={DDG_FALLBACK_ICON_DARK}
6162
/>
6263
)}
6364
</div>

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

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -79,47 +79,6 @@
7979
}
8080
}
8181

82-
.favicon {
83-
display: block;
84-
background-repeat: no-repeat;
85-
background-size: contain;
86-
pointer-events: none;
87-
}
88-
89-
.faviconLarge {
90-
max-height: calc(32 * var(--px-in-rem));
91-
max-width: calc(32 * var(--px-in-rem));
92-
}
93-
94-
.faviconSmall {
95-
max-height: calc(16 * var(--px-in-rem));
96-
max-width: calc(16 * var(--px-in-rem));
97-
}
98-
99-
.faviconText {
100-
display: flex;
101-
align-items: center;
102-
justify-content: center;
103-
text-transform: lowercase;
104-
color: white;
105-
font-size: 1.1rem;
106-
font-weight: 600;
107-
border-radius: var(--border-radius-md);
108-
height: calc(32 * var(--px-in-rem));
109-
width: calc(32 * var(--px-in-rem));
110-
111-
span:first-child {
112-
text-transform: uppercase;
113-
}
114-
115-
&.faviconSmall {
116-
font-size: 0.5rem;
117-
border-radius: var(--border-radius-xs);
118-
height: calc(16 * var(--px-in-rem));
119-
width: calc(16 * var(--px-in-rem));
120-
}
121-
}
122-
12382
.text {
12483
width: var(--icon-width);
12584
text-align: center;

‎special-pages/pages/new-tab/app/favorites/unit-tests/color.spec.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import assert from 'node:assert';
22
import { test } from 'node:test';
3-
import { urlToColor } from '../getColorForString.js';
3+
import { urlToColor } from '../../../../../shared/getColorForString.js';
44
import fc from 'fast-check';
55

66
/**

‎special-pages/pages/new-tab/app/components/ImageWithState.js renamed to ‎special-pages/shared/components/FaviconWithState.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { h } from 'preact';
22
import { useState } from 'preact/hooks';
3-
import { DDG_DEFAULT_ICON_SIZE, DDG_FALLBACK_ICON, DDG_FALLBACK_ICON_DARK } from '../favorites/constants.js';
4-
import styles from '../favorites/components/Tile.module.css';
5-
import { urlToColor } from '../favorites/getColorForString.js';
63
import cn from 'classnames';
4+
import styles from './FaviconWithState.module.css';
5+
import { urlToColor } from '../getColorForString.js';
76

87
/**
98
* @typedef {'loading_favicon_src'
@@ -31,14 +30,17 @@ const states = /** @type {Record<ImgState, ImgState>} */ ({
3130
*
3231
* @param {Object} props - The props for the image loader.
3332
* @param {string|null|undefined} props.faviconSrc - The URL of the favicon image to load.
33+
* @param {number} [props.defaultSize] - The default size for the display of the favicon
34+
* @param {string} props.fallback - The URL of the fallback
35+
* @param {string} props.fallbackDark - The URL of the dark fallback
36+
* @param {string|null|undefined} props.faviconSrc - The URL of the favicon image to load.
3437
* @param {number} props.faviconMax - The maximum size this icon be displayed as
35-
* @param {string} props.title - The title associated with the image.
3638
* @param {'light' | 'dark'} props.theme - the currently applied theme
3739
* @param {'favorite-tile' | 'history-favicon'} props.displayKind
3840
* @param {string|null} props.etldPlusOne - The relevant domain section of the url
3941
*/
40-
export function ImageWithState({ faviconSrc, faviconMax, title, etldPlusOne, theme, displayKind }) {
41-
const size = Math.min(faviconMax, DDG_DEFAULT_ICON_SIZE);
42+
export function FaviconWithState({ defaultSize = 64, fallback, fallbackDark, faviconSrc, faviconMax, etldPlusOne, theme, displayKind }) {
43+
const size = Math.min(faviconMax, defaultSize);
4244
const sizeClass = displayKind === 'favorite-tile' ? styles.faviconLarge : styles.faviconSmall;
4345

4446
// try to use the defined image source
@@ -124,7 +126,7 @@ export function ImageWithState({ faviconSrc, faviconMax, title, etldPlusOne, the
124126
case states.did_load_fallback_img: {
125127
return (
126128
<img
127-
src={theme === 'light' ? DDG_FALLBACK_ICON : DDG_FALLBACK_ICON_DARK}
129+
src={theme === 'light' ? fallback : fallbackDark}
128130
class={cn(styles.favicon, sizeClass)}
129131
alt=""
130132
data-state={state}

‎special-pages/shared/components/FaviconWithState.module.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.favicon {
2+
--border-radius: 8px;
3+
4+
display: block;
5+
background-repeat: no-repeat;
6+
background-size: contain;
7+
pointer-events: none;
8+
border-radius: var(--border-radius);
9+
}
10+
11+
.faviconLarge {
12+
max-height: calc(32 * var(--px-in-rem));
13+
max-width: calc(32 * var(--px-in-rem));
14+
}
15+
16+
.faviconSmall {
17+
max-height: calc(16 * var(--px-in-rem));
18+
max-width: calc(16 * var(--px-in-rem));
19+
--border-radius: 4px;
20+
}
21+
22+
.faviconText {
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
text-transform: lowercase;
27+
color: white;
28+
font-size: 1.1rem;
29+
font-weight: 600;
30+
height: calc(32 * var(--px-in-rem));
31+
width: calc(32 * var(--px-in-rem));
32+
33+
span:first-child {
34+
text-transform: uppercase;
35+
}
36+
37+
&.faviconSmall {
38+
font-size: 0.5rem;
39+
height: calc(16 * var(--px-in-rem));
40+
width: calc(16 * var(--px-in-rem));
41+
}
42+
}

‎special-pages/pages/new-tab/app/favorites/getColorForString.js renamed to ‎special-pages/shared/getColorForString.js

File renamed without changes.

0 commit comments

Comments
 (0)