From 84a452931eda91bc114d9620628ac443d93b2a94 Mon Sep 17 00:00:00 2001
From: Dan Barber <db@thoughtbot.com>
Date: Mon, 23 Nov 2020 16:27:01 -0500
Subject: [PATCH] Finally fix album view layout

---
 .../Browser/Album Browser/AlbumViewItem.swift | 34 +++++++++--------
 .../Browser/Album Browser/AlbumViewItem.xib   | 37 ++++++++++---------
 .../Layouts/FlexibleGridViewLayout.swift      | 14 +++----
 .../Window/Base.lproj/Main.storyboard         | 12 +++---
 4 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/Mac/Components/Browser/Album Browser/AlbumViewItem.swift b/Mac/Components/Browser/Album Browser/AlbumViewItem.swift
index 6528c0e..f68b8da 100644
--- a/Mac/Components/Browser/Album Browser/AlbumViewItem.swift	
+++ b/Mac/Components/Browser/Album Browser/AlbumViewItem.swift	
@@ -22,6 +22,9 @@ class AlbumViewItem: NSCollectionViewItem {
   override func viewDidLoad() {
     super.viewDidLoad()
 
+    view.wantsLayer = true
+    view.layer?.masksToBounds = false
+
     albumCoverView.wantsLayer = true
     albumCoverView.layer?.backgroundColor = NSColor.black.cgColor
     albumCoverView.layer?.cornerRadius = 4
@@ -70,24 +73,25 @@ class AlbumViewItem: NSCollectionViewItem {
       options: [
         .processor(DownsamplingImageProcessor(size: .albumListCoverSize)),
         .scaleFactor(2),
-      ]
-    ) { result in
-      switch result {
-      case .success(let imageResult):
-        guard let imageData = imageResult.image.tiffRepresentation
+      ],
+      completionHandler: { result in
+        switch result {
+        case .success(let imageResult):
+          guard let imageData = imageResult.image.tiffRepresentation
           else { return }
-        
-        let rawProvider = RawImageDataProvider(
-          data: imageData,
-          cacheKey: album.hash
-        )
-        
-        self.cacheSmallCover(provider: rawProvider)
 
-      case .failure(_):
-        break
+          let rawProvider = RawImageDataProvider(
+            data: imageData,
+            cacheKey: album.hash
+          )
+
+          self.cacheSmallCover(provider: rawProvider)
+
+        case .failure(_):
+          break
+        }
       }
-    }
+    )
   }
   
   func cacheSmallCover(provider: ImageDataProvider) {
diff --git a/Mac/Components/Browser/Album Browser/AlbumViewItem.xib b/Mac/Components/Browser/Album Browser/AlbumViewItem.xib
index a5465b9..5e50c56 100644
--- a/Mac/Components/Browser/Album Browser/AlbumViewItem.xib	
+++ b/Mac/Components/Browser/Album Browser/AlbumViewItem.xib	
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="15705" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
+<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="17506" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
     <dependencies>
         <deployment identifier="macosx"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="15705"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="17506"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -18,17 +18,17 @@
         <customObject id="-1" userLabel="First Responder" customClass="FirstResponder"/>
         <customObject id="-3" userLabel="Application" customClass="NSObject"/>
         <customView identifier="albumViewItem" id="Hz6-mo-xeY">
-            <rect key="frame" x="0.0" y="0.0" width="158" height="192"/>
+            <rect key="frame" x="0.0" y="0.0" width="128" height="170"/>
             <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
             <subviews>
                 <box boxType="custom" borderType="none" cornerRadius="4" title="Box" translatesAutoresizingMaskIntoConstraints="NO" id="oat-Vd-t1v">
-                    <rect key="frame" x="5" y="49" width="148" height="138"/>
+                    <rect key="frame" x="-5" y="37" width="138" height="138"/>
                     <view key="contentView" wantsLayer="YES" id="h1X-3X-S5v">
-                        <rect key="frame" x="0.0" y="0.0" width="148" height="138"/>
+                        <rect key="frame" x="0.0" y="0.0" width="138" height="138"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <button verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="juD-33-Glf" customClass="AlbumCoverButton" customModule="Persephone" customModuleProvider="target">
-                                <rect key="frame" x="5" y="5" width="138" height="128"/>
+                                <rect key="frame" x="5" y="5" width="128" height="128"/>
                                 <shadow key="shadow" blurRadius="4">
                                     <size key="offset" width="0.0" height="2"/>
                                     <color key="color" white="0.0" alpha="0.34603323063380281" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
@@ -50,18 +50,21 @@
                             <constraint firstAttribute="trailing" secondItem="juD-33-Glf" secondAttribute="trailing" constant="5" id="z1e-o3-Xt0"/>
                         </constraints>
                     </view>
+                    <constraints>
+                        <constraint firstAttribute="width" secondItem="oat-Vd-t1v" secondAttribute="height" multiplier="1:1" id="TQP-Gh-ax2"/>
+                    </constraints>
                 </box>
                 <textField identifier="albumTitle" horizontalHuggingPriority="251" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="KEh-NL-c2W">
-                    <rect key="frame" x="8" y="28" width="142" height="17"/>
-                    <textFieldCell key="cell" lineBreakMode="truncatingTail" title="Label" id="pDs-0t-e1j">
+                    <rect key="frame" x="-2" y="17" width="132" height="16"/>
+                    <textFieldCell key="cell" lineBreakMode="truncatingTail" title="Title" id="pDs-0t-e1j">
                         <font key="font" metaFont="system"/>
                         <color key="textColor" name="labelColor" catalog="System" colorSpace="catalog"/>
                         <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
                     </textFieldCell>
                 </textField>
                 <textField identifier="albumArtist" horizontalHuggingPriority="251" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="5Uu-j1-qyT">
-                    <rect key="frame" x="8" y="10" width="142" height="16"/>
-                    <textFieldCell key="cell" lineBreakMode="truncatingTail" title="Label" id="yZn-e9-zyP">
+                    <rect key="frame" x="-2" y="0.0" width="132" height="16"/>
+                    <textFieldCell key="cell" lineBreakMode="truncatingTail" title="Artist" id="yZn-e9-zyP">
                         <font key="font" metaFont="system"/>
                         <color key="textColor" name="secondaryLabelColor" catalog="System" colorSpace="catalog"/>
                         <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
@@ -69,15 +72,15 @@
                 </textField>
             </subviews>
             <constraints>
+                <constraint firstItem="5Uu-j1-qyT" firstAttribute="top" secondItem="KEh-NL-c2W" secondAttribute="bottom" constant="1" id="1WX-jC-dQO"/>
                 <constraint firstItem="5Uu-j1-qyT" firstAttribute="trailing" secondItem="KEh-NL-c2W" secondAttribute="trailing" id="64z-uz-4nY"/>
-                <constraint firstAttribute="bottom" secondItem="KEh-NL-c2W" secondAttribute="bottom" constant="28" id="8Kg-1r-wNp"/>
-                <constraint firstAttribute="bottom" secondItem="oat-Vd-t1v" secondAttribute="bottom" constant="49" id="9be-hX-hie"/>
-                <constraint firstItem="oat-Vd-t1v" firstAttribute="top" secondItem="Hz6-mo-xeY" secondAttribute="top" constant="5" id="HYh-A2-m7g"/>
+                <constraint firstItem="oat-Vd-t1v" firstAttribute="top" secondItem="Hz6-mo-xeY" secondAttribute="top" constant="-5" id="HYh-A2-m7g"/>
                 <constraint firstItem="5Uu-j1-qyT" firstAttribute="leading" secondItem="KEh-NL-c2W" secondAttribute="leading" id="MUo-0i-fX9"/>
-                <constraint firstItem="oat-Vd-t1v" firstAttribute="leading" secondItem="Hz6-mo-xeY" secondAttribute="leading" constant="5" id="PHC-uH-EH6"/>
-                <constraint firstAttribute="bottom" secondItem="5Uu-j1-qyT" secondAttribute="bottom" constant="10" id="gci-4h-pDZ"/>
-                <constraint firstItem="KEh-NL-c2W" firstAttribute="leading" secondItem="Hz6-mo-xeY" secondAttribute="leading" constant="10" id="hG2-cb-UqL"/>
-                <constraint firstAttribute="trailing" secondItem="oat-Vd-t1v" secondAttribute="trailing" constant="5" id="nD3-RG-rfr"/>
+                <constraint firstItem="oat-Vd-t1v" firstAttribute="leading" secondItem="Hz6-mo-xeY" secondAttribute="leading" constant="-5" id="PHC-uH-EH6"/>
+                <constraint firstAttribute="bottom" secondItem="5Uu-j1-qyT" secondAttribute="bottom" id="gci-4h-pDZ"/>
+                <constraint firstItem="KEh-NL-c2W" firstAttribute="leading" secondItem="Hz6-mo-xeY" secondAttribute="leading" id="hG2-cb-UqL"/>
+                <constraint firstAttribute="trailing" secondItem="oat-Vd-t1v" secondAttribute="trailing" constant="-5" id="nD3-RG-rfr"/>
+                <constraint firstItem="oat-Vd-t1v" firstAttribute="top" secondItem="Hz6-mo-xeY" secondAttribute="top" constant="-5" id="q6g-ZX-kjQ"/>
                 <constraint firstItem="KEh-NL-c2W" firstAttribute="top" secondItem="oat-Vd-t1v" secondAttribute="bottom" constant="4" id="rOI-E8-Odh"/>
                 <constraint firstItem="KEh-NL-c2W" firstAttribute="centerX" secondItem="Hz6-mo-xeY" secondAttribute="centerX" id="ubc-MA-g7H"/>
             </constraints>
diff --git a/Mac/Components/Shared/Layouts/FlexibleGridViewLayout.swift b/Mac/Components/Shared/Layouts/FlexibleGridViewLayout.swift
index abe0749..778c91a 100644
--- a/Mac/Components/Shared/Layouts/FlexibleGridViewLayout.swift
+++ b/Mac/Components/Shared/Layouts/FlexibleGridViewLayout.swift
@@ -9,20 +9,20 @@
 import AppKit
 
 class FlexibleGridViewLayout: NSCollectionViewFlowLayout {
-  let maxItemWidth: CGFloat = 200
+  let maxItemWidth: CGFloat = 180
   var extraHeight: CGFloat = 0
   var scrollPosition: CGFloat = 0
 
   required init?(coder aDecoder: NSCoder) {
     super.init()
 
-    minimumLineSpacing = 0
-    minimumInteritemSpacing = 0
+    minimumLineSpacing = 20
+    minimumInteritemSpacing = 20
     sectionInset = NSEdgeInsets(
-      top: 10,
-      left: 30,
-      bottom: 50,
-      right: 30
+      top: 20,
+      left: 40,
+      bottom: 60,
+      right: 40
     )
   }
 
diff --git a/Mac/Components/Window/Base.lproj/Main.storyboard b/Mac/Components/Window/Base.lproj/Main.storyboard
index ef936d1..4ab71d9 100644
--- a/Mac/Components/Window/Base.lproj/Main.storyboard
+++ b/Mac/Components/Window/Base.lproj/Main.storyboard
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.Storyboard.XIB" version="3.0" toolsVersion="15705" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" initialViewController="B8D-0N-5wS">
+<document type="com.apple.InterfaceBuilder3.Cocoa.Storyboard.XIB" version="3.0" toolsVersion="17506" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" initialViewController="B8D-0N-5wS">
     <dependencies>
         <deployment identifier="macosx"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="15705"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="17506"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -595,11 +595,11 @@
         <scene sceneID="xTC-Y5-Agk">
             <objects>
                 <viewController title="General" id="nYi-sw-ZNp" customClass="GeneralPrefsViewController" customModule="Persephone" customModuleProvider="target" sceneMemberID="viewController">
-                    <view key="view" autoresizesSubviews="NO" canDrawConcurrently="YES" id="Uwt-Lw-ILP">
+                    <view key="view" autoresizesSubviews="NO" id="Uwt-Lw-ILP">
                         <rect key="frame" x="0.0" y="0.0" width="427" height="103"/>
                         <autoresizingMask key="autoresizingMask"/>
                         <subviews>
-                            <gridView canDrawConcurrently="YES" horizontalHuggingPriority="750" verticalHuggingPriority="750" horizontalCompressionResistancePriority="250" verticalCompressionResistancePriority="250" xPlacement="leading" yPlacement="center" rowAlignment="lastBaseline" rowSpacing="14" translatesAutoresizingMaskIntoConstraints="NO" id="wZR-xb-oas">
+                            <gridView horizontalHuggingPriority="750" verticalHuggingPriority="750" horizontalCompressionResistancePriority="250" verticalCompressionResistancePriority="250" xPlacement="leading" yPlacement="center" rowAlignment="lastBaseline" rowSpacing="14" translatesAutoresizingMaskIntoConstraints="NO" id="wZR-xb-oas">
                                 <rect key="frame" x="0.0" y="0.0" width="427" height="103"/>
                                 <rows>
                                     <gridRow topPadding="20" id="cf6-Nw-eLu"/>
@@ -770,7 +770,7 @@
                                                                 <textField verticalHuggingPriority="750" horizontalCompressionResistancePriority="250" translatesAutoresizingMaskIntoConstraints="NO" id="tBe-Q9-3Rw" userLabel="Song Artist View">
                                                                     <rect key="frame" x="1" y="8" width="225" height="15"/>
                                                                     <textFieldCell key="cell" lineBreakMode="truncatingTail" sendsActionOnEndEditing="YES" title="Song Artist" id="Ceb-ec-ydU">
-                                                                        <font key="font" metaFont="label" size="12"/>
+                                                                        <font key="font" metaFont="cellTitle"/>
                                                                         <color key="textColor" name="secondaryLabelColor" catalog="System" colorSpace="catalog"/>
                                                                         <color key="backgroundColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                                                                     </textFieldCell>
@@ -916,7 +916,7 @@
                         <subviews>
                             <scrollView wantsLayer="YES" borderType="none" autohidesScrollers="YES" horizontalLineScroll="10" horizontalPageScroll="10" verticalLineScroll="10" verticalPageScroll="10" usesPredominantAxisScrolling="NO" translatesAutoresizingMaskIntoConstraints="NO" id="i5f-35-7x8">
                                 <rect key="frame" x="0.0" y="0.0" width="450" height="300"/>
-                                <clipView key="contentView" id="iXE-Xl-zu6">
+                                <clipView key="contentView" copiesOnScroll="NO" id="iXE-Xl-zu6">
                                     <rect key="frame" x="0.0" y="0.0" width="450" height="300"/>
                                     <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                     <subviews>