From d95934218010b38132f9c07c1d9deb8664588cf4 Mon Sep 17 00:00:00 2001 From: James Magahern Date: Mon, 14 Jun 2021 16:32:51 -0700 Subject: [PATCH] Some appearance tweaks --- App/Common UI/ReliefButton.swift | 13 +++++------ App/Common UI/SegmentedReliefButton.swift | 24 ++++++++++++++------- App/Titlebar and URL Bar/TitlebarView.swift | 10 +++++++++ App/Titlebar and URL Bar/ToolbarView.swift | 15 ++++++++++--- App/Titlebar and URL Bar/URLBar.swift | 2 +- 5 files changed, 46 insertions(+), 18 deletions(-) diff --git a/App/Common UI/ReliefButton.swift b/App/Common UI/ReliefButton.swift index 8d44ae3..90f0ada 100644 --- a/App/Common UI/ReliefButton.swift +++ b/App/Common UI/ReliefButton.swift @@ -11,12 +11,12 @@ class ReliefButton: UIButton { public var constrainedToSquare = true + internal var cornerRadius = CGFloat(8.0) { didSet { setNeedsLayout() } } internal let shadowView = UIView(frame: .zero) internal let backgroundView = GradientView(direction: .vertical, colors: ReliefButton.gradientColors(inverted: false, darkMode: false)) static let padding = CGFloat(24.0) - static let cornerRadius = CGFloat(6.0) - static let borderWidth = CGFloat(1.0) + static let borderWidth = CGFloat(1.0 / UIScreen.main.scale) override var isHighlighted: Bool { get { @@ -53,14 +53,12 @@ class ReliefButton: UIButton shadowView.layer.shadowOffset = CGSize(width: 0.0, height: 1.0) shadowView.layer.shadowRadius = 1.0 shadowView.layer.shadowOpacity = 1.0 - shadowView.layer.cornerRadius = Self.cornerRadius shadowView.layer.masksToBounds = false shadowView.layer.shouldRasterize = true shadowView.layer.rasterizationScale = UIScreen.main.scale shadowView.layer.cornerCurve = .continuous addSubview(shadowView) - backgroundView.layer.cornerRadius = Self.cornerRadius backgroundView.isUserInteractionEnabled = false backgroundView.layer.masksToBounds = true backgroundView.layer.borderWidth = Self.borderWidth @@ -85,7 +83,7 @@ class ReliefButton: UIButton if darkMode { if !inverted { return [ - UIColor(white: 0.30, alpha: 1.0), + UIColor(white: 0.20, alpha: 1.0), UIColor(white: 0.10, alpha: 1.0) ] } else { @@ -159,7 +157,10 @@ class ReliefButton: UIButton shadowView.frame = backgroundView.frame - let shadowPath = UIBezierPath(roundedRect: shadowView.bounds, cornerRadius: Self.cornerRadius) + let shadowPath = UIBezierPath(roundedRect: shadowView.bounds, cornerRadius: cornerRadius) shadowView.layer.shadowPath = shadowPath.cgPath + + backgroundView.layer.cornerRadius = cornerRadius + shadowView.layer.cornerRadius = cornerRadius } } diff --git a/App/Common UI/SegmentedReliefButton.swift b/App/Common UI/SegmentedReliefButton.swift index a12c694..58613a5 100644 --- a/App/Common UI/SegmentedReliefButton.swift +++ b/App/Common UI/SegmentedReliefButton.swift @@ -27,7 +27,8 @@ class SegmentedReliefButton: ReliefButton self.children = children backgroundsContainerView.clipsToBounds = true - backgroundsContainerView.layer.cornerRadius = Self.cornerRadius - Self.borderWidth + backgroundsContainerView.layer.cornerRadius = self.cornerRadius + Self.borderWidth + 1.0 + backgroundsContainerView.layer.cornerCurve = .continuous constrainedToSquare = false @@ -49,7 +50,7 @@ class SegmentedReliefButton: ReliefButton return result + button.sizeThatFits(size).width } - return CGSize(width: width, height: ourSize.height) + return CGSize(width: width + (2 * Self.borderWidth), height: ourSize.height) } override func setBackgroundInverted(_ inverted: Bool) { @@ -66,18 +67,25 @@ class SegmentedReliefButton: ReliefButton childrenHighlighObservations.removeAll() backgroundsContainerView.subviews.forEach { $0.removeFromSuperview() } + let paddedSize = CGSize( + width: bounds.size.width - (Self.borderWidth * 2.0), + height: bounds.size.height - (Self.borderWidth * 2.0) + ) + let darkMode = self.traitCollection.userInterfaceStyle == .dark - var buttonRect = CGRect(origin: .zero, size: CGSize(width: 0, height: bounds.height)) + var buttonXOffset = CGFloat(Self.borderWidth) for (i, child) in children.enumerated() { child.shadowView.isHidden = true child.backgroundView.isHidden = true bringSubviewToFront(child) - let childSize = child.sizeThatFits(bounds.size) - buttonRect.size = CGSize(width: childSize.width, height: bounds.height) - child.frame = buttonRect + let childSize = child.sizeThatFits(paddedSize) + child.frame = CGRect( + origin: CGPoint(x: buttonXOffset, y: Self.borderWidth), + size: CGSize(width: childSize.width, height: paddedSize.height) + ) - buttonRect.origin.x += buttonRect.width + buttonXOffset += child.frame.width // Background let backgroundView = GradientView(direction: .vertical, colors: Self.gradientColors(inverted: false, darkMode: darkMode)) @@ -92,7 +100,7 @@ class SegmentedReliefButton: ReliefButton let separatorView = UIView(frame: CGRect( x: child.frame.maxX, y: 0, - width: 1.0, + width: 1.0 / UIScreen.main.scale, height: bounds.height )) separatorView.backgroundColor = .systemFill diff --git a/App/Titlebar and URL Bar/TitlebarView.swift b/App/Titlebar and URL Bar/TitlebarView.swift index 3c14491..3f1d36e 100644 --- a/App/Titlebar and URL Bar/TitlebarView.swift +++ b/App/Titlebar and URL Bar/TitlebarView.swift @@ -6,6 +6,7 @@ // import UIKit +import QuartzCore_Private class TitlebarView: UIView { @@ -15,10 +16,16 @@ class TitlebarView: UIView UIColor(red: 0.153, green: 0.000, blue: 0.153, alpha: 1.0) ]) + private let separatorView = UIView(frame: .zero) + convenience init() { self.init(frame: .zero) addSubview(backgroundView) addSubview(titleLabelView) + addSubview(separatorView) + + separatorView.backgroundColor = UIColor(white: 1.0, alpha: 0.20) + separatorView.layer.compositingFilter = kCAFilterPlusL titleLabelView.textColor = .white titleLabelView.layer.shadowColor = UIColor.black.cgColor @@ -61,5 +68,8 @@ class TitlebarView: UIView backgroundView.frame = bounds titleLabelView.frame = bounds.avoiding(verticalInsets: safeAreaInsets).insetBy(dx: 8.0 + layoutMargins.left, dy: 0.0) + + let separatorHeight = 1.0 / UIScreen.main.scale + separatorView.frame = CGRect(x: 0, y: bounds.height - separatorHeight, width: bounds.width, height: separatorHeight) } } diff --git a/App/Titlebar and URL Bar/ToolbarView.swift b/App/Titlebar and URL Bar/ToolbarView.swift index 7f4ee1e..f5897ad 100644 --- a/App/Titlebar and URL Bar/ToolbarView.swift +++ b/App/Titlebar and URL Bar/ToolbarView.swift @@ -14,7 +14,16 @@ class ToolbarView: UIView var cancelButtonVisible: Bool = false { didSet { layoutSubviews() } } let containerView = UIView(frame: .zero) - let backgroundView = GradientView(direction: .vertical, colors: [.tertiarySystemGroupedBackground, .secondarySystemGroupedBackground]) + let backgroundView = GradientView(direction: .vertical, colors: [ + .init(dynamicProvider: { traits in + if traits.userInterfaceStyle == .dark { + return UIColor(white: 0.15, alpha: 1.0) + } else { + return UIColor.tertiarySystemGroupedBackground + } + }), + .secondarySystemGroupedBackground + ]) let cancelButton = UIButton(type: .system) let leadingButtonsView = ToolbarButtonContainerView(frame: .zero) @@ -34,9 +43,9 @@ class ToolbarView: UIView layer.masksToBounds = false layer.shadowColor = UIColor.black.cgColor - layer.shadowOpacity = 0.2 + layer.shadowOpacity = 0.3 layer.shadowOffset = CGSize(width: 0.0, height: 1.0) - layer.shadowRadius = 1.5 + layer.shadowRadius = 1.8 } override func sizeThatFits(_ size: CGSize) -> CGSize diff --git a/App/Titlebar and URL Bar/URLBar.swift b/App/Titlebar and URL Bar/URLBar.swift index 80e837e..00ee93f 100644 --- a/App/Titlebar and URL Bar/URLBar.swift +++ b/App/Titlebar and URL Bar/URLBar.swift @@ -49,7 +49,7 @@ class URLBar: ReliefButton private let progressIndicatorView = ProgressIndicatorView() private var progressIndicatorAnimating = false - private let documentImage = UIImage(systemName: "filemenu.and.selection") + private let documentImage = UIImage(systemName: "ellipsis.circle") private let refreshImage = UIImage(systemName: "arrow.clockwise") private let stopImage = UIImage(systemName: "xmark")