From 5dd0a583e4e60e7c9c6f634000322afddfc7b52a Mon Sep 17 00:00:00 2001 From: Phil Worthington Date: Tue, 9 Apr 2019 01:01:37 +0000 Subject: [PATCH] Merged PR 253071: MSActivityIndicatorView demo and updated activity view sizes Adds a demo for MSActivityIndicatorView and updates MSActivityIndicatorViewSize to include the sizes included in toolkit. Small refactor of MSAvatarView demo due to reused code. Related work items: #705398 --- .../OfficeUIFabric.Demo/DemoController.swift | 20 ++++++++ .../OfficeUIFabric.Demo/Demos.swift | 1 + ...SActivityIndicatorViewDemoController.swift | 36 +++++++++++++++ .../Demos/MSAvatarViewDemoController.swift | 34 +++----------- .../Controls/MSActivityIndicatorView.swift | 46 ++++++++----------- OfficeUIFabric/Core/Colors.swift | 2 +- .../Table View/MSActivityIndicatorCell.swift | 2 +- 7 files changed, 86 insertions(+), 55 deletions(-) create mode 100644 OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos/MSActivityIndicatorViewDemoController.swift diff --git a/OfficeUIFabric.Demo/OfficeUIFabric.Demo/DemoController.swift b/OfficeUIFabric.Demo/OfficeUIFabric.Demo/DemoController.swift index 293c07a..3befc87 100644 --- a/OfficeUIFabric.Demo/OfficeUIFabric.Demo/DemoController.swift +++ b/OfficeUIFabric.Demo/OfficeUIFabric.Demo/DemoController.swift @@ -33,6 +33,26 @@ class DemoController: UIViewController { container.addArrangedSubview(titleLabel) } + func addRow(text: String, items: [UIView]) { + let itemsContainer = UIStackView() + itemsContainer.axis = .vertical + itemsContainer.alignment = .leading + + let itemRow = UIStackView() + itemRow.axis = .horizontal + itemRow.alignment = .center + itemRow.spacing = 40 + + let label = MSLabel(style: .subhead, colorStyle: .regular) + label.text = text + label.widthAnchor.constraint(equalToConstant: 65).isActive = true + + itemRow.addArrangedSubview(label) + items.forEach { itemRow.addArrangedSubview($0) } + itemsContainer.addArrangedSubview(itemRow) + container.addArrangedSubview(itemsContainer) + } + override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = MSColors.background diff --git a/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos.swift b/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos.swift index 57708c3..1f71220 100644 --- a/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos.swift +++ b/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos.swift @@ -7,6 +7,7 @@ import UIKit // Register your control demos here let demos: [(title: String, controllerClass: UIViewController.Type)] = [ + ("MSActivityIndicatorView", MSActivityIndicatorViewDemoController.self), ("MSAvatarView", MSAvatarViewDemoController.self), ("MSBadgeField", MSBadgeFieldDemoController.self), ("MSBadgeView", MSBadgeViewDemoController.self), diff --git a/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos/MSActivityIndicatorViewDemoController.swift b/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos/MSActivityIndicatorViewDemoController.swift new file mode 100644 index 0000000..1842b05 --- /dev/null +++ b/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos/MSActivityIndicatorViewDemoController.swift @@ -0,0 +1,36 @@ +// +// Copyright (c) Microsoft Corporation. All rights reserved. +// Licensed under the MIT License. +// + +import OfficeUIFabric +import UIKit + +class MSActivityIndicatorViewDemoController: DemoController { + override func viewDidLoad() { + super.viewDidLoad() + + for size in MSActivityIndicatorViewSize.allCases { + let activityIndicatorView = MSActivityIndicatorView(size: size) + activityIndicatorView.startAnimating() + addRow(text: size.description, items: [activityIndicatorView]) + } + } +} + +extension MSActivityIndicatorViewSize { + var description: String { + switch self { + case .xSmall: + return "XSmall" + case .small: + return "Small" + case .medium: + return "Medium" + case .large: + return "Large" + case .xLarge: + return "XLarge" + } + } +} diff --git a/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos/MSAvatarViewDemoController.swift b/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos/MSAvatarViewDemoController.swift index 6bb1390..18b80f5 100644 --- a/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos/MSAvatarViewDemoController.swift +++ b/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos/MSAvatarViewDemoController.swift @@ -14,42 +14,22 @@ class MSAvatarViewDemoController: DemoController { let siteImage = UIImage(named: "site") addTitle(text: "Avatar with Image") for size in MSAvatarSize.allCases { - setupAvatarDetails(size: size, circleImage: personaImage, squareImage: siteImage, circleName: "Kat Larrson", squareName: "NorthWind Traders") + let circleAvatar = createAvatarView(size: size, name: "Kat Larrson", image: personaImage) + let squareAvatar = createAvatarView(size: size, name: "NorthWind Traders", image: siteImage, style: .square) + addRow(text: size.description, items: [circleAvatar, squareAvatar]) } container.addArrangedSubview(UIView()) addTitle(text: "Avatar with Initials") for size in MSAvatarSize.allCases { - setupAvatarDetails(size: size, circleName: "Kat Larrson", squareName: "NorthWind Traders") + let circleAvatar = createAvatarView(size: size, name: "Kat Larrson") + let squareAvatar = createAvatarView(size: size, name: "NorthWind Traders", style: .square) + addRow(text: size.description, items: [circleAvatar, squareAvatar]) } container.addArrangedSubview(UIView()) } - func setupAvatarDetails(size: MSAvatarSize, circleImage: UIImage? = nil, squareImage: UIImage? = nil, circleName: String = "", squareName: String = "") { - let avatarContainerView = UIStackView() - avatarContainerView.axis = .vertical - avatarContainerView.alignment = .leading - - let avatarHorizontalDescriptionView = UIStackView() - avatarHorizontalDescriptionView.axis = .horizontal - avatarHorizontalDescriptionView.alignment = .center - avatarHorizontalDescriptionView.spacing = 40 - - let label = MSLabel(style: .subhead, colorStyle: .regular) - label.text = size.description - label.widthAnchor.constraint(equalToConstant: 65).isActive = true - - let circleAvatar = createAvatarView(size: size, name: circleName, image: circleImage) - let squareAvatar = createAvatarView(size: size, name: squareName, image: squareImage, style: .square) - - avatarHorizontalDescriptionView.addArrangedSubview(label) - avatarHorizontalDescriptionView.addArrangedSubview(circleAvatar) - avatarHorizontalDescriptionView.addArrangedSubview(squareAvatar) - avatarContainerView.addArrangedSubview(avatarHorizontalDescriptionView) - container.addArrangedSubview(avatarContainerView) - } - - private func createAvatarView(size: MSAvatarSize, name: String, image: UIImage?, style: MSAvatarStyle = .circle) -> UIView { + private func createAvatarView(size: MSAvatarSize, name: String, image: UIImage? = nil, style: MSAvatarStyle = .circle) -> UIView { let avatarView = MSAvatarView(avatarSize: size, withBorder: true, style: style) avatarView.setup(primaryText: name, secondaryText: "", image: image) diff --git a/OfficeUIFabric/Controls/MSActivityIndicatorView.swift b/OfficeUIFabric/Controls/MSActivityIndicatorView.swift index d0f3a5d..802be17 100644 --- a/OfficeUIFabric/Controls/MSActivityIndicatorView.swift +++ b/OfficeUIFabric/Controls/MSActivityIndicatorView.swift @@ -10,41 +10,40 @@ import UIKit /** * `MSActivityIndicatorViewSize` defines the side size of the loader and the thickness of the loader stroke. */ - -@objc public enum MSActivityIndicatorViewSize: Int { +@objc public enum MSActivityIndicatorViewSize: Int, CaseIterable { + case xSmall case small - case regular case medium case large case xLarge public var sideSize: CGFloat { switch self { + case .xSmall: + return 12 case .small: - return 14.0 - case .regular: - return 18.0 + return 17 case .medium: - return 22.0 + return 26 case .large: - return 32.0 + return 35 case .xLarge: - return 40.0 + return 40 } } public var strokeThickness: MSActivityIndicatorStrokeThickness { switch self { + case .xSmall: + return .small case .small: - return .fine - case .regular: - return .fine + return .small case .medium: - return .regular + return .medium case .large: - return .fine + return .large case .xLarge: - return .xThick + return .xLarge } } } @@ -52,11 +51,10 @@ import UIKit // MARK: - MSActivityIndicatorStrokeThickness public enum MSActivityIndicatorStrokeThickness: CGFloat { - case xFine = 1 - case fine = 2 - case regular = 2.5 - case thick = 3 - case xThick = 3.6 + case small = 1 + case medium = 2 + case large = 3 + case xLarge = 4 } // MARK: - MSActivityIndicatorView @@ -115,14 +113,10 @@ open class MSActivityIndicatorView: UIView { private var strokeThickness: CGFloat @objc public convenience init(size: MSActivityIndicatorViewSize) { - self.init(size: size, strokeThickness: size.strokeThickness) + self.init(sideSize: size.sideSize, strokeThickness: size.strokeThickness.rawValue) } - public convenience init(size: MSActivityIndicatorViewSize, strokeThickness: MSActivityIndicatorStrokeThickness) { - self.init(sideSize: size.sideSize, strokeThickness: strokeThickness.rawValue) - } - - public init(sideSize: CGFloat, strokeThickness: CGFloat) { + @objc public init(sideSize: CGFloat, strokeThickness: CGFloat) { self.sideSize = sideSize self.strokeThickness = strokeThickness diff --git a/OfficeUIFabric/Core/Colors.swift b/OfficeUIFabric/Core/Colors.swift index ab07fbd..d901be2 100644 --- a/OfficeUIFabric/Core/Colors.swift +++ b/OfficeUIFabric/Core/Colors.swift @@ -78,7 +78,7 @@ public final class MSColors: NSObject { // TODO: Add semantic colors describing colors used for particular control elements (must reference physical colors) - public static let activityIndicator: UIColor = gray + public static let activityIndicator: UIColor = lightGray public static let background: UIColor = white public static let buttonImage: UIColor = gray public static let centeredLabelText: UIColor = primary diff --git a/OfficeUIFabric/Table View/MSActivityIndicatorCell.swift b/OfficeUIFabric/Table View/MSActivityIndicatorCell.swift index 7063144..aa58b2e 100644 --- a/OfficeUIFabric/Table View/MSActivityIndicatorCell.swift +++ b/OfficeUIFabric/Table View/MSActivityIndicatorCell.swift @@ -12,7 +12,7 @@ open class MSActivityIndicatorCell: UITableViewCell { public static let defaultHeight: CGFloat = 45 private let activityIndicatorView: MSActivityIndicatorView = { - let activityIndicatorView = MSActivityIndicatorView(size: .regular) + let activityIndicatorView = MSActivityIndicatorView(size: .small) activityIndicatorView.startAnimating() return activityIndicatorView }()