Skip to content

Commit 1014a0f

Browse files
franfaccinfranfaccin
authored
Click to Load - Facebook login - mobile (#586)
* Add new design and custom element for CTL Facebook login button on mobile * Only show unblock confirmation on platforms other than mobile apps * Refactor CTL to remove usage of isMobileApp and instead use a configuration based on each use case * Abstract login cancellation to work with platform native confirmation implementation too * Fix import of DDG Font styles and dark-theme background * Fix type errors and missing function argument * Fix wrong selector for event listener | Fix function reference for Firefox inside custom elements * Convert DDGCtlLoginButton from custom element to normal element creation to avoid content scope restrictions for custom elements on Firefox * Fix CSS selector to apply new button background only for default state * Refactor platform configuration * Refactor "ddg-ctp-user-cancel" from error to response type handling * Increase artifact size * Fix button hover/active states using solid colors
1 parent ff9d043 commit 1014a0f

File tree

11 files changed

+597
-162
lines changed

11 files changed

+597
-162
lines changed

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

Lines changed: 159 additions & 63 deletions
Large diffs are not rendered by default.

‎src/features/click-to-load/assets/ctl-login-button.css

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
:host,
2+
* {
3+
font-family: DuckDuckGoPrivacyEssentials, system, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
4+
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
5+
box-sizing: border-box;
6+
font-weight: normal;
7+
font-style: normal;
8+
margin: 0;
9+
padding: 0;
10+
text-align: left;
11+
}
12+
13+
/* SHARED STYLES */
14+
/* Popover */
15+
.ddg-popover {
16+
background: #ffffff;
17+
border: 1px solid rgba(0, 0, 0, 0.1);
18+
border-radius: 16px;
19+
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.08);
20+
width: 360px;
21+
margin-top: 10px;
22+
z-index: 2147483647;
23+
position: absolute;
24+
line-height: normal;
25+
}
26+
.ddg-popover-arrow {
27+
display: inline-block;
28+
background: #ffffff;
29+
border: solid rgba(0, 0, 0, 0.1);
30+
border-width: 0 1px 1px 0;
31+
padding: 5px;
32+
transform: rotate(-135deg);
33+
-webkit-transform: rotate(-135deg);
34+
position: relative;
35+
top: -9px;
36+
}
37+
.ddg-popover .ddg-title-header {
38+
padding: 0px 12px 12px;
39+
margin-top: -5px;
40+
}
41+
.ddg-popover-body {
42+
font-size: 14px;
43+
line-height: 21px;
44+
margin: auto;
45+
padding: 17px;
46+
text-align: left;
47+
}
48+
49+
/* DDG common header */
50+
.ddg-title-header {
51+
display: flex;
52+
padding: 12px;
53+
max-height: 44px;
54+
border-bottom: 1px solid;
55+
border-color: rgba(196, 196, 196, 0.3);
56+
margin: 0;
57+
margin-bottom: 4px;
58+
}
59+
.ddg-title-header .ddg-title-text {
60+
line-height: 1.4;
61+
font-size: 14px;
62+
margin: auto 10px;
63+
flex-basis: 100%;
64+
height: 1.4em;
65+
flex-wrap: wrap;
66+
overflow: hidden;
67+
text-align: left;
68+
border: none;
69+
padding: 0;
70+
}
71+
.ddg-title-header .ddg-logo {
72+
flex-basis: 0%;
73+
min-width: 20px;
74+
height: 21px;
75+
border: none;
76+
padding: 0;
77+
margin: 0;
78+
}
79+
.ddg-title-header .ddg-logo .ddg-logo-img {
80+
height: 21px;
81+
width: 21px;
82+
}
83+
84+
/* CTL Login Button styles */
85+
#DuckDuckGoPrivacyEssentialsHoverable {
86+
padding-bottom: 10px;
87+
}
88+
89+
#DuckDuckGoPrivacyEssentialsHoverableText {
90+
display: none;
91+
}
92+
#DuckDuckGoPrivacyEssentialsHoverable:hover #DuckDuckGoPrivacyEssentialsHoverableText {
93+
display: block;
94+
}
95+
96+
.DuckDuckGoButton.tertiary.ddg-ctl-fb-login-btn {
97+
background-color: var(--ddg-color-bg-01);
98+
}
99+
@media (prefers-color-scheme: dark) {
100+
.DuckDuckGoButton.tertiary.ddg-ctl-fb-login-btn {
101+
background: #111111;
102+
}
103+
}
104+
.DuckDuckGoButton.tertiary:hover {
105+
background: rgb(238, 238, 238);
106+
border-color: var(--ddg-shade-18);
107+
}
108+
@media (prefers-color-scheme: dark) {
109+
.DuckDuckGoButton.tertiary:hover {
110+
background: rgb(39, 39, 39);
111+
border-color: var(--ddg-tint-24);
112+
}
113+
}
114+
.DuckDuckGoButton.tertiary:active {
115+
background: rgb(220, 220, 220);
116+
border-color: var(--ddg-shade-36);
117+
}
118+
@media (prefers-color-scheme: dark) {
119+
.DuckDuckGoButton.tertiary:active {
120+
background: rgb(65, 65, 65);
121+
border-color: var(--ddg-tint-24);
122+
}
123+
}
124+
125+
.ddg-ctl-button-login-icon {
126+
margin-right: 8px;
127+
height: 20px;
128+
width: 20px;
129+
}
130+
131+
.ddg-fb-login-container {
132+
position: relative;
133+
margin: auto;
134+
width: auto;
135+
}

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

Lines changed: 3 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -22,60 +22,6 @@
2222
}
2323

2424
/* SHARED STYLES */
25-
/* Button */
26-
.DuckDuckGoButton {
27-
border-radius: 8px;
28-
padding: 11px 22px;
29-
margin: 0px auto;
30-
border-color: var(--ddg-color-primary);
31-
border: none;
32-
height: 36px;
33-
font-size: 14px;
34-
35-
position: relative;
36-
cursor: pointer;
37-
box-shadow: none;
38-
z-index: 2147483646;
39-
}
40-
.DuckDuckGoButton > div {
41-
display: flex;
42-
flex-direction: row;
43-
align-items: center;
44-
border: none;
45-
padding: 0;
46-
margin: 0;
47-
}
48-
.DuckDuckGoButton.tertiary {
49-
color: var(--ddg-color-txt);
50-
background-color: transparent;
51-
display: flex;
52-
justify-content: center;
53-
align-items: center;
54-
padding: 0px 16px;
55-
border: 1px solid var(--ddg-color-border);
56-
border-radius: 8px;
57-
}
58-
.DuckDuckGoButton.tertiary:hover {
59-
background: var(--ddg-shade-06);
60-
border-color: var(--ddg-shade-18);
61-
}
62-
@media (prefers-color-scheme: dark) {
63-
.DuckDuckGoButton.tertiary:hover {
64-
background: var(--ddg-tint-18);
65-
border-color: var(--ddg-tint-24);
66-
}
67-
}
68-
.DuckDuckGoButton.tertiary:active {
69-
background: var(--ddg-shade-12);
70-
border-color: var(--ddg-shade-36);
71-
}
72-
@media (prefers-color-scheme: dark) {
73-
.DuckDuckGoButton.tertiary:active {
74-
background: var(--ddg-tint-24);
75-
border-color: var(--ddg-tint-24);
76-
}
77-
}
78-
7925
/* Toggle Button */
8026
.ddg-toggle-button-container {
8127
display: flex;
@@ -149,19 +95,10 @@
14995
margin-left: 12px;
15096
}
15197

152-
/* Link styles */
153-
.ddg-text-link {
154-
line-height: 1.4;
155-
font-size: 14px;
156-
font-weight: 700;
157-
cursor: pointer;
158-
text-decoration: none;
159-
color: var(--ddg-color-primary);
160-
}
161-
16298
/* Styles for DDGCtlPlaceholderBlocked */
16399
.DuckDuckGoButton.ddg-ctl-unblock-btn {
164100
width: 100%;
101+
margin: 0 auto;
165102
}
166103
.DuckDuckGoSocialContainer:is(.size-md, .size-lg) .DuckDuckGoButton.ddg-ctl-unblock-btn {
167104
width: auto;
@@ -246,8 +183,8 @@
246183
}
247184

248185
.ddg-ctl-placeholder-card-body-text {
249-
font-size: 14px;
250-
line-height: 21px;
186+
font-size: 16px;
187+
line-height: 24px;
251188
text-align: center;
252189
margin: 0 auto 12px;
253190

‎src/features/click-to-load/assets/shared.css

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
:host {
2+
/* Color palette */
3+
--ddg-shade-06: rgba(0, 0, 0, 0.06);
4+
--ddg-shade-12: rgba(0, 0, 0, 0.12);
5+
--ddg-shade-18: rgba(0, 0, 0, 0.18);
6+
--ddg-shade-36: rgba(0, 0, 0, 0.36);
7+
--ddg-shade-84: rgba(0, 0, 0, 0.84);
8+
--ddg-tint-12: rgba(255, 255, 255, 0.12);
9+
--ddg-tint-18: rgba(255, 255, 255, 0.18);
10+
--ddg-tint-24: rgba(255, 255, 255, 0.24);
11+
--ddg-tint-84: rgba(255, 255, 255, 0.84);
12+
/* Tokens */
13+
--ddg-color-primary: #3969ef;
14+
--ddg-color-bg-01: #ffffff;
15+
--ddg-color-bg-02: #ababab;
16+
--ddg-color-border: var(--ddg-shade-12);
17+
--ddg-color-txt: var(--ddg-shade-84);
18+
--ddg-color-txt-link-02: #ababab;
19+
}
20+
@media (prefers-color-scheme: dark) {
21+
:host {
22+
--ddg-color-primary: #7295f6;
23+
--ddg-color-bg-01: #222222;
24+
--ddg-color-bg-02: #444444;
25+
--ddg-color-border: var(--ddg-tint-12);
26+
--ddg-color-txt: var(--ddg-tint-84);
27+
}
28+
}
29+
30+
/* SHARED STYLES */
31+
/* Text Link */
32+
.ddg-text-link {
33+
line-height: 1.4;
34+
font-size: 14px;
35+
font-weight: 700;
36+
cursor: pointer;
37+
text-decoration: none;
38+
color: var(--ddg-color-primary);
39+
}
40+
41+
/* Button */
42+
.DuckDuckGoButton {
43+
border-radius: 8px;
44+
padding: 8px 16px;
45+
border-color: var(--ddg-color-primary);
46+
border: none;
47+
min-height: 36px;
48+
49+
position: relative;
50+
cursor: pointer;
51+
box-shadow: none;
52+
z-index: 2147483646;
53+
}
54+
.DuckDuckGoButton > div {
55+
display: flex;
56+
flex-direction: row;
57+
align-items: center;
58+
border: none;
59+
padding: 0;
60+
margin: 0;
61+
}
62+
.DuckDuckGoButton,
63+
.DuckDuckGoButton > div {
64+
font-size: 14px;
65+
font-family: DuckDuckGoPrivacyEssentialsBold;
66+
font-weight: 600;
67+
}
68+
.DuckDuckGoButton.tertiary {
69+
color: var(--ddg-color-txt);
70+
background-color: transparent;
71+
display: flex;
72+
justify-content: center;
73+
align-items: center;
74+
border: 1px solid var(--ddg-color-border);
75+
border-radius: 8px;
76+
}
77+
.DuckDuckGoButton.tertiary:hover {
78+
background: var(--ddg-shade-06);
79+
border-color: var(--ddg-shade-18);
80+
}
81+
@media (prefers-color-scheme: dark) {
82+
.DuckDuckGoButton.tertiary:hover {
83+
background: var(--ddg-tint-18);
84+
border-color: var(--ddg-tint-24);
85+
}
86+
}
87+
.DuckDuckGoButton.tertiary:active {
88+
background: var(--ddg-shade-12);
89+
border-color: var(--ddg-shade-36);
90+
}
91+
@media (prefers-color-scheme: dark) {
92+
.DuckDuckGoButton.tertiary:active {
93+
background: var(--ddg-tint-24);
94+
border-color: var(--ddg-tint-24);
95+
}
96+
}

‎src/features/click-to-load/assets/variables.css

Lines changed: 0 additions & 28 deletions
This file was deleted.

0 commit comments

Comments
 (0)