diff --git a/BeReal.xcodeproj/project.pbxproj b/BeReal.xcodeproj/project.pbxproj index dbb11e5..7cbebec 100644 --- a/BeReal.xcodeproj/project.pbxproj +++ b/BeReal.xcodeproj/project.pbxproj @@ -15,6 +15,9 @@ 02AE650A29363DC1005A4AF3 /* BeRealUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02AE650929363DC1005A4AF3 /* BeRealUITests.swift */; }; 02AE650C29363DC1005A4AF3 /* BeRealUITestsLaunchTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02AE650B29363DC1005A4AF3 /* BeRealUITestsLaunchTests.swift */; }; 02B334E8293A93DC00C45E31 /* FolderItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02B334E7293A93DC00C45E31 /* FolderItem.swift */; }; + 02CE5554293B130100730DC9 /* DocumentItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CE5553293B130100730DC9 /* DocumentItem.swift */; }; + 02CE5557293B134200730DC9 /* Image+Helpers.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CE5556293B134200730DC9 /* Image+Helpers.swift */; }; + 02CE5559293B1AB600730DC9 /* Text+Helpers.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CE5558293B1AB600730DC9 /* Text+Helpers.swift */; }; 02FFFD7B29395DD200306533 /* String+Constants.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02FFFD7A29395DD200306533 /* String+Constants.swift */; }; 4694AAA0293A7C8800D54903 /* Modules in Frameworks */ = {isa = PBXBuildFile; productRef = 4694AA9F293A7C8800D54903 /* Modules */; }; /* End PBXBuildFile section */ @@ -49,6 +52,9 @@ 02AE650929363DC1005A4AF3 /* BeRealUITests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BeRealUITests.swift; sourceTree = ""; }; 02AE650B29363DC1005A4AF3 /* BeRealUITestsLaunchTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BeRealUITestsLaunchTests.swift; sourceTree = ""; }; 02B334E7293A93DC00C45E31 /* FolderItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FolderItem.swift; sourceTree = ""; }; + 02CE5553293B130100730DC9 /* DocumentItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DocumentItem.swift; sourceTree = ""; }; + 02CE5556293B134200730DC9 /* Image+Helpers.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Image+Helpers.swift"; sourceTree = ""; }; + 02CE5558293B1AB600730DC9 /* Text+Helpers.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Text+Helpers.swift"; sourceTree = ""; }; 02FFFD7A29395DD200306533 /* String+Constants.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "String+Constants.swift"; sourceTree = ""; }; /* End PBXFileReference section */ @@ -141,6 +147,7 @@ 02B334E2293A908800C45E31 /* Browse */ = { isa = PBXGroup; children = ( + 02CE5555293B131D00730DC9 /* Extensions */, 02B334E6293A93CE00C45E31 /* Components */, 02B334E5293A93C400C45E31 /* Views */, ); @@ -158,10 +165,20 @@ isa = PBXGroup; children = ( 02B334E7293A93DC00C45E31 /* FolderItem.swift */, + 02CE5553293B130100730DC9 /* DocumentItem.swift */, ); path = Components; sourceTree = ""; }; + 02CE5555293B131D00730DC9 /* Extensions */ = { + isa = PBXGroup; + children = ( + 02CE5556293B134200730DC9 /* Image+Helpers.swift */, + 02CE5558293B1AB600730DC9 /* Text+Helpers.swift */, + ); + path = Extensions; + sourceTree = ""; + }; 02FFFD7929395DBF00306533 /* Extensions */ = { isa = PBXGroup; children = ( @@ -313,6 +330,9 @@ files = ( 02B334E8293A93DC00C45E31 /* FolderItem.swift in Sources */, 02AE64F129363DBF005A4AF3 /* ContentView.swift in Sources */, + 02CE5554293B130100730DC9 /* DocumentItem.swift in Sources */, + 02CE5557293B134200730DC9 /* Image+Helpers.swift in Sources */, + 02CE5559293B1AB600730DC9 /* Text+Helpers.swift in Sources */, 02AE64EF29363DBF005A4AF3 /* BeRealApp.swift in Sources */, 02FFFD7B29395DD200306533 /* String+Constants.swift in Sources */, ); diff --git a/BeReal/Browse/Components/DocumentItem.swift b/BeReal/Browse/Components/DocumentItem.swift new file mode 100644 index 0000000..8b6f311 --- /dev/null +++ b/BeReal/Browse/Components/DocumentItem.swift @@ -0,0 +1,71 @@ +// +// DocumentItem.swift +// Browse +// +// Created by Javier Cicchelli on 03/12/2022. +// Copyright © 2022 Röck+Cöde. All rights reserved. +// + +import SwiftUI + +struct DocumentItem: View { + + // MARK: Properties + + let name: String + let lastModified: String + let fileSize: String + + // MARK: Body + + var body: some View { + HStack(spacing: 16) { + Image.document + .icon(size: 32) + .foregroundColor(.red) + + VStack { + Text(name) + .itemName() + + HStack { + Text(lastModified) + + Spacer() + + Text(fileSize) + } + .font(.subheadline) + .foregroundColor(.secondary) + } + } + .padding(16) + } + +} + +// MARK: - Image+Constants + +private extension Image { + static let document = Image(systemName: "doc.fill") +} + +// MARK: - Previews + +struct DocumentItem_Previews: PreviewProvider { + static var previews: some View { + DocumentItem( + name: "Some document name goes in here...", + lastModified: "Some few hours ago", + fileSize: "23,5 Mbytes" + ) + .previewDisplayName("Document item") + + DocumentItem( + name: "Some very, extremely long document name goes in here...", + lastModified: "Yesterday", + fileSize: "235,6 Kbytes" + ) + .previewDisplayName("Document item with long name") + } +} diff --git a/BeReal/Browse/Components/FolderItem.swift b/BeReal/Browse/Components/FolderItem.swift index d712996..bb1862b 100644 --- a/BeReal/Browse/Components/FolderItem.swift +++ b/BeReal/Browse/Components/FolderItem.swift @@ -23,11 +23,7 @@ struct FolderItem: View { .foregroundColor(.red) Text(name) - .font(.headline) - .foregroundColor(.primary) - .lineLimit(1) - .truncationMode(.middle) - .frame(maxWidth: .infinity, alignment: .leading) + .itemName() Image.chevronRight .icon(size: 16) @@ -39,26 +35,11 @@ struct FolderItem: View { } -// MARK: - Image +// MARK: - Image+Constants private extension Image { - - // MARK: Constants - static let folder = Image(systemName: "folder.fill") - static let document = Image(systemName: "doc.fill") static let chevronRight = Image(systemName: "chevron.right") - - // MARK: Functions - - func icon(size: CGFloat) -> some View { - self - .resizable() - .renderingMode(.template) - .scaledToFit() - .frame(width: size, height: size) - } - } // MARK: - Previews @@ -66,9 +47,9 @@ private extension Image { struct BrowseItem_Previews: PreviewProvider { static var previews: some View { FolderItem(name: "Some folder name goes in here...") - .previewDisplayName("Browse item for folders") + .previewDisplayName("Folder item") FolderItem(name: "Some very, extremely long folder name goes in here...") - .previewDisplayName("Browse item for folders with long name") + .previewDisplayName("Folder item with long name") } } diff --git a/BeReal/Browse/Extensions/Image+Helpers.swift b/BeReal/Browse/Extensions/Image+Helpers.swift new file mode 100644 index 0000000..8cf4ed6 --- /dev/null +++ b/BeReal/Browse/Extensions/Image+Helpers.swift @@ -0,0 +1,24 @@ +// +// Image+Helpers.swift +// Browse +// +// Created by Javier Cicchelli on 03/12/2022. +// Copyright © 2022 Röck+Cöde. All rights reserved. +// + +import SwiftUI + +extension Image { + + /// Resizes an image to a given size. + /// - Parameter size: A size to which an image will be resized. + /// - Returns: An resized image rendered as an erasured view. + func icon(size: CGFloat) -> some View { + self + .resizable() + .renderingMode(.template) + .scaledToFit() + .frame(width: size, height: size) + } + +} diff --git a/BeReal/Browse/Extensions/Text+Helpers.swift b/BeReal/Browse/Extensions/Text+Helpers.swift new file mode 100644 index 0000000..5fe430a --- /dev/null +++ b/BeReal/Browse/Extensions/Text+Helpers.swift @@ -0,0 +1,23 @@ +// +// Text+Helpers.swift +// BeReal +// +// Created by Javier Cicchelli on 03/12/2022. +// Copyright © 2022 Röck+Cöde. All rights reserved. +// + +import SwiftUI + +extension Text { + + /// Renders a text for the name of a folder or document item. + /// - Returns: A formatted text rendered as an erasured view. + func itemName() -> some View { + self + .font(.headline) + .lineLimit(1) + .truncationMode(.middle) + .foregroundColor(.primary) + .frame(maxWidth: .infinity, alignment: .leading) + } +}