Merge pull request #6163 from vector-im/maximee/6162_lls_update_UI

[Location sharing] Update UI to latest design (PSF-1030)

Riot/Assets/Images.xcassets/Room/Location/location_background_dark_image.imageset/Contents.json

@@ -1,17 +1,17 @@
 {
   "images" : [
     {
-      "filename" : "location_live_cell_ended_icon.png",
+      "filename" : "location_background_dark_image.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "location_live_cell_ended_icon@2x.png",
+      "filename" : "location_background_dark_image@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "location_live_cell_ended_icon@3x.png",
+      "filename" : "location_background_dark_image@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

Riot/Assets/Images.xcassets/Room/Location/location_background_light_image.imageset/Contents.json

@@ -1,17 +1,17 @@
 {
   "images" : [
     {
-      "filename" : "location_placeholder_background_image.png",
+      "filename" : "location_background_light_image.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "location_placeholder_background_image@2x.png",
+      "filename" : "location_background_light_image@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "location_placeholder_background_image@3x.png",
+      "filename" : "location_background_light_image@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

Riot/Assets/Images.xcassets/Room/Location/location_live_cell_ended_dark_icon.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "location_live_cell_ended_dark_icon.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "location_live_cell_ended_dark_icon@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "location_live_cell_ended_dark_icon@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Riot/Assets/Images.xcassets/Room/Location/location_live_cell_ended_light_icon.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "location_live_cell_ended_light_icon.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "location_live_cell_ended_light_icon2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "location_live_cell_ended_light_icon3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Riot/Generated/Images.swift

@@ -183,14 +183,16 @@ internal class Asset: NSObject {
     internal static let voiceCallHangonIcon = ImageAsset(name: "voice_call_hangon_icon")
     internal static let voiceCallHangupIcon = ImageAsset(name: "voice_call_hangup_icon")
     internal static let liveLocationIcon = ImageAsset(name: "live_location_icon")
+    internal static let locationBackgroundDarkImage = ImageAsset(name: "location_background_dark_image")
+    internal static let locationBackgroundLightImage = ImageAsset(name: "location_background_light_image")
     internal static let locationCenterMapIcon = ImageAsset(name: "location_center_map_icon")
-    internal static let locationLiveCellEndedIcon = ImageAsset(name: "location_live_cell_ended_icon")
+    internal static let locationLiveCellEndedDarkIcon = ImageAsset(name: "location_live_cell_ended_dark_icon")
+    internal static let locationLiveCellEndedLightIcon = ImageAsset(name: "location_live_cell_ended_light_icon")
     internal static let locationLiveCellIcon = ImageAsset(name: "location_live_cell_icon")
     internal static let locationLiveCellLoadingIcon = ImageAsset(name: "location_live_cell_loading_icon")
     internal static let locationLiveIcon = ImageAsset(name: "location_live_icon")
     internal static let locationMarkerIcon = ImageAsset(name: "location_marker_icon")
     internal static let locationPinIcon = ImageAsset(name: "location_pin_icon")
-    internal static let locationPlaceholderBackgroundImage = ImageAsset(name: "location_placeholder_background_image")
     internal static let locationShareIcon = ImageAsset(name: "location_share_icon")
     internal static let locationUserMarker = ImageAsset(name: "location_user_marker")
     internal static let pollCheckboxDefault = ImageAsset(name: "poll_checkbox_default")

Riot/Modules/Room/Location/RoomTimelineLocationView.swift

@@ -94,7 +94,8 @@ class RoomTimelineLocationView: UIView, NibLoadable, Themable, MGLMapViewDelegat
     @IBOutlet private var placeholderBackground: UIImageView!
     @IBOutlet private var placeholderIcon: UIImageView!
     @IBOutlet private var liveLocationContainerView: UIView!
-    @IBOutlet private var liveLocationImageView: UIImageView!
+    @IBOutlet private var liveLocationIcon: UIImageView!
+    @IBOutlet private var liveLocationIconBackgroundView: UIView!
     @IBOutlet private var liveLocationStatusLabel: UILabel!
     @IBOutlet private var liveLocationTimerLabel: UILabel!
     @IBOutlet private var rightButton: UIButton!
@@ -105,6 +106,8 @@ class RoomTimelineLocationView: UIView, NibLoadable, Themable, MGLMapViewDelegat
     private var annotationView: LocationMarkerView?
     private static var usernameColorGenerator = UserNameColorGenerator()
     private var theme: Theme!
+    private var placeholderBackgroundImage: UIImage?
+    private var placeholderEndedIcon: UIImage?
     
     private lazy var incomingTimerFormatter: DateFormatter = {
         let dateFormatter = DateFormatter()
@@ -195,10 +198,11 @@ class RoomTimelineLocationView: UIView, NibLoadable, Themable, MGLMapViewDelegat
         }
         
         liveLocationContainerView.isHidden = false
-        liveLocationContainerView.backgroundColor = theme.colors.background.withAlphaComponent(0.85)
+        liveLocationContainerView.backgroundColor = theme.colors.background.withAlphaComponent(0.75)
         
-        liveLocationImageView.image = Asset.Images.locationLiveCellIcon.image
+        liveLocationIcon.image = Asset.Images.locationLiveCellIcon.image
-        liveLocationImageView.tintColor = bannerViewData.iconTint
+        liveLocationIcon.tintColor = bannerViewData.iconTint
+        liveLocationIconBackgroundView.isHidden = bannerViewData.showPlaceholderImage
         
         liveLocationStatusLabel.text = bannerViewData.title
         liveLocationStatusLabel.textColor = bannerViewData.titleColor
@@ -215,6 +219,7 @@ class RoomTimelineLocationView: UIView, NibLoadable, Themable, MGLMapViewDelegat
         placeholderIcon.image = bannerViewData.placeholderIcon
         placeholderIcon.isHidden = !bannerViewData.showPlaceholderImage
         placeholderBackground.isHidden = !bannerViewData.showPlaceholderImage
+        placeholderBackground.image = placeholderBackgroundImage
         mapView.isHidden = bannerViewData.showPlaceholderImage
     }
     
@@ -233,7 +238,7 @@ class RoomTimelineLocationView: UIView, NibLoadable, Themable, MGLMapViewDelegat
         case .incoming(let liveLocationSharingStatus):
             switch liveLocationSharingStatus {
             case .starting:
-                iconTint = theme.colors.tertiaryContent
+                iconTint = theme.colors.quarterlyContent
                 title = VectorL10n.locationSharingLiveLoading
                 titleColor = theme.colors.tertiaryContent
                 placeholderIcon = Asset.Images.locationLiveCellLoadingIcon.image
@@ -248,15 +253,15 @@ class RoomTimelineLocationView: UIView, NibLoadable, Themable, MGLMapViewDelegat
                 rightButtonTitle = VectorL10n.retry
                 rightButtonTag = .retrySharing
             case .stopped:
-                iconTint = theme.colors.tertiaryContent
+                iconTint = theme.colors.quarterlyContent
                 title = VectorL10n.liveLocationSharingEnded
                 titleColor = theme.colors.tertiaryContent
-                placeholderIcon = Asset.Images.locationLiveCellEndedIcon.image
+                placeholderIcon = placeholderEndedIcon
             }
         case .outgoing(let liveLocationSharingStatus):
             switch liveLocationSharingStatus {
             case .starting:
-                iconTint = theme.colors.tertiaryContent
+                iconTint = theme.colors.quarterlyContent
                 title = VectorL10n.locationSharingLiveLoading
                 titleColor = theme.colors.tertiaryContent
                 placeholderIcon = Asset.Images.locationLiveCellLoadingIcon.image
@@ -272,10 +277,10 @@ class RoomTimelineLocationView: UIView, NibLoadable, Themable, MGLMapViewDelegat
                 rightButtonTitle = VectorL10n.retry
                 rightButtonTag = .retrySharing
             case .stopped:
-                iconTint = theme.colors.tertiaryContent
+                iconTint = theme.colors.quarterlyContent
                 title = VectorL10n.liveLocationSharingEnded
                 titleColor = theme.colors.tertiaryContent
-                placeholderIcon = Asset.Images.locationLiveCellEndedIcon.image
+                placeholderIcon = placeholderEndedIcon
             }
         }
         
@@ -332,6 +337,8 @@ class RoomTimelineLocationView: UIView, NibLoadable, Themable, MGLMapViewDelegat
         attributionLabel.textColor = theme.colors.accent
         layer.borderColor = theme.colors.quinaryContent.cgColor
         self.theme = theme
+        placeholderEndedIcon = ThemeService.shared().isCurrentThemeDark() ? Asset.Images.locationLiveCellEndedDarkIcon.image : Asset.Images.locationLiveCellEndedLightIcon.image
+        placeholderBackgroundImage = ThemeService.shared().isCurrentThemeDark() ? Asset.Images.locationBackgroundDarkImage.image : Asset.Images.locationBackgroundLightImage.image
     }
     
     // MARK: - MGLMapViewDelegate

Riot/Modules/Room/Location/RoomTimelineLocationView.xib

@@ -14,14 +14,14 @@
             <rect key="frame" x="0.0" y="0.0" width="395" height="250"/>
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
-                <imageView hidden="YES" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="location_placeholder_background_image" translatesAutoresizingMaskIntoConstraints="NO" id="vuV-BV-bbx" userLabel="Placeholder BackGround Image">
+                <imageView hidden="YES" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="location_background_light_image" translatesAutoresizingMaskIntoConstraints="NO" id="vuV-BV-bbx" userLabel="Placeholder BackGround Image">
                     <rect key="frame" x="0.0" y="0.0" width="395" height="250"/>
                 </imageView>
-                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="4WL-gT-HBV">
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="location_live_cell_ended_light_icon" translatesAutoresizingMaskIntoConstraints="NO" id="4WL-gT-HBV">
-                    <rect key="frame" x="172.5" y="75" width="50" height="50"/>
+                    <rect key="frame" x="175" y="67.5" width="45" height="65"/>
                     <constraints>
-                        <constraint firstAttribute="height" constant="50" id="c7D-e5-dkZ"/>
+                        <constraint firstAttribute="height" constant="65" id="c7D-e5-dkZ"/>
-                        <constraint firstAttribute="width" constant="50" id="q3h-Mg-lG4"/>
+                        <constraint firstAttribute="width" constant="45" id="q3h-Mg-lG4"/>
                     </constraints>
                 </imageView>
                 <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="0D1-Km-vTu">
@@ -169,7 +169,8 @@
                 <outlet property="descriptionIcon" destination="GP2-dA-giJ" id="7YL-UU-ClT"/>
                 <outlet property="descriptionLabel" destination="c68-l7-McA" id="HiH-8Q-yTp"/>
                 <outlet property="liveLocationContainerView" destination="Hpx-8P-nCb" id="Vxm-Sf-TAE"/>
-                <outlet property="liveLocationImageView" destination="pgy-lK-ehN" id="1Th-PJ-G0p"/>
+                <outlet property="liveLocationIcon" destination="pgy-lK-ehN" id="1Th-PJ-G0p"/>
+                <outlet property="liveLocationIconBackgroundView" destination="72o-VM-Ls7" id="2XU-x0-vhz"/>
                 <outlet property="liveLocationStatusLabel" destination="X9R-EV-RDT" id="HJr-cE-icv"/>
                 <outlet property="liveLocationTimerLabel" destination="U75-c5-got" id="RkO-6a-ABU"/>
                 <outlet property="placeholderBackground" destination="vuV-BV-bbx" id="9PW-RW-tFh"/>
@@ -180,9 +181,10 @@
         </view>
     </objects>
     <resources>
+        <image name="location_background_light_image" width="847.5" height="556"/>
+        <image name="location_live_cell_ended_light_icon" width="46" height="65"/>
         <image name="location_live_cell_icon" width="32" height="32"/>
         <image name="location_marker_icon" width="24" height="24"/>
-        <image name="location_placeholder_background_image" width="312" height="156"/>
         <systemColor name="systemBackgroundColor">
             <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
         </systemColor>

changelog.d/6162.change

@@ -0,0 +1 @@
+Location sharing: update UI to latest design