8000 PM-10051: Add the intro carousel with the first content page by matt-livefront · Pull Request #780 · bitwarden/ios · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

PM-10051: Add the intro carousel with the first content page #780

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 2, 2024

Conversation

matt-livefront
Copy link
Collaborator
@matt-livefront matt-livefront commented Jul 31, 2024

🎟️ Tracking

PM-10051

📔 Objective

Adds the setup for the carousel along with the first carousel page. The remaining pages will be coming in a future PR.

Since we don't yet have a feature flag for this, there isn't a way to get to this in the app. For testing, setting the initial route on the app processor to .auth(.introCarousel) will take you to the carousel.

diff --git a/BitwardenShared/UI/Platform/Application/AppProcessor.swift b/BitwardenShared/UI/Platform/Application/AppProcessor.swift
index 1c391cc6..8d084022 100644
--- a/BitwardenShared/UI/Platform/Application/AppProcessor.swift
+++ b/BitwardenShared/UI/Platform/Application/AppProcessor.swift
@@ -111,7 +111,7 @@ public class AppProcessor {
     ///
     public func start(
         appContext: AppContext,
-        initialRoute: AppRoute? = nil,
+        initialRoute: AppRoute? = .auth(.introCarousel),
         navigator: RootNavigator,
         window: UIWindow?
     ) async {

📸 Screenshots

Screenshot 2024-07-31 at 10 35 06 AM

⏰ Reminders before review

  • Contributor guidelines followed
  • All formatters and local linters executed and passed
  • Written new unit and / or integration tests where applicable
  • Protected functional changes with optionality (feature flags)
  • Used internationalization (i18n) for all UI strings
  • CI builds passed
  • Communicated to DevOps any deployment requirements
  • Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

  • 👍 (:+1:) or similar for great changes
  • 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
  • ❓ (:question:) for questions
  • 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
  • 🎨 (:art:) for suggestions / improvements
  • ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
  • 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
  • ⛏ (:pick:) for minor or nitpick changes

Copy link
Contributor
github-actions bot commented Jul 31, 2024

Logo
Checkmarx One – Scan Summary & Details8d0885c7-358b-491a-a5dc-e7d8696cc879

No New Or Fixed Issues Found

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Has product/design seen and approved the landscape view? Should it have a landscape view or should we just force it to portrait? IMO it feels a bit weird the title not being centered.
⛏️ Additionally, the image is being cut at the bottom, some fingers cannot be seen hehe.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Authenticator app has a similar carousel for first-time users, and it handles landscape in a similar manner.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Has product/design seen and approved the landscape view? Should it have a landscape view or should we just force it to portrait? IMO it feels a bit weird the title not being centered.

The landscape design exists in the Figma file, which I think has been reviewed/approved by product and design.

⛏️ Additionally, the image is being cut at the bottom, some fingers cannot be seen hehe.

The view does scroll, so you can scroll down to see the image or any overflowing text. But I think the image should be slightly smaller in landscape, so I can update that.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh missed the landscape design in Figma, sorry.

Copy link
codecov bot commented Jul 31, 2024

Codecov Report

Attention: Patch coverage is 98.21429% with 2 lines in your changes missing coverage. Please review.

Project coverage is 88.22%. Comparing base (d849744) to head (5e8e8f3).

Files Patch % Lines
...red/UI/Auth/IntroCarousel/IntroCarouselState.swift 87.50% 1 Missing ⚠️
...ared/UI/Auth/IntroCarousel/IntroCarouselView.swift 98.57% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #780      +/-   ##
==========================================
+ Coverage   88.19%   88.22%   +0.03%     
==========================================
  Files         577      581       +4     
  Lines       29213    29325     +112     
==========================================
+ Hits        25763    25873     +110     
- Misses       3450     3452       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

fedemkr
fedemkr previously approved these changes Jul 31, 2024

/// A model representing the data to display on a single page in the carousel.
///
struct CarouselPage: Equatable, Identifiable {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Is there a reason the CarouselPage needs to be Identifiable? I was able to achieve the same effect with just an Equatable enum in the Authenticator app.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It needed to be Identifiable to iterate over the array with ForEach. An enum could work too, I just liked the ability to define the list of pages as a list within the state.

}
.padding(.vertical, 16)
.frame(maxWidth: .infinity, minHeight: reader.size.height)
.scrollView(addVerticalPadding: false)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 By putting the scroll view here, on landscape modes with long text or big text (due to font size), it means that the image scrolls alongside the text, rather than being separate from the text-as-scrollview. Is this what we want? (On the Authenticator, I split the image out in landscape so only the text scrolled; not sure what the proper choice actually is, though, but both apps should eventually match in that regard)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good callout! I will update this to just scroll the text.

@matt-livefront matt-livefront merged commit c205ed8 into main Aug 2, 2024
8 checks passed
@matt-livefront matt-livefront deleted the matt/PM-10051-carousel-page-1 branch August 2, 2024 18:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants
0