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

Native Editor - Input view design + icon work #4729

Merged
merged 15 commits into from
Jan 30, 2024
Merged

Native Editor - Input view design + icon work #4729

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1bd4939
Add new colors and fonts
tonisevener Jan 26, 2024
e2b809b
Set default SFSymbolIcon to subheadline, allow palette colors param
tonisevener Jan 26, 2024
d58f00c
Updates to accessory input toolbar classes to more closely match mocks
tonisevener Jan 26, 2024
3edda53
Create new components for input view header buttons and scrolling con…
tonisevener Jan 26, 2024
15c1578
Create new component for input view multi button for formatting
tonisevener Jan 26, 2024
5264959
Use new work in WKEditorInputView
tonisevener Jan 26, 2024
dae0fff
Delete old unused classes
tonisevener Jan 26, 2024
660a2ab
Merge branch 'main' into native-editor-input-views
tonisevener Jan 26, 2024
773ccc6
Fix hidden expand button bug on iPad
tonisevener Jan 26, 2024
385bb7a
Improve scaling for find and replace icons
tonisevener Jan 29, 2024
d6fd283
Update editor navigation bar with new icons
tonisevener Jan 29, 2024
550fb68
Reading themes popover adjustments
tonisevener Jan 29, 2024
ab1ee4b
Use new icon for format text accessibility input view
tonisevener Jan 29, 2024
7682f80
Resign first responder before presenting reading themes so that it si…
tonisevener Jan 29, 2024
419cb20
Add keyboard shadows
tonisevener Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion Components/Sources/Components/Components/Shared/WKCheckmarkView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ struct WKCheckmarkView: View {
private var uiImage: UIImage? {
switch configuration.style {
case .checkbox:
return isSelected ? WKSFSymbolIcon.for(symbol: .checkmarkSquareFill, font: .subheadline) : WKSFSymbolIcon.for(symbol: .square, font: .subheadline)
return isSelected ? WKSFSymbolIcon.for(symbol: .checkmarkSquareFill) : WKSFSymbolIcon.for(symbol: .square)
case .`default`:
return isSelected ? WKSFSymbolIcon.for(symbol: .checkmark, font: .boldFootnote) : nil
}
Expand Down
85 changes: 47 additions & 38 deletions Components/Sources/Components/Style/WKIcon.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ public enum WKIcon {
}

public enum WKSFSymbolIcon {

case checkmark
case checkmarkSquareFill
case square
Expand Down Expand Up @@ -66,85 +67,93 @@ public enum WKSFSymbolIcon {
case pencil
case plusCircleFill

public static func `for`(symbol: WKSFSymbolIcon, font: WKFont = .body, compatibleWith traitCollection: UITraitCollection = WKAppEnvironment.current.traitCollection) -> UIImage? {
public static func `for`(symbol: WKSFSymbolIcon, font: WKFont = .subheadline, compatibleWith traitCollection: UITraitCollection = WKAppEnvironment.current.traitCollection, renderingMode: UIImage.RenderingMode = .alwaysTemplate, paletteColors: [UIColor]? = nil) -> UIImage? {
let font = WKFont.for(font)
let configuration = UIImage.SymbolConfiguration(font: font)

var image: UIImage?
switch symbol {
case .checkmark:
return UIImage(systemName: "checkmark", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "checkmark", withConfiguration: configuration)
case .checkmarkSquareFill:
return UIImage(systemName: "checkmark.square.fill", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "checkmark.square.fill", withConfiguration: configuration)
case .square:
return UIImage(systemName: "square", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "square", withConfiguration: configuration)
case .star:
return UIImage(systemName: "star", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "star", withConfiguration: configuration)
case .person:
return UIImage(systemName: "person", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "person", withConfiguration: configuration)
case .personFilled:
return UIImage(systemName: "person.fill", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "person.fill", withConfiguration: configuration)
case .starLeadingHalfFilled:
return UIImage(systemName: "star.leadinghalf.filled", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "star.leadinghalf.filled", withConfiguration: configuration)
case .heart:
return UIImage(systemName: "heart", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "heart", withConfiguration: configuration)
case .conversation:
return UIImage(systemName: "bubble.left.and.bubble.right", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "bubble.left.and.bubble.right", withConfiguration: configuration)
case .quoteOpening:
return UIImage(systemName: "quote.opening", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "quote.opening", withConfiguration: configuration)
case .link:
return UIImage(systemName: "link", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "link", withConfiguration: configuration)
case .curlybraces:
return UIImage(systemName: "curlybraces", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "curlybraces", withConfiguration: configuration)
case .photo:
return UIImage(systemName: "photo", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "photo", withConfiguration: configuration)
case .docTextMagnifyingGlass:
return UIImage(systemName: "doc.text.magnifyingglass", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "doc.text.magnifyingglass", withConfiguration: configuration)
case .magnifyingGlass:
return UIImage(systemName: "magnifyingglass", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "magnifyingglass", withConfiguration: configuration)
case .listBullet:
return UIImage(systemName: "list.bullet", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "list.bullet", withConfiguration: configuration)
case .listNumber:
return UIImage(systemName: "list.number", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "list.number", withConfiguration: configuration)
case .increaseIndent:
return UIImage(systemName: "increase.indent", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate).imageFlippedForRightToLeftLayoutDirection()
image = UIImage(systemName: "increase.indent", withConfiguration: configuration)?.imageFlippedForRightToLeftLayoutDirection()
case .decreaseIndent:
return UIImage(systemName: "decrease.indent", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate).imageFlippedForRightToLeftLayoutDirection()
image = UIImage(systemName: "decrease.indent", withConfiguration: configuration)?.imageFlippedForRightToLeftLayoutDirection()
case .chevronUp:
return UIImage(systemName: "chevron.up", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "chevron.up", withConfiguration: configuration)
case .chevronDown:
return UIImage(systemName: "chevron.down", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "chevron.down", withConfiguration: configuration)
case .chevronBackward:
return UIImage(systemName: "chevron.backward", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "chevron.backward", withConfiguration: configuration)
case .chevronForward:
return UIImage(systemName: "chevron.forward", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "chevron.forward", withConfiguration: configuration)
case .bold:
return UIImage(systemName: "bold", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "bold", withConfiguration: configuration)
case .italic:
return UIImage(systemName: "italic", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "italic", withConfiguration: configuration)
case .exclamationMarkCircle:
return UIImage(systemName: "exclamationmark.circle", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "exclamationmark.circle", withConfiguration: configuration)
case .textFormatSuperscript:
return UIImage(systemName: "textformat.superscript", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "textformat.superscript", withConfiguration: configuration)
case .textFormatSubscript:
return UIImage(systemName: "textformat.subscript", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "textformat.subscript", withConfiguration: configuration)
case .underline:
return UIImage(systemName: "underline", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "underline", withConfiguration: configuration)
case .strikethrough:
return UIImage(systemName: "strikethrough", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "strikethrough", withConfiguration: configuration)
case .multiplyCircleFill:
return UIImage(systemName: "multiply.circle.fill", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "multiply.circle.fill", withConfiguration: configuration)
case .chevronRightCircle:
return UIImage(systemName: "chevron.right.circle.fill", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate).imageFlippedForRightToLeftLayoutDirection()
image = UIImage(systemName: "chevron.right.circle.fill", withConfiguration: configuration)?.imageFlippedForRightToLeftLayoutDirection()
case .close:
return UIImage(systemName: "multiply", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "multiply", withConfiguration: configuration)
case .ellipsis:
return UIImage(systemName: "ellipsis", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "ellipsis", withConfiguration: configuration)
case .pencil:
return UIImage(systemName: "pencil", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)
image = UIImage(systemName: "pencil", withConfiguration: configuration)
case .plusCircleFill:
return UIImage(systemName: "plus.circle.fill", withConfiguration: configuration)?.withRenderingMode(.alwaysTemplate)

image = UIImage(systemName: "plus.circle.fill", withConfiguration: configuration)
}

image = image?.withRenderingMode(.alwaysTemplate)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was the idea to use the renderingMode method argument here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mazevedofs Good catch! Originally I thought I might need to be able to pass different rendering modes to support both palette and monochrome icons, but it turns out .alwaysTemplate worked for both. I forgot to remove the parameter after that. I'll add that cleanup to my next PR.

if let paletteColors {
let paletteSymbolConfiguration = UIImage.SymbolConfiguration(paletteColors: paletteColors)
image = image?.applyingSymbolConfiguration(paletteSymbolConfiguration)
}

return image
}

}