Skip to content

Add FXIOS-12363 ⁃ [Menu Redesign] Update horizontal squares options to the latest design #27115

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.

Sign up for GitHub

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 4 commits into from
Jun 11, 2025
Merged

Add FXIOS-12363 ⁃ [Menu Redesign] Update horizontal squares options to the latest design #27115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
842005a
FXIOS-12363 #26946 ⁃ [Menu Redesign] Update horizontal squares option…
dicarobinho Jun 5, 2025
8dc91ec
Did a quick refactor for the code
dicarobinho Jun 10, 2025
b966eaf
Fixed SwiftLint warning
dicarobinho Jun 10, 2025
9c5dcd5
Refactored Horizontal Cells, from CollectionView to StackView
dicarobinho Jun 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions BrowserKit/Sources/Common/Constants/StandardImageIdentifiers.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ public struct StandardImageIdentifiers {
public static let bookmarkFill = "bookmarkFillLarge"
public static let bookmarkHalf = "bookmarkHalfLarge"
public static let bookmarkSlash = "bookmarkSlashLarge"
public static let bookmarkTray = "bookmarkTrayLarge"
public static let bookmarkTrayFill = "bookmarkTrayFillLarge"
public static let checkmark = "checkmarkLarge"
public static let chevronDown = "chevronDownLarge"
Expand Down
125 changes: 0 additions & 125 deletions BrowserKit/Sources/MenuKit/MenuRedesign/MenuCollectionView.swift
View file
Open in desktop

This file was deleted.

17 changes: 4 additions & 13 deletions BrowserKit/Sources/MenuKit/MenuRedesign/MenuRedesignMainView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,12 @@ import UIKit
import ComponentLibrary

public final class MenuRedesignMainView: UIView,
ThemeApplicable {
ThemeApplicable {
private struct UX {
static let headerTopMargin: CGFloat = 15
}

// MARK: - UI Elements
private var collectionView: MenuCollectionView = .build()
private var tableView: MenuRedesignTableView = .build()

// MARK: - Initializers
Expand All @@ -28,36 +27,28 @@ public final class MenuRedesignMainView: UIView,

// MARK: - UI Setup
private func setupView() {
self.addSubview(collectionView)
self.addSubview(tableView)

NSLayoutConstraint.activate([
collectionView.topAnchor.constraint(equalTo: self.topAnchor),
collectionView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
collectionView.trailingAnchor.constraint(equalTo: self.trailingAnchor),

tableView.topAnchor.constraint(equalTo: collectionView.bottomAnchor),
tableView.topAnchor.constraint(equalTo: self.topAnchor, constant: UX.headerTopMargin),
tableView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
tableView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
tableView.trailingAnchor.constraint(equalTo: self.trailingAnchor)
])
}

public func setupAccessibilityIdentifiers(menuA11yId: String, menuA11yLabel: String) {
collectionView.setupAccessibilityIdentifiers(menuA11yId: menuA11yId, menuA11yLabel: menuA11yLabel)
public func setupAccessibilityIdentifiers(menuA11yId: String,
menuA11yLabel: String) {
tableView.setupAccessibilityIdentifiers(menuA11yId: menuA11yId, menuA11yLabel: menuA11yLabel)
}

// MARK: - Interface
public func reloadDataView(with data: [MenuSection]) {
collectionView.reloadCollectionView(with: data)
tableView.reloadTableView(with: data)
}

// MARK: - ThemeApplicable
public func applyTheme(theme: Theme) {
backgroundColor = .clear
collectionView.applyTheme(theme: theme)
tableView.applyTheme(theme: theme)
}
}
25 changes: 20 additions & 5 deletions BrowserKit/Sources/MenuKit/MenuRedesign/MenuRedesignTableView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ final class MenuRedesignTableView: UIView,
private struct UX {
static let topPadding: CGFloat = 12
static let tableViewMargin: CGFloat = 16
static let distanceBetweenSections: CGFloat = 32
static let distanceBetweenSections: CGFloat = 16
}

private var tableView: UITableView
Expand Down Expand Up @@ -58,6 +58,8 @@ final class MenuRedesignTableView: UIView,
tableView.register(MenuRedesignCell.self, forCellReuseIdentifier: MenuRedesignCell.cellIdentifier)
tableView.register(MenuInfoCell.self, forCellReuseIdentifier: MenuInfoCell.cellIdentifier)
tableView.register(MenuAccountCell.self, forCellReuseIdentifier: MenuAccountCell.cellIdentifier)
tableView.register(MenuSquaresViewContentCell.self,
forCellReuseIdentifier: MenuSquaresViewContentCell.cellIdentifier)
}

func setupAccessibilityIdentifiers(menuA11yId: String, menuA11yLabel: String) {
Expand All @@ -81,7 +83,9 @@ final class MenuRedesignTableView: UIView,
_ tableView: UITableView,
numberOfRowsInSection section: Int
) -> Int {
if let isExpanded = menuData[section].isExpanded, isExpanded {
if menuData[section].isHorizontalTabsSection {
return 1
} else if let isExpanded = menuData[section].isExpanded, isExpanded {
return menuData[section].options.count
} else {
return menuData[section].options.count(where: { !$0.isOptional })
Expand All @@ -92,6 +96,17 @@ final class MenuRedesignTableView: UIView,
_ tableView: UITableView,
cellForRowAt indexPath: IndexPath
) -> UITableViewCell {
if menuData[indexPath.section].isHorizontalTabsSection {
guard let cell = tableView.dequeueReusableCell(
withIdentifier: MenuSquaresViewContentCell.cellIdentifier,
for: indexPath) as? MenuSquaresViewContentCell else {
return UITableViewCell()
}
if let theme { cell.applyTheme(theme: theme) }
cell.reloadData(with: menuData)
return cell
}

let rowOption = menuData[indexPath.section].options[indexPath.row]

if rowOption.iconImage != nil || rowOption.needsReAuth != nil {
Expand Down Expand Up @@ -159,11 +174,11 @@ final class MenuRedesignTableView: UIView,
}

func reloadTableView(with data: [MenuSection]) {
// We ignore first section because it is handled in MenuCollectionView
if let firstSection = data.first, firstSection.isTopTabsSection {
// We ignore first section because it is handled in MenuSquaresViewContentCell
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: I think the comment should be updated. We don't ignore the section just handled independently

if let firstSection = data.first, firstSection.isHorizontalTabsSection {
tableView.showsVerticalScrollIndicator = false
menuData = data
menuData.remove(at: 0)
menuData.removeAll(where: { $0.isHorizontalTabsSection })
} else {
menuData = data
}
Expand Down
82 changes: 49 additions & 33 deletions BrowserKit/Sources/MenuKit/MenuRedesign/MenuSquareCell.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,29 @@ import Common
import UIKit

// TODO: FXIOS-12302 Create the UI for different accessibility sizes, for horizontal options section
final class MenuSquareCell: UICollectionViewCell, ReusableCell, ThemeApplicable {
final class MenuSquareView: UIView, ThemeApplicable {
private struct UX {
static let iconSize: CGFloat = 20
static let backgroundIconViewCornerRadius: CGFloat = 12
static let iconSize: CGFloat = 24
static let backgroundViewCornerRadius: CGFloat = 12
static let horizontalMargin: CGFloat = 6
static let verticalMargin: CGFloat = 6
static let contentViewSpacing: CGFloat = 4
static let contentViewTopMargin: CGFloat = 12
static let contentViewBottomMargin: CGFloat = 8
static let contentViewHorizontalMargin: CGFloat = 4
}

// MARK: - UI Elements
private var backgroundIconView: UIView = .build()
private var backgroundContentView: UIView = .build()

private var icon: UIImageView = .build()
private var contentStackView: UIStackView = .build { stack in
stack.axis = .vertical
stack.spacing = UX.contentViewSpacing
stack.distribution = .fillProportionally
}

private var icon: UIImageView = .build { view in
view.contentMode = .scaleAspectFit
}

private var titleLabel: UILabel = .build { label in
label.font = FXFontStyles.Regular.caption2.scaledFont()
Expand All @@ -34,13 +45,15 @@ final class MenuSquareCell: UICollectionViewCell, ReusableCell, ThemeApplicable
setupView()
}

required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) not yet supported") }
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) not yet supported")
}

func configureCellWith(model: MenuElement) {
self.model = model
self.titleLabel.text = model.title
self.icon.image = UIImage(named: model.iconName)?.withRenderingMode(.alwaysTemplate)
self.backgroundIconView.layer.cornerRadius = UX.backgroundIconViewCornerRadius
self.backgroundContentView.layer.cornerRadius = UX.backgroundViewCornerRadius
self.isAccessibilityElement = true
self.isUserInteractionEnabled = !model.isEnabled ? false : true
self.accessibilityIdentifier = model.a11yId
Expand All @@ -50,39 +63,42 @@ final class MenuSquareCell: UICollectionViewCell, ReusableCell, ThemeApplicable
}

private func setupView() {
self.addSubview(backgroundIconView)
self.addSubview(titleLabel)
self.backgroundIconView.addSubview(icon)
self.addSubview(backgroundContentView)
backgroundContentView.addSubview(contentStackView)
contentStackView.addArrangedSubview(icon)
contentStackView.addArrangedSubview(titleLabel)
NSLayoutConstraint.activate([
backgroundIconView.topAnchor.constraint(equalTo: self.topAnchor),
backgroundIconView.leadingAnchor.constraint(
equalTo: self.leadingAnchor,
constant: UX.horizontalMargin),
backgroundIconView.trailingAnchor.constraint(
equalTo: self.trailingAnchor,
constant: -UX.horizontalMargin),

icon.centerYAnchor.constraint(equalTo: backgroundIconView.centerYAnchor),
icon.centerXAnchor.constraint(equalTo: backgroundIconView.centerXAnchor),
icon.widthAnchor.constraint(equalToConstant: UX.iconSize),
icon.heightAnchor.constraint(equalToConstant: UX.iconSize),
backgroundContentView.topAnchor.constraint(equalTo: self.topAnchor),
backgroundContentView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
backgroundContentView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
backgroundContentView.bottomAnchor.constraint(equalTo: self.bottomAnchor),

titleLabel.topAnchor.constraint(equalTo: backgroundIconView.bottomAnchor, constant: UX.verticalMargin),
titleLabel.leadingAnchor.constraint(
equalTo: self.leadingAnchor,
constant: UX.horizontalMargin),
titleLabel.trailingAnchor.constraint(
equalTo: self.trailingAnchor,
constant: -UX.horizontalMargin),
titleLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor)
contentStackView.topAnchor.constraint(
equalTo: backgroundContentView.topAnchor,
constant: UX.contentViewTopMargin
),
contentStackView.leadingAnchor.constraint(
equalTo: backgroundContentView.leadingAnchor,
constant: UX.contentViewHorizontalMargin
),
contentStackView.trailingAnchor.constraint(
equalTo: backgroundContentView.trailingAnchor,
constant: -UX.contentViewHorizontalMargin
),
contentStackView.bottomAnchor.constraint(
equalTo: backgroundContentView.bottomAnchor,
constant: -UX.contentViewBottomMargin
),
icon.heightAnchor.constraint(equalToConstant: UX.iconSize)
])
}

// MARK: - Theme Applicable
func applyTheme(theme: Theme) {
backgroundColor = .clear
backgroundIconView.backgroundColor = theme.colors.layer2
contentStackView.backgroundColor = .clear
backgroundContentView.backgroundColor = theme.colors.layer2
icon.tintColor = theme.colors.iconPrimary
titleLabel.textColor = theme.colors.textPrimary
titleLabel.textColor = theme.colors.textSecondary
}
}
Loading