Skip to content

Commit da88691

Browse files
shakyShaneShane Osbourne
shakyShane
and
Shane Osbourne
authored
Design feedback on update notification (#1190)
* extract entry-points * fixing imports * more docs * linting * design feedback * design feedback * linting --------- Co-authored-by: Shane Osbourne <[email protected]>
1 parent 1a553e0 commit da88691

26 files changed

+300
-106
lines changed

‎eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default tseslint.config(
2222
"playwright-report",
2323
"test-results",
2424
"injected/src/types",
25+
".idea"
2526
],
2627
},
2728
{

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,17 @@ body {
1717
margin-right: auto;
1818
}
1919

20+
body:has([data-reset-layout="true"]) .layout {
21+
padding-top: 0;
22+
}
23+
2024
:global(.layout-centered) {
2125
margin-inline: auto;
26+
width: 100%;
2227
max-width: calc(504 * var(--px-in-rem));
2328
}
29+
30+
/** Don't affect layout if empty (eg: if a widget was toggled) **/
31+
:global(.layout-centered:empty) {
32+
display: contents;
33+
}

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
import { Fragment, h } from "preact";
22
import styles from "./Components.module.css";
33
import { mainExamples, otherExamples } from "./Examples.jsx";
4+
import { updateNotificationExamples } from "../update-notification/UpdateNotification.examples.js";
45
const url = new URL(window.location.href);
56

7+
const list = {
8+
...mainExamples,
9+
...otherExamples,
10+
...updateNotificationExamples
11+
}
12+
13+
const entries = Object.entries(list);
14+
615
export function Components() {
716
const ids = url.searchParams.getAll("id");
817
const isolated = url.searchParams.has("isolate");
918
const e2e = url.searchParams.has("e2e");
10-
const entries = Object.entries(mainExamples).concat(Object.entries(otherExamples));
1119
const entryIds = entries.map(([id]) => id);
1220

1321
const validIds = ids.filter(id => entryIds.includes(id));
1422

1523
const filtered = validIds.length
16-
? validIds.map((id) => /** @type {const} */([id, mainExamples[id] || otherExamples[id]]))
24+
? validIds.map((id) => /** @type {const} */([id, list[id]]))
1725
: entries
1826

1927
if (isolated) {

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
11
/* nested styles to avoid global side-effects */
2-
[data-display="components"] {
3-
a {
4-
color: var(--ntp-text-normal);
5-
}
6-
}
72

83
body[data-display="components"] {
94
padding-left: 0;
@@ -35,7 +30,9 @@ body[data-display="components"] {
3530
align-items: center;
3631
gap: 1em;
3732
}
33+
3834
.itemLink {
35+
color: var(--ntp-text-normal);
3936
padding: 0.2em 0.3em;
4037
border: 1px solid var(--color-gray-60);
4138
border-radius: 4px;

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { h } from 'preact'
2+
3+
export function Centered ({ children }) {
4+
return (
5+
<div class="layout-centered">
6+
{children}
7+
</div>
8+
)
9+
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
justify-content: center;
1010
align-items: center;
1111
color: var(--ntp-text-normal);
12-
background: var(--ntp-background-color);
1312
height: 32px;
1413
width: 32px;
1514
line-height: 32px;

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,14 @@ export function useContextMenu () {
9191
e.stopImmediatePropagation()
9292
const items = getItems()
9393
/** @type {VisibilityMenuItem[]} */
94-
const simplified = items.map(item => {
95-
return {
96-
id: item.id,
97-
title: item.title
98-
}
99-
})
94+
const simplified = items
95+
.filter(x => x.id !== 'debug')
96+
.map(item => {
97+
return {
98+
id: item.id,
99+
title: item.title
100+
}
101+
})
100102
messaging.contextMenu({ visibilityMenuItems: simplified })
101103
}
102104
document.body.addEventListener('contextmenu', handler)

‎special-pages/pages/new-tab/app/customizer/VisibilityMenu.module.css‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,19 +62,68 @@
6262
justify-content: center;
6363
flex-shrink: 0;
6464
border-radius: 4px;
65-
border: 1px solid var(--color-black-at-9);
65+
border: 1px solid var(--color-black-at-48);
66+
6667
@media screen and (prefers-color-scheme: dark) {
67-
border: 1px solid var(--color-white-at-9);
68+
border-color: rgba(255, 255, 255, 0.42);
69+
background: rgba(255, 255, 255, 0.12);
70+
}
71+
72+
&:hover {
73+
background: linear-gradient(0deg, var(--color-black-at-6) 0%, var(--color-black-at-6) 100%);
74+
@media screen and (prefers-color-scheme: dark) {
75+
background: linear-gradient(0deg, var(--color-white-at-18) 0%, var(--color-white-at-18) 100%), var(--color-white-at-12);
76+
}
77+
}
78+
79+
&:active {
80+
background: linear-gradient(0deg, var(--color-black-at-12) 0%, var(--color-black-at-12) 100%), var(--color-white-at-60);
81+
@media screen and (prefers-color-scheme: dark) {
82+
background: linear-gradient(0deg, var(--color-white-at-24) 0%, var(--color-white-at-24) 100%), var(--color-white-at-12);
83+
}
6884
}
6985
}
7086

7187
.menuItemLabel input:checked + .checkboxIcon {
7288
background: var(--color-blue-50);
7389
border-color: var(--color-blue-50);
90+
91+
@media screen and (prefers-color-scheme: dark) {
92+
background: var(--color-blue-20);
93+
border-color: var(--color-blue-20);
94+
}
95+
96+
&:hover {
97+
background: var(--color-blue-60);
98+
border-color: var(--color-blue-60);
99+
@media screen and (prefers-color-scheme: dark) {
100+
background: var(--color-blue-30);
101+
border-color: var(--color-blue-30);
102+
}
103+
}
104+
105+
&:active {
106+
background: var(--color-blue-70);
107+
border-color: var(--color-blue-70);
108+
109+
@media screen and (prefers-color-scheme: dark) {
110+
background: var(--color-blue-40);
111+
border-color: var(--color-blue-40);
112+
}
113+
}
114+
115+
}
116+
117+
.menuItemLabel .checkboxIcon svg path {
118+
opacity: 0;
74119
}
75120

76121
.menuItemLabel input:checked + .checkboxIcon svg path {
77122
stroke: white;
123+
opacity: 1;
124+
@media screen and (prefers-color-scheme: dark) {
125+
stroke: black;
126+
}
78127
}
79128

80129
.menuItemLabel input:focus-visible + .checkboxIcon {

‎special-pages/pages/new-tab/app/entry-points/favorites.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { h } from 'preact'
2+
import { FavoritesCustomized } from '../favorites/Favorites.js'
3+
import { Centered } from '../components/Layout.js'
4+
5+
export function factory () {
6+
return (
7+
<Centered>
8+
<FavoritesCustomized/>
9+
</Centered>
10+
)
11+
}

‎special-pages/pages/new-tab/app/entry-points/privacyStats.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { h } from 'preact'
2+
import { PrivacyStatsCustomized } from '../privacy-stats/PrivacyStats.js'
3+
import { Centered } from '../components/Layout.js'
4+
5+
export function factory () {
6+
return (
7+
<Centered>
8+
<PrivacyStatsCustomized />
9+
</Centered>
10+
)
11+
}

0 commit comments

Comments
 (0)