Skip to content

Commit cbbdbf7

Browse files
franfaccinfranfaccin
committed
Add styles for YouTube Click to Load blocked placeholder
1 parent 5e92886 commit cbbdbf7

File tree

4 files changed

+290
-49
lines changed

4 files changed

+290
-49
lines changed

‎src/features/click-to-load.js

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -551,8 +551,8 @@ function createPlaceholderElementAndReplace (widget, trackingElement) {
551551
if (widget.replaceSettings.type === 'dialog') {
552552
if (isMobileApp) {
553553
const mobileBlockedPlaceholder = new DDGCtlPlaceholderBlocked({
554-
fontFaceStyle: styles.fontStyle, // DDG font-face family
555554
devMode,
555+
isMobileApp,
556556
title: widget.replaceSettings.infoTitle, // Card title text
557557
body: widget.replaceSettings.infoText, // Card body text
558558
unblockBtnText: widget.replaceSettings.buttonText, // Unblock button text
@@ -561,6 +561,7 @@ function createPlaceholderElementAndReplace (widget, trackingElement) {
561561
sharedStrings, // Shared localized string
562562
onButtonClick: widget.clickFunction.bind(widget)
563563
})
564+
mobileBlockedPlaceholder.appendChild(makeFontFaceStyleElement())
564565
replaceTrackingElement(widget, trackingElement, mobileBlockedPlaceholder)
565566
} else {
566567
const icon = widget.replaceSettings.icon
@@ -617,11 +618,38 @@ function replaceYouTubeCTL (trackingElement, widget) {
617618
// Block YouTube embedded video and display blocking dialog
618619
widget.autoplay = false
619620
const oldPlaceholder = widget.placeholderElement
620-
const { blockingDialog, shadowRoot } = createYouTubeBlockingDialog(trackingElement, widget)
621-
resizeElementToMatch(oldPlaceholder || trackingElement, blockingDialog)
622-
replaceTrackingElement(widget, trackingElement, blockingDialog)
623-
showExtraUnblockIfShortPlaceholder(shadowRoot, blockingDialog)
624-
hideInfoTextIfNarrowPlaceholder(shadowRoot, blockingDialog, 460)
621+
622+
if (isMobileApp) {
623+
const mobileBlockedPlaceholder = new DDGCtlPlaceholderBlocked({
624+
devMode,
625+
isMobileApp,
626+
title: widget.replaceSettings.infoTitle, // Card title text
627+
body: widget.replaceSettings.infoText, // Card body text
628+
unblockBtnText: widget.replaceSettings.buttonText, // Unblock button text
629+
useSlimCard: true, // Flag for using less padding on card (ie YT CTL on mobile)
630+
originalElement: trackingElement, // The original element this placeholder is replacing.
631+
sharedStrings, // Shared localized string
632+
withToggle: { // Toggle config to be displayed in the bottom of the placeholder
633+
isActive: false, // Toggle state
634+
dataKey: 'yt-preview-toggle', // data-key attribute for button
635+
label: widget.replaceSettings.previewToggleText, // Text to be presented with toggle
636+
onClick: () => sendMessage('setYoutubePreviewsEnabled', true) // Toggle click callback
637+
},
638+
withFeedback: {
639+
onClick: () => openShareFeedbackPage()
640+
},
641+
onButtonClick: widget.clickFunction.bind(widget)
642+
})
643+
mobileBlockedPlaceholder.appendChild(makeFontFaceStyleElement())
644+
resizeElementToMatch(oldPlaceholder || trackingElement, mobileBlockedPlaceholder)
645+
replaceTrackingElement(widget, trackingElement, mobileBlockedPlaceholder)
646+
} else {
647+
const { blockingDialog, shadowRoot } = createYouTubeBlockingDialog(trackingElement, widget)
648+
resizeElementToMatch(oldPlaceholder || trackingElement, blockingDialog)
649+
replaceTrackingElement(widget, trackingElement, blockingDialog)
650+
showExtraUnblockIfShortPlaceholder(shadowRoot, blockingDialog)
651+
hideInfoTextIfNarrowPlaceholder(shadowRoot, blockingDialog, 460)
652+
}
625653
}
626654
}
627655

‎src/features/click-to-load/assets/ctl-placeholder-block.css

Lines changed: 140 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@
33
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
44
}
55

6+
:host {
7+
display: inline-block;
8+
border: 0;
9+
padding: 0;
10+
margin: 0;
11+
max-width: 600px;
12+
min-height: 180px;
13+
}
14+
615
/* SHARED STYLES */
716
/* Button */
817
.DuckDuckGoButton {
@@ -61,6 +70,85 @@
6170
}
6271
}
6372

73+
/* Toggle Button */
74+
.ddg-toggle-button-container {
75+
display: flex;
76+
align-items: center;
77+
cursor: pointer;
78+
}
79+
.ddg-toggle-button {
80+
cursor: pointer;
81+
position: relative;
82+
width: 32px;
83+
height: 16px;
84+
margin-top: -3px;
85+
margin: 0;
86+
padding: 0;
87+
border: none;
88+
background-color: transparent;
89+
text-align: left;
90+
}
91+
.ddg-toggle-button.mobile {
92+
width: 56px;
93+
height: 34px;
94+
}
95+
.ddg-toggle-button-bg {
96+
right: 0;
97+
width: 32px;
98+
height: 16px;
99+
overflow: visible;
100+
border-radius: 50px;
101+
}
102+
.ddg-toggle-button.mobile .ddg-toggle-button-bg {
103+
width: 56px;
104+
height: 34px;
105+
}
106+
.ddg-toggle-button.active .ddg-toggle-button-bg {
107+
background: #3969ef;
108+
@media (prefers-color-scheme: dark) {
109+
background: #7295f6;
110+
}
111+
}
112+
.ddg-toggle-button.inactive .ddg-toggle-button-bg {
113+
background: #ababab;
114+
@media (prefers-color-scheme: dark) {
115+
background: #444444;
116+
}
117+
}
118+
.ddg-toggle-button-knob {
119+
--ddg-toggle-knob-margin: 2px;
120+
position: absolute;
121+
display: inline-block;
122+
width: 12px;
123+
height: 12px;
124+
border-radius: 50%;
125+
background-color: #ffffff;
126+
margin-top: var(--ddg-toggle-knob-margin);
127+
top: calc(50% - 16px / 2);
128+
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 1px rgba(0, 0, 0, 0.1);
129+
}
130+
.ddg-toggle-button.mobile .ddg-toggle-button-knob {
131+
--ddg-toggle-knob-margin: 4px;
132+
width: 26px;
133+
height: 26px;
134+
top: calc(50% - 34px / 2);
135+
}
136+
.ddg-toggle-button.active .ddg-toggle-button-knob {
137+
right: var(--ddg-toggle-knob-margin);
138+
}
139+
.ddg-toggle-button.inactive .ddg-toggle-button-knob {
140+
left: var(--ddg-toggle-knob-margin);
141+
}
142+
.ddg-toggle-button-label {
143+
font-size: 14px;
144+
line-height: 20px;
145+
color: rgba(0, 0, 0, 0.84);
146+
margin-left: 12px;
147+
@media (prefers-color-scheme: dark) {
148+
color: rgba(255, 255, 255, 0.84);
149+
}
150+
}
151+
64152
/* Link styles */
65153
.ddg-text-link {
66154
line-height: 1.4;
@@ -77,55 +165,54 @@
77165
/* Styles for DDGCtlPlaceholderBlocked */
78166
.DuckDuckGoButton.ddg-ctl-unblock-btn {
79167
width: 100%;
80-
margin-top: 8px;
81168
@media (min-width: 480px) {
82169
width: auto;
83-
margin-top: 12px;
84170
}
85171
}
86172

87-
.ddg-ctl-placeholder-container {
88-
display: inline-block;
89-
border: 0;
90-
padding: 0;
91-
margin: 0;
92-
max-width: 600px;
93-
min-height: 200px;
94-
}
95-
96173
.ddg-ctl-placeholder-card {
97174
box-sizing: border-box;
98175
padding: 16px;
99176
color: rgba(0, 0, 0, 0.84);
100177
background: #ffffff;
101-
box-shadow: 0px 1px 0px rgba(125, 125, 125, 0.06), 0px 0px 0px 1px rgba(150, 150, 150, 0.3);
178+
border: 1px solid rgba(0, 0, 0, 0.12);
102179
border-radius: 12px;
103180
max-width: 600px;
104-
min-height: 200px;
181+
min-height: 180px;
105182
margin: auto;
106-
display: flex;
107-
flex-direction: column;
183+
display: grid;
108184
justify-content: center;
109185
align-items: center;
110186
line-height: 1;
111187
@media (prefers-color-scheme: dark) {
112188
color: rgba(255, 255, 255, 0.84);
113189
background: #222222;
114-
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(150, 150, 150, 0.3);
190+
border: 1px solid rgba(255, 255, 255, 0.24);
115191
}
116192
}
117-
118193
.ddg-ctl-placeholder-card.slim-card {
119194
padding: 12px;
120195
}
196+
.ddg-ctl-placeholder-card.with-feedback-link {
197+
@media (min-width: 480px) {
198+
height: calc(100% - 30px);
199+
max-width: initial;
200+
min-height: initial;
201+
}
202+
}
121203

122204
.ddg-ctl-placeholder-card-header {
205+
width: 100%;
123206
display: flex;
124207
align-items: center;
208+
margin: auto;
209+
margin-bottom: 8px;
125210
@media (min-width: 480px) {
126211
flex-direction: column;
127212
align-items: center;
128213
justify-content: center;
214+
margin-bottom: 12px;
215+
width: 70%;
129216
}
130217
}
131218
/* Show Learn More link in the header on mobile and
@@ -164,15 +251,49 @@
164251
}
165252

166253
.ddg-ctl-placeholder-card-body {
254+
width: 100%;
255+
margin-bottom: 12px;
256+
}
257+
.ddg-ctl-placeholder-card-body-text {
167258
font-size: 14px;
168259
line-height: 21px;
169-
padding: 0px 40px;
170260
text-align: center;
171-
margin: 12px auto auto;
261+
margin-bottom: 12px;
262+
172263
display: none;
173264
visibility: hidden;
174265
@media (min-width: 720px) {
175266
display: block;
176267
visibility: visible;
177268
}
178269
}
270+
271+
.ddg-ctl-placeholder-card-footer {
272+
width: 100%;
273+
display: flex;
274+
align-items: center;
275+
justify-content: flex-start;
276+
justify-self: flex-end;
277+
margin-top: auto;
278+
}
279+
280+
.ddg-ctl-feedback-row {
281+
display: none;
282+
visibility: hidden;
283+
@media (min-width: 480px) {
284+
height: 30px;
285+
justify-content: flex-end;
286+
align-items: center;
287+
display: flex;
288+
display: flex;
289+
visibility: visible;
290+
}
291+
}
292+
.ddg-ctl-feedback-link {
293+
font-style: normal;
294+
font-weight: 400;
295+
font-size: 12px;
296+
line-height: 12px;
297+
color: #ababab;
298+
text-decoration: none;
299+
}

0 commit comments

Comments
 (0)