From 3d76f06b0d79f690a1ad3772f6cff7115b41776c Mon Sep 17 00:00:00 2001 From: Doug <6060466+pixlwave@users.noreply.github.com> Date: Mon, 27 Nov 2023 12:09:25 +0000 Subject: [PATCH] Remove the isPressed animation from the room attachment picker button. (#2173) Fixes a bug where the presented sheet would show light mode buttons on a dark mode background when using the in-app appearance override. --- .../Contents.json | 13 +- .../composer-attachment-dark.svg | 3 - .../View/RoomAttachmentPicker.swift | 157 +++++++++--------- changelog.d/2157.bugfix | 1 + 4 files changed, 83 insertions(+), 91 deletions(-) delete mode 100644 ElementX/Resources/Assets.xcassets/images/composer/composer-attachment.imageset/composer-attachment-dark.svg create mode 100644 changelog.d/2157.bugfix diff --git a/ElementX/Resources/Assets.xcassets/images/composer/composer-attachment.imageset/Contents.json b/ElementX/Resources/Assets.xcassets/images/composer/composer-attachment.imageset/Contents.json index 9d5ac2a71..54abde63f 100644 --- a/ElementX/Resources/Assets.xcassets/images/composer/composer-attachment.imageset/Contents.json +++ b/ElementX/Resources/Assets.xcassets/images/composer/composer-attachment.imageset/Contents.json @@ -3,16 +3,6 @@ { "filename" : "composer-attachment-light.svg", "idiom" : "universal" - }, - { - "appearances" : [ - { - "appearance" : "luminosity", - "value" : "dark" - } - ], - "filename" : "composer-attachment-dark.svg", - "idiom" : "universal" } ], "info" : { @@ -20,6 +10,7 @@ "version" : 1 }, "properties" : { - "preserves-vector-representation" : true + "preserves-vector-representation" : true, + "template-rendering-intent" : "template" } } diff --git a/ElementX/Resources/Assets.xcassets/images/composer/composer-attachment.imageset/composer-attachment-dark.svg b/ElementX/Resources/Assets.xcassets/images/composer/composer-attachment.imageset/composer-attachment-dark.svg deleted file mode 100644 index 7a483865f..000000000 --- a/ElementX/Resources/Assets.xcassets/images/composer/composer-attachment.imageset/composer-attachment-dark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ElementX/Sources/Screens/ComposerToolbar/View/RoomAttachmentPicker.swift b/ElementX/Sources/Screens/ComposerToolbar/View/RoomAttachmentPicker.swift index 7e9c6770b..8d494dcbc 100644 --- a/ElementX/Sources/Screens/ComposerToolbar/View/RoomAttachmentPicker.swift +++ b/ElementX/Sources/Screens/ComposerToolbar/View/RoomAttachmentPicker.swift @@ -22,95 +22,98 @@ struct RoomAttachmentPicker: View { @ObservedObject var context: ComposerToolbarViewModel.Context @Environment(\.isPresented) var isPresented - @State private var sheetContentHeight = CGFloat(0) + @State private var sheetContentFrame: CGRect = .zero var body: some View { Button { context.showAttachmentPopover = true } label: { - Image(Asset.Images.composerAttachment.name) - .resizable() - .scaledToFit() - .scaledFrame(size: 30, relativeTo: .title) - .foregroundColor(.compound.textActionPrimary) + CompoundIcon(asset: Asset.Images.composerAttachment, size: .custom(30), relativeTo: .title) .scaledPadding(7, relativeTo: .title) } + .buttonStyle(RoomAttachmentPickerButtonStyle()) .accessibilityLabel(L10n.actionAddToTimeline) .accessibilityIdentifier(A11yIdentifiers.roomScreen.composerToolbar.openComposeOptions) .popover(isPresented: $context.showAttachmentPopover) { - VStack(alignment: .leading, spacing: 0.0) { - Button { - context.showAttachmentPopover = false - context.send(viewAction: .displayMediaPicker) - } label: { - Label(L10n.screenRoomAttachmentSourceGallery, icon: \.image) - .labelStyle(.menuSheet) - } - .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerPhotoLibrary) - - Button { - context.showAttachmentPopover = false - context.send(viewAction: .displayDocumentPicker) - } label: { - Label(L10n.screenRoomAttachmentSourceFiles, iconAsset: Asset.Images.attachment) - .labelStyle(.menuSheet) - } - .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerDocuments) - - Button { - context.showAttachmentPopover = false - context.send(viewAction: .displayCameraPicker) - } label: { - Label(L10n.screenRoomAttachmentSourceCamera, iconAsset: Asset.Images.takePhoto) - .labelStyle(.menuSheet) - } - .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerCamera) - - Button { - context.showAttachmentPopover = false - context.send(viewAction: .displayLocationPicker) - } label: { - Label(L10n.screenRoomAttachmentSourceLocation, iconAsset: Asset.Images.addLocation) - .labelStyle(.menuSheet) - } - .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerLocation) - - Button { - context.showAttachmentPopover = false - context.send(viewAction: .displayNewPollForm) - } label: { - Label(L10n.screenRoomAttachmentSourcePoll, iconAsset: Asset.Images.polls) - .labelStyle(.menuSheet) - } - .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerPoll) - - if ServiceLocator.shared.settings.richTextEditorEnabled { - Button { - context.showAttachmentPopover = false - context.send(viewAction: .enableTextFormatting) - } label: { - Label(L10n.screenRoomAttachmentTextFormatting, iconAsset: Asset.Images.textFormat) - .labelStyle(.menuSheet) - } - .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerTextFormatting) - } - } - .padding(.top, isPresented ? 20 : 0) - .background { - // This is done in the background otherwise GeometryReader tends to expand to - // all the space given to it like color or shape. - GeometryReader { proxy in - Color.clear - .onAppear { - sheetContentHeight = proxy.size.height - } - } - } - .presentationDetents([.height(sheetContentHeight)]) - .presentationBackground(Color.compound.bgCanvasDefault) - .presentationDragIndicator(.visible) + menuContent + .padding(.top, isPresented ? 20 : 0) + .readFrame($sheetContentFrame) + .presentationDetents([.height(sheetContentFrame.height)]) + .presentationBackground(.compound.bgCanvasDefault) + .presentationDragIndicator(.visible) } } + + var menuContent: some View { + VStack(alignment: .leading, spacing: 0.0) { + Button { + context.showAttachmentPopover = false + context.send(viewAction: .displayMediaPicker) + } label: { + Label(L10n.screenRoomAttachmentSourceGallery, icon: \.image) + .labelStyle(.menuSheet) + } + .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerPhotoLibrary) + + Button { + context.showAttachmentPopover = false + context.send(viewAction: .displayDocumentPicker) + } label: { + Label(L10n.screenRoomAttachmentSourceFiles, iconAsset: Asset.Images.attachment) + .labelStyle(.menuSheet) + } + .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerDocuments) + + Button { + context.showAttachmentPopover = false + context.send(viewAction: .displayCameraPicker) + } label: { + Label(L10n.screenRoomAttachmentSourceCamera, iconAsset: Asset.Images.takePhoto) + .labelStyle(.menuSheet) + } + .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerCamera) + + Button { + context.showAttachmentPopover = false + context.send(viewAction: .displayLocationPicker) + } label: { + Label(L10n.screenRoomAttachmentSourceLocation, iconAsset: Asset.Images.addLocation) + .labelStyle(.menuSheet) + } + .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerLocation) + + Button { + context.showAttachmentPopover = false + context.send(viewAction: .displayNewPollForm) + } label: { + Label(L10n.screenRoomAttachmentSourcePoll, iconAsset: Asset.Images.polls) + .labelStyle(.menuSheet) + } + .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerPoll) + + if ServiceLocator.shared.settings.richTextEditorEnabled { + Button { + context.showAttachmentPopover = false + context.send(viewAction: .enableTextFormatting) + } label: { + Label(L10n.screenRoomAttachmentTextFormatting, iconAsset: Asset.Images.textFormat) + .labelStyle(.menuSheet) + } + .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerTextFormatting) + } + } + } +} + +private struct RoomAttachmentPickerButtonStyle: ButtonStyle { + func makeBody(configuration: Configuration) -> some View { + configuration.label + .foregroundStyle(configuration.isPressed ? .compound.bgActionPrimaryPressed : .compound.bgActionPrimaryRest) + // Disable animations to fix a bug when the system is in Light mode but the app in Dark mode. For some + // reason the animation causes a glitch with sheet's colour scheme when there are presentation detents. + // https://github.com/vector-im/element-x-ios/issues/2157 + .animation(.noAnimation, value: configuration.isPressed) + } } struct RoomAttachmentPicker_Previews: PreviewProvider, TestablePreview { diff --git a/changelog.d/2157.bugfix b/changelog.d/2157.bugfix new file mode 100644 index 000000000..dc68804ce --- /dev/null +++ b/changelog.d/2157.bugfix @@ -0,0 +1 @@ +Fix the room attachment popover label colour when using the in-app appearance override. \ No newline at end of file