Changed sync toolbar UI to make errors more prominent (#1276)

Author: michalrentka

Zotero/Scenes/General/Views/SyncToolbarController.swift

@@ -12,6 +12,31 @@ import CocoaLumberjackSwift
 import RxSwift
 
 final class SyncToolbarController {
+    private enum WarningLevel {
+        case medium
+        case critical
+
+        init?(errorCount: Int) {
+            if errorCount >= 10 {
+                self = .critical
+            } else if errorCount >= 5 {
+                self = .medium
+            } else {
+                return nil
+            }
+        }
+
+        var color: UIColor {
+            switch self {
+            case .medium:
+                return .systemYellow
+
+            case .critical:
+                return .systemRed
+            }
+        }
+    }
+
     private static let finishVisibilityTime: RxTimeInterval = .seconds(4)
     private unowned let viewController: UIViewController
     private unowned let dbStorage: DbStorage
@@ -21,6 +46,7 @@ final class SyncToolbarController {
     private var toolbarBottom: NSLayoutConstraint!
     private var pendingErrors: [Error]?
     private var timerDisposeBag: DisposeBag
+    private var consecutiveErrorCount = 0
     private var toolbarIsHidden: Bool {
         return toolbarBottom.constant != 0
     }
@@ -54,7 +80,7 @@ final class SyncToolbarController {
             toolbarBottom = bottom
 
             NSLayoutConstraint.activate([
-                toolbar.heightAnchor.constraint(equalToConstant: 45),
+                toolbar.heightAnchor.constraint(equalToConstant: 50),
                 toolbar.leadingAnchor.constraint(equalTo: parent.view.leadingAnchor),
                 toolbar.trailingAnchor.constraint(equalTo: parent.view.trailingAnchor),
                 bottom
@@ -80,6 +106,7 @@ final class SyncToolbarController {
                 }
 
             default:
+                consecutiveErrorCount += 1
                 pendingErrors = [error]
                 if toolbarIsHidden {
                     setToolbar(hidden: false, animated: true)
@@ -89,6 +116,7 @@ final class SyncToolbarController {
 
         case .finished(let errors):
             if errors.isEmpty {
+                consecutiveErrorCount = 0
                 pendingErrors = nil
                 timerDisposeBag = DisposeBag()
                 if !toolbarIsHidden {
@@ -97,6 +125,7 @@ final class SyncToolbarController {
                 return
             }
 
+            consecutiveErrorCount += 1
             pendingErrors = errors
             if toolbarIsHidden {
                 setToolbar(hidden: false, animated: true)
@@ -299,20 +328,48 @@ final class SyncToolbarController {
     }
 
     private func set(progress: SyncProgress) {
-        let item = UIBarButtonItem(customView: toolbarView(with: text(for: progress)))
+        let item = UIBarButtonItem(customView: toolbarView(with: text(for: progress), warningLevel: .init(errorCount: consecutiveErrorCount)))
         toolbar.setItems([item], animated: false)
     }
 
-    private func toolbarView(with text: String) -> UIView {
+    private func toolbarView(with text: String, warningLevel: WarningLevel? = nil) -> UIView {
         let textColor: UIColor = viewController.traitCollection.userInterfaceStyle == .light ? .black : .white
-        let button = UIButton(frame: UIScreen.main.bounds)
-        button.titleLabel?.font = .preferredFont(forTextStyle: .footnote)
+
+        var configuration = UIButton.Configuration.plain()
+        configuration.title = text
+        configuration.titleLineBreakMode = .byWordWrapping
+        configuration.baseForegroundColor = textColor
+
+        let titleFont: UIFont
+        if let warningLevel {
+            let symbolConfig = UIImage.SymbolConfiguration(pointSize: 20, weight: .medium)
+            configuration.image = UIImage(systemName: "exclamationmark.triangle", withConfiguration: symbolConfig)
+            configuration.imagePlacement = .leading
+            configuration.imagePadding = 6
+            configuration.imageColorTransformer = UIConfigurationColorTransformer { _ in warningLevel.color }
+
+            switch warningLevel {
+            case .critical:
+                let footnoteDescriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .footnote)
+                titleFont = .systemFont(ofSize: footnoteDescriptor.pointSize, weight: .medium)
+
+            case .medium:
+                titleFont = .preferredFont(forTextStyle: .footnote)
+            }
+        } else {
+            titleFont = .preferredFont(forTextStyle: .footnote)
+        }
+
+        configuration.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { container in
+            var container = container
+            container.font = titleFont
+            return container
+        }
+
+        let button = UIButton(configuration: configuration)
+        button.frame = UIScreen.main.bounds
         button.titleLabel?.adjustsFontSizeToFitWidth = true
         button.titleLabel?.numberOfLines = 2
-        button.setTitleColor(textColor, for: .normal)
-        button.contentHorizontalAlignment = .center
-        button.contentVerticalAlignment = .center
-        button.setTitle(text, for: .normal)
 
         button
             .rx