Skip to content

Commit 15df8fd

Browse files
jwaynjwayn
committed
Bug 1876173 - Add attribute to allow RDM to be disabled for aboutwelcome spotlight r=omc-reviewers,aminomancer
Differential Revision: https://phabricator.services.mozilla.com/D201902
1 parent 271e7e6 commit 15df8fd

File tree

9 files changed

+522
-247
lines changed

9 files changed

+522
-247
lines changed

‎browser/components/aboutwelcome/.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ module.exports = {
113113
"layout",
114114
"pos",
115115
"hide-secondary-section",
116+
"no-rdm",
116117
],
117118
},
118119
],

‎browser/components/aboutwelcome/content-src/aboutwelcome.scss

Lines changed: 123 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -861,173 +861,178 @@ html {
861861
}
862862

863863
@media only screen and (width <= 800px) {
864-
flex-direction: column;
865-
min-height: $small-main-section-height + $small-secondary-section-height;
866-
867-
&::before {
868-
width: $split-section-width;
869-
}
870-
871-
.section-secondary,
872-
.section-main {
873-
width: $split-section-width;
874-
}
875-
876-
.section-secondary {
877-
--mr-secondary-background-position-y: top;
878-
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
879-
880-
border-radius: 8px 8px 0 0;
881-
margin: auto auto 0;
882-
height: $small-secondary-section-height;
864+
&:not([no-rdm]) {
865+
flex-direction: column;
866+
min-height: $small-main-section-height + $small-secondary-section-height;
883867

884-
.hero-image img {
885-
margin: 6px 0;
868+
&::before {
869+
width: $split-section-width;
886870
}
887871

888-
.message-text {
889-
margin-inline: auto;
872+
.section-secondary,
873+
.section-main {
874+
width: $split-section-width;
890875
}
891876

892-
h1 {
893-
font-size: 35px;
894-
text-align: center;
895-
white-space: normal;
896-
margin-inline: auto;
897-
margin-block: 14px 6px;
898-
}
877+
.section-secondary {
878+
--mr-secondary-background-position-y: top;
879+
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
899880

900-
&:dir(rtl) {
901-
margin: auto auto 0;
902881
border-radius: 8px 8px 0 0;
903-
}
904-
905-
&.with-secondary-section-hidden {
906-
display: none;
907-
}
908-
}
909-
910-
migration-wizard {
911-
&::part(deck){
912-
min-width: 330px;
913-
margin-inline: 36px;
914-
}
915-
}
882+
margin: auto auto 0;
883+
height: $small-secondary-section-height;
916884

917-
.section-main {
918-
margin: 0 auto auto;
919-
height: $small-main-section-height;
885+
.hero-image img {
886+
margin: 6px 0;
887+
}
920888

921-
migration-wizard::part(buttons) {
922-
flex-direction: column;
923-
margin-inline: 46px;
924-
}
889+
.message-text {
890+
margin-inline: auto;
891+
}
925892

926-
&[hide-secondary-section='responsive'] {
927-
height: $split-screen-height;
928-
margin: auto;
893+
h1 {
894+
font-size: 35px;
895+
text-align: center;
896+
white-space: normal;
897+
margin-inline: auto;
898+
margin-block: 14px 6px;
899+
}
929900

930901
&:dir(rtl) {
931-
margin: auto;
902+
margin: auto auto 0;
903+
border-radius: 8px 8px 0 0;
932904
}
933905

934-
.main-content {
935-
padding: 50px 0 0;
936-
border-radius: 8px;
906+
&.with-secondary-section-hidden {
907+
display: none;
908+
}
909+
}
937910

938-
&:dir(rtl) {
939-
border-radius: 8px;
940-
}
911+
migration-wizard {
912+
&::part(deck){
913+
min-width: 330px;
914+
margin-inline: 36px;
941915
}
942916
}
943917

944-
.main-content {
945-
border-radius: 0 0 8px 8px;
946-
padding: 30px 0 0;
918+
.section-main {
919+
margin: 0 auto auto;
920+
height: $small-main-section-height;
947921

948-
.main-content-inner {
949-
align-items: center;
922+
migration-wizard::part(buttons) {
923+
flex-direction: column;
924+
margin-inline: 46px;
950925
}
951926

952-
.logo-container {
953-
text-align: center;
927+
&[hide-secondary-section='responsive'] {
928+
height: $split-screen-height;
929+
margin: auto;
954930

955-
.brand-logo {
956-
min-height: 25px;
931+
&:dir(rtl) {
932+
margin: auto;
933+
}
934+
935+
.main-content {
936+
padding: 50px 0 0;
937+
border-radius: 8px;
957938

958-
&,
959939
&:dir(rtl) {
960-
background-position: center;
940+
border-radius: 8px;
961941
}
962942
}
963-
964-
.logo-alt {
965-
width: inherit;
966-
height: inherit;
967-
}
968943
}
969944

970-
.welcome-text {
971-
align-items: center;
972-
text-align: center;
973-
margin-inline: 0;
974-
padding-inline: 30px;
945+
.main-content {
946+
border-radius: 0 0 8px 8px;
947+
padding: 30px 0 0;
975948

976-
.spacer-bottom,
977-
.spacer-top {
978-
display: none;
949+
.main-content-inner {
950+
align-items: center;
979951
}
980-
}
981952

982-
.action-buttons {
983-
text-align: center;
953+
.logo-container {
954+
text-align: center;
955+
956+
.brand-logo {
957+
min-height: 25px;
958+
959+
&,
960+
&:dir(rtl) {
961+
background-position: center;
962+
}
963+
}
984964

985-
.checkbox-container {
986-
display: none;
965+
.logo-alt {
966+
width: inherit;
967+
height: inherit;
968+
}
987969
}
988970

989-
.secondary-cta {
990-
position: relative;
991-
margin-block: 10px 0;
992-
bottom: 0;
971+
.welcome-text {
972+
align-items: center;
973+
text-align: center;
974+
margin-inline: 0;
975+
padding-inline: 30px;
976+
977+
.spacer-bottom,
978+
.spacer-top {
979+
display: none;
980+
}
993981
}
994-
}
995982

996-
.primary,
997-
.secondary {
998-
min-width: 240px;
999-
margin-inline: 0;
1000-
}
983+
.action-buttons {
984+
text-align: center;
1001985

1002-
.steps {
1003-
padding-block: 0;
1004-
margin: 0;
986+
.checkbox-container {
987+
display: none;
988+
}
1005989

1006-
&.progress-bar {
990+
.secondary-cta {
991+
position: relative;
992+
margin-block: 10px 0;
993+
bottom: 0;
994+
}
995+
}
996+
997+
.primary,
998+
.secondary {
999+
min-width: 240px;
10071000
margin-inline: 0;
10081001
}
1002+
1003+
.steps {
1004+
padding-block: 0;
1005+
margin: 0;
1006+
1007+
&.progress-bar {
1008+
margin-inline: 0;
1009+
}
1010+
}
10091011
}
1010-
}
10111012

1012-
.additional-cta {
1013-
&.cta-link {
1014-
align-self: center;
1013+
.additional-cta {
1014+
&.cta-link {
1015+
align-self: center;
1016+
}
10151017
}
1016-
}
10171018

1018-
.dismiss-button {
1019-
top: -$small-secondary-section-height;
1020-
}
1019+
.dismiss-button {
1020+
top: -$small-secondary-section-height;
1021+
}
10211022

1022-
&:dir(rtl) {
1023-
margin: 0 auto auto;
1023+
&:dir(rtl) {
1024+
margin: 0 auto auto;
10241025

1025-
.main-content {
1026-
border-radius: 0 0 8px 8px;
1026+
.main-content {
1027+
border-radius: 0 0 8px 8px;
1028+
}
10271029
}
10281030
}
10291031
}
10301032

1033+
&[no-rdm] {
1034+
width: 800px;
1035+
}
10311036
}
10321037

10331038
@media only screen and (height <= 650px) {
@@ -1800,7 +1805,7 @@ html {
18001805
.screen:not(.dialog-initial) {
18011806
.tiles-theme-section,
18021807
.multi-select-container
1803-
{
1808+
{
18041809
transition-delay: 0.2s;
18051810
}
18061811

‎browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -508,6 +508,7 @@ export class ProtonScreen extends React.PureComponent {
508508
ref={input => {
509509
this.mainContentHeader = input;
510510
}}
511+
no-rdm={content.no_rdm ? "" : null}
511512
>
512513
{isCenterPosition ? null : this.renderSecondarySection(content)}
513514
<div

‎browser/components/aboutwelcome/content/aboutwelcome.bundle.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1185,7 +1185,8 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
11851185
"aria-labelledby": "mainContentHeader",
11861186
ref: input => {
11871187
this.mainContentHeader = input;
1188-
}
1188+
},
1189+
"no-rdm": content.no_rdm ? "" : null
11891190
}, isCenterPosition ? null : this.renderSecondarySection(content), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
11901191
className: `section-main ${isEmbeddedMigration ? "embedded-migration" : ""}`,
11911192
"hide-secondary-section": content.hide_secondary_section ? String(content.hide_secondary_section) : null,

0 commit comments

Comments
 (0)