Skip to content

Commit 09dc7a3

Browse files
Gio2018Gio2018
authored
Merge pull request #19207 from wordpress-mobile/task/jetpack-overlay-landscape-rtl
Jetpack Overlay - Refactor landscape layout and add RTL animation
2 parents 545a577 + 9178537 commit 09dc7a3

8 files changed

Lines changed: 42 additions & 16 deletions

File tree

‎WordPress.xcworkspace/xcshareddata/swiftpm/Package.resolved‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎WordPress/Classes/ViewRelated/Jetpack/Branding/Banner/JetpackBannerView.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ class JetpackBannerView: UIView {
3939
}
4040

4141
/// Preferred minimum height to be used for constraints
42-
static let minimumHeight: CGFloat = 50
42+
static let minimumHeight: CGFloat = 44
4343
private static let jetpackBannerBackgroundColor = UIColor(light: .muriel(color: .jetpackGreen, .shade0),
4444
dark: .muriel(color: .jetpackGreen, .shade90))
4545
}

‎WordPress/Classes/ViewRelated/Jetpack/Branding/Button/JetpackButton.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ class JetpackButton: CircularImageButton {
8989
static let maximumFontPointSize: CGFloat = 22
9090
static let imageBackgroundViewMultiplier: CGFloat = 0.75
9191
static var titleFont: UIFont {
92-
let fontDescriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .body)
92+
let fontDescriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .callout)
9393
let font = UIFont(descriptor: fontDescriptor, size: min(fontDescriptor.pointSize, maximumFontPointSize))
9494
return UIFontMetrics.default.scaledFont(for: font, maximumPointSize: maximumFontPointSize)
9595
}

‎WordPress/Classes/ViewRelated/Jetpack/Branding/Overlay/JetpackOverlayView.swift‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,13 @@ class JetpackOverlayView: UIView {
1919
UIImage.gridicon(.crossCircle, size: CGSize(width: Metrics.dismissButtonSize, height: Metrics.dismissButtonSize))
2020
}
2121

22+
/// Sets the animation based on the language orientation
23+
private var animation: Animation? {
24+
traitCollection.layoutDirection == .leftToRight ?
25+
Animation.named(Graphics.wpJetpackLogoAnimationLtr) :
26+
Animation.named(Graphics.wpJetpackLogoAnimationRtl)
27+
}
28+
2229
private lazy var dismissButton: CircularImageButton = {
2330
let button = CircularImageButton()
2431
button.translatesAutoresizingMaskIntoConstraints = false
@@ -43,7 +50,8 @@ class JetpackOverlayView: UIView {
4350
}()
4451

4552
private lazy var animationView: AnimationView = {
46-
let animationView = AnimationView(name: Graphics.wpJetpackLogoAnimation)
53+
let animationView = AnimationView()
54+
animationView.animation = animation
4755
animationView.translatesAutoresizingMaskIntoConstraints = false
4856
return animationView
4957
}()
@@ -57,6 +65,7 @@ class JetpackOverlayView: UIView {
5765
label.numberOfLines = Metrics.titleLabelNumberOfLines
5866
label.textAlignment = .natural
5967
label.text = TextContent.title
68+
label.setContentCompressionResistancePriority(Metrics.titleCompressionResistance, for: .vertical)
6069
return label
6170
}()
6271

@@ -69,6 +78,7 @@ class JetpackOverlayView: UIView {
6978
label.numberOfLines = Metrics.descriptionLabelNumberOfLines
7079
label.textAlignment = .natural
7180
label.text = TextContent.description
81+
label.setContentCompressionResistancePriority(Metrics.descriptionCompressionResistance, for: .vertical)
7282
return label
7383
}()
7484

@@ -131,8 +141,8 @@ class JetpackOverlayView: UIView {
131141
stackViewBottomConstraint.priority = Metrics.veryHighPriority
132142

133143
NSLayoutConstraint.activate([
134-
dismissButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -Metrics.dismissButtonPadding),
135-
dismissButton.topAnchor.constraint(equalTo: topAnchor, constant: Metrics.dismissButtonPadding),
144+
dismissButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -Metrics.dismissButtonTrailingPadding),
145+
dismissButton.topAnchor.constraint(equalTo: topAnchor, constant: Metrics.dismissButtonTopPadding),
136146
dismissButton.heightAnchor.constraint(equalToConstant: Metrics.dismissButtonSize),
137147
dismissButton.widthAnchor.constraint(equalToConstant: Metrics.dismissButtonSize),
138148
stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: Metrics.edgeMargins.left),
@@ -150,18 +160,20 @@ class JetpackOverlayView: UIView {
150160
private extension JetpackOverlayView {
151161

152162
enum Graphics {
153-
static let wpJetpackLogoAnimation = "JetpackWordPressLogoAnimation_left"
163+
static let wpJetpackLogoAnimationLtr = "JetpackWordPressLogoAnimation_ltr"
164+
static let wpJetpackLogoAnimationRtl = "JetpackWordPressLogoAnimation_rtl"
154165
static let dismissButtonSystemName = "xmark.circle.fill"
155166
}
156167

157168
enum Metrics {
158169
// stack view
159170
static let imageToTitleSpacing: CGFloat = 24
160-
static let titleToDescriptionSpacing: CGFloat = 20
171+
static let titleToDescriptionSpacing: CGFloat = 10
161172
static let descriptionToButtonSpacing: CGFloat = 40
162173
static let edgeMargins = UIEdgeInsets(top: 46, left: 30, bottom: 20, right: 30)
163174
// dismiss button
164-
static let dismissButtonPadding: CGFloat = 20
175+
static let dismissButtonTopPadding: CGFloat = 10 // takes into account the gripper
176+
static let dismissButtonTrailingPadding: CGFloat = 20
165177
static let dismissButtonSize: CGFloat = 30
166178
// labels
167179
static let maximumFontSize: CGFloat = 32
@@ -171,6 +183,9 @@ private extension JetpackOverlayView {
171183

172184
static let descriptionLabelNumberOfLines = 0
173185

186+
static let titleCompressionResistance = UILayoutPriority(rawValue: 751)
187+
static let descriptionCompressionResistance = UILayoutPriority(rawValue: 749)
188+
174189
static var titleFont: UIFont {
175190
let weightTrait = [UIFontDescriptor.TraitKey.weight: UIFont.Weight.bold]
176191
let fontDescriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .title1).addingAttributes([.traits: weightTrait])

‎WordPress/Classes/ViewRelated/Jetpack/Branding/Overlay/JetpackOverlayViewController.swift‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ extension JetpackOverlayViewController: DrawerPresentable {
4545
var allowsUserTransition: Bool {
4646
false
4747
}
48+
49+
var compactWidth: DrawerWidth {
50+
.maxWidth
51+
}
4852
}
4953

5054
extension JetpackOverlayViewController: ChildDrawerPositionable {

WordPress/JetpackWordPressLogoAnimation_left.json renamed to WordPress/JetpackWordPressLogoAnimation_ltr.json

File renamed without changes.

‎WordPress/JetpackWordPressLogoAnimation_rtl.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎WordPress/WordPress.xcodeproj/project.pbxproj‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -585,8 +585,10 @@
585585
3F46AB0025BF5D6300CE2E98 /* Sites.intentdefinition in Sources */ = {isa = PBXBuildFile; fileRef = 3F46AB0225BF5D6300CE2E98 /* Sites.intentdefinition */; settings = {ATTRIBUTES = (codegen, ); }; };
586586
3F4D035028A56F9B00F0A4FD /* CircularImageButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F4D034F28A56F9B00F0A4FD /* CircularImageButton.swift */; };
587587
3F4D035128A56F9B00F0A4FD /* CircularImageButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F4D034F28A56F9B00F0A4FD /* CircularImageButton.swift */; };
588-
3F4D035328A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_left.json in Resources */ = {isa = PBXBuildFile; fileRef = 3F4D035228A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_left.json */; };
589-
3F4D035428A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_left.json in Resources */ = {isa = PBXBuildFile; fileRef = 3F4D035228A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_left.json */; };
588+
3F4D035328A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_ltr.json in Resources */ = {isa = PBXBuildFile; fileRef = 3F4D035228A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_ltr.json */; };
589+
3F4D035428A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_ltr.json in Resources */ = {isa = PBXBuildFile; fileRef = 3F4D035228A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_ltr.json */; };
590+
3F4EB39228AC561600B8DD86 /* JetpackWordPressLogoAnimation_rtl.json in Resources */ = {isa = PBXBuildFile; fileRef = 3F4EB39128AC561600B8DD86 /* JetpackWordPressLogoAnimation_rtl.json */; };
591+
3F4EB39328AC561600B8DD86 /* JetpackWordPressLogoAnimation_rtl.json in Resources */ = {isa = PBXBuildFile; fileRef = 3F4EB39128AC561600B8DD86 /* JetpackWordPressLogoAnimation_rtl.json */; };
590592
3F50945B2454ECA000C4470B /* ReaderTabItemsStoreTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F50945A2454ECA000C4470B /* ReaderTabItemsStoreTests.swift */; };
591593
3F50945F245537A700C4470B /* ReaderTabViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3F50945E245537A700C4470B /* ReaderTabViewModelTests.swift */; };
592594
3F526C4E2538CF2A0069706C /* WidgetKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 3F526C4D2538CF2A0069706C /* WidgetKit.framework */; };
@@ -5594,7 +5596,8 @@
55945596
3F43704328932F0100475B6E /* JetpackBrandingCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = JetpackBrandingCoordinator.swift; sourceTree = "<group>"; };
55955597
3F46AB0125BF5D6300CE2E98 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.intentdefinition; name = Base; path = Base.lproj/Sites.intentdefinition; sourceTree = "<group>"; };
55965598
3F4D034F28A56F9B00F0A4FD /* CircularImageButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircularImageButton.swift; sourceTree = "<group>"; };
5597-
3F4D035228A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_left.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = JetpackWordPressLogoAnimation_left.json; sourceTree = "<group>"; };
5599+
3F4D035228A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_ltr.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = JetpackWordPressLogoAnimation_ltr.json; sourceTree = "<group>"; };
5600+
3F4EB39128AC561600B8DD86 /* JetpackWordPressLogoAnimation_rtl.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = JetpackWordPressLogoAnimation_rtl.json; sourceTree = "<group>"; };
55985601
3F50945A2454ECA000C4470B /* ReaderTabItemsStoreTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReaderTabItemsStoreTests.swift; sourceTree = "<group>"; };
55995602
3F50945E245537A700C4470B /* ReaderTabViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReaderTabViewModelTests.swift; sourceTree = "<group>"; };
56005603
3F526C4C2538CF2A0069706C /* WordPressStatsWidgets.appex */ = {isa = PBXFileReference; explicitFileType = "wrapper.app-extension"; includeInIndex = 0; path = WordPressStatsWidgets.appex; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -9173,7 +9176,8 @@
91739176
29B97317FDCFA39411CA2CEA /* Resources */ = {
91749177
isa = PBXGroup;
91759178
children = (
9176-
3F4D035228A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_left.json */,
9179+
3F4EB39128AC561600B8DD86 /* JetpackWordPressLogoAnimation_rtl.json */,
9180+
3F4D035228A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_ltr.json */,
91779181
433840C622C2BA5B00CB13F8 /* AppImages.xcassets */,
91789182
F5A34D0525DF2F7700C9654B /* Fonts */,
91799183
17D4153D22C24B67006378EF /* Icons */,
@@ -16621,6 +16625,7 @@
1662116625
FE43DAB126DFAD1C00CFF595 /* CommentContentTableViewCell.xib in Resources */,
1662216626
43D74ACE20F906DD004AD934 /* InlineEditableNameValueCell.xib in Resources */,
1662316627
433840C722C2BA5B00CB13F8 /* AppImages.xcassets in Resources */,
16628+
3F4EB39228AC561600B8DD86 /* JetpackWordPressLogoAnimation_rtl.json in Resources */,
1662416629
FF00889D204DFF77007CCE66 /* MediaQuotaCell.xib in Resources */,
1662516630
17222D81261DDDF90047B163 /* celadon-classic-icon-app-76x76@2x.png in Resources */,
1662616631
931DF4D618D09A2F00540BDD /* InfoPlist.strings in Resources */,
@@ -16730,7 +16735,7 @@
1673016735
B5C66B761ACF072C00F68370 /* NoteBlockCommentTableViewCell.xib in Resources */,
1673116736
17222D94261DDDF90047B163 /* pink-icon-app-76x76@2x.png in Resources */,
1673216737
57AA8491228715E700D3C2A2 /* PostCardCell.xib in Resources */,
16733-
3F4D035328A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_left.json in Resources */,
16738+
3F4D035328A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_ltr.json in Resources */,
1673416739
3223393E24FEC2A700BDD4BF /* ReaderDetailFeaturedImageView.xib in Resources */,
1673516740
E18165FD14E4428B006CE885 /* loader.html in Resources */,
1673616741
98BAA7C126F925F70073A2F9 /* InlineEditableSingleLineCell.xib in Resources */,
@@ -17144,7 +17149,7 @@
1714417149
FABB1FF92602FC2C00C8785C /* ReaderDetailHeaderView.xib in Resources */,
1714517150
FABB1FFA2602FC2C00C8785C /* ReaderTagsFooter.xib in Resources */,
1714617151
FABB1FFB2602FC2C00C8785C /* PostingActivityLegend.xib in Resources */,
17147-
3F4D035428A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_left.json in Resources */,
17152+
3F4D035428A5BFCE00F0A4FD /* JetpackWordPressLogoAnimation_ltr.json in Resources */,
1714817153
FABB1FFC2602FC2C00C8785C /* PostingActivityViewController.storyboard in Resources */,
1714917154
FABB1FFD2602FC2C00C8785C /* TwoColumnCell.xib in Resources */,
1715017155
FABB1FFE2602FC2C00C8785C /* Notifications.storyboard in Resources */,
@@ -17279,6 +17284,7 @@
1727917284
FABB20AC2602FC2C00C8785C /* Shrikhand-Regular.ttf in Resources */,
1728017285
FABB20AD2602FC2C00C8785C /* StatsGhostSingleRowCell.xib in Resources */,
1728117286
9801E686274EEC19002FDDB6 /* ReaderDetailCommentsHeader.xib in Resources */,
17287+
3F4EB39328AC561600B8DD86 /* JetpackWordPressLogoAnimation_rtl.json in Resources */,
1728217288
FABB20AE2602FC2C00C8785C /* ThemeBrowser.storyboard in Resources */,
1728317289
FABB20AF2602FC2C00C8785C /* StatsGhostTabbedCell.xib in Resources */,
1728417290
FABB20B02602FC2C00C8785C /* CategorySectionTableViewCell.xib in Resources */,

0 commit comments

Comments
 (0)