Night mode

CHANGELOG.md

@@ -5,21 +5,24 @@ Changelog for Critical Maps iOS
 ## [UNRELEASED]
 
 ### Added
+
 - Message Notification Bubble
 - Swiftformat to the build phases
 - Network activity indicator support
 - French localisation. Thanks Alban!
+- Night mode feature
 
 ### Updated
+
 - SDWebImage
 
 ### Fixed
+
 - Users can not send empty chat messages anymore.
 - A bug that prevented sending messages if another network request is active
 
 ## [3.0.0] - 2019-04-18
 
-
 ### Changed
 
 - Complete Redesign

CriticalMass/AppController.swift

@@ -9,7 +9,12 @@ import Foundation
 
 class AppController {
     init() {
+        onAppLaunch()
+    }
+
+    private func onAppLaunch() {
         loadInitialData()
+        themeController.applyTheme()
     }
 
     private let networkOperator: NetworkOperator = {
@@ -21,6 +26,8 @@ class AppController {
         return RequestManager(dataStore: MemoryDataStore(), locationProvider: LocationManager(), networkLayer: networkOperator, deviceId: deviceId.md5, url: Constants.apiEndpoint)
     }()
 
+    private let themeController = ThemeController()
+
     private lazy var chatManager: ChatManager = {
         ChatManager(requestManager: requestManager)
     }()
@@ -50,12 +57,11 @@ class AppController {
     }
 
     private func getSettingsViewController() -> SettingsViewController {
-        return SettingsViewController()
+        return SettingsViewController(themeController: themeController)
     }
 
     lazy var rootViewController: UIViewController = {
-        let rootViewController = MapViewController()
-
+        let rootViewController = MapViewController(themeController: self.themeController)
         let navigationOverlay = NavigationOverlayViewController(navigationItems: [
             .init(representation: .view(rootViewController.followMeButton), action: .none),
             .init(representation: .button(chatNavigationButtonController.button), action: .navigation(viewController: getSocialViewController)),

CriticalMass/ChatInputView.swift

@@ -12,37 +12,50 @@ protocol ChatInputDelegate: AnyObject {
 }
 
 class ChatInputView: UIView, UITextFieldDelegate {
+    @objc
+    dynamic var sendMessageButtonColor: UIColor? {
+        willSet {
+            button.setTitleColor(newValue, for: .normal)
+            button.setTitleColor(newValue?.withAlphaComponent(0.4), for: .disabled)
+            button.setTitleColor(newValue?.withAlphaComponent(0.4), for: .highlighted)
+        }
+    }
+
+    @objc
+    dynamic var textViewTextColor: UIColor? {
+        willSet {
+            textField.textColor = newValue
+        }
+    }
+
     weak var delegate: ChatInputDelegate?
 
     private let textField: UITextField = {
         let textField = TextFieldWithInsets()
+        textField.isOpaque = false
         textField.translatesAutoresizingMaskIntoConstraints = false
-        textField.backgroundColor = .chatInputTextfieldBackground
-        textField.attributedPlaceholder = NSAttributedString(string: NSLocalizedString("chat.placeholder", comment: ""), attributes: [.foregroundColor: UIColor.chatInputPlaceholder])
+        textField.placeholder = NSLocalizedString("chat.placeholder", comment: "")
         textField.insets = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16)
         textField.enablesReturnKeyAutomatically = true
         textField.returnKeyType = .send
         textField.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
+        textField.layer.masksToBounds = true
         return textField
     }()
 
     private let button: UIButton = {
         let button = UIButton()
         button.titleLabel?.textAlignment = .center
         button.setTitle(NSLocalizedString("chat.send", comment: ""), for: .normal)
-        button.setTitleColor(.chatInputSendButton, for: .normal)
-        button.setTitleColor(UIColor.chatInputSendButton.withAlphaComponent(0.4), for: .highlighted)
-        button.setTitleColor(UIColor.chatInputSendButton.withAlphaComponent(0.4), for: .disabled)
         button.translatesAutoresizingMaskIntoConstraints = false
         button.addTarget(self, action: #selector(didTapSendButton), for: .touchUpInside)
         button.isEnabled = false
         return button
     }()
 
-    private let separator: UIView = {
-        let view = UIView()
+    private let separator: SeperatorView = {
+        let view = SeperatorView()
         view.translatesAutoresizingMaskIntoConstraints = false
-        view.backgroundColor = .chatInputSeparator
         return view
     }()
 
@@ -57,7 +70,6 @@ class ChatInputView: UIView, UITextFieldDelegate {
     }
 
     private func commonInit() {
-        backgroundColor = .chatInputBackground
         addSubview(textField)
         addSubview(button)
         addSubview(separator)

CriticalMass/ChatMessageTableViewCell.swift

@@ -8,6 +8,20 @@
 import UIKit
 
 class ChatMessageTableViewCell: UITableViewCell, MessagesTableViewCell {
+    @objc
+    dynamic var timeLabelTextColor: UIColor? {
+        willSet {
+            timeLabel.textColor = newValue
+        }
+    }
+
+    @objc
+    dynamic var chatTextColor: UIColor? {
+        willSet {
+            chatTextView.textColor = newValue
+        }
+    }
+
     @IBOutlet private var timeLabel: UILabel!
     @IBOutlet private var chatTextView: UITextView! {
         didSet {
@@ -19,15 +33,12 @@ class ChatMessageTableViewCell: UITableViewCell, MessagesTableViewCell {
 
     override func awakeFromNib() {
         super.awakeFromNib()
-        timeLabel?.textColor = .chatMessageDate
-        chatTextView?.textColor = .chatMessageText
+        timeLabel?.textColor = .gray200
+        chatTextView?.textColor = .gray300
     }
 
     func setup(for message: ChatMessage) {
-        let date = Date(timeIntervalSince1970: message.timestamp)
-        let formatter = DateFormatter()
-        formatter.dateFormat = "HH:mm"
-        timeLabel?.text = formatter.string(from: date)
+        timeLabel?.text = FormatDisplay.hoursAndMinutesDateString(from: message)
         chatTextView?.text = message.decodedMessage
     }
 }

CriticalMass/ChatNavigationButton.swift

@@ -8,6 +8,20 @@
 import UIKit
 
 class ChatNavigationButton: CustomButton {
+    @objc
+    dynamic var unreadMessagesBackgroundColor: UIColor? {
+        willSet {
+            unreadLabel.backgroundColor = newValue
+        }
+    }
+
+    @objc
+    dynamic var unreadMessagesTextColor: UIColor? {
+        willSet {
+            unreadLabel.textColor = newValue
+        }
+    }
+
     private let unreadLabel = UILabel()
 
     public var unreadCount: UInt = 0 {
@@ -24,9 +38,7 @@ class ChatNavigationButton: CustomButton {
     init() {
         super.init(frame: .zero)
         setImage(UIImage(named: "Chat")!, for: .normal)
-        tintColor = .navigationOverlayForeground
         adjustsImageWhenHighlighted = false
-        highlightedTintColor = UIColor.navigationOverlayForeground.withAlphaComponent(0.4)
         accessibilityLabel = NSLocalizedString("chat.title", comment: "")
         configureUnreadBubble()
     }
@@ -36,8 +48,6 @@ class ChatNavigationButton: CustomButton {
     }
 
     private func configureUnreadBubble() {
-        unreadLabel.backgroundColor = .red
-        unreadLabel.textColor = .white
         unreadLabel.font = UIFont.systemFont(ofSize: 11, weight: .heavy)
         unreadLabel.layer.cornerRadius = 8
         unreadLabel.layer.masksToBounds = true

CriticalMass/Colors.swift

@@ -8,91 +8,55 @@
 import UIKit
 
 extension UIColor {
-    static var rulesDetailText: UIColor {
-        return UIColor(red: 69 / 255.0, green: 71 / 255.0, blue: 77 / 255.0, alpha: 1)
-    }
-
-    static var rulesOverViewCell: UIColor {
-        return UIColor(red: 38 / 255.0, green: 38 / 255.0, blue: 38 / 255.0, alpha: 1)
-    }
-
-    static var chatInputBackground: UIColor {
-        return UIColor(red: 250 / 255.0, green: 250 / 255.0, blue: 250 / 255.0, alpha: 1)
-    }
-
-    static var chatInputTextfieldBackground: UIColor {
-        return UIColor(red: 218 / 255.0, green: 220 / 255.0, blue: 224 / 255.0, alpha: 1)
-    }
-
-    static var chatInputSendButton: UIColor {
-        return UIColor(red: 38 / 255.0, green: 38 / 255.0, blue: 38 / 255.0, alpha: 1)
-    }
-
-    static var chatInputSeparator: UIColor {
-        return UIColor(red: 218 / 255.0, green: 220 / 255.0, blue: 224 / 255.0, alpha: 1)
-    }
-
-    static var chatInputPlaceholder: UIColor {
-        return UIColor(red: 69 / 255.0, green: 71 / 255.0, blue: 77 / 255.0, alpha: 1)
-    }
-
-    static var chatMessageDate: UIColor {
-        return UIColor(red: 38 / 255.0, green: 38 / 255.0, blue: 38 / 255.0, alpha: 1)
-    }
-
-    static var chatMessageText: UIColor {
-        return UIColor(red: 69 / 255.0, green: 71 / 255.0, blue: 77 / 255.0, alpha: 1)
-    }
-
     static var twitterProfileInnerBorder: UIColor {
         return UIColor(red: 55 / 255.0, green: 64 / 255.0, blue: 82 / 255.0, alpha: 0.18)
     }
 
-    static var twitterName: UIColor {
-        return UIColor(red: 38 / 255.0, green: 38 / 255.0, blue: 38 / 255.0, alpha: 1)
+    static var gray100: UIColor {
+        return UIColor(white: 26.0 / 255.0, alpha: 1.0)
     }
 
-    static var twitterUsername: UIColor {
-        return UIColor(red: 144 / 255.0, green: 147 / 255.0, blue: 153 / 255.0, alpha: 1)
+    static var gray200: UIColor {
+        return UIColor(white: 38.0 / 255.0, alpha: 1)
     }
 
-    static var gray400: UIColor {
-        return UIColor(red: 144 / 255.0, green: 147 / 255.0, blue: 153 / 255.0, alpha: 1)
+    static var gray300: UIColor {
+        return UIColor(red: 69.0 / 255.0, green: 71.0 / 255.0, blue: 77.0 / 255.0, alpha: 1.0)
     }
 
-    static var twitterText: UIColor {
-        return UIColor(red: 69 / 255.0, green: 71 / 255.0, blue: 77 / 255.0, alpha: 1)
+    static var gray400: UIColor {
+        return UIColor(red: 144 / 255.0, green: 147 / 255.0, blue: 153 / 255.0, alpha: 1)
     }
 
-    static var twitterDate: UIColor {
-        return UIColor(red: 38 / 255.0, green: 38 / 255.0, blue: 38 / 255.0, alpha: 1)
+    static var gray500: UIColor {
+        return UIColor(red: 218.0 / 255.0, green: 220.0 / 255.0, blue: 224.0 / 255.0, alpha: 1.0)
     }
 
-    static var gray200: UIColor {
-        return UIColor(red: 38 / 255.0, green: 38 / 255.0, blue: 38 / 255.0, alpha: 1)
+    static var settingsOpenSourceForeground: UIColor {
+        return UIColor(white: 26.0 / 255.0, alpha: 1)
     }
 
-    static var settingsForeground: UIColor {
-        return UIColor(red: 38 / 255.0, green: 38 / 255.0, blue: 38 / 255.0, alpha: 1)
+    static var navigationOverlayBackground: UIColor {
+        return UIColor(white: 1.0, alpha: 0.8)
     }
 
-    static var settingsOpenSourceForeground: UIColor {
-        return UIColor(red: 26 / 255.0, green: 26 / 255.0, blue: 26 / 255.0, alpha: 1)
+    static var yellow100: UIColor {
+        return UIColor(red: 255.0 / 255.0, green: 214.0 / 255.0, blue: 51.0 / 255.0, alpha: 1.0)
     }
 
-    static var navigationOverlayBackground: UIColor {
-        return UIColor(red: 255 / 255.0, green: 255 / 255.0, blue: 255 / 255.0, alpha: 0.8)
+    static var gray600: UIColor {
+        return UIColor(white: 250.0 / 255.0, alpha: 1.0)
     }
 
-    static var navigationOverlayForeground: UIColor {
-        return UIColor(red: 38 / 255.0, green: 38 / 255.0, blue: 38 / 255.0, alpha: 1)
+    static var lightThemeToolBarBackgroundColor: UIColor {
+        return gray600
     }
 
-    static var navigationOverlaySeparator: UIColor {
-        return UIColor(white: 0.0, alpha: 0.1)
+    static var lightThemeNavigationOverlaySeperatorColor: UIColor {
+        return UIColor(red: 220.0 / 255.0, green: 224.0 / 255.0, blue: 216.0 / 255.0, alpha: 1.00)
     }
 
-    static var socialTabControlTintColor: UIColor {
-        return .black
+    static var darkThemeNavigationOverlaySeperatorColor: UIColor {
+        return UIColor(white: 57.0 / 255.0, alpha: 1.00)
     }
 }

CriticalMass/CriticalMaps-Info.plist

@@ -56,5 +56,7 @@
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
 	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<true/>
 </dict>
 </plist>

CriticalMass/CustomButton.swift

@@ -8,20 +8,18 @@
 import UIKit
 
 class CustomButton: UIButton {
-    public var highlightedTintColor: UIColor?
-    private var defaultTintColor: UIColor?
+    @objc
+    public dynamic var highlightedTintColor: UIColor!
+    @objc
+    public dynamic var defaultTintColor: UIColor! {
+        willSet {
+            tintColor = newValue
+        }
+    }
 
     override var isHighlighted: Bool {
         didSet {
-            if let highlightedTintColor = highlightedTintColor, isHighlighted {
-                if defaultTintColor == nil {
-                    defaultTintColor = tintColor
-                }
-                tintColor = highlightedTintColor
-            } else if let defaultTintColor = defaultTintColor {
-                tintColor = defaultTintColor
-                self.defaultTintColor = nil
-            }
+            tintColor = isHighlighted ? highlightedTintColor : defaultTintColor
         }
     }
 }

CriticalMass/DarkMapOverlay.swift

@@ -0,0 +1,21 @@
+//
+//  DarkMapOverlay.swift
+//  CriticalMaps
+//
+//  Created by Malte Bünz on 11.04.19.
+//  Copyright © 2019 Pokus Labs. All rights reserved.
+//
+
+import MapKit
+
+class DarkModeMapOverlay: MKTileOverlay {
+    init() {
+        super.init(urlTemplate: nil)
+        canReplaceMapContent = true
+    }
+
+    override func url(forTilePath path: MKTileOverlayPath) -> URL {
+        let tileUrl = "https://a.basemaps.cartocdn.com/dark_all/\(path.z)/\(path.x)/\(path.y).png"
+        return URL(string: tileUrl)!
+    }
+}

CriticalMass/FormatDisplay.swift

@@ -37,4 +37,11 @@ enum FormatDisplay {
         formatter.maximumUnitCount = 1
         return formatter.string(from: components)
     }
+
+    static func hoursAndMinutesDateString(from message: ChatMessage) -> String {
+        let date = Date(timeIntervalSince1970: message.timestamp)
+        let formatter = DateFormatter()
+        formatter.dateFormat = "HH:mm"
+        return formatter.string(from: date)
+    }
 }