Skip to content

Voice Recorder iOS 17 style#2697

Merged
zlshames merged 13 commits into
BlueBubblesApp:developmentfrom
terry-brett:master
Oct 4, 2024
Merged

Voice Recorder iOS 17 style#2697
zlshames merged 13 commits into
BlueBubblesApp:developmentfrom
terry-brett:master

Conversation

@terry-brett

@terry-brett terry-brett commented Mar 12, 2024

Copy link
Copy Markdown
Contributor

Updating the style for the voice recoder widget for the iOS skin. In iOS 17 there is a new waveform icon that's not avaliable in flutter, so have to add a custom icon here as a font.

This is what it looks like on iOS 17, while voice recorder is recording

light dark
IMG_3142 IMG_3141

Updated version on BB app in dark and light themes.

light dark
image image

Work done:

  • Added a new widget VoiceMessageRecorder
  • Refactored conversation_text_field with new widget, and using themed colors for the text field when audio is being recorded
  • Refactored text_field_suffixto use the new waveform icon and themed colors for iOS variant

Tested on Google Pixel 6 with all 3 skins avaliable in the app

@zlshames

Copy link
Copy Markdown
Member

FYI, we still plan to review this, just haven't had a chance!

@tneotia
tneotia self-requested a review April 18, 2024 23:16

@tneotia tneotia left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I'm going to make a few changes to the implementation just to cut down on the modifications, but they're hard to describe so once you finish these minor things I'll merge it and update from there. Thanks for the contribution!

Comment thread lib/app/components/custom/custom_waveform_icon.dart Outdated
Comment thread pubspec.yaml Outdated
Comment thread lib/app/layouts/conversation_view/colors/voice_message_recorder_colors.dart Outdated
Comment thread lib/app/layouts/conversation_view/widgets/text_field/text_field_suffix.dart Outdated
Comment thread lib/app/layouts/conversation_view/widgets/text_field/text_field_suffix.dart Outdated
Comment thread lib/app/layouts/conversation_view/widgets/text_field/text_field_suffix.dart Outdated
Comment thread lib/app/layouts/conversation_view/widgets/text_field/conversation_text_field.dart Outdated
@terry-brett

Copy link
Copy Markdown
Contributor Author

I'm going to make a few changes to the implementation just to cut down on the modifications, but they're hard to describe so once you finish these minor things I'll merge it and update from there. Thanks for the contribution!

Thanks for the review 😁 I've updated the PR with suggested changes. With custom colours is that something you don't want in general, or could this be behind a flag somewhere in the theme settings for example.

Also for the original waveform colour it's currently set to white, might just be me, but it's hard to see in light mode when recording, maybe that could also be changed in this PR? 🤔

Here's a screenshot of what I mean

image

@terry-brett
terry-brett requested a review from tneotia April 28, 2024 14:38
@tneotia

tneotia commented May 29, 2024

Copy link
Copy Markdown
Member

I'll try and get around to reviewing it here soon, but in the meantime:

With custom colours is that something you don't want in general, or could this be behind a flag somewhere in the theme settings for example.

We might expose this via theme settings but for now I think its best that it follows the more global theme settings for best integration with Material You and all that

Also for the original waveform colour it's currently set to white, might just be me, but it's hard to see in light mode when recording, maybe that could also be changed in this PR? 🤔

I agree, I would set this to the background color of the "stop" icon in your image.

@terry-brett

Copy link
Copy Markdown
Contributor Author

Sounds goods 😄 I've made all the suggested changes, hope it looks good now!

The suggested colour makes the waveform look much better as well 😊

image

@tneotia

tneotia commented Oct 4, 2024

Copy link
Copy Markdown
Member

@zlshames this would be nice to merge as an iOS UI update

@zlshames
zlshames merged commit f273b3d into BlueBubblesApp:development Oct 4, 2024
@zlshames

zlshames commented Oct 4, 2024

Copy link
Copy Markdown
Member

thank you for the contribution!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants