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

Bug 1724970 - CTA Only variant r=thecount 

Differential Revision: https://phabricator.services.mozilla.com/D122497
This commit is contained in:
Gavin Lazar Suntop 2021-08-16 21:09:42 +00:00
Родитель 7d7b1585e9
Коммит 7fc511eb30
5 изменённых файлов: 135 добавлений и 2 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

6
toolkit/components/reader/AboutReader.jsm
Просмотреть файл

@ -1248,6 +1248,12 @@ AboutReader.prototype = {
// TODO: Show the corresponding CTA version. This is just a placeholder visualization. // TODO: Show the corresponding CTA version. This is just a placeholder visualization.
elPocketCTAWrapper.classList.add(`pocket-cta-container-${ctaVersion}`); elPocketCTAWrapper.classList.add(`pocket-cta-container-${ctaVersion}`);
this._doc
.querySelector(`.pocket-dismiss-cta`)
.addEventListener(`click`, e => {
elPocketCTAWrapper.hidden = true;
});
} }
}, },
}; };

12
toolkit/components/reader/content/aboutReader.html
Просмотреть файл

@ -10,6 +10,7 @@
<meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width; user-scalable=0" /> <meta name="viewport" content="width=device-width; user-scalable=0" />
<link rel="stylesheet" href="chrome://global/skin/aboutReader.css" type="text/css"/> <link rel="stylesheet" href="chrome://global/skin/aboutReader.css" type="text/css"/>
<link rel="stylesheet" href="chrome://global/skin/aboutReaderPocket.css" type="text/css"/>
</head> </head>
<body> <body>
@ -69,8 +70,17 @@
<div class="reader-message"></div> <div class="reader-message"></div>
</div> </div>
<div aria-owns="toolbar"></div> <div aria-owns="toolbar"></div>
</div>
<div id="pocket-cta-container" hidden></div> <div id="pocket-cta-container" hidden>
<div class="pocket-cta-inner" id="pocket-cta-only">
<div class="pocket-cta">
<header class="pocket-cta-header">Save anything from across the web in Pocket, your personal library.</header>
<p class="pocket-cta-subhead">As part of the Firefox family, Pocket provides a quiet, calm space that’s perfect for reading. It strips away all the distractions of the internet so you can really focus.</p>
<a href="https://getpocket.com/signup" class="pocket-button pocket-sign-up"><strong>Sign Up</strong> - it's free</a>
</div>
<button class="pocket-dismiss-cta"></button>
</div>
</div> </div>
</body> </body>

93
toolkit/themes/shared/aboutReaderPocket.css Normal file
Просмотреть файл

@ -0,0 +1,93 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#pocket-cta-container {
box-shadow: 0 2px 8px var(--toolbar-box-shadow);
margin: calc(var(--body-padding) * -1);
margin-top: 20px;
padding: 24px 0;
position: relative;
}
#pocket-cta-only {
display: none;
}
.pocket-cta-container-cta-only #pocket-cta-only {
display: block;
}
.pocket-cta {
padding-inline-start: 90px;
background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat 16px 4px;
}
.pocket-cta-inner {
width: 936px;
margin: auto;
}
.pocket-cta-header {
font-weight: 900;
}
.pocket-button {
background: #008078;
border-radius: 4px;
border: 0;
color: #FBFBFE;
font-size: 16px;
line-height: 24px;
padding: 8px 24px;
}
.pocket-dismiss-cta {
cursor: pointer;
display: inline-block;
position: absolute;
inset-inline-end: 80px;
top: 80px;
border: 0;
width: 18px;
height: 18px;
background: no-repeat center/contain url("chrome://global/skin/icons/close.svg");
}
/* Medium breakpoint */
@media (max-width: 1128px) {
.pocket-cta-inner {
width: 600px;
}
.pocket-dismiss-cta {
inset-inline-end: 40px;
}
}
/* Small breakpoint */
@media (max-width: 790px) {
.pocket-cta-inner {
width: 330px;
text-align: center;
}
.pocket-cta-header,
.pocket-cta-subhead {
text-align: start;
}
.pocket-cta {
padding: 66px 0 0;
background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat center 0;
}
.pocket-button {
padding: 8px;
}
.pocket-dismiss-cta {
inset-inline-end: 20px;
top: 20px;
}
}

4
toolkit/themes/shared/jar.inc.mn
Просмотреть файл

@ -17,6 +17,7 @@
skin/classic/global/aboutMemory.css (../../shared/aboutMemory.css) skin/classic/global/aboutMemory.css (../../shared/aboutMemory.css)
skin/classic/global/aboutNetworking.css (../../shared/aboutNetworking.css) skin/classic/global/aboutNetworking.css (../../shared/aboutNetworking.css)
skin/classic/global/aboutReader.css (../../shared/aboutReader.css) skin/classic/global/aboutReader.css (../../shared/aboutReader.css)
skin/classic/global/aboutReaderPocket.css (../../shared/aboutReaderPocket.css)
skin/classic/global/aboutRights.css (../../shared/aboutRights.css) skin/classic/global/aboutRights.css (../../shared/aboutRights.css)
skin/classic/global/aboutLicense.css (../../shared/aboutLicense.css) skin/classic/global/aboutLicense.css (../../shared/aboutLicense.css)
skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css) skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css)
@ -24,7 +25,7 @@
* skin/classic/global/arrowscrollbox.css (../../shared/arrowscrollbox.css) * skin/classic/global/arrowscrollbox.css (../../shared/arrowscrollbox.css)
skin/classic/global/close-icon.css (../../shared/close-icon.css) skin/classic/global/close-icon.css (../../shared/close-icon.css)
skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css) skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css)
skin/classic/global/findbar.css (../../shared/findbar.css) skin/classic/global/findbar.css (../../shared/findbar.css)
skin/classic/global/notification.css (../../shared/notification.css) skin/classic/global/notification.css (../../shared/notification.css)
skin/classic/global/numberinput.css (../../shared/numberinput.css) skin/classic/global/numberinput.css (../../shared/numberinput.css)
skin/classic/global/in-content/info-pages.css (../../shared/in-content/info-pages.css) skin/classic/global/in-content/info-pages.css (../../shared/in-content/info-pages.css)
@ -98,6 +99,7 @@
skin/classic/global/reader/RM-Serif.svg (../../shared/reader/RM-Serif.svg) skin/classic/global/reader/RM-Serif.svg (../../shared/reader/RM-Serif.svg)
skin/classic/global/reader/RM-Minus-24x24.svg (../../shared/reader/RM-Minus-24x24.svg) skin/classic/global/reader/RM-Minus-24x24.svg (../../shared/reader/RM-Minus-24x24.svg)
skin/classic/global/reader/RM-Plus-24x24.svg (../../shared/reader/RM-Plus-24x24.svg) skin/classic/global/reader/RM-Plus-24x24.svg (../../shared/reader/RM-Plus-24x24.svg)
skin/classic/global/reader/RM-Pocket-Glyph.svg (../../shared/reader/RM-Pocket-Glyph.svg)
skin/classic/global/reader/RM-Type-Controls-24x24.svg (../../shared/reader/RM-Type-Controls-24x24.svg) skin/classic/global/reader/RM-Type-Controls-24x24.svg (../../shared/reader/RM-Type-Controls-24x24.svg)
skin/classic/global/reader/RM-Type-Controls-Arrow.svg (../../shared/reader/RM-Type-Controls-Arrow.svg) skin/classic/global/reader/RM-Type-Controls-Arrow.svg (../../shared/reader/RM-Type-Controls-Arrow.svg)
skin/classic/global/reader/RM-Content-Width-Minus-42x16.svg (../../shared/reader/RM-Content-Width-Minus-42x16.svg) skin/classic/global/reader/RM-Content-Width-Minus-42x16.svg (../../shared/reader/RM-Content-Width-Minus-42x16.svg)

22
toolkit/themes/shared/reader/RM-Pocket-Glyph.svg Normal file
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 20 KiB