Implement the new Space selector bottom sheet #6410

- Animation for bottom action panel
- UI tweaks

Riot/Assets/Images.xcassets/Home/RoomContextualMenu/Contents.json

@@ -1,6 +1,6 @@
 {
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
-}
+}

Riot/Assets/Images.xcassets/Home/spaces_action.imageset/Contents.json

@@ -0,0 +1,26 @@
+{
+  "images" : [
+    {
+      "filename" : "spaces_action.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "template-rendering-intent" : "template"
+  }
+}

Riot/Generated/Images.swift

@@ -117,6 +117,7 @@ internal class Asset: NSObject {
     internal static let homeFabCreateRoom = ImageAsset(name: "home_fab_create_room")
     internal static let homeFabJoinRoom = ImageAsset(name: "home_fab_join_room")
     internal static let plusFloatingAction = ImageAsset(name: "plus_floating_action")
+    internal static let spacesAction = ImageAsset(name: "spaces_action")
     internal static let versionCheckCloseIcon = ImageAsset(name: "version_check_close_icon")
     internal static let versionCheckInfoIcon = ImageAsset(name: "version_check_info_icon")
     internal static let integrationManagerIconpile = ImageAsset(name: "integration_manager_iconpile")

Riot/Modules/ContextMenu/ActionProviders/AllChatsEditActionProvider.swift

@@ -111,7 +111,7 @@ class AllChatsEditActionProvider {
 
     private var exploreRoomsAction: UIAction {
         UIAction(title: VectorL10n.spacesExploreRooms,
-                 image: parentSpace == nil ? UIImage(systemName: "list.bullet") : UIImage(systemName: "list.star"),
+                 image: parentSpace == nil ? UIImage(systemName: "list.bullet") : UIImage(systemName: "square.fill.text.grid.1x2"),
                  discoverabilityTitle: VectorL10n.spacesExploreRooms) { [weak self] action in
             guard let self = self else { return }
 
@@ -142,7 +142,7 @@ class AllChatsEditActionProvider {
 
     private var createSpaceAction: UIAction {
         UIAction(title: parentSpace == nil ? VectorL10n.spacesCreateSpaceTitle : VectorL10n.spacesCreateSubspaceTitle,
-                 image: UIImage(systemName: "star.fill"),
+                 image: UIImage(systemName: "plus"),
                  discoverabilityTitle: VectorL10n.spacesCreateSpaceTitle,
                  attributes: isAddRoomAvailable ? [] : .disabled) { [weak self] action in
             guard let self = self else { return }
@@ -174,7 +174,7 @@ class AllChatsEditActionProvider {
 
     private var spaceSettingsAction: UIAction {
         UIAction(title: VectorL10n.allChatsEditMenuSpaceSettings,
-                 image: UIImage(systemName: "text.badge.star"),
+                 image: UIImage(systemName: "gearshape"),
                  discoverabilityTitle: VectorL10n.sideMenuActionSettings) { [weak self] action in
             guard let self = self else { return }
 

Riot/Modules/Home/AllChats/AllChatsActionPanelView.swift

@@ -22,9 +22,11 @@ class AllChatsActionPanelView: UIVisualEffectView, NibLoadable, Themable {
 
     // MARK: - Outlets
 
-    @IBOutlet weak var editButton: UIButton!
     @IBOutlet weak var spaceButton: UIButton!
-
+    @IBOutlet weak var spaceButtonLeadingConstraint: NSLayoutConstraint!
+    @IBOutlet weak var editButton: UIButton!
+    @IBOutlet weak var editButtonTrailingConstraint: NSLayoutConstraint!
+
     // MARK: - Lifecycle
 
     override func willMove(toSuperview newSuperview: UIView?) {

Riot/Modules/Home/AllChats/AllChatsActionPanelView.xib

@@ -17,14 +17,14 @@
                 <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                 <subviews>
                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="iny-AL-dNx">
-                        <rect key="frame" x="501" y="4" width="46" height="31"/>
+                        <rect key="frame" x="502" y="4" width="45" height="31"/>
                         <state key="normal" title="Button"/>
-                        <buttonConfiguration key="configuration" style="plain" image="square.and.pencil" catalog="system"/>
+                        <buttonConfiguration key="configuration" style="plain" image="ellipsis.circle" catalog="system"/>
                     </button>
                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="i6Z-u3-V1Z">
-                        <rect key="frame" x="12" y="4" width="45.5" height="31"/>
+                        <rect key="frame" x="12" y="4" width="45" height="35"/>
                         <state key="normal" title="Button"/>
-                        <buttonConfiguration key="configuration" style="plain" image="square.grid.2x2" catalog="system"/>
+                        <buttonConfiguration key="configuration" style="plain" image="spaces_action"/>
                     </button>
                 </subviews>
                 <constraints>
@@ -37,13 +37,15 @@
             <blurEffect style="regular"/>
             <connections>
                 <outlet property="editButton" destination="iny-AL-dNx" id="VfV-XH-aAd"/>
+                <outlet property="editButtonTrailingConstraint" destination="qQn-ku-t8s" id="43E-D5-bRq"/>
                 <outlet property="spaceButton" destination="i6Z-u3-V1Z" id="Bhg-3F-ejC"/>
+                <outlet property="spaceButtonLeadingConstraint" destination="kvL-cg-72f" id="ZWX-E7-3jp"/>
             </connections>
             <point key="canvasLocation" x="-621.01449275362324" y="-48.883928571428569"/>
         </visualEffectView>
     </objects>
     <resources>
-        <image name="square.and.pencil" catalog="system" width="128" height="115"/>
-        <image name="square.grid.2x2" catalog="system" width="128" height="114"/>
+        <image name="ellipsis.circle" catalog="system" width="128" height="121"/>
+        <image name="spaces_action" width="20.5" height="20.5"/>
     </resources>
 </document>

Riot/Modules/Home/AllChats/AllChatsViewController.swift

@@ -23,6 +23,7 @@ class AllChatsViewController: HomeViewController {
 
     private enum Constants {
         static let actionPanelHeight: Double = 64
+        static let ectionPanelHorizontalPadding: Double = 12
     }
 
     // MARK: - Class methods
@@ -31,6 +32,14 @@ class AllChatsViewController: HomeViewController {
         return UINib(nibName: String(describing: self), bundle: Bundle(for: self.classForCoder()))
     }
 
+    static override func instantiate() -> Self {
+        let storyboard = UIStoryboard(name: "Main", bundle: .main)
+        guard let viewController = storyboard.instantiateViewController(withIdentifier: "AllChatsViewController") as? Self else {
+            fatalError("No view controller of type \(self) in the main storyboard")
+        }
+        return viewController
+    }
+
     // MARK: - Private
 
     private let searchController = UISearchController(searchResultsController: nil)
@@ -43,13 +52,9 @@ class AllChatsViewController: HomeViewController {
 
     private var childCoordinators: [Coordinator] = []
 
-    static override func instantiate() -> Self {
-        let storyboard = UIStoryboard(name: "Main", bundle: .main)
-        guard let viewController = storyboard.instantiateViewController(withIdentifier: "AllChatsViewController") as? Self else {
-            fatalError("No view controller of type \(self) in the main storyboard")
-        }
-        return viewController
-    }
+    private var actionPanelHeightConstraint: NSLayoutConstraint!
+
+    // MARK: - Lifecycle
 
     override func viewDidLoad() {
         super.viewDidLoad()
@@ -58,7 +63,7 @@ class AllChatsViewController: HomeViewController {
 
         recentsTableView.tag = RecentsDataSourceMode.allChats.rawValue
         recentsTableView.clipsToBounds = false
-        recentsTableView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -Constants.actionPanelHeight).isActive = true
+        self.recentsTableViewBottomConstraint.constant = Constants.actionPanelHeight
 
         updateUI()
         vc_setLargeTitleDisplayMode(.automatic)
@@ -93,7 +98,8 @@ class AllChatsViewController: HomeViewController {
         actionPanelView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
         actionPanelView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
         actionPanelView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
-        actionPanelView.heightAnchor.constraint(equalToConstant: Constants.actionPanelHeight).isActive = true
+        actionPanelHeightConstraint = actionPanelView.heightAnchor.constraint(equalToConstant: Constants.actionPanelHeight)
+        actionPanelHeightConstraint.isActive = true
     }
 
     @objc private func sections() -> Array<Int> {
@@ -120,14 +126,59 @@ class AllChatsViewController: HomeViewController {
         self.spaceSelectorBridgePresenter = spaceSelectorBridgePresenter
     }
 
+    // MARK: - Action panel animation
+
+    private var actionPanelHeight: Double = Constants.actionPanelHeight {
+        didSet {
+            self.recentsTableViewBottomConstraint.constant = actionPanelHeight
+            self.actionPanelHeightConstraint.constant = actionPanelHeight
+            let ratio = actionPanelHeight / Constants.actionPanelHeight
+            self.actionPanelView.spaceButtonLeadingConstraint.constant = -5 * Constants.ectionPanelHorizontalPadding + 6 * Constants.ectionPanelHorizontalPadding * ratio
+            self.actionPanelView.editButtonTrailingConstraint.constant = -5 * Constants.ectionPanelHorizontalPadding + 6 * Constants.ectionPanelHorizontalPadding * ratio
+            self.view.layoutIfNeeded()
+        }
+    }
+
+    private var initialScrollPosition: Double = 0
+    private var initialActionPanelHeight: Double = 0
+
+    override func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
+        initialScrollPosition = self.recentsTableView.contentOffset.y
+        initialActionPanelHeight = actionPanelHeightConstraint.constant
+    }
+
+    override func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
+        UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseIn) {
+            self.actionPanelHeight = self.actionPanelHeightConstraint.constant < Constants.actionPanelHeight / 2 ? 0 : Constants.actionPanelHeight
+        } completion: { finished in
+        }
+    }
+
+    override func scrollViewDidScroll(_ scrollView: UIScrollView) {
+        super.scrollViewDidScroll(scrollView)
+
+        guard self.recentsTableView.isDragging else {
+            return
+        }
+
+        let scrollPosition = max(self.recentsTableView.contentOffset.y, 0)
+        guard scrollPosition < self.recentsTableView.contentSize.height - self.recentsTableView.bounds.height else {
+            return
+        }
+
+        self.actionPanelHeight = min(max(initialActionPanelHeight + (initialScrollPosition - scrollPosition) / 4, 0), Constants.actionPanelHeight)
+    }
+
     // MARK: - Private
 
     @objc private func setupEditOptions() {
-        self.tabBarController?.navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIImage(systemName: "ellipsis.circle"), menu: AllChatsActionProvider().menu)
+        self.tabBarController?.navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIImage(systemName: "line.3.horizontal.decrease.circle"), menu: AllChatsActionProvider().menu)
     }
 
     private func updateUI() {
-        self.tabBarController?.title = self.dataSource?.currentSpace?.summary?.displayname ?? VectorL10n.allChatsTitle
+        let currentSpace = self.dataSource?.currentSpace
+        self.tabBarController?.title = currentSpace?.summary?.displayname ?? VectorL10n.allChatsTitle
+        self.actionPanelView.editButton.setImage(UIImage(systemName: currentSpace == nil ? "square.and.pencil" : "ellipsis.circle"), for: .normal)
 
         actionPanelView.editButton.menu = editActionProvider.updateMenu(with: mainSession, parentSpace: dataSource?.currentSpace, completion: { [weak self] menu in
             self?.actionPanelView.editButton.menu = menu