Working on radar legend view

4ac66174 · Dmitriy Stepanets · 4bad4c86 · 4ac66174 · 4ac66174 · 4ac66174
Commit 4ac66174 authored Apr 12, 2021 by Dmitriy Stepanets
10 changed files
--- a/1Weather.xcodeproj/project.pbxproj
+++ b/1Weather.xcodeproj/project.pbxproj
@@ -26,6 +26,7 @@
 		CD17C5FB25D15B6B00EE884E /* AppCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD17C5FA25D15B6B00EE884E /* AppCoordinator.swift */; };
 		CD17C5FF25D15B7C00EE884E /* TodayCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD17C5FE25D15B7C00EE884E /* TodayCoordinator.swift */; };
 		CD17C60225D15C8500EE884E /* CoordinatorProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD17C60125D15C8500EE884E /* CoordinatorProtocol.swift */; };
+		CD18728B2624763000AFEDAA /* MapLegendView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD18728A2624763000AFEDAA /* MapLegendView.swift */; };
 		CD1DDD30260218AE00AC62B2 /* DaysControlView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD1DDD2F260218AE00AC62B2 /* DaysControlView.swift */; };
 		CD1DDD332602305200AC62B2 /* ForecastInfoCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD1DDD322602305200AC62B2 /* ForecastInfoCell.swift */; };
 		CD251ED82603633800ED7A65 /* ForecastPrecipitationCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD251ED72603633800ED7A65 /* ForecastPrecipitationCell.swift */; };
@@ -75,6 +76,7 @@
 		CD71709025FA317700A63C27 /* ForecastTimePeriodView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD71708F25FA317700A63C27 /* ForecastTimePeriodView.swift */; };
 		CD7BF15526203E6900A30DF5 /* RadarViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD7BF15426203E6900A30DF5 /* RadarViewController.swift */; };
 		CD7BF1582620410800A30DF5 /* RadarCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD7BF1572620410800A30DF5 /* RadarCoordinator.swift */; };
+		CD7F3ABD262443260041C478 /* MapPinnedLayersView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD7F3ABC262443260041C478 /* MapPinnedLayersView.swift */; };
 		CD80917B2578E4A8003541A4 /* UIViewController+Alert.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD80917A2578E4A8003541A4 /* UIViewController+Alert.swift */; };
 		CD822FF525D6817000A05501 /* TodayForecastCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD822FF425D6817000A05501 /* TodayForecastCell.swift */; };
 		CD822FFA25D6890900A05501 /* OneWeatherColorsAsset.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = CD822FF925D6890900A05501 /* OneWeatherColorsAsset.xcassets */; };
@@ -124,7 +126,7 @@
 		CDF4808F261727E00076E9F5 /* CLAuthorizationStatus+Localized.swift in Sources */ = {isa = PBXBuildFile; fileRef = CDF4808E261727E00076E9F5 /* CLAuthorizationStatus+Localized.swift */; };
 		CDF48092261729680076E9F5 /* UIApplication+Settings.swift in Sources */ = {isa = PBXBuildFile; fileRef = CDF48091261729680076E9F5 /* UIApplication+Settings.swift */; };
 		CDF8F12A262089A200DB384A /* MapTimeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CDF8F129262089A200DB384A /* MapTimeView.swift */; };
-		CDF8F12D26208E7B00DB384A /* CurrentTimeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CDF8F12C26208E7B00DB384A /* CurrentTimeView.swift */; };
+		CDF8F12D26208E7B00DB384A /* MapCurrentTimeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CDF8F12C26208E7B00DB384A /* MapCurrentTimeView.swift */; };
 		CDF9BF8E26133D050037847D /* LocationSearchCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = CDF9BF8D26133D050037847D /* LocationSearchCoordinator.swift */; };
 		CE28474F26159857006C8DC5 /* HealthSource.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE28474E26159857006C8DC5 /* HealthSource.swift */; };
 		CE28475226159A32006C8DC5 /* BlendHealthModels.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE28475126159A32006C8DC5 /* BlendHealthModels.swift */; };
@@ -216,6 +218,7 @@
 		CD17C5FA25D15B6B00EE884E /* AppCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppCoordinator.swift; sourceTree = "<group>"; };
 		CD17C5FE25D15B7C00EE884E /* TodayCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TodayCoordinator.swift; sourceTree = "<group>"; };
 		CD17C60125D15C8500EE884E /* CoordinatorProtocol.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = CoordinatorProtocol.swift; sourceTree = "<group>"; };
+		CD18728A2624763000AFEDAA /* MapLegendView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapLegendView.swift; sourceTree = "<group>"; };
 		CD1DDD2F260218AE00AC62B2 /* DaysControlView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DaysControlView.swift; sourceTree = "<group>"; };
 		CD1DDD322602305200AC62B2 /* ForecastInfoCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ForecastInfoCell.swift; sourceTree = "<group>"; };
 		CD251ED72603633800ED7A65 /* ForecastPrecipitationCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ForecastPrecipitationCell.swift; sourceTree = "<group>"; };
@@ -265,6 +268,7 @@
 		CD71708F25FA317700A63C27 /* ForecastTimePeriodView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ForecastTimePeriodView.swift; sourceTree = "<group>"; };
 		CD7BF15426203E6900A30DF5 /* RadarViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadarViewController.swift; sourceTree = "<group>"; };
 		CD7BF1572620410800A30DF5 /* RadarCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadarCoordinator.swift; sourceTree = "<group>"; };
+		CD7F3ABC262443260041C478 /* MapPinnedLayersView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapPinnedLayersView.swift; sourceTree = "<group>"; };
 		CD80917A2578E4A8003541A4 /* UIViewController+Alert.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIViewController+Alert.swift"; sourceTree = "<group>"; };
 		CD822FF425D6817000A05501 /* TodayForecastCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TodayForecastCell.swift; sourceTree = "<group>"; };
 		CD822FF925D6890900A05501 /* OneWeatherColorsAsset.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = OneWeatherColorsAsset.xcassets; sourceTree = "<group>"; };
@@ -314,7 +318,7 @@
 		CDF4808E261727E00076E9F5 /* CLAuthorizationStatus+Localized.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "CLAuthorizationStatus+Localized.swift"; sourceTree = "<group>"; };
 		CDF48091261729680076E9F5 /* UIApplication+Settings.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIApplication+Settings.swift"; sourceTree = "<group>"; };
 		CDF8F129262089A200DB384A /* MapTimeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapTimeView.swift; sourceTree = "<group>"; };
-		CDF8F12C26208E7B00DB384A /* CurrentTimeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CurrentTimeView.swift; sourceTree = "<group>"; };
+		CDF8F12C26208E7B00DB384A /* MapCurrentTimeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapCurrentTimeView.swift; sourceTree = "<group>"; };
 		CDF9BF8D26133D050037847D /* LocationSearchCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LocationSearchCoordinator.swift; sourceTree = "<group>"; };
 		CE28474E26159857006C8DC5 /* HealthSource.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HealthSource.swift; sourceTree = "<group>"; };
 		CE28475126159A32006C8DC5 /* BlendHealthModels.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BlendHealthModels.swift; sourceTree = "<group>"; };
@@ -741,6 +745,7 @@
 			isa = PBXGroup;
 			children = (
 				CDAD97B0262042B2007FCFB1 /* MapButton.swift */,
+				CD18728A2624763000AFEDAA /* MapLegendView.swift */,
 			);
 			path = Controls;
 			sourceTree = "<group>";
@@ -750,7 +755,8 @@
 			children = (
 				CDAD97B326207D14007FCFB1 /* MapTimeControlView.swift */,
 				CDF8F129262089A200DB384A /* MapTimeView.swift */,
-				CDF8F12C26208E7B00DB384A /* CurrentTimeView.swift */,
+				CDF8F12C26208E7B00DB384A /* MapCurrentTimeView.swift */,
+				CD7F3ABC262443260041C478 /* MapPinnedLayersView.swift */,
 			);
 			path = MapTimeControl;
 			sourceTree = "<group>";
@@ -1241,6 +1247,7 @@
 				CEAFF08C25DFC6BD00DF4EBF /* DailyWeather.swift in Sources */,
 				CEDE4F0B25EFA3A7007457E9 /* UpdatableModelObject.swift in Sources */,
 				CE8962A626175DF500CA274A /* _CoreHealth.swift in Sources */,
+				CD18728B2624763000AFEDAA /* MapLegendView.swift in Sources */,
 				CE28475226159A32006C8DC5 /* BlendHealthModels.swift in Sources */,
 				87C171EE25FF79CC00DA3464 /* AdConfigManager.swift in Sources */,
 				CE8962A926175DF500CA274A /* _CoreDailyWeather.swift in Sources */,
@@ -1334,6 +1341,7 @@
 				CD593BD32608BC3F00C93428 /* ForecastDayCell.swift in Sources */,
 				CD4742D0261200500061AC95 /* TodayAlertCell.swift in Sources */,
 				CD15DB4225DA806C00024727 /* TodayForecastTimePeriodCell.swift in Sources */,
+				CD7F3ABD262443260041C478 /* MapPinnedLayersView.swift in Sources */,
 				CE8962AB26175DF500CA274A /* CorePollutant.swift in Sources */,
 				CEC5276025E92DDA00DA58A5 /* WdtHourlySummary.swift in Sources */,
 				CDE18DCA25D165F100C80ED9 /* UITabBarController+Append.swift in Sources */,
@@ -1370,7 +1378,7 @@
 				CD37D3EB260DD30F002669D6 /* Settings.swift in Sources */,
 				CD17C5F625D15B4400EE884E /* TodayViewController.swift in Sources */,
 				CD86245E25E646350097F3FB /* SunUvView.swift in Sources */,
-				CDF8F12D26208E7B00DB384A /* CurrentTimeView.swift in Sources */,
+				CDF8F12D26208E7B00DB384A /* MapCurrentTimeView.swift in Sources */,
 				CEAFF08325DFC67F00DF4EBF /* Location.swift in Sources */,
 				87C171EC25FF79CC00DA3464 /* EnvironmentManager.swift in Sources */,
 				CEFB857226174F7A00C5CDD2 /* Storage.swift in Sources */,

--- a/1Weather/Resources/Assets.xcassets/pin.imageset/Contents.json
+++ b/1Weather/Resources/Assets.xcassets/pin.imageset/Contents.json
+{
+  "images" : [
+    {
+      "filename" : "pin.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "template"
+  }
+}
--- a/1Weather/Resources/Assets.xcassets/pin.imageset/pin.pdf
+++ b/1Weather/Resources/Assets.xcassets/pin.imageset/pin.pdf
--- a/1Weather/Resources/en.lproj/Localizable.strings
+++ b/1Weather/Resources/en.lproj/Localizable.strings
@@ -10,6 +10,7 @@
 "general.close" = "close";
 "general.more" = "more";
 "general.search" = "search";
+"general.add" = "add";
 //Forecast
 "forecast.sunny" = "Sunny";
@@ -95,7 +96,6 @@
 "tabBar.menu" = "menu";
 // Search
-"search.add" = "add";
 "search.popularCities" = "Popular cities";
 "search.title" = "Search location";
 "search.savedCities" = "saved cities";

--- a/1Weather/UI/View controllers/Locations/Cells/CityCell.swift
+++ b/1Weather/UI/View controllers/Locations/Cells/CityCell.swift
@@ -145,7 +145,7 @@ private extension CityCell {
    func prepareAddButton() {
        addButton.isHidden = false
-        addButton.setTitle("+ \("search.add".localized().uppercased())", for: .normal)
+        addButton.setTitle("+ \("general.add".localized().uppercased())", for: .normal)
        addButton.titleLabel?.font = AppFont.SFPro.regular(size: 12)
        addButton.setTitleColor(.white, for: .normal)
        addButton.backgroundColor = ThemeManager.currentTheme.graphTintColor

--- a/1Weather/UI/View controllers/Radar/Controls/MapLegendView.swift
+++ b/1Weather/UI/View controllers/Radar/Controls/MapLegendView.swift
+//
+//  MapLegendView.swift
+//  1Weather
+//
+//  Created by Dmitry Stepanets on 12.04.2021.
+//
+import UIKit
+class MapLegendView: UIView {
+    //Private
+    private let kPrecipitationColors = [UIColor(hex: 0x9c57fa).cgColor,
+                                        UIColor(hex: 0x5ef0e8).withAlphaComponent(0.8).cgColor,
+                                        UIColor(hex: 0x4ebaf6).cgColor]
+    private let button = UIButton()
+    private let viewGradient = CAGradientLayer()
+    private let buttonGradient = CAGradientLayer()
+    private let legendGradient = CAGradientLayer()
+    private let legendLabels = [UILabel]()
+    private var isOpened = false
+    init() {
+        super.init(frame: .zero)
+        prepareView()
+        prepareViewGradient()
+        prepareButton()
+        updateUI()
+    }
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        self.layer.cornerRadius = (self.frame.height / 2).rounded()
+        self.buttonGradient.frame = self.button.bounds
+        self.buttonGradient.cornerRadius = self.button.layer.cornerRadius
+    }
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+        updateUI()
+    }
+    private func updateUI() {
+        switch interfaceStyle {
+        case .light:
+            self.viewGradient.opacity = 0
+            self.backgroundColor = ThemeManager.currentTheme.mapControlsColor.withAlphaComponent(0.8)
+        case .dark:
+            self.viewGradient.opacity = 0.8
+            self.backgroundColor = .clear
+        }
+    }
+    @objc private func handleButton() {
+        if isOpened {
+        }
+        else {
+        }
+    }
+}
+//MARK:- Prepare
+private extension MapLegendView {
+    func prepareView() {
+        self.clipsToBounds = false
+        layer.shadowColor = UIColor.black.withAlphaComponent(0.3).cgColor
+        layer.shadowOffset = .init(width: 0, height: 3)
+        layer.shadowOpacity = 1
+        layer.shadowRadius = 5
+    }
+    func prepareViewGradient() {
+        viewGradient.startPoint = .init(x: 0.5, y: 0)
+        viewGradient.endPoint = .init(x: 0.5, y: 1)
+        viewGradient.colors = [UIColor(hex: 0x49494d).cgColor, UIColor(hex: 0x29292d).cgColor]
+        viewGradient.opacity = 0.8
+        layer.insertSublayer(viewGradient, at: 0)
+    }
+    func prepareButton() {
+        buttonGradient.colors = self.kPrecipitationColors
+        buttonGradient.startPoint = .init(x: 0, y: 0.5)
+        buttonGradient.endPoint = .init(x: 1, y: 0.5)
+        button.layer.cornerRadius = 14
+        button.addTarget(self, action: #selector(handleButton), for: .touchUpInside)
+        button.layer.insertSublayer(buttonGradient, below: button.imageView?.layer)
+        addSubview(button)
+        button.snp.makeConstraints { (make) in
+            make.width.height.equalTo(28)
+            make.left.equalToSuperview().inset(6)
+            make.centerY.equalToSuperview()
+        }
+    }
+}
--- a/1Weather/UI/View controllers/Radar/MapTimeControl/CurrentTimeView.swift
+++ b/1Weather/UI/View controllers/Radar/MapTimeControl/CurrentTimeView.swift
 //
-//  CurrentTimeView.swift
+//  MapCurrentTimeView.swift
 //  1Weather
 //
 //  Created by Dmitry Stepanets on 09.04.2021.
@@ -7,9 +7,9 @@
 import UIKit
-class CurrentTimeView: UIView {
+class MapCurrentTimeView: UIView {
    private let imageView = UIImageView()
-    private let tempLabel = UILabel()
+    private let valueLabel = UILabel()
    private let timeLabel = UILabel()
    init() {
@@ -26,7 +26,7 @@ class CurrentTimeView: UIView {
 }
 //MARK:- Prepare
-private extension CurrentTimeView {
+private extension MapCurrentTimeView {
    func prepareView() {
        self.backgroundColor = .clear
    }
@@ -43,11 +43,11 @@ private extension CurrentTimeView {
    }
    func prepareLabels() {
-        tempLabel.font = AppFont.SFPro.bold(size: 14)
+        valueLabel.font = AppFont.SFPro.bold(size: 14)
-        tempLabel.textColor = .white
+        valueLabel.textColor = .white
-        tempLabel.text = "49°"
+        valueLabel.text = "49°"
-        tempLabel.setContentHuggingPriority(.fittingSizeLevel, for: .vertical)
+        valueLabel.setContentHuggingPriority(.fittingSizeLevel, for: .vertical)
-        addSubview(tempLabel)
+        addSubview(valueLabel)
        timeLabel.font = AppFont.SFPro.bold(size: 10)
        timeLabel.textColor = .white
@@ -55,13 +55,13 @@ private extension CurrentTimeView {
        addSubview(timeLabel)
        //Constraints
-        tempLabel.snp.makeConstraints { (make) in
+        valueLabel.snp.makeConstraints { (make) in
            make.top.equalToSuperview().inset(4)
            make.centerX.equalToSuperview()
        }
        timeLabel.snp.makeConstraints { (make) in
-            make.top.equalTo(tempLabel.snp.bottom)
+            make.top.equalTo(valueLabel.snp.bottom)
            make.left.right.equalToSuperview().inset(4)
            make.bottom.equalToSuperview().inset(9)
        }

--- a/1Weather/UI/View controllers/Radar/MapTimeControl/MapPinnedLayersView.swift
+++ b/1Weather/UI/View controllers/Radar/MapTimeControl/MapPinnedLayersView.swift
+//
+//  MapPinnedLayersView.swift
+//  1Weather
+//
+//  Created by Dmitry Stepanets on 12.04.2021.
+//
+import UIKit
+class MapPinnedLayersView: UIView {
+    //Private
+    private let pinContainer = UIView()
+    private let pinImageView = UIImageView()
+    private let scrollView = UIScrollView()
+    private let stackView = UIStackView()
+    init() {
+        super.init(frame: .zero)
+        preparePin()
+        prepareScrollView()
+        prepareStackView()
+        updateUI()
+        for index in  0..<6 {
+            let button = PinnedlLayerButton(name: "Temperature")
+            button.isSelected = index == 0
+            if index == 5 {
+                button.configureForAdd()
+            }
+            stackView.addArrangedSubview(button)
+        }
+        stackView.layoutIfNeeded()
+    }
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+        updateUI()
+    }
+    private func updateUI() {
+        self.backgroundColor = ThemeManager.currentTheme.containerBackgroundColor
+    }
+}
+//MARK:- Prepare Pinned Layers
+private extension MapPinnedLayersView {
+    func preparePin() {
+        pinContainer.backgroundColor = ThemeManager.currentTheme.graphTintColor
+        pinContainer.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMaxXMaxYCorner]
+        pinContainer.layer.cornerRadius = 20
+        addSubview(pinContainer)
+        pinContainer.snp.makeConstraints { (make) in
+            make.left.equalToSuperview()
+            make.height.equalTo(40)
+            make.centerY.equalToSuperview()
+            make.width.equalTo(36)
+        }
+        //Image view
+        pinImageView.image = UIImage(named: "pin")
+        pinImageView.tintColor = .white
+        pinImageView.contentMode = .scaleAspectFit
+        pinContainer.addSubview(pinImageView)
+        pinImageView.snp.makeConstraints { (make) in
+            make.width.height.equalTo(20)
+            make.left.equalToSuperview().inset(6)
+            make.centerY.equalToSuperview()
+        }
+    }
+    func prepareScrollView() {
+        scrollView.clipsToBounds = false
+        scrollView.showsVerticalScrollIndicator = false
+        scrollView.showsHorizontalScrollIndicator = false
+        scrollView.contentInset = .init(top: 0, left: 0, bottom: 0, right: 6)
+        insertSubview(scrollView, belowSubview: pinContainer)
+        scrollView.snp.makeConstraints { (make) in
+            make.left.equalTo(pinContainer.snp.right).offset(6)
+            make.right.equalToSuperview()
+            make.top.bottom.equalToSuperview().inset(8)
+        }
+    }
+    func prepareStackView() {
+        stackView.axis = .horizontal
+        stackView.distribution = .equalSpacing
+        stackView.spacing = 6
+        stackView.clipsToBounds = false
+        scrollView.addSubview(stackView)
+        stackView.snp.makeConstraints { (make) in
+            make.edges.height.equalToSuperview()
+        }
+    }
+}
+//MARK:- PinnedLayer Button
+private class PinnedlLayerButton: UIControl {
+    private let gradient = CAGradientLayer()
+    private let nameLabel = UILabel()
+    private var configuredForAdd = false
+    init(name:String) {
+        super.init(frame: .zero)
+        nameLabel.text = name
+        prepareView()
+        prepareGradient()
+        prepareLabel()
+        updateUI()
+    }
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        self.layer.cornerRadius = self.bounds.height / 2
+        self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius).cgPath
+        //Gradient
+        gradient.frame = self.bounds
+        gradient.cornerRadius = self.layer.cornerRadius
+    }
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+        updateUI()
+    }
+    override var isSelected: Bool {
+        didSet {
+            if configuredForAdd {
+                return
+            }
+            if isSelected {
+                self.layer.borderWidth = 0
+                self.nameLabel.font = AppFont.SFPro.bold(size: 14)
+                self.layer.shadowOpacity = 1
+                self.gradient.isHidden = false
+            }
+            else {
+                self.layer.borderWidth = 1
+                self.nameLabel.font = AppFont.SFPro.regular(size: 14)
+                self.layer.shadowOpacity = 0
+                self.gradient.isHidden = true
+            }
+        }
+    }
+    func configureForAdd() {
+        self.layer.shadowOpacity = 0
+        self.layer.borderWidth = 1
+        self.nameLabel.textColor = ThemeManager.currentTheme.graphTintColor
+        self.nameLabel.text = "general.add".localized().capitalized + " +"
+        self.configuredForAdd = true
+    }
+    private func updateUI() {
+        if configuredForAdd {
+            nameLabel.textColor = ThemeManager.currentTheme.graphTintColor
+            return
+        }
+        switch interfaceStyle {
+        case .light:
+            nameLabel.textColor = ThemeManager.currentTheme.secondaryTextColor
+            gradient.colors = [UIColor(hex: 0xffffff).cgColor, UIColor(hex: 0xeceef6).cgColor]
+        case .dark:
+            nameLabel.textColor = ThemeManager.currentTheme.primaryTextColor
+            gradient.colors = [UIColor(hex: 0x49494d).cgColor, UIColor(hex: 0x29292d).cgColor]
+        }
+    }
+    private func prepareView() {
+        self.backgroundColor = .clear
+        self.layer.borderWidth = 1
+        self.layer.borderColor = UIColor(hex: 0x979797).cgColor
+        self.layer.shadowColor = UIColor.black.withAlphaComponent(0.12).cgColor
+        self.layer.shadowOpacity = 1
+        self.layer.shadowOffset = .init(width: 0, height: 3)
+        self.layer.shadowRadius = 8
+    }
+    private func prepareGradient() {
+        gradient.startPoint = .init(x: 0.5, y: 0)
+        gradient.endPoint = .init(x: 0.5, y: 1)
+        layer.addSublayer(gradient)
+    }
+    private func prepareLabel() {
+        nameLabel.isUserInteractionEnabled = false
+        addSubview(nameLabel)
+        nameLabel.snp.makeConstraints { (make) in
+            make.left.right.equalToSuperview().inset(9)
+            make.top.bottom.equalToSuperview().inset(6)
+        }
+    }
+}
--- a/1Weather/UI/View controllers/Radar/MapTimeControl/MapTimeControlView.swift
+++ b/1Weather/UI/View controllers/Radar/MapTimeControl/MapTimeControlView.swift
@@ -6,6 +6,7 @@
 //
 import UIKit
+import SnapKit
 class MapTimeControlView: UIView {
    //Private
@@ -13,7 +14,10 @@ class MapTimeControlView: UIView {
    private let playButton = UIButton()
    private let playButtonGradient = CAGradientLayer()
    private let stackView = UIStackView()
-    private let currenTimeView = CurrentTimeView()
+    private let currenTimeView = MapCurrentTimeView()
+    private let currentTimeDashLine = CAShapeLayer()
+    private let progresView = UIView()
+    private var progressWidthConstraint:Constraint?
    init() {
        super.init(frame: .zero)
@@ -23,6 +27,7 @@ class MapTimeControlView: UIView {
        preparePlayButton()
        prepareStackView()
        prepareCurrentTimeView()
+        prepareProgressView()
        updateUI()
    }
@@ -44,6 +49,14 @@ class MapTimeControlView: UIView {
                                                  cornerRadius: 14).cgPath
        playButton.layer.shadowPath = UIBezierPath(roundedRect: self.playButton.bounds,
                                                   cornerRadius: self.playButton.layer.cornerRadius).cgPath
+        //Dash line
+        let dashPath = CGMutablePath()
+        let startPoint = CGPoint(x: currenTimeView.center.x, y: 0)
+        let endPoint = CGPoint(x: currenTimeView.center.x, y: container.frame.height)
+        dashPath.addLines(between: [startPoint, endPoint])
+        currentTimeDashLine.path = dashPath
    }
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
@@ -61,6 +74,10 @@ class MapTimeControlView: UIView {
            playButtonGradient.colors = [UIColor(hex: 0x49494d).cgColor, UIColor(hex: 0x29292d).cgColor]
        }
    }
+    @objc private func handlePlayButton() {
+    }
 }
 //MARK:- Prepare
@@ -90,6 +107,7 @@ private extension MapTimeControlView {
        playButton.layer.shadowOffset = .init(width: 0, height: 3)
        playButton.layer.shadowRadius = 8
        playButton.layer.shadowOpacity = 1
+        playButton.addTarget(self, action: #selector(handlePlayButton), for: .touchUpInside)
        playButtonGradient.startPoint = .init(x: 0.5, y: 0)
        playButtonGradient.endPoint = .init(x: 0.5, y: 1)
@@ -128,5 +146,23 @@ private extension MapTimeControlView {
            make.bottom.equalTo(container.snp.top)
            make.centerX.equalToSuperview()
        }
+        //Dash line
+        currentTimeDashLine.lineWidth = 1
+        currentTimeDashLine.strokeColor = ThemeManager.currentTheme.graphTintColor.cgColor
+        currentTimeDashLine.lineDashPattern = [2,2]
+        container.layer.addSublayer(currentTimeDashLine)
+    }
+    func prepareProgressView() {
+        progresView.layer.cornerRadius = container.layer.cornerRadius
+        progresView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner]
+        progresView.backgroundColor = ThemeManager.currentTheme.graphTintColor.withAlphaComponent(0.2)
+        container.insertSubview(progresView, belowSubview: playButton)
+        progresView.snp.makeConstraints { (make) in
+            make.left.top.bottom.equalToSuperview()
+            self.progressWidthConstraint = make.width.equalToSuperview().multipliedBy(0.5).constraint
+        }
    }
 }
--- a/1Weather/UI/View controllers/Radar/RadarViewController.swift
+++ b/1Weather/UI/View controllers/Radar/RadarViewController.swift
@@ -17,10 +17,11 @@ class RadarViewController: UIViewController {
    //Buttons
    private let fullScreenButton = MapButton(image: UIImage(named: "map_fullscreen"))
-    private let precipitationButton = MapButton(image: UIImage(named: "map_precipitation"))
+    private let legendView = MapLegendView()
    private let layersButton = MapButton(image: UIImage(named: "map_layers"))
    private let radarButton = MapButton(image: UIImage(named: "map_radar"))
    private let mapTimeControlView = MapTimeControlView()
+    private let pinnedLayersView = MapPinnedLayersView()
    private let locationButton = UIButton()
@@ -44,6 +45,7 @@ class RadarViewController: UIViewController {
        prepareNavigationBar()
        prepareViewController()
 //        prepareMapView()
+        prepareMapPinnedLayers()
        prepareLocationButton()
        prepareMapButtons()
        prepareMapTimeControl()
@@ -52,7 +54,7 @@ class RadarViewController: UIViewController {
    //Private
    private func updateUI() {
-        view.backgroundColor = ThemeManager.currentTheme.baseBackgroundColor
+        view.backgroundColor = .red//ThemeManager.currentTheme.baseBackgroundColor
        locationButton.backgroundColor = ThemeManager.currentTheme.mapControlsColor
    }
@@ -121,6 +123,15 @@ private extension RadarViewController {
        }
    }
+    func prepareMapPinnedLayers() {
+        view.addSubview(pinnedLayersView)
+        pinnedLayersView.snp.makeConstraints { (make) in
+            make.left.right.bottom.equalToSuperview()
+//            make.height.equalTo(43)
+        }
+    }
    func prepareMapButtons() {
        //Full screen
        fullScreenButton.addTarget(self, action: #selector(handleFullScreenButton), for: .touchUpInside)
@@ -132,10 +143,9 @@ private extension RadarViewController {
        }
        //Precipitation
-        precipitationButton.addTarget(self, action: #selector(handlePrecipitationButton), for: .touchUpInside)
+        view.addSubview(legendView)
-        view.addSubview(precipitationButton)
+        legendView.snp.makeConstraints { (make) in
-        precipitationButton.snp.makeConstraints { (make) in
+            make.width.height.equalTo(40)
-            make.width.height.equalTo(46)
            make.right.equalToSuperview().inset(8)
            make.bottom.equalTo(locationButton.snp.top).offset(-18)
        }
@@ -144,16 +154,16 @@ private extension RadarViewController {
        layersButton.addTarget(self, action: #selector(handleLayersButton), for: .touchUpInside)
        view.addSubview(layersButton)
        layersButton.snp.makeConstraints { (make) in
-            make.width.height.equalTo(46)
+            make.width.height.equalTo(40)
            make.right.equalToSuperview().inset(8)
-            make.bottom.equalTo(precipitationButton.snp.top).offset(-18)
+            make.bottom.equalTo(legendView.snp.top).offset(-18)
        }
        //Radar
        radarButton.addTarget(self, action: #selector(handleRadarButton), for: .touchUpInside)
        view.addSubview(radarButton)
        radarButton.snp.makeConstraints { (make) in
-            make.width.height.equalTo(46)
+            make.width.height.equalTo(40)
            make.right.equalToSuperview().inset(8)
            make.bottom.equalTo(layersButton.snp.top).offset(-18)
        }
@@ -169,14 +179,15 @@ private extension RadarViewController {
        locationButton.snp.makeConstraints { (make) in
            make.width.height.equalTo(46)
            make.right.equalToSuperview().inset(8)
-            make.bottom.equalToSuperview().inset(4)
+            make.bottom.equalTo(pinnedLayersView.snp.top).offset(-4)
        }
    }
    func prepareMapTimeControl() {
        view.addSubview(mapTimeControlView)
        mapTimeControlView.snp.makeConstraints { (make) in
-            make.left.bottom.equalToSuperview().inset(4)
+            make.left.equalToSuperview().inset(4)
+            make.bottom.equalTo(pinnedLayersView.snp.top).offset(-4)
            make.right.equalTo(locationButton.snp.left).offset(-4)
        }
    }