Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Avatar size ramp #1194

Merged
merged 9 commits into from
Sep 13, 2022
Merged

Update Avatar size ramp #1194

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0192dec
Renamed avatar sizes
laminesm Aug 25, 2022
4f12b52
Added avatar size 20 and size 56
laminesm Aug 26, 2022
d6482ac
Added new sizes in demo controllers
laminesm Aug 26, 2022
552507a
Removed unused variable in AvatarGroupDemoController
laminesm Aug 26, 2022
b880802
Merge branch 'laminemale/main_' into laminemale/update-avatar-size-ramp
laminesm Sep 2, 2022
efb9aaa
Moved changes to token sets
laminesm Sep 2, 2022
e40d779
Merge branch 'main' into laminemale/update-avatar-size-ramp
laminesm Sep 2, 2022
35ae64f
Merge branch 'main' into laminemale/update-avatar-size-ramp
laminesm Sep 13, 2022
a357306
Moved size tokens outside of AvatarTokenSet to fix conflicts
laminesm Sep 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 42 additions & 36 deletions ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,27 +416,30 @@ class AvatarDemoController: DemoTableViewController {
private enum AvatarDemoSection: CaseIterable {
case swiftUI
case settings
case xxlarge
case xlarge
case large
case medium
case small
case xsmall
case size72
case size56
case size40
case size32
case size24
case size20
case size16

var avatarSize: MSFAvatarSize {
switch self {
case .xxlarge:
return .xxlarge
case .xlarge:
return .xlarge
case .large:
return .large
case .medium:
return .medium
case .small:
return .small
case .xsmall:
return .xsmall
case .size72:
return .size72
case .size56:
return .size56
case .size40:
return .size40
case .size32:
return .size32
case .size24:
return .size24
case .size20:
return .size20
case .size16:
return .size16
case .swiftUI, .settings:
preconditionFailure("Settings rows should not display an Avatar")
}
Expand All @@ -452,18 +455,20 @@ class AvatarDemoController: DemoTableViewController {
return "SwiftUI"
case .settings:
return "Settings"
case .xxlarge:
return "ExtraExtraLarge"
case .xlarge:
return "ExtraLarge"
case .large:
return "Large"
case .medium:
return "Medium"
case .small:
return "Small"
case .xsmall:
return "ExtraSmall"
case .size72:
return "Size 72"
case .size56:
return "Size 56"
case .size40:
return "Size 40"
case .size32:
return "Size 32"
case .size24:
return "Size 24"
case .size20:
return "Size 20"
case .size16:
return "Size 16"
}
}

Expand All @@ -481,12 +486,13 @@ class AvatarDemoController: DemoTableViewController {
.ring,
.ringInnerGap,
.imageBasedRingColor]
case .xxlarge,
.xlarge,
.large,
.medium,
.small,
.xsmall:
case .size72,
.size56,
.size40,
.size32,
.size24,
.size20,
.size16:
return [.defaultWithImage,
.defaultWithInitials,
.defaultWithFallback,
Expand Down
15 changes: 8 additions & 7 deletions ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController_SwiftUI.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ struct AvatarDemoView: View {
@State var presence: MSFAvatarPresence = .none
@State var showImage: Bool = false
@State var showImageBasedRingColor: Bool = false
@State var size: MSFAvatarSize = .xxlarge
@State var size: MSFAvatarSize = .size72
@State var style: MSFAvatarStyle = .default

public var body: some View {
Expand Down Expand Up @@ -148,12 +148,13 @@ struct AvatarDemoView: View {
}

Picker(selection: $size, label: EmptyView()) {
Text(".xxlarge").tag(MSFAvatarSize.xxlarge)
Text(".xlarge").tag(MSFAvatarSize.xlarge)
Text(".large").tag(MSFAvatarSize.large)
Text(".medium").tag(MSFAvatarSize.medium)
Text(".small").tag(MSFAvatarSize.small)
Text(".xsmall").tag(MSFAvatarSize.xsmall)
Text(".size72").tag(MSFAvatarSize.size72)
Text(".size56").tag(MSFAvatarSize.size56)
Text(".size40").tag(MSFAvatarSize.size40)
Text(".size32").tag(MSFAvatarSize.size32)
Text(".size24").tag(MSFAvatarSize.size24)
Text(".size20").tag(MSFAvatarSize.size20)
Text(".size16").tag(MSFAvatarSize.size16)
}
.labelsHidden()
.frame(maxWidth: .infinity, alignment: .leading)
Expand Down
184 changes: 98 additions & 86 deletions ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,12 +120,13 @@ class AvatarGroupDemoController: DemoTableViewController {
cell.titleNumberOfLines = 0
return cell

case .xxlargeTitle,
.xlargeTitle,
.largeTitle,
.mediumTitle,
.smallTitle,
.xsmallTitle:
case .titleSize72,
.titleSize56,
.titleSize40,
.titleSize32,
.titleSize24,
.titleSize20,
.titleSize16:
guard let cell = tableView.dequeueReusableCell(withIdentifier: TableViewCell.identifier) as? TableViewCell else {
return UITableViewCell()
}
Expand All @@ -134,12 +135,13 @@ class AvatarGroupDemoController: DemoTableViewController {
cell.titleNumberOfLines = 0
return cell

case .xxlargeGroupView,
.xlargeGroupView,
.largeGroupView,
.mediumGroupView,
.smallGroupView,
.xsmallGroupView:
case .groupViewSize72,
.groupViewSize56,
.groupViewSize40,
.groupViewSize32,
.groupViewSize24,
.groupViewSize20,
.groupViewSize16:
let cell = UITableViewCell()

guard let avatarGroup = demoAvatarGroupsBySection[section]?[row] else {
Expand All @@ -165,8 +167,6 @@ class AvatarGroupDemoController: DemoTableViewController {

// MARK: - Helpers

private let avatarSizes: [MSFAvatarSize] = MSFAvatarSize.allCases.reversed()

private enum AvatarGroupDemoSection: CaseIterable {
case settings
case avatarStackNoBorder
Expand Down Expand Up @@ -258,18 +258,20 @@ class AvatarGroupDemoController: DemoTableViewController {
.avatarPileNoBorder,
.avatarPileWithBorder,
.avatarPileWithMixedBorder:
return [.xxlargeTitle,
.xxlargeGroupView,
.xlargeTitle,
.xlargeGroupView,
.largeTitle,
.largeGroupView,
.mediumTitle,
.mediumGroupView,
.smallTitle,
.smallGroupView,
.xsmallTitle,
.xsmallGroupView]
return [.titleSize72,
.groupViewSize72,
.titleSize56,
.groupViewSize56,
.titleSize40,
.groupViewSize40,
.titleSize32,
.groupViewSize32,
.titleSize24,
.groupViewSize24,
.titleSize20,
.groupViewSize20,
.titleSize16,
.groupViewSize16]
}
}
}
Expand All @@ -280,34 +282,38 @@ class AvatarGroupDemoController: DemoTableViewController {
case customRingColor
case maxDisplayedAvatars
case overflow
case xxlargeTitle
case xxlargeGroupView
case xlargeTitle
case xlargeGroupView
case largeTitle
case largeGroupView
case mediumTitle
case mediumGroupView
case smallTitle
case smallGroupView
case xsmallTitle
case xsmallGroupView
case titleSize72
case groupViewSize72
case titleSize56
case groupViewSize56
case titleSize40
case groupViewSize40
case titleSize32
case groupViewSize32
case titleSize24
case groupViewSize24
case titleSize20
case groupViewSize20
case titleSize16
case groupViewSize16

var isDemoRow: Bool {
switch self {
case .xxlargeGroupView,
.xlargeGroupView,
.largeGroupView,
.mediumGroupView,
.smallGroupView,
.xsmallGroupView:
case .groupViewSize72,
.groupViewSize56,
.groupViewSize40,
.groupViewSize32,
.groupViewSize24,
.groupViewSize20,
.groupViewSize16:
return true
case .xxlargeTitle,
.xlargeTitle,
.largeTitle,
.mediumTitle,
.smallTitle,
.xsmallTitle,
case .titleSize72,
.titleSize56,
.titleSize40,
.titleSize32,
.titleSize24,
.titleSize20,
.titleSize16,
.avatarCount,
.alternateBackground,
.customRingColor,
Expand All @@ -319,24 +325,27 @@ class AvatarGroupDemoController: DemoTableViewController {

var avatarSize: MSFAvatarSize {
switch self {
case .xxlargeGroupView:
return .xxlarge
case .xlargeGroupView:
return .xlarge
case .largeGroupView:
return .large
case .mediumGroupView:
return .medium
case .smallGroupView:
return .small
case .xsmallGroupView:
return .xsmall
case .xxlargeTitle,
.xlargeTitle,
.largeTitle,
.mediumTitle,
.smallTitle,
.xsmallTitle,
case .groupViewSize72:
return .size72
case .groupViewSize56:
return .size56
case .groupViewSize40:
return .size40
case .groupViewSize32:
return .size32
case .groupViewSize24:
return .size24
case .groupViewSize20:
return .size20
case .groupViewSize16:
return .size16
case .titleSize72,
.titleSize56,
.titleSize40,
.titleSize32,
.titleSize24,
.titleSize20,
.titleSize16,
.avatarCount,
.alternateBackground,
.customRingColor,
Expand All @@ -358,24 +367,27 @@ class AvatarGroupDemoController: DemoTableViewController {
return "Max displayed avatars"
case .overflow:
return "Overflow count"
case .xxlargeTitle:
return "ExtraExtraLarge"
case .xlargeTitle:
return "ExtraLarge"
case .largeTitle:
return "Large"
case .mediumTitle:
return "Medium"
case .smallTitle:
return "Small"
case .xsmallTitle:
return "ExtraSmall"
case .xxlargeGroupView,
.xlargeGroupView,
.largeGroupView,
.mediumGroupView,
.smallGroupView,
.xsmallGroupView:
case .titleSize72:
return "Size 72"
case .titleSize56:
return "Size 56"
case .titleSize40:
return "Size 40"
case .titleSize32:
return "Size 32"
case .titleSize24:
return "Size 24"
case .titleSize20:
return "Size 20"
case .titleSize16:
return "Size 16"
case .groupViewSize72,
.groupViewSize56,
.groupViewSize40,
.groupViewSize32,
.groupViewSize24,
.groupViewSize20,
.groupViewSize16:
preconditionFailure("Row should not have title")
}
}
Expand Down
2 changes: 1 addition & 1 deletion ios/FluentUI.Demo/FluentUI.Demo/Demos/BadgeViewDemoController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ class BadgeViewDemoController: DemoController {
imageView.tintColor = .white
imageView.frame.size = CGSize(width: 20, height: 20)

let avatar = MSFAvatar(style: .default, size: .xsmall)
let avatar = MSFAvatar(style: .default, size: .size16)
avatar.state.image = UIImage(named: "avatar_kat_larsson")

let dataSource: [(BadgeView.Size, UIView)] = [
Expand Down
2 changes: 1 addition & 1 deletion ios/FluentUI.Demo/FluentUI.Demo/Demos/SideTabBarDemoController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ class SideTabBarDemoController: DemoController {
var avatar: MSFAvatar?
if let image = UIImage(named: "avatar_kat_larsson"), show {
avatar = MSFAvatar(style: .accent,
size: .medium)
size: .size32)
if let avatarState = avatar?.state {
avatarState.primaryText = "Kat Larson"
avatarState.image = image
Expand Down
Loading