Skip to content

Commit dbb0382

Browse files
halemuhalemu
committed
Bug 1876168 - Add the ability to reverse left/right sections of split Spotlight layout r=omc-reviewers,aminomancer
Differential Revision: https://phabricator.services.mozilla.com/D204095
1 parent b83a4ea commit dbb0382

File tree

6 files changed

+160
-14
lines changed

6 files changed

+160
-14
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+
"reverse-split",
116117
],
117118
},
118119
],

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

Lines changed: 74 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -570,10 +570,12 @@ html {
570570
.section-main {
571571
flex-direction: row;
572572
display: block;
573-
margin: auto auto auto 0;
573+
margin: auto;
574+
margin-inline-start: 0;
574575

575576
&:dir(rtl) {
576-
margin: auto 0 auto auto;
577+
margin: auto;
578+
margin-inline-start: 0;
577579
}
578580

579581
&.embedded-migration {
@@ -779,7 +781,8 @@ html {
779781

780782
&:dir(rtl) {
781783
border-radius: 0 8px 8px 0;
782-
margin: auto auto auto 0;
784+
margin: auto;
785+
margin-inline-end: 0;
783786
}
784787

785788
h1 {
@@ -858,6 +861,38 @@ html {
858861
.tiles-theme-section {
859862
margin-inline-start: -10px;
860863
}
864+
865+
&[reverse-split] {
866+
flex-direction: row-reverse;
867+
868+
.section-main {
869+
.main-content {
870+
border-radius: inherit;
871+
}
872+
873+
margin: auto;
874+
margin-inline-end: 0;
875+
border-radius: 8px 0 0 8px;
876+
877+
&:dir(rtl) {
878+
border-radius: 0 8px 8px 0;
879+
margin: auto;
880+
margin-inline-end: 0;
881+
}
882+
}
883+
884+
.section-secondary {
885+
margin: auto;
886+
margin-inline-start: 0;
887+
border-radius: 0 8px 8px 0;
888+
889+
&:dir(rtl) {
890+
border-radius: 8px 0 0 8px;
891+
margin: auto;
892+
margin-inline-start: 0;
893+
}
894+
}
895+
}
861896
}
862897

863898
@media only screen and (width <= 800px) {
@@ -868,6 +903,34 @@ html {
868903
width: $split-section-width;
869904
}
870905

906+
&[reverse-split] {
907+
flex-direction: column;
908+
909+
.section-secondary {
910+
border-radius: 8px 8px 0 0;
911+
margin: auto;
912+
margin-bottom: 0;
913+
914+
&:dir(rtl) {
915+
margin: auto;
916+
margin-bottom: 0;
917+
border-radius: 8px 8px 0 0;
918+
}
919+
}
920+
921+
.section-main {
922+
margin: auto;
923+
margin-top: 0;
924+
border-radius: 0 0 8px 8px;
925+
926+
&:dir(rtl) {
927+
margin: auto;
928+
margin-top: 0;
929+
border-radius: 0 0 8px 8px;
930+
}
931+
}
932+
}
933+
871934
.section-secondary,
872935
.section-main {
873936
width: $split-section-width;
@@ -878,7 +941,8 @@ html {
878941
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
879942

880943
border-radius: 8px 8px 0 0;
881-
margin: auto auto 0;
944+
margin: auto;
945+
margin-bottom: 0;
882946
height: $small-secondary-section-height;
883947

884948
.hero-image img {
@@ -898,7 +962,8 @@ html {
898962
}
899963

900964
&:dir(rtl) {
901-
margin: auto auto 0;
965+
margin: auto;
966+
margin-bottom: 0;
902967
border-radius: 8px 8px 0 0;
903968
}
904969

@@ -915,7 +980,8 @@ html {
915980
}
916981

917982
.section-main {
918-
margin: 0 auto auto;
983+
margin: auto;
984+
margin-top: 0;
919985
height: $small-main-section-height;
920986

921987
migration-wizard::part(buttons) {
@@ -1020,7 +1086,8 @@ html {
10201086
}
10211087

10221088
&:dir(rtl) {
1023-
margin: 0 auto auto;
1089+
margin: auto;
1090+
margin-top: 0;
10241091

10251092
.main-content {
10261093
border-radius: 0 0 8px 8px;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -500,6 +500,7 @@ export class ProtonScreen extends React.PureComponent {
500500
<main
501501
className={`screen ${this.props.id || ""}
502502
${screenClassName} ${textColorClass}`}
503+
reverse-split={content.reverse_split ? "" : null}
503504
role={ariaRole ?? "alertdialog"}
504505
layout={content.layout}
505506
pos={content.position || "center"}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1178,6 +1178,7 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
11781178
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("main", {
11791179
className: `screen ${this.props.id || ""}
11801180
${screenClassName} ${textColorClass}`,
1181+
"reverse-split": content.reverse_split ? "" : null,
11811182
role: ariaRole ?? "alertdialog",
11821183
layout: content.layout,
11831184
pos: content.position || "center",

‎browser/components/aboutwelcome/content/aboutwelcome.css‎

Lines changed: 63 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1370,10 +1370,12 @@ html {
13701370
.onboardingContainer .screen[pos=split] .section-main {
13711371
flex-direction: row;
13721372
display: block;
1373-
margin: auto auto auto 0;
1373+
margin: auto;
1374+
margin-inline-start: 0;
13741375
}
13751376
.onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
1376-
margin: auto 0 auto auto;
1377+
margin: auto;
1378+
margin-inline-start: 0;
13771379
}
13781380
.onboardingContainer .screen[pos=split] .section-main.embedded-migration .main-content {
13791381
padding-block: 100px 0;
@@ -1580,7 +1582,8 @@ html {
15801582
}
15811583
.onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
15821584
border-radius: 0 8px 8px 0;
1583-
margin: auto auto auto 0;
1585+
margin: auto;
1586+
margin-inline-end: 0;
15841587
}
15851588
.onboardingContainer .screen[pos=split] .section-secondary h1 {
15861589
color: var(--mr-screen-heading-color);
@@ -1648,6 +1651,32 @@ html {
16481651
.onboardingContainer .screen[pos=split] .tiles-theme-section {
16491652
margin-inline-start: -10px;
16501653
}
1654+
.onboardingContainer .screen[pos=split][reverse-split] {
1655+
flex-direction: row-reverse;
1656+
}
1657+
.onboardingContainer .screen[pos=split][reverse-split] .section-main {
1658+
margin: auto;
1659+
margin-inline-end: 0;
1660+
border-radius: 8px 0 0 8px;
1661+
}
1662+
.onboardingContainer .screen[pos=split][reverse-split] .section-main .main-content {
1663+
border-radius: inherit;
1664+
}
1665+
.onboardingContainer .screen[pos=split][reverse-split] .section-main:dir(rtl) {
1666+
border-radius: 0 8px 8px 0;
1667+
margin: auto;
1668+
margin-inline-end: 0;
1669+
}
1670+
.onboardingContainer .screen[pos=split][reverse-split] .section-secondary {
1671+
margin: auto;
1672+
margin-inline-start: 0;
1673+
border-radius: 0 8px 8px 0;
1674+
}
1675+
.onboardingContainer .screen[pos=split][reverse-split] .section-secondary:dir(rtl) {
1676+
border-radius: 8px 0 0 8px;
1677+
margin: auto;
1678+
margin-inline-start: 0;
1679+
}
16511680
}
16521681
@media only screen and (width <= 800px) {
16531682
.onboardingContainer .screen[pos=split] {
@@ -1657,6 +1686,29 @@ html {
16571686
.onboardingContainer .screen[pos=split]::before {
16581687
width: 400px;
16591688
}
1689+
.onboardingContainer .screen[pos=split][reverse-split] {
1690+
flex-direction: column;
1691+
}
1692+
.onboardingContainer .screen[pos=split][reverse-split] .section-secondary {
1693+
border-radius: 8px 8px 0 0;
1694+
margin: auto;
1695+
margin-bottom: 0;
1696+
}
1697+
.onboardingContainer .screen[pos=split][reverse-split] .section-secondary:dir(rtl) {
1698+
margin: auto;
1699+
margin-bottom: 0;
1700+
border-radius: 8px 8px 0 0;
1701+
}
1702+
.onboardingContainer .screen[pos=split][reverse-split] .section-main {
1703+
margin: auto;
1704+
margin-top: 0;
1705+
border-radius: 0 0 8px 8px;
1706+
}
1707+
.onboardingContainer .screen[pos=split][reverse-split] .section-main:dir(rtl) {
1708+
margin: auto;
1709+
margin-top: 0;
1710+
border-radius: 0 0 8px 8px;
1711+
}
16601712
.onboardingContainer .screen[pos=split] .section-secondary,
16611713
.onboardingContainer .screen[pos=split] .section-main {
16621714
width: 400px;
@@ -1665,7 +1717,8 @@ html {
16651717
--mr-secondary-background-position-y: top;
16661718
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
16671719
border-radius: 8px 8px 0 0;
1668-
margin: auto auto 0;
1720+
margin: auto;
1721+
margin-bottom: 0;
16691722
height: 100px;
16701723
}
16711724
.onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
@@ -1682,7 +1735,8 @@ html {
16821735
margin-block: 14px 6px;
16831736
}
16841737
.onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
1685-
margin: auto auto 0;
1738+
margin: auto;
1739+
margin-bottom: 0;
16861740
border-radius: 8px 8px 0 0;
16871741
}
16881742
.onboardingContainer .screen[pos=split] .section-secondary.with-secondary-section-hidden {
@@ -1693,7 +1747,8 @@ html {
16931747
margin-inline: 36px;
16941748
}
16951749
.onboardingContainer .screen[pos=split] .section-main {
1696-
margin: 0 auto auto;
1750+
margin: auto;
1751+
margin-top: 0;
16971752
height: 450px;
16981753
}
16991754
.onboardingContainer .screen[pos=split] .section-main migration-wizard::part(buttons) {
@@ -1774,7 +1829,8 @@ html {
17741829
top: -100px;
17751830
}
17761831
.onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
1777-
margin: 0 auto auto;
1832+
margin: auto;
1833+
margin-top: 0;
17781834
}
17791835
.onboardingContainer .screen[pos=split] .section-main:dir(rtl) .main-content {
17801836
border-radius: 0 0 8px 8px;

‎browser/components/aboutwelcome/tests/unit/MultiStageAWProton.test.jsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -426,6 +426,26 @@ describe("MultiStageAboutWelcomeProton module", () => {
426426

427427
sandbox.restore();
428428
});
429+
430+
it("should correctly set reverse-split prop", () => {
431+
const SCREEN_PROPS = {
432+
content: {
433+
position: "split",
434+
reverse_split: true,
435+
title: "test title",
436+
primary_button: {
437+
label: "test primary button",
438+
},
439+
additional_button: {
440+
label: "test additional button",
441+
style: "link",
442+
},
443+
},
444+
};
445+
const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
446+
assert.ok(wrapper.exists());
447+
assert.equal(wrapper.find("main").prop("reverse-split"), "");
448+
});
429449
});
430450

431451
describe("AboutWelcomeDefaults for proton", () => {

0 commit comments

Comments
 (0)