Merge pull request #1760 from Automattic/new_grid_layout_improvements

New grid layout improvements
Automattic · May 16, 2024 · 2c72fc0 · 2c72fc0
2 parents ed65cf3 + f98cb3b
commit 2c72fc0
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 8 deletions.
diff --git a/podcasts/CircleView.swift b/podcasts/CircleView.swift
@@ -16,7 +16,7 @@ class CircleView: UIView {
     }
 
     override func draw(_ rect: CGRect) {
-        let radius = (rect.width / 2) - 1
+        let radius = (rect.width / 2) - (borderWidth / 2)
         let path = UIBezierPath(arcCenter: CGPoint(x: rect.midX, y: rect.midY), radius: radius, startAngle: CGFloat(0).degreesToRadians, endAngle: CGFloat(360).degreesToRadians, clockwise: true)
         centerColor.setFill()
         path.fill()

diff --git a/podcasts/FolderGridCell.swift b/podcasts/FolderGridCell.swift
@@ -3,6 +3,8 @@ import UIKit
 
 class FolderGridCell: UICollectionViewCell {
 
+    @IBOutlet var shadowView: UIView!
+
     @IBOutlet var containerView: UIView!
 
     @IBOutlet var folderPreview: FolderPreviewView!
@@ -15,6 +17,17 @@ class FolderGridCell: UICollectionViewCell {
         containerView.layer.cornerRadius = 4
         containerView.layer.masksToBounds = true
 
+        shadowView.layer.shadowColor = UIColor.black.cgColor
+        shadowView.layer.shadowOffset = CGSize(width: 0, height: 1)
+        shadowView.layer.shadowOpacity = 0.1
+        shadowView.layer.shadowRadius = 2
+        shadowView.layer.cornerRadius = 4
+
         badgeView.populateFrom(folder: folder, badgeType: badgeType)
     }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        shadowView.layer.shadowPath = UIBezierPath(rect: bounds).cgPath
+    }
 }
diff --git a/podcasts/FolderGridCell.xib b/podcasts/FolderGridCell.xib
@@ -18,6 +18,12 @@
                 <rect key="frame" x="0.0" y="0.0" width="125" height="125"/>
                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                 <subviews>
+                    <view contentMode="scaleToFill" id="S1g-3I-jn4">
+                        <rect key="frame" x="0.0" y="0.0" width="125" height="125"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <viewLayoutGuide key="safeArea" id="oFi-24-Mf6"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                    </view>
                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="1gQ-6J-066" userLabel="ContainerView">
                         <rect key="frame" x="0.0" y="0.0" width="125" height="125"/>
                         <subviews>
@@ -59,6 +65,7 @@
                 <outlet property="badgeView" destination="6TF-v3-9Cy" id="gcv-6n-nUs"/>
                 <outlet property="containerView" destination="1gQ-6J-066" id="9fR-I6-EdR"/>
                 <outlet property="folderPreview" destination="lEk-hS-0Dg" id="XsM-rm-9lQ"/>
+                <outlet property="shadowView" destination="S1g-3I-jn4" id="k68-sg-9P0"/>
             </connections>
             <point key="canvasLocation" x="-294.92753623188406" y="-11.71875"/>
         </collectionViewCell>

diff --git a/podcasts/GridBadgeView.swift b/podcasts/GridBadgeView.swift
@@ -60,6 +60,8 @@ class GridBadgeView: UIView {
         badgeLabel.font = UIFont.systemFont(ofSize: 11, weight: .semibold)
         badgeLabel.translatesAutoresizingMaskIntoConstraints = false
         badgeLabel.textAlignment = .center
+        badgeLabel.layer.borderWidth = 2
+        badgeLabel.layer.cornerRadius = 10
         addSubview(badgeLabel)
         labelWidthConstraint = badgeLabel.widthAnchor.constraint(equalToConstant: 20)
         NSLayoutConstraint.activate([
@@ -69,10 +71,11 @@ class GridBadgeView: UIView {
         ])
 
         simpleBadge.translatesAutoresizingMaskIntoConstraints = false
+        simpleBadge.borderWidth = 3.0
         addSubview(simpleBadge)
         NSLayoutConstraint.activate([
-            simpleBadge.heightAnchor.constraint(equalToConstant: 12),
-            simpleBadge.widthAnchor.constraint(equalToConstant: 12),
+            simpleBadge.heightAnchor.constraint(equalToConstant: 15),// The total size needs to take account the border width too
+            simpleBadge.widthAnchor.constraint(equalToConstant: 15),
             simpleBadge.trailingAnchor.constraint(equalTo: trailingAnchor),
             simpleBadge.topAnchor.constraint(equalTo: topAnchor)
         ])
@@ -92,10 +95,8 @@ class GridBadgeView: UIView {
         badgeLabel.textColor = ThemeColor.primaryInteractive02()
         badgeLabel.backgroundColor = ThemeColor.primaryInteractive01()
         badgeLabel.layer.borderColor = ThemeColor.primaryUi04().cgColor
-        badgeLabel.layer.borderWidth = 2
-        badgeLabel.layer.cornerRadius = 10
 
-        simpleBadge.borderColor = ThemeColor.primaryUi04()
+        simpleBadge.borderColor = ThemeColor.primaryUi02()
         simpleBadge.centerColor = ThemeColor.primaryInteractive01()
         simpleBadge.backgroundColor = .clear
     }

diff --git a/podcasts/PodcastGridCell.swift b/podcasts/PodcastGridCell.swift
@@ -3,6 +3,7 @@ import UIKit
 
 class PodcastGridCell: UICollectionViewCell {
 
+    @IBOutlet var shadowView: UIView!
     @IBOutlet var containerView: UIView!
     @IBOutlet var podcastImage: UIImageView!
     @IBOutlet var podcastName: UILabel!
@@ -20,12 +21,22 @@ class PodcastGridCell: UICollectionViewCell {
         NotificationCenter.default.addObserver(self, selector: #selector(podcastImageCacheCleared), name: Constants.Notifications.podcastImageReCacheRequired, object: nil)
     }
 
+    private func setup() {
+        containerView.layer.cornerRadius = 4
+        containerView.layer.masksToBounds = true
+
+        shadowView.layer.shadowColor = UIColor.black.cgColor
+        shadowView.layer.shadowOffset = CGSize(width: 0, height: 1)
+        shadowView.layer.shadowOpacity = 0.1
+        shadowView.layer.shadowRadius = 2
+        shadowView.layer.cornerRadius = 4
+    }
+
     func populateFrom(podcast: Podcast, badgeType: BadgeType, libraryType: LibraryType) {
         self.badgeType = badgeType
         podcastUuid = podcast.uuid
 
-        containerView.layer.cornerRadius = 4
-        containerView.layer.masksToBounds = true
+        setup()
 
         setImage()
         setColors(podcast: podcast)
@@ -58,6 +69,11 @@ class PodcastGridCell: UICollectionViewCell {
         podcastUuid = nil
     }
 
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        shadowView.layer.shadowPath = UIBezierPath(rect: bounds).cgPath
+    }
+
     private func setImage() {
         guard let podcastUuid = podcastUuid else { return }
 

diff --git a/podcasts/PodcastGridCell.xib b/podcasts/PodcastGridCell.xib
@@ -4,6 +4,7 @@
     <dependencies>
         <deployment identifier="iOS"/>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22684"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -16,6 +17,11 @@
                 <rect key="frame" x="0.0" y="0.0" width="106" height="106"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
+                    <view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="Obo-K7-bOt" userLabel="ShadowView">
+                        <rect key="frame" x="0.0" y="0.0" width="106" height="106"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                    </view>
                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="hVd-gA-oCj" userLabel="ContainerView">
                         <rect key="frame" x="0.0" y="0.0" width="106" height="106"/>
                         <subviews>
@@ -82,9 +88,15 @@
                 <outlet property="containerView" destination="hVd-gA-oCj" id="dub-Mv-NSo"/>
                 <outlet property="podcastImage" destination="8" id="9"/>
                 <outlet property="podcastName" destination="4" id="10"/>
+                <outlet property="shadowView" destination="Obo-K7-bOt" id="mVk-6w-e5o"/>
                 <outlet property="supporterHeart" destination="v1m-PH-X4D" id="ckA-l7-rhg"/>
             </connections>
             <point key="canvasLocation" x="129.59999999999999" y="153.82308845577214"/>
         </collectionViewCell>
     </objects>
+    <resources>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
 </document>