Compact view redesign; (#44)

Antondomashnev · Jun 21, 2017 · a4defb1 · a4defb1
1 parent de76664
commit a4defb1
Show file tree

Hide file tree

Showing 38 changed files with 1,349 additions and 306 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Your contribution here.
 * [#41](https://github.com/Antondomashnev/FBSnapshotsViewer/pull/41): Add additional information for tests - [@antondomashnev](https://github.com/antondomashnev).
+* [#44](https://github.com/Antondomashnev/FBSnapshotsViewer/pull/44): Compact view redesign - [@antondomashnev](https://github.com/antondomashnev).
 
 ### 0.5.0 (26.05.2017)
 

diff --git a/FBSnapshotsViewer.xcodeproj/project.pbxproj b/FBSnapshotsViewer.xcodeproj/project.pbxproj
diff --git a/FBSnapshotsViewer/Base.lproj/Main.storyboard b/FBSnapshotsViewer/Base.lproj/Main.storyboard
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.Storyboard.XIB" version="3.0" toolsVersion="12120" systemVersion="16E195" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES">
+<document type="com.apple.InterfaceBuilder3.Cocoa.Storyboard.XIB" version="3.0" toolsVersion="13122.17" systemVersion="16F73" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES">
     <dependencies>
         <deployment identifier="macosx"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="12120"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="13122.17"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+        <capability name="system font weights other than Regular or Bold" minToolsVersion="7.0"/>
     </dependencies>
     <scenes>
         <!--Application-->
@@ -668,7 +669,7 @@
                         <rect key="frame" x="0.0" y="0.0" width="709" height="111"/>
                         <autoresizingMask key="autoresizingMask"/>
                         <subviews>
-                            <textField verticalHuggingPriority="750" horizontalCompressionResistancePriority="250" allowsCharacterPickerTouchBarItem="NO" textCompletion="NO" translatesAutoresizingMaskIntoConstraints="NO" id="OwU-Qy-4K5">
+                            <textField verticalHuggingPriority="750" horizontalCompressionResistancePriority="250" textCompletion="NO" translatesAutoresizingMaskIntoConstraints="NO" id="OwU-Qy-4K5">
                                 <rect key="frame" x="88" y="72" width="108" height="17"/>
                                 <textFieldCell key="cell" controlSize="small" sendsActionOnEndEditing="YES" alignment="left" title="Developer Folder" id="v1L-Jw-vYr">
                                     <font key="font" metaFont="system"/>
@@ -693,15 +694,15 @@
                                     <action selector="popUpValueChanged:" target="DIx-ct-IA2" id="dmx-mT-Hk1"/>
                                 </connections>
                             </popUpButton>
-                            <textField verticalHuggingPriority="750" allowsCharacterPickerTouchBarItem="NO" textCompletion="NO" translatesAutoresizingMaskIntoConstraints="NO" id="v1B-Tw-s5Z">
+                            <textField verticalHuggingPriority="750" textCompletion="NO" translatesAutoresizingMaskIntoConstraints="NO" id="v1B-Tw-s5Z">
                                 <rect key="frame" x="293" y="69" width="346" height="22"/>
                                 <textFieldCell key="cell" lineBreakMode="truncatingMiddle" selectable="YES" editable="YES" allowsUndo="NO" sendsActionOnEndEditing="YES" state="on" borderStyle="bezel" alignment="left" drawsBackground="YES" id="FWS-AD-Lzb">
                                     <font key="font" metaFont="system"/>
                                     <color key="textColor" red="0.12941176470588234" green="0.12941176470588234" blue="0.12941176470588234" alpha="0.87" colorSpace="calibratedRGB"/>
                                     <color key="backgroundColor" white="1" alpha="0.86068600171232879" colorSpace="deviceWhite"/>
                                 </textFieldCell>
                             </textField>
-                            <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" allowsCharacterPickerTouchBarItem="NO" textCompletion="NO" translatesAutoresizingMaskIntoConstraints="NO" id="JT9-rL-1Du">
+                            <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" textCompletion="NO" translatesAutoresizingMaskIntoConstraints="NO" id="JT9-rL-1Du">
                                 <rect key="frame" x="88" y="50" width="33" height="14"/>
                                 <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" enabled="NO" allowsUndo="NO" sendsActionOnEndEditing="YES" alignment="left" title="Label" id="hcT-db-XVd">
                                     <font key="font" metaFont="smallSystem"/>
@@ -760,13 +761,13 @@
                         <autoresizingMask key="autoresizingMask"/>
                         <subviews>
                             <scrollView wantsLayer="YES" borderType="none" autohidesScrollers="YES" horizontalLineScroll="10" horizontalPageScroll="10" verticalLineScroll="10" verticalPageScroll="10" hasHorizontalScroller="NO" hasVerticalScroller="NO" usesPredominantAxisScrolling="NO" translatesAutoresizingMaskIntoConstraints="NO" id="eIS-NX-4M6">
-                                <rect key="frame" x="0.0" y="0.0" width="550" height="450"/>
+                                <rect key="frame" x="0.0" y="0.0" width="550" height="406"/>
                                 <clipView key="contentView" drawsBackground="NO" id="oh3-gr-epx">
-                                    <rect key="frame" x="0.0" y="0.0" width="550" height="450"/>
+                                    <rect key="frame" x="0.0" y="0.0" width="550" height="406"/>
                                     <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                     <subviews>
                                         <collectionView id="oJD-1b-tXN">
-                                            <rect key="frame" x="0.0" y="0.0" width="550" height="450"/>
+                                            <rect key="frame" x="0.0" y="0.0" width="550" height="406"/>
                                             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                             <collectionViewFlowLayout key="collectionViewLayout" minimumInteritemSpacing="10" minimumLineSpacing="10" id="5hR-Ye-zue">
                                                 <size key="itemSize" width="50" height="50"/>
@@ -786,16 +787,55 @@
                                     <autoresizingMask key="autoresizingMask"/>
                                 </scroller>
                             </scrollView>
+                            <customView wantsLayer="YES" translatesAutoresizingMaskIntoConstraints="NO" id="yWN-mK-KOE" customClass="TestResultsTopView" customModule="FBSnapshotsViewer" customModuleProvider="target">
+                                <rect key="frame" x="0.0" y="406" width="550" height="44"/>
+                                <subviews>
+                                    <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="4Rv-5m-eGV">
+                                        <rect key="frame" x="6" y="13" width="40" height="18"/>
+                                        <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" alignment="left" title="Label" id="psS-Np-Q97">
+                                            <font key="font" metaFont="systemMedium" size="14"/>
+                                            <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
+                                            <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
+                                        </textFieldCell>
+                                    </textField>
+                                    <segmentedControl verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="2hI-Qn-ZeL">
+                                        <rect key="frame" x="449" y="10" width="95" height="24"/>
+                                        <segmentedCell key="cell" borderStyle="border" alignment="left" style="rounded" trackingMode="selectOne" id="zU9-3T-4F1">
+                                            <font key="font" metaFont="system"/>
+                                            <segments>
+                                                <segment label="Split" width="44"/>
+                                                <segment label="Diff" width="44" tag="1"/>
+                                            </segments>
+                                        </segmentedCell>
+                                    </segmentedControl>
+                                </subviews>
+                                <constraints>
+                                    <constraint firstItem="2hI-Qn-ZeL" firstAttribute="centerY" secondItem="yWN-mK-KOE" secondAttribute="centerY" id="I2g-ZW-bQY"/>
+                                    <constraint firstItem="2hI-Qn-ZeL" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="4Rv-5m-eGV" secondAttribute="trailing" constant="32" id="MtC-xf-udu"/>
+                                    <constraint firstItem="4Rv-5m-eGV" firstAttribute="centerY" secondItem="yWN-mK-KOE" secondAttribute="centerY" id="Y0E-KF-T32"/>
+                                    <constraint firstAttribute="trailing" secondItem="2hI-Qn-ZeL" secondAttribute="trailing" constant="8" id="b8O-Wp-S3G"/>
+                                    <constraint firstItem="4Rv-5m-eGV" firstAttribute="leading" secondItem="yWN-mK-KOE" secondAttribute="leading" constant="8" id="ouu-Jt-J64"/>
+                                    <constraint firstAttribute="height" constant="44" id="wMk-jQ-8gP"/>
+                                </constraints>
+                                <connections>
+                                    <outlet property="numberOfTestsLabel" destination="4Rv-5m-eGV" id="K1N-VK-gj2"/>
+                                    <outlet property="testResultsDiffModeSegementedControl" destination="2hI-Qn-ZeL" id="ESu-XE-khC"/>
+                                </connections>
+                            </customView>
                         </subviews>
                         <constraints>
                             <constraint firstAttribute="trailing" secondItem="eIS-NX-4M6" secondAttribute="trailing" id="8ZS-Rw-QUN"/>
-                            <constraint firstItem="eIS-NX-4M6" firstAttribute="top" secondItem="n56-98-JjZ" secondAttribute="top" id="gLZ-aM-UsU"/>
+                            <constraint firstItem="yWN-mK-KOE" firstAttribute="leading" secondItem="n56-98-JjZ" secondAttribute="leading" id="TaM-VC-mnb"/>
+                            <constraint firstAttribute="trailing" secondItem="yWN-mK-KOE" secondAttribute="trailing" id="URF-W1-K44"/>
+                            <constraint firstItem="eIS-NX-4M6" firstAttribute="top" secondItem="yWN-mK-KOE" secondAttribute="bottom" id="Wft-xx-95n"/>
                             <constraint firstAttribute="bottom" secondItem="eIS-NX-4M6" secondAttribute="bottom" id="rni-LK-bTM"/>
                             <constraint firstItem="eIS-NX-4M6" firstAttribute="leading" secondItem="n56-98-JjZ" secondAttribute="leading" id="wtf-U1-EAP"/>
+                            <constraint firstItem="yWN-mK-KOE" firstAttribute="top" secondItem="n56-98-JjZ" secondAttribute="top" id="ytD-YM-KHi"/>
                         </constraints>
                     </view>
                     <connections>
                         <outlet property="collectionView" destination="oJD-1b-tXN" id="RBV-gI-qaX"/>
+                        <outlet property="topView" destination="yWN-mK-KOE" id="5bv-d1-eVQ"/>
                     </connections>
                 </viewController>
                 <customObject id="Jdu-xL-2pM" userLabel="First Responder" customClass="NSResponder" sceneMemberID="firstResponder"/>

diff --git a/FBSnapshotsViewer/ColorsPalette.txt b/FBSnapshotsViewer/ColorsPalette.txt
@@ -1,13 +1,16 @@
-PrimaryText.LightMode        : 0x212121DD
-SecondaryText.LightMode      : 0x7575758A
-PrimaryLight.LightMode       : 0xCFD8DCFF
-Divider.LightMode            : 0xBDBDBDFF
-ButtonBackground.LightMode   : 0x212121DD
-ButtonTitle.LightMode        : 0xFFFFFFDD
+TestResultsTopViewColorTop      : 0xE7E6E7FF
+TestResultsTopViewColorBottom   : 0xD1D0D1FF
 
-PrimaryText.DarkMode        : 0xFFFFFFDD
-SecondaryText.DarkMode      : 0xFFFFFF8A
-PrimaryLight.DarkMode       : 0xECEFF1FF
-Divider.DarkMode            : 0xF5F5F5FF
-ButtonBackground.DarkMode   : 0xFAFAFADD
-ButtonTitle.DarkMode        : 0xFFFFFFDD
+PrimaryText.LightMode           : 0x000000DE
+SecondaryText.LightMode         : 0x757575DE
+PrimaryLight.LightMode          : 0xCFD8DCDE
+Divider.LightMode               : 0xBDBDBDFF
+ButtonBackground.LightMode      : 0x212121DD
+ButtonTitle.LightMode           : 0xFFFFFFDD
+
+PrimaryText.DarkMode            : 0xFFFFFFDE
+SecondaryText.DarkMode          : 0xFFFFFFDE
+PrimaryLight.DarkMode           : 0xECEFF1DE
+Divider.DarkMode                : 0xF5F5F5FF
+ButtonBackground.DarkMode       : 0xFAFAFADD
+ButtonTitle.DarkMode            : 0xFFFFFFDD
diff --git a/FBSnapshotsViewer/Test Results/Models/TestResultsDiffMode.swift b/FBSnapshotsViewer/Test Results/Models/TestResultsDiffMode.swift
@@ -0,0 +1,14 @@
+//
+//  TestResultsDiffMode.swift
+//  FBSnapshotsViewer
+//
+//  Created by Anton Domashnev on 13.06.17.
+//  Copyright © 2017 Anton Domashnev. All rights reserved.
+//
+
+import Foundation
+
+enum TestResultsDiffMode: AutoEquatable {
+    case diff
+    case mouseOver
+}
diff --git a/FBSnapshotsViewer/Test Results/Presenter/TestResultDisplayInfo.swift b/FBSnapshotsViewer/Test Results/Presenter/TestResultDisplayInfo.swift
@@ -16,10 +16,8 @@ struct TestResultDisplayInfo: AutoEquatable {
     let testContext: String
     let canBeViewedInKaleidoscope: Bool
     let testResult: SnapshotTestResult
-    let createdAt: String
-    let applicationName: String
 
-    init(testResult: SnapshotTestResult, kaleidoscopeViewer: ExternalViewer.Type = KaleidoscopeViewer.self, dateFormatter: DateComponentsFormatter = DateComponentsFormatter.naturalApproximationFormatter) {
+    init(testResult: SnapshotTestResult, kaleidoscopeViewer: ExternalViewer.Type = KaleidoscopeViewer.self) {
         self.testResult = testResult
         self.canBeViewedInKaleidoscope = kaleidoscopeViewer.isAvailable() && kaleidoscopeViewer.canView(snapshotTestResult: testResult)
         switch testResult {
@@ -32,11 +30,8 @@ struct TestResultDisplayInfo: AutoEquatable {
             self.diffImageURL = URL(fileURLWithPath: diffImagePath)
             self.failedImageURL = URL(fileURLWithPath: failedImagePath)
         }
-        self.createdAt = dateFormatter.string(from: testResult.build.date, to: Date()) ?? "Just now"
-
         let testNameComponents = testResult.testName.replacingOccurrences(of: "_", with: " ").components(separatedBy: " ")
         self.testContext = testNameComponents[0..<(testNameComponents.count - 1)].joined(separator: " ")
         self.testName = testNameComponents[testNameComponents.count - 1]
-        self.applicationName = testResult.build.applicationName
     }
 }
diff --git a/FBSnapshotsViewer/Test Results/Presenter/TestResultsCollectionViewOutlets.swift b/FBSnapshotsViewer/Test Results/Presenter/TestResultsCollectionViewOutlets.swift
@@ -6,46 +6,70 @@
 //  Copyright © 2017 Anton Domashnev. All rights reserved.
 //
 
-import Cocoa
+import AppKit
 
 class TestResultsCollectionViewOutlets: NSObject {
-    var testResults: [TestResultDisplayInfo] = []
+    var testResultsDisplayInfo: TestResultsDisplayInfo = TestResultsDisplayInfo()
     fileprivate weak var testResultCellDelegate: TestResultCellDelegate?
 
     init(collectionView: NSCollectionView, testResultCellDelegate: TestResultCellDelegate? = nil) {
-        guard let nib = NSNib(nibNamed: "TestResultCell", bundle: Bundle.main) else {
-            fatalError("TestResultCell is missing in bundle")
+        guard let testResultCellNib = NSNib(nibNamed: TestResultCell.itemIdentifier, bundle: Bundle.main),
+              let testResultHeaderNib = NSNib(nibNamed: TestResultsHeader.itemIdentifier, bundle: Bundle.main) else {
+            fatalError("TestResultCell || TestResultsHeader is missing in bundle")
         }
-        collectionView.register(nib, forItemWithIdentifier: TestResultCell.itemIdentifier)
+        collectionView.register(testResultCellNib, forItemWithIdentifier: TestResultCell.itemIdentifier)
+        collectionView.register(testResultHeaderNib, forSupplementaryViewOfKind: NSCollectionElementKindSectionHeader, withIdentifier: TestResultsHeader.itemIdentifier)
         self.testResultCellDelegate = testResultCellDelegate
         super.init()
     }
 }
 
 extension TestResultsCollectionViewOutlets: NSCollectionViewDelegateFlowLayout {
     func collectionView(_ collectionView: NSCollectionView, layout collectionViewLayout: NSCollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> NSSize {
-        return NSSize(width: 530, height: 346)
+        return NSSize(width: 732, height: 408)
     }
 
     func collectionView(_ collectionView: NSCollectionView, layout collectionViewLayout: NSCollectionViewLayout, insetForSectionAt section: Int) -> EdgeInsets {
         return EdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
     }
+
+    func collectionView(_ collectionView: NSCollectionView, layout collectionViewLayout: NSCollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
+        return 0
+    }
+
+    func collectionView(_ collectionView: NSCollectionView, layout collectionViewLayout: NSCollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
+         return 0
+    }
+
+    func collectionView(_ collectionView: NSCollectionView, layout collectionViewLayout: NSCollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> NSSize {
+        return NSSize(width: 732, height: 30)
+    }
 }
 
 extension TestResultsCollectionViewOutlets: NSCollectionViewDataSource {
     func numberOfSections(in collectionView: NSCollectionView) -> Int {
-        return 1
+        return testResultsDisplayInfo.sectionInfos.count
     }
 
     func collectionView(_ collectionView: NSCollectionView, numberOfItemsInSection section: Int) -> Int {
-        return testResults.count
+        return testResultsDisplayInfo.sectionInfos[section].itemInfos.count
     }
-
+
+    func collectionView(_ collectionView: NSCollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> NSView {
+        guard let view = collectionView.makeSupplementaryView(ofKind: NSCollectionElementKindSectionHeader, withIdentifier: TestResultsHeader.itemIdentifier, for: indexPath) as? TestResultsHeader else {
+            fatalError("TestResultsHeader is not registered in collection view")
+        }
+        let titleInfo = testResultsDisplayInfo.sectionInfos[indexPath.section].titleInfo
+        view.configure(with: titleInfo)
+        return view
+    }
+
     func collectionView(_ collectionView: NSCollectionView, itemForRepresentedObjectAt indexPath: IndexPath) -> NSCollectionViewItem {
         guard let item = collectionView.makeItem(withIdentifier: TestResultCell.itemIdentifier, for: indexPath) as? TestResultCell else {
             fatalError("TestResultCell is not registered in collection view")
         }
-        item.configure(with: testResults[indexPath.item])
+        let testResultInfo = testResultsDisplayInfo.sectionInfos[indexPath.section].itemInfos[indexPath.item]
+        item.configure(with: testResultInfo, diffMode: testResultsDisplayInfo.testResultsDiffMode)
         item.delegate = testResultCellDelegate
         return item
     }

diff --git a/FBSnapshotsViewer/Test Results/Presenter/TestResultsDisplayInfo.swift b/FBSnapshotsViewer/Test Results/Presenter/TestResultsDisplayInfo.swift
@@ -0,0 +1,22 @@
+//
+//  TestResultsDisplayInfo.swift
+//  FBSnapshotsViewer
+//
+//  Created by Anton Domashnev on 17.06.17.
+//  Copyright © 2017 Anton Domashnev. All rights reserved.
+//
+
+import Foundation
+
+struct TestResultsDisplayInfo: AutoEquatable {
+    let sectionInfos: [TestResultsSectionDisplayInfo]
+    let topTitle: String
+    let testResultsDiffMode: TestResultsDiffMode
+
+    init(sectionInfos: [TestResultsSectionDisplayInfo] = [], testResultsDiffMode: TestResultsDiffMode = .mouseOver) {
+        self.sectionInfos = sectionInfos
+        self.testResultsDiffMode = testResultsDiffMode
+        let numberOfTests = sectionInfos.reduce(0, { $0 + $1.itemInfos.count })
+        self.topTitle = "\(numberOfTests) Test Result" + (numberOfTests > 1 ? "s" : "")
+    }
+}