Merge pull request #6678 from vector-im/gil/6674-Update_empty_states_…

…as_per_latest_design_update Updated empty states as per latest design update
element-hq · Sep 6, 2022 · d65143a · d65143a
2 parents 700b548 + b7c8659
commit d65143a
Show file tree

Hide file tree

Showing 23 changed files with 242 additions and 13 deletions.
diff --git a/Riot/Assets/Images.xcassets/Home/all_chats_empty_screen_artwork.imageset/Contents.json b/Riot/Assets/Images.xcassets/Home/all_chats_empty_screen_artwork.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "all_chats_empty_screen_artwork.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/...Home/all_chats_empty_screen_artwork.imageset/all_chats_empty_screen_artwork.png b/...Home/all_chats_empty_screen_artwork.imageset/all_chats_empty_screen_artwork.png
diff --git a/...e/all_chats_empty_screen_artwork.imageset/[email protected] b/...e/all_chats_empty_screen_artwork.imageset/[email protected]
diff --git a/...e/all_chats_empty_screen_artwork.imageset/[email protected] b/...e/all_chats_empty_screen_artwork.imageset/[email protected]
diff --git a/Riot/Assets/Images.xcassets/Home/all_chats_empty_screen_artwork_dark.imageset/Contents.json b/Riot/Assets/Images.xcassets/Home/all_chats_empty_screen_artwork_dark.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "all_chats_empty_screen_artwork_dark.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/...hats_empty_screen_artwork_dark.imageset/all_chats_empty_screen_artwork_dark.png b/...hats_empty_screen_artwork_dark.imageset/all_chats_empty_screen_artwork_dark.png
diff --git a/...s_empty_screen_artwork_dark.imageset/[email protected] b/...s_empty_screen_artwork_dark.imageset/[email protected]
diff --git a/...s_empty_screen_artwork_dark.imageset/[email protected] b/...s_empty_screen_artwork_dark.imageset/[email protected]
diff --git a/Riot/Assets/Images.xcassets/Home/all_chats_empty_space_artwork.imageset/Contents.json b/Riot/Assets/Images.xcassets/Home/all_chats_empty_space_artwork.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "all_chats_empty_space_artwork.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/...s/Home/all_chats_empty_space_artwork.imageset/all_chats_empty_space_artwork.png b/...s/Home/all_chats_empty_space_artwork.imageset/all_chats_empty_space_artwork.png
diff --git a/...ome/all_chats_empty_space_artwork.imageset/[email protected] b/...ome/all_chats_empty_space_artwork.imageset/[email protected]
diff --git a/...ome/all_chats_empty_space_artwork.imageset/[email protected] b/...ome/all_chats_empty_space_artwork.imageset/[email protected]
diff --git a/Riot/Assets/Images.xcassets/Home/all_chats_empty_space_artwork_dark.imageset/Contents.json b/Riot/Assets/Images.xcassets/Home/all_chats_empty_space_artwork_dark.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "all_chats_empty_space_artwork_dark.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/..._chats_empty_space_artwork_dark.imageset/all_chats_empty_space_artwork_dark.png b/..._chats_empty_space_artwork_dark.imageset/all_chats_empty_space_artwork_dark.png
diff --git a/...ats_empty_space_artwork_dark.imageset/[email protected] b/...ats_empty_space_artwork_dark.imageset/[email protected]
diff --git a/...ats_empty_space_artwork_dark.imageset/[email protected] b/...ats_empty_space_artwork_dark.imageset/[email protected]
diff --git a/Riot/Generated/Images.swift b/Riot/Generated/Images.swift
@@ -118,6 +118,10 @@ internal class Asset: NSObject {
     internal static let roomActionPriorityLow = ImageAsset(name: "room_action_priority_low")
     internal static let allChatsEditIcon = ImageAsset(name: "all_chats_edit_icon")
     internal static let allChatsEmptyListPlaceholderIcon = ImageAsset(name: "all_chats_empty_list_placeholder_icon")
+    internal static let allChatsEmptyScreenArtwork = ImageAsset(name: "all_chats_empty_screen_artwork")
+    internal static let allChatsEmptyScreenArtworkDark = ImageAsset(name: "all_chats_empty_screen_artwork_dark")
+    internal static let allChatsEmptySpaceArtwork = ImageAsset(name: "all_chats_empty_space_artwork")
+    internal static let allChatsEmptySpaceArtworkDark = ImageAsset(name: "all_chats_empty_space_artwork_dark")
     internal static let allChatsSpacesIcon = ImageAsset(name: "all_chats_spaces_icon")
     internal static let homeEmptyScreenArtwork = ImageAsset(name: "home_empty_screen_artwork")
     internal static let homeEmptyScreenArtworkDark = ImageAsset(name: "home_empty_screen_artwork_dark")

diff --git a/Riot/Modules/Common/Recents/DataSources/RecentsDataSource.m b/Riot/Modules/Common/Recents/DataSources/RecentsDataSource.m
@@ -668,7 +668,8 @@ - (CGFloat)heightForHeaderInSection:(NSInteger)section
         sectionType == RecentsDataSourceSectionTypeCrossSigningBanner ||
         sectionType == RecentsDataSourceSectionTypeBreadcrumbs ||
         (sectionType == RecentsDataSourceSectionTypeInvites && self.recentsDataSourceMode == RecentsDataSourceModeAllChats) ||
-        (sectionType == RecentsDataSourceSectionTypeAllChats && !self.allChatsFilterOptions.optionsCount))
+        (sectionType == RecentsDataSourceSectionTypeAllChats && !self.allChatsFilterOptions.optionsCount) ||
+        (sectionType == RecentsDataSourceSectionTypeAllChats && self.currentSpace != nil && self.currentSpace.childRoomIds.count == 0))
     {
         return 0.0;
     }
@@ -1091,9 +1092,28 @@ - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(N
     else if (sectionType == RecentsDataSourceSectionTypeAllChats && !self.allChatsRoomCellDataArray.count) {
         RecentEmptySectionTableViewCell *tableViewCell = [tableView dequeueReusableCellWithIdentifier:[RecentEmptySectionTableViewCell defaultReuseIdentifier]];
 
-        tableViewCell.iconView.image = self.searchPatternsList ? [UIImage systemImageNamed:@"magnifyingglass"] : AssetImages.allChatsEmptyListPlaceholderIcon.image;
-        tableViewCell.titleLabel.text = self.searchPatternsList ? VectorL10n.allChatsNothingFoundPlaceholderTitle : VectorL10n.allChatsEmptyListPlaceholderTitle;
-        tableViewCell.messageLabel.text = self.searchPatternsList ? VectorL10n.allChatsNothingFoundPlaceholderMessage : VectorL10n.allChatsEmptyUnreadsPlaceholderMessage;
+        if (self.searchPatternsList)
+        {
+            tableViewCell.iconView.image = [UIImage systemImageNamed:@"magnifyingglass"];
+            tableViewCell.titleLabel.text = VectorL10n.allChatsNothingFoundPlaceholderTitle;
+            tableViewCell.messageLabel.text = VectorL10n.allChatsNothingFoundPlaceholderMessage;
+        }
+        else if (self.currentSpace && !self.currentSpace.childRoomIds.count)
+        {
+            RecentEmptySectionTableViewCell *tableViewCell = [tableView dequeueReusableCellWithIdentifier:[RecentEmptySpaceSectionTableViewCell defaultReuseIdentifier]];
+
+            tableViewCell.iconView.image = [ThemeService.shared isCurrentThemeDark] ? AssetImages.allChatsEmptySpaceArtworkDark.image : AssetImages.allChatsEmptySpaceArtwork.image;
+            tableViewCell.titleLabel.text = [VectorL10n allChatsEmptyViewTitle: self.currentSpace.summary.displayname];
+            tableViewCell.messageLabel.text = VectorL10n.allChatsEmptySpaceInformation;
+
+            return tableViewCell;
+        }
+        else
+        {
+            tableViewCell.iconView.image = AssetImages.allChatsEmptyListPlaceholderIcon.image;
+            tableViewCell.titleLabel.text = VectorL10n.allChatsEmptyListPlaceholderTitle;
+            tableViewCell.messageLabel.text = VectorL10n.allChatsEmptyUnreadsPlaceholderMessage;
+        }
 
         return tableViewCell;
     }
@@ -1214,7 +1234,7 @@ - (CGFloat)cellHeightAtIndexPath:(NSIndexPath *)indexPath
         return 50.0;
     }
     if (sectionType == RecentsDataSourceSectionTypeAllChats && !self.allChatsRoomCellDataArray.count) {
-        return 300.0;
+        return 320.0;
     }
     if (sectionType == RecentsDataSourceSectionTypeInvites && self.recentsDataSourceMode == RecentsDataSourceModeAllChats)
     {

diff --git a/Riot/Modules/Common/Recents/Views/RecentEmptySectionTableViewCell.xib b/Riot/Modules/Common/Recents/Views/RecentEmptySectionTableViewCell.xib
@@ -18,7 +18,7 @@
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="cin-hv-Vgl">
-                        <rect key="frame" x="243" y="105" width="114.5" height="141.5"/>
+                        <rect key="frame" x="243" y="105" width="114.5" height="141"/>
                         <subviews>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="mFA-mv-riA">
                                 <rect key="frame" x="27" y="0.0" width="60" height="60"/>
@@ -39,14 +39,14 @@
                                     <constraint firstItem="Vpd-pm-OEd" firstAttribute="centerX" secondItem="mFA-mv-riA" secondAttribute="centerX" id="jqU-nS-FYb"/>
                                 </constraints>
                             </view>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="tjC-HB-9t4">
-                                <rect key="frame" x="40.5" y="84" width="33" height="21"/>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="tjC-HB-9t4">
+                                <rect key="frame" x="40.5" y="84" width="33" height="20.5"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                 <nil key="textColor"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Message Label" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="75X-eX-Cuo">
-                                <rect key="frame" x="0.0" y="121" width="114.5" height="20.5"/>
+                                <rect key="frame" x="0.0" y="120.5" width="114.5" height="20.5"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                 <nil key="textColor"/>
                                 <nil key="highlightedColor"/>

diff --git a/Riot/Modules/Common/Recents/Views/RecentEmptySpaceSectionTableViewCell.swift b/Riot/Modules/Common/Recents/Views/RecentEmptySpaceSectionTableViewCell.swift
@@ -0,0 +1,54 @@
+// 
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import UIKit
+import Reusable
+
+/// `RecentEmptySpaceSectionTableViewCell` can be used as a placeholder for empty space sections.
+class RecentEmptySpaceSectionTableViewCell: UITableViewCell, NibReusable, Themable {
+
+    @IBOutlet var iconView: UIImageView!
+    @IBOutlet var titleLabel: UILabel!
+    @IBOutlet var messageLabel: UILabel!
+
+    @objc static func defaultReuseIdentifier() -> String {
+        return reuseIdentifier
+    }
+
+    // MARK: - Life cycle
+
+    override func awakeFromNib() {
+        super.awakeFromNib()
+
+        self.selectionStyle = .none
+
+        update(theme: ThemeService.shared().theme)
+    }
+
+    // MARK: - Themable
+
+    func update(theme: Theme) {
+        self.backgroundColor = theme.colors.background
+
+        self.iconView.tintColor = theme.colors.secondaryContent
+
+        self.titleLabel.textColor = theme.colors.primaryContent
+        self.titleLabel.font = theme.fonts.title3SB
+
+        self.messageLabel.textColor = theme.colors.secondaryContent
+        self.messageLabel.font = theme.fonts.callout
+    }
+}
diff --git a/Riot/Modules/Common/Recents/Views/RecentEmptySpaceSectionTableViewCell.xib b/Riot/Modules/Common/Recents/Views/RecentEmptySpaceSectionTableViewCell.xib
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="20037" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="20020"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <tableViewCell contentMode="scaleToFill" selectionStyle="default" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" rowHeight="351" id="L2L-l5-wPx" customClass="RecentEmptySpaceSectionTableViewCell" customModule="Element" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="600" height="351"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="L2L-l5-wPx" id="aXz-IR-jj5">
+                <rect key="frame" x="0.0" y="0.0" width="600" height="351"/>
+                <autoresizingMask key="autoresizingMask"/>
+                <subviews>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="tjC-HB-9t4">
+                        <rect key="frame" x="36" y="267" width="528" height="20.5"/>
+                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Message Label" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="75X-eX-Cuo">
+                        <rect key="frame" x="36" y="303.5" width="528" height="20.5"/>
+                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="250" translatesAutoresizingMaskIntoConstraints="NO" id="Vpd-pm-OEd">
+                        <rect key="frame" x="36" y="35" width="528" height="208"/>
+                    </imageView>
+                </subviews>
+                <constraints>
+                    <constraint firstItem="Vpd-pm-OEd" firstAttribute="top" secondItem="aXz-IR-jj5" secondAttribute="topMargin" constant="24" id="2vs-ax-an7"/>
+                    <constraint firstItem="75X-eX-Cuo" firstAttribute="leading" secondItem="aXz-IR-jj5" secondAttribute="leadingMargin" constant="20" id="58o-dk-3uJ"/>
+                    <constraint firstAttribute="trailingMargin" secondItem="Vpd-pm-OEd" secondAttribute="trailing" constant="20" id="5bE-ft-ozp"/>
+                    <constraint firstItem="tjC-HB-9t4" firstAttribute="top" secondItem="Vpd-pm-OEd" secondAttribute="bottom" constant="24" id="CWn-bh-D4G"/>
+                    <constraint firstAttribute="trailingMargin" secondItem="tjC-HB-9t4" secondAttribute="trailing" constant="20" id="F0u-F7-mf6"/>
+                    <constraint firstAttribute="bottomMargin" secondItem="75X-eX-Cuo" secondAttribute="bottom" constant="16" id="GyZ-TR-qCE"/>
+                    <constraint firstItem="75X-eX-Cuo" firstAttribute="top" secondItem="tjC-HB-9t4" secondAttribute="bottom" constant="16" id="IRL-SJ-jiz"/>
+                    <constraint firstItem="tjC-HB-9t4" firstAttribute="leading" secondItem="aXz-IR-jj5" secondAttribute="leadingMargin" constant="20" id="ReL-eT-Gi7"/>
+                    <constraint firstAttribute="trailingMargin" secondItem="75X-eX-Cuo" secondAttribute="trailing" constant="20" id="ZfB-po-ZON"/>
+                    <constraint firstItem="Vpd-pm-OEd" firstAttribute="leading" secondItem="aXz-IR-jj5" secondAttribute="leadingMargin" constant="20" id="tRn-mA-R9f"/>
+                </constraints>
+            </tableViewCellContentView>
+            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+            <accessibility key="accessibilityConfiguration" identifier="RecentTableViewCell"/>
+            <connections>
+                <outlet property="iconView" destination="Vpd-pm-OEd" id="99X-35-f9k"/>
+                <outlet property="messageLabel" destination="75X-eX-Cuo" id="GBM-9M-Quw"/>
+                <outlet property="titleLabel" destination="tjC-HB-9t4" id="SG3-jz-Z3j"/>
+            </connections>
+            <point key="canvasLocation" x="-166.40000000000001" y="66.11694152923539"/>
+        </tableViewCell>
+    </objects>
+</document>
diff --git a/Riot/Modules/Home/AllChats/AllChatsViewController.swift b/Riot/Modules/Home/AllChats/AllChatsViewController.swift
@@ -103,6 +103,7 @@ class AllChatsViewController: HomeViewController {
         recentsTableView.tag = RecentsDataSourceMode.allChats.rawValue
         recentsTableView.clipsToBounds = false
         recentsTableView.register(RecentEmptySectionTableViewCell.nib, forCellReuseIdentifier: RecentEmptySectionTableViewCell.reuseIdentifier)
+        recentsTableView.register(RecentEmptySpaceSectionTableViewCell.nib, forCellReuseIdentifier: RecentEmptySpaceSectionTableViewCell.reuseIdentifier)
         recentsTableView.register(RecentsInvitesTableViewCell.nib, forCellReuseIdentifier: RecentsInvitesTableViewCell.reuseIdentifier)
         recentsTableView.contentInsetAdjustmentBehavior = .automatic
 
@@ -383,15 +384,14 @@ class AllChatsViewController: HomeViewController {
 
         self.emptyView?.fill(with: emptyViewArtwork,
                              title: title,
-                             informationText: informationText,
-                             displayMode: self.dataSource?.currentSpace == nil ? .default : .icon)
+                             informationText: informationText)
     }
 
     private var emptyViewArtwork: UIImage {
         if self.dataSource?.currentSpace == nil {
-            return ThemeService.shared().isCurrentThemeDark() ? Asset.Images.peopleEmptyScreenArtworkDark.image : Asset.Images.peopleEmptyScreenArtwork.image
+            return ThemeService.shared().isCurrentThemeDark() ? Asset.Images.allChatsEmptyScreenArtworkDark.image : Asset.Images.allChatsEmptyScreenArtwork.image
         } else {
-            return Asset.Images.allChatsEditIcon.image
+            return ThemeService.shared().isCurrentThemeDark() ? Asset.Images.allChatsEmptySpaceArtworkDark.image : Asset.Images.allChatsEmptySpaceArtwork.image
         }
     }
 

diff --git a/changelog.d/6674.change b/changelog.d/6674.change
@@ -0,0 +1 @@
+Update empty states as per latest design update
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Update empty states as per latest design update