Skip to content
This repository has been archived by the owner on May 10, 2024. It is now read-only.

Ref #8417: URL bar revamp design improvements #8480

Merged
merged 1 commit into from
Nov 24, 2023
Merged

Ref #8417: URL bar revamp design improvements #8480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions Sources/Brave/Frontend/Browser/Toolbars/UrlBar/TabLocationView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ class TabLocationView: UIView {
urlDisplayLabel.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 250), for: .horizontal)
urlDisplayLabel.setContentCompressionResistancePriority(.required, for: .vertical)
urlDisplayLabel.accessibilityIdentifier = "url"
urlDisplayLabel.font = .preferredFont(forTextStyle: .subheadline)
urlDisplayLabel.font = .preferredFont(forTextStyle: .body)
urlDisplayLabel.backgroundColor = .clear
urlDisplayLabel.clipsToBounds = true
urlDisplayLabel.lineBreakMode = .byClipping
Expand Down Expand Up @@ -369,7 +369,7 @@ class TabLocationView: UIView {
private func updateForTraitCollection() {
let clampedTraitCollection = traitCollection.clampingSizeCategory(maximum: .accessibilityLarge)
let toolbarTraitCollection = UITraitCollection(preferredContentSizeCategory: traitCollection.toolbarButtonContentSizeCategory)
urlDisplayLabel.font = .preferredFont(forTextStyle: .subheadline, compatibleWith: clampedTraitCollection)
urlDisplayLabel.font = .preferredFont(forTextStyle: .body, compatibleWith: clampedTraitCollection)
placeholderLabel.font = urlDisplayLabel.font
let pointSize = UIFont.preferredFont(
forTextStyle: .footnote,
Expand Down
26 changes: 15 additions & 11 deletions Sources/Brave/Frontend/Browser/Toolbars/UrlBar/TopToolbarView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ class TopToolbarView: UIView, ToolbarProtocol {
static let locationPadding: CGFloat = 8
static let locationHeight: CGFloat = 44
static let textFieldCornerRadius: CGFloat = 10
static let buttonWidth: CGFloat = 32
}

// MARK: URLBarButton
Expand Down Expand Up @@ -143,8 +142,9 @@ class TopToolbarView: UIView, ToolbarProtocol {
$0.setImage(UIImage(braveSystemNamed: "leo.product.bookmarks"), for: .normal)
$0.accessibilityLabel = Strings.bookmarksMenuItem
$0.addTarget(self, action: #selector(didClickBookmarkButton), for: .touchUpInside)
$0.contentEdgeInsets = .init(top: 4, left: 4, bottom: 4, right: 4)
$0.snp.makeConstraints {
$0.width.greaterThanOrEqualTo(UX.buttonWidth)
$0.size.greaterThanOrEqualTo(32)
}
}

Expand Down Expand Up @@ -188,7 +188,7 @@ class TopToolbarView: UIView, ToolbarProtocol {

private let shieldsRewardsStack = UIStackView().then {
$0.distribution = .fillEqually
$0.spacing = 0 // buttons contain padding
$0.spacing = 8
$0.setContentHuggingPriority(.required, for: .horizontal)
}

Expand Down Expand Up @@ -237,14 +237,15 @@ class TopToolbarView: UIView, ToolbarProtocol {
button.accessibilityLabel = Strings.bravePanel
button.imageView?.adjustsImageSizeForAccessibilityContentSizeCategory = true
button.accessibilityIdentifier = "urlBar-shieldsButton"
button.contentEdgeInsets = .init(top: 4, left: 5, bottom: 4, right: 5)
return button
}()

private(set) lazy var rewardsButton: RewardsButton = {
let button = RewardsButton()
button.addTarget(self, action: #selector(didTapBraveRewardsButton), for: .touchUpInside)
// Visual centering
button.contentEdgeInsets = .init(top: 1, left: 0, bottom: 1, right: 0)
button.contentEdgeInsets = .init(top: 4, left: 4, bottom: 6, right: 4)
return button
}()

Expand Down Expand Up @@ -378,17 +379,15 @@ class TopToolbarView: UIView, ToolbarProtocol {

private func updateForTraitCollection() {
let toolbarSizeCategory = traitCollection.toolbarButtonContentSizeCategory
let pointSize = UIFont.preferredFont(forTextStyle: .headline, compatibleWith: .init(preferredContentSizeCategory: toolbarSizeCategory)).lineHeight
let pointSize = UIFontMetrics(forTextStyle: .body).scaledValue(for: 28, compatibleWith: .init(preferredContentSizeCategory: toolbarSizeCategory))
shieldsButton.snp.remakeConstraints {
$0.width.greaterThanOrEqualTo(UX.buttonWidth)
$0.height.equalTo(pointSize)
$0.size.equalTo(pointSize)
}
rewardsButton.snp.remakeConstraints {
$0.width.greaterThanOrEqualTo(UX.buttonWidth)
$0.height.equalTo(pointSize)
$0.size.equalTo(pointSize)
}
let clampedTraitCollection = traitCollection.clampingSizeCategory(maximum: .accessibilityLarge)
locationTextField?.font = .preferredFont(forTextStyle: .subheadline, compatibleWith: clampedTraitCollection)
locationTextField?.font = .preferredFont(forTextStyle: .body, compatibleWith: clampedTraitCollection)
}

private func setupConstraints() {
Expand Down Expand Up @@ -416,7 +415,7 @@ class TopToolbarView: UIView, ToolbarProtocol {
override func layoutSubviews() {
super.layoutSubviews()
// Increase the inset of the main stack view if there's no additional space from safe areas
let horizontalInset: CGFloat = safeAreaInsets.left > 0 ? 0 : UX.locationPadding
let horizontalInset: CGFloat = safeAreaInsets.left > 0 ? 0 : 12
mainStackView.layoutMargins = .init(top: 0, left: horizontalInset, bottom: 0, right: horizontalInset)

locationContainer.layoutIfNeeded()
Expand Down Expand Up @@ -446,6 +445,11 @@ class TopToolbarView: UIView, ToolbarProtocol {
locationTextField?.backgroundColor = browserColors.containerBackground
locationTextField?.textColor = browserColors.textPrimary
locationTextField?.attributedPlaceholder = makePlaceholder(colors: browserColors)
for button in [qrCodeButton, voiceSearchButton] {
button.primaryTintColor = browserColors.iconDefault
button.disabledTintColor = browserColors.iconDisabled
button.selectedTintColor = browserColors.iconActive
}
}

/// Created whenever the location bar on top is selected
Expand Down