mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1643419 - Add Tooltip on pre-importable top sites r=Mardak 

Differential Revision: https://phabricator.services.mozilla.com/D82470
This commit is contained in:
Punam Dahiya 2020-07-08 23:46:50 +00:00
Родитель 16f75a9f90
Коммит b6d5c32fdb
5 изменённых файлов: 74 добавлений и 26 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

9
browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
Просмотреть файл

@ -450,7 +450,12 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom
renderTiles() {
switch (this.props.content.tiles.type) {
case "topsites":
return this.props.topSites ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
return this.props.topSites ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__["Localized"], {
text: typeof this.props.content.tiles.tooltip === "object" ? this.props.content.tiles.tooltip : {}
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: `tiles-container ${this.props.content.tiles.tooltip ? "info" : ""}`,
title: this.props.content.tiles.tooltip
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "tiles-topsites-section"
}, this.props.topSites.slice(0, 5).map(({
icon,
@ -466,7 +471,7 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom
} : {}
}, icon ? "" : label[0].toUpperCase()), label && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "host"
}, label)))) : null;
}, label)))))) : null;
case "theme":
return this.props.content.tiles.data ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {

10
browser/components/newtab/aboutwelcome/content/aboutwelcome.css
Просмотреть файл

@ -357,11 +357,17 @@ body {
.multistageContainer .tiles-theme-section .theme:focus, .multistageContainer .tiles-theme-section .theme:active {
outline: 4px solid #0090ED;
outline-offset: -4px; }
.multistageContainer .tiles-container {
margin: 10px auto; }
.multistageContainer .tiles-container.info {
padding: 6px 12px 12px; }
.multistageContainer .tiles-container.info:hover, .multistageContainer .tiles-container.info:focus {
background-color: rgba(217, 217, 227, 0.3);
border-radius: 4px; }
.multistageContainer .tiles-topsites-section {
display: grid;
grid-gap: 24px;
grid-template-columns: repeat(5, auto);
margin: 10px auto; }
grid-template-columns: repeat(5, auto); }
@media (max-width: 610px) {
.multistageContainer .tiles-topsites-section {
grid-template-columns: repeat(3, auto); } }

15
browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
Просмотреть файл

@ -380,6 +380,20 @@ body {
}
}
.tiles-container {
margin: 10px auto;
&.info {
padding: 6px 12px 12px;
&:hover,
&:focus {
background-color: rgba(217, 217, 227, 0.3);
border-radius: 4px;
}
}
}
.tiles-topsites-section {
$host-size: 12px;
$tile-size: 96px;
@ -387,7 +401,6 @@ body {
display: grid;
grid-gap: $tile-size / 4;
grid-template-columns: repeat(5, auto);
margin: 10px auto;
@media (max-width: $break-point-medium) {
grid-template-columns: repeat(3, auto);

53
browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx
Просмотреть файл

@ -198,26 +198,41 @@ export class WelcomeScreen extends React.PureComponent {
switch (this.props.content.tiles.type) {
case "topsites":
return this.props.topSites ? (
<div className="tiles-topsites-section">
{this.props.topSites.slice(0, 5).map(({ icon, label }) => (
<div className="site" key={icon + label}>
<div
className="icon"
style={
icon
? {
backgroundColor: "transparent",
backgroundImage: `url(${icon})`,
}
: {}
}
>
{icon ? "" : label[0].toUpperCase()}
</div>
{label && <div className="host">{label}</div>}
<Localized
text={
typeof this.props.content.tiles.tooltip === "object"
? this.props.content.tiles.tooltip
: {}
}
>
<div
className={`tiles-container ${
this.props.content.tiles.tooltip ? "info" : ""
}`}
title={this.props.content.tiles.tooltip}
>
<div className="tiles-topsites-section">
{this.props.topSites.slice(0, 5).map(({ icon, label }) => (
<div className="site" key={icon + label}>
<div
className="icon"
style={
icon
? {
backgroundColor: "transparent",
backgroundImage: `url(${icon})`,
}
: {}
}
>
{icon ? "" : label[0].toUpperCase()}
</div>
{label && <div className="host">{label}</div>}
</div>
))}
</div>
))}
</div>
</div>
</Localized>
) : null;
case "theme":
return this.props.content.tiles.data ? (

13
browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js
Просмотреть файл

@ -53,6 +53,10 @@ const TEST_MULTISTAGE_CONTENT = {
order: 1,
content: {
title: "Step 2",
tiles: {
type: "topsites",
tooltip: "test",
},
primary_button: {
label: "Next",
action: {
@ -189,7 +193,7 @@ add_task(async function test_Multistage_About_Welcome_branches() {
"div.indicator.current",
],
// Unexpected selectors:
["main.AW_STEP2", "main.AW_STEP3"]
["main.AW_STEP2", "main.AW_STEP3", "div.tiles-container.info"]
);
await onButtonClick(browser, "button.primary");
@ -197,7 +201,12 @@ add_task(async function test_Multistage_About_Welcome_branches() {
browser,
"multistage step 2",
// Expected selectors:
["div.multistageContainer", "main.AW_STEP2", "button.secondary"],
[
"div.multistageContainer",
"main.AW_STEP2",
"button.secondary",
"div.tiles-container.info",
],
// Unexpected selectors:
["main.AW_STEP1", "main.AW_STEP3", "div.secondary-cta.top", "h1.welcomeZap"]
);