Skip to content

Commit c2c99ed

Browse files
author
Isaac
committed
Emoji bottom panel
1 parent 5b65b52 commit c2c99ed

File tree

6 files changed

+314
-72
lines changed

6 files changed

+314
-72
lines changed

‎submodules/Components/PagerComponent/Sources/PagerComponent.swift‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ open class PagerExternalTopPanelContainer: SparseContainerView {
1414
}
1515

1616
public protocol PagerContentViewWithBackground: UIView {
17-
func pagerUpdateBackground(backgroundFrame: CGRect, topPanelHeight: CGFloat, externalTintMaskContainer: UIView?, transition: ComponentTransition)
17+
func pagerUpdateBackground(backgroundFrame: CGRect, topPanelHeight: CGFloat, bottomPanelHeight: CGFloat, externalTintMaskContainer: UIView?, transition: ComponentTransition)
1818
}
1919

2020
public protocol PagerTopPanelView: UIView {
@@ -721,6 +721,7 @@ public final class PagerComponent<ChildEnvironmentType: Equatable, TopPanelEnvir
721721
}
722722

723723
var bottomPanelOffset: CGFloat = 0.0
724+
var bottomPanelHeight: CGFloat = 0.0
724725
if let bottomPanel = component.bottomPanel {
725726
let bottomPanelView: ComponentHostView<PagerComponentPanelEnvironment<TopPanelEnvironment>>
726727
var bottomPanelTransition = panelStateTransition
@@ -767,14 +768,27 @@ public final class PagerComponent<ChildEnvironmentType: Equatable, TopPanelEnvir
767768
bottomPanelOffset = bottomPanelSize.height
768769
}
769770

770-
panelStateTransition.setFrame(view: bottomPanelView, frame: CGRect(origin: CGPoint(x: 0.0, y: availableSize.height - bottomPanelSize.height + bottomPanelOffset), size: bottomPanelSize))
771+
let bottomPanelFrame = CGRect(origin: CGPoint(x: 0.0, y: availableSize.height - bottomPanelSize.height + bottomPanelOffset), size: bottomPanelSize)
772+
773+
panelStateTransition.setFrame(view: bottomPanelView, frame: bottomPanelFrame)
774+
775+
if let externalTintMaskContainer = component.externalTintMaskContainer, let bottomPanelView = bottomPanelView.componentView as? PagerTopPanelView {
776+
if bottomPanelView.tintContentMask !== externalTintMaskContainer {
777+
externalTintMaskContainer.addSubview(bottomPanelView.tintContentMask)
778+
}
779+
panelStateTransition.setFrame(view: bottomPanelView.tintContentMask, frame: bottomPanelFrame)
780+
}
771781

772782
contentInsets.bottom += bottomPanelSize.height
783+
bottomPanelHeight = max(0.0, bottomPanelSize.height - bottomPanelOffset)
773784
} else {
774785
if let bottomPanelView = self.bottomPanelView {
775786
self.bottomPanelView = nil
776787

777788
bottomPanelView.removeFromSuperview()
789+
if let bottomPanelView = bottomPanelView.componentView as? PagerTopPanelView {
790+
bottomPanelView.tintContentMask.removeFromSuperview()
791+
}
778792
}
779793

780794
self.bottomPanelHeight = 0.0
@@ -961,7 +975,7 @@ public final class PagerComponent<ChildEnvironmentType: Equatable, TopPanelEnvir
961975
}
962976

963977
if let contentViewWithBackground = contentView.view.componentView as? PagerContentViewWithBackground {
964-
contentViewWithBackground.pagerUpdateBackground(backgroundFrame: backgroundFrame, topPanelHeight: topPanelHeight, externalTintMaskContainer: component.externalTintMaskContainer == nil ? nil : contentView.tintMaskContainer, transition: contentTransition)
978+
contentViewWithBackground.pagerUpdateBackground(backgroundFrame: CGRect(origin: CGPoint(), size: CGSize(width: backgroundFrame.width, height: availableSize.height)), topPanelHeight: topPanelHeight, bottomPanelHeight: bottomPanelHeight, externalTintMaskContainer: component.externalTintMaskContainer == nil ? nil : contentView.tintMaskContainer, transition: contentTransition)
965979
}
966980
}
967981
}

‎submodules/TelegramUI/Components/EntityKeyboard/Sources/EmojiPagerContentComponent.swift‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4054,7 +4054,7 @@ public final class EmojiPagerContentComponent: Component {
40544054
self.state?.updated(transition: ComponentTransition(animation: .curve(duration: 0.4, curve: .spring)).withUserData(ContentAnimation(type: .groupExpanded(id: groupId))))
40554055
}
40564056

4057-
public func pagerUpdateBackground(backgroundFrame: CGRect, topPanelHeight: CGFloat, externalTintMaskContainer: UIView?, transition: ComponentTransition) {
4057+
public func pagerUpdateBackground(backgroundFrame: CGRect, topPanelHeight: CGFloat, bottomPanelHeight: CGFloat, externalTintMaskContainer: UIView?, transition: ComponentTransition) {
40584058
guard let component = self.component, let keyboardChildEnvironment = self.keyboardChildEnvironment, let pagerEnvironment = self.pagerEnvironment else {
40594059
return
40604060
}
@@ -4151,11 +4151,11 @@ public final class EmojiPagerContentComponent: Component {
41514151
if self.mirrorContentClippingView?.layer.mask != tintFadingMaskLayer {
41524152
self.mirrorContentClippingView?.layer.mask = tintFadingMaskLayer
41534153
}
4154-
let maskFrame = CGRect(origin: CGPoint(x: 0.0, y: topPanelHeight - 40.0), size: backgroundFrame.size)
4154+
let maskFrame = CGRect(origin: CGPoint(x: 0.0, y: 0.0), size: backgroundFrame.size)
41554155
transition.setFrame(layer: maskLayer, frame: maskFrame)
41564156
transition.setFrame(layer: tintFadingMaskLayer, frame: maskLayer.frame)
4157-
maskLayer.update(size: maskFrame.size, transition: transition)
4158-
tintFadingMaskLayer.update(size: maskFrame.size, transition: transition)
4157+
maskLayer.update(size: maskFrame.size, topPanelHeight: topPanelHeight, bottomPanelHeight: bottomPanelHeight, transition: transition)
4158+
tintFadingMaskLayer.update(size: maskFrame.size, topPanelHeight: topPanelHeight, bottomPanelHeight: bottomPanelHeight, transition: transition)
41594159
}
41604160
} else if component.warpContentsOnEdges {
41614161
self.backgroundView.isHidden = true
@@ -5001,7 +5001,7 @@ private final class FadingMaskLayer: SimpleLayer {
50015001
fatalError("init(coder:) has not been implemented")
50025002
}
50035003

5004-
func update(size: CGSize, transition: ComponentTransition) {
5004+
func update(size: CGSize, topPanelHeight: CGFloat, bottomPanelHeight: CGFloat, transition: ComponentTransition) {
50055005
let gradientHeight: CGFloat = 66.0
50065006
if self.gradientLayer.contents == nil {
50075007
if !self.isHard {
@@ -5022,10 +5022,9 @@ private final class FadingMaskLayer: SimpleLayer {
50225022
transition.setFrame(layer: self.gradientLayer, frame: CGRect(origin: .zero, size: CGSize(width: size.width, height: gradientHeight)))
50235023
transition.setFrame(layer: self.gradientFillLayer, frame: self.gradientLayer.frame)
50245024
if self.isHard {
5025-
let hardHeight: CGFloat = 40.0
5026-
transition.setFrame(layer: self.fillLayer, frame: CGRect(origin: CGPoint(x: 0.0, y: hardHeight), size: CGSize(width: size.width, height: size.height - hardHeight)))
5025+
transition.setFrame(layer: self.fillLayer, frame: CGRect(origin: CGPoint(x: 0.0, y: topPanelHeight), size: CGSize(width: size.width, height: size.height - topPanelHeight - bottomPanelHeight)))
50275026
} else {
5028-
transition.setFrame(layer: self.fillLayer, frame: CGRect(origin: CGPoint(x: 0.0, y: gradientHeight), size: CGSize(width: size.width, height: size.height - gradientHeight)))
5027+
transition.setFrame(layer: self.fillLayer, frame: CGRect(origin: CGPoint(x: 0.0, y: gradientHeight + topPanelHeight - 40.0), size: CGSize(width: size.width, height: size.height - gradientHeight)))
50295028
}
50305029
}
50315030
}

‎submodules/TelegramUI/Components/EntityKeyboard/Sources/EntityKeyboard.swift‎

Lines changed: 32 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -401,33 +401,27 @@ public final class EntityKeyboardComponent: Component {
401401
))))
402402
contentIcons.append(PagerComponentContentIcon(id: "masks", imageName: "Chat/Input/Media/EntityInputMasksIcon", title: component.strings.EmojiInput_TabMasks))
403403
if let _ = component.maskContent?.inputInteractionHolder.inputInteraction?.openStickerSettings {
404-
contentAccessoryRightButtons.append(AnyComponentWithIdentity(id: "masks", component: AnyComponent(Button(
405-
content: AnyComponent(BundleIconComponent(
406-
name: "Chat/Input/Media/EntityInputSettingsIcon",
407-
tintColor: component.theme.chat.inputMediaPanel.panelIconColor,
408-
maxSize: nil
409-
)),
404+
contentAccessoryRightButtons.append(AnyComponentWithIdentity(id: "masks", component: AnyComponent(EntityKeyboardBottomPanelButton(
405+
icon: "Chat/Input/Media/EntityInputSettingsIcon",
406+
color: component.theme.chat.inputPanel.inputControlColor,
410407
action: {
411408
maskContent.inputInteractionHolder.inputInteraction?.openStickerSettings?()
412409
}
413-
).minSize(CGSize(width: 38.0, height: 38.0)))))
410+
))))
414411
}
415412
}
416413

417414
if let gifContent = component.gifContent {
418415
contents.append(AnyComponentWithIdentity(id: "gifs", component: AnyComponent(gifContent)))
419416
contentIcons.append(PagerComponentContentIcon(id: "gifs", imageName: "Chat/Input/Media/EntityInputGifsIcon", title: component.strings.EmojiInput_TabGifs))
420417
if let addImage = component.stickerContent?.inputInteractionHolder.inputInteraction?.addImage {
421-
contentAccessoryLeftButtons.append(AnyComponentWithIdentity(id: "gifs", component: AnyComponent(Button(
422-
content: AnyComponent(BundleIconComponent(
423-
name: "Media Editor/AddImage",
424-
tintColor: component.theme.chat.inputMediaPanel.panelIconColor,
425-
maxSize: nil
426-
)),
418+
contentAccessoryLeftButtons.append(AnyComponentWithIdentity(id: "gifs", component: AnyComponent(EntityKeyboardBottomPanelButton(
419+
icon: "Media Editor/AddImage",
420+
color: component.theme.chat.inputPanel.inputControlColor,
427421
action: {
428422
addImage()
429423
}
430-
).minSize(CGSize(width: 38.0, height: 38.0)))))
424+
))))
431425
}
432426
}
433427

@@ -541,28 +535,22 @@ public final class EntityKeyboardComponent: Component {
541535
))))
542536
contentIcons.append(PagerComponentContentIcon(id: "stickers", imageName: "Chat/Input/Media/EntityInputStickersIcon", title: component.strings.EmojiInput_TabStickers))
543537
if let _ = component.stickerContent?.inputInteractionHolder.inputInteraction?.openStickerSettings {
544-
contentAccessoryRightButtons.append(AnyComponentWithIdentity(id: "stickers", component: AnyComponent(Button(
545-
content: AnyComponent(BundleIconComponent(
546-
name: "Chat/Input/Media/EntityInputSettingsIcon",
547-
tintColor: component.theme.chat.inputMediaPanel.panelIconColor,
548-
maxSize: nil
549-
)),
538+
contentAccessoryRightButtons.append(AnyComponentWithIdentity(id: "stickers", component: AnyComponent(EntityKeyboardBottomPanelButton(
539+
icon: "Chat/Input/Media/EntityInputSettingsIcon",
540+
color: component.theme.chat.inputPanel.inputControlColor,
550541
action: {
551542
stickerContent.inputInteractionHolder.inputInteraction?.openStickerSettings?()
552543
}
553-
).minSize(CGSize(width: 38.0, height: 38.0)))))
544+
))))
554545
}
555546
if let addImage = component.stickerContent?.inputInteractionHolder.inputInteraction?.addImage {
556-
contentAccessoryLeftButtons.append(AnyComponentWithIdentity(id: "stickers", component: AnyComponent(Button(
557-
content: AnyComponent(BundleIconComponent(
558-
name: "Media Editor/AddImage",
559-
tintColor: component.theme.chat.inputMediaPanel.panelIconColor,
560-
maxSize: nil
561-
)),
547+
contentAccessoryLeftButtons.append(AnyComponentWithIdentity(id: "stickers", component: AnyComponent(EntityKeyboardBottomPanelButton(
548+
icon: "Media Editor/AddImage",
549+
color: component.theme.chat.inputPanel.inputControlColor,
562550
action: {
563551
addImage()
564552
}
565-
).minSize(CGSize(width: 38.0, height: 38.0)))))
553+
))))
566554
}
567555
}
568556

@@ -659,48 +647,40 @@ public final class EntityKeyboardComponent: Component {
659647
))))
660648
contentIcons.append(PagerComponentContentIcon(id: "emoji", imageName: "Chat/Input/Media/EntityInputEmojiIcon", title: component.strings.EmojiInput_TabEmoji))
661649
if let _ = deleteBackwards {
662-
contentAccessoryLeftButtons.append(AnyComponentWithIdentity(id: "emoji", component: AnyComponent(Button(
663-
content: AnyComponent(BundleIconComponent(
664-
name: "Chat/Input/Media/EntityInputGlobeIcon",
665-
tintColor: component.theme.chat.inputMediaPanel.panelIconColor,
666-
maxSize: nil
667-
)),
650+
contentAccessoryLeftButtons.append(AnyComponentWithIdentity(id: "emoji", component: AnyComponent(EntityKeyboardBottomPanelButton(
651+
icon: "Chat/Input/Media/EntityInputGlobeIcon",
652+
color: component.theme.chat.inputPanel.inputControlColor,
668653
action: { [weak self] in
669654
guard let strongSelf = self, let component = strongSelf.component else {
670655
return
671656
}
672657
component.switchToTextInput()
673658
}
674-
).minSize(CGSize(width: 38.0, height: 38.0)))))
659+
))))
675660
} else if let addImage = component.emojiContent?.inputInteractionHolder.inputInteraction?.addImage {
676-
contentAccessoryLeftButtons.append(AnyComponentWithIdentity(id: "emoji", component: AnyComponent(Button(
677-
content: AnyComponent(BundleIconComponent(
678-
name: "Media Editor/AddImage",
679-
tintColor: component.theme.chat.inputMediaPanel.panelIconColor,
680-
maxSize: nil
681-
)),
661+
contentAccessoryLeftButtons.append(AnyComponentWithIdentity(id: "emoji", component: AnyComponent(EntityKeyboardBottomPanelButton(
662+
icon: "Media Editor/AddImage",
663+
color: component.theme.chat.inputPanel.inputControlColor,
682664
action: {
683665
addImage()
684666
}
685-
).minSize(CGSize(width: 38.0, height: 38.0)))))
667+
))))
686668
}
687669
}
688670

689671
if let _ = deleteBackwards {
690-
contentAccessoryRightButtons.append(AnyComponentWithIdentity(id: "emoji", component: AnyComponent(Button(
691-
content: AnyComponent(BundleIconComponent(
692-
name: "Chat/Input/Media/EntityInputClearIcon",
693-
tintColor: component.theme.chat.inputMediaPanel.panelIconColor,
694-
maxSize: nil
695-
)),
672+
contentAccessoryRightButtons.append(AnyComponentWithIdentity(id: "emoji", component: AnyComponent(EntityKeyboardBottomPanelButton(
673+
icon: "Chat/Input/Media/EntityInputClearIcon",
674+
color: component.theme.chat.inputPanel.inputControlColor,
696675
action: {
697676
deleteBackwards?()
698677
AudioServicesPlaySystemSound(1155)
678+
},
679+
holdAction: {
680+
deleteBackwards?()
681+
AudioServicesPlaySystemSound(1155)
699682
}
700-
).withHoldAction({ _ in
701-
deleteBackwards?()
702-
AudioServicesPlaySystemSound(1155)
703-
}).minSize(CGSize(width: 38.0, height: 38.0)))))
683+
))))
704684
}
705685

706686
let panelHideBehavior: PagerComponentPanelHideBehavior

0 commit comments

Comments
 (0)