Hide TabBar and NavigationBar when scrolling

[noloman]

Checklist

• [X] I have described what this PR contains

Choose one of the following two options:

• • [X] This PR does not introduce major changes
• • [ ] This PR introduces major changes, and I have consulted @buresdv, @jboi or @mormaer in the Mlem Development Matrix room

Choose one of the following two options:

• • [ ] This PR does not change the UI in any way
• • [X] This PR adds new UI elements / changes the UI, and I have attached pictures or videos of the new / changed UI elements

Pull Request Information

About this Pull Request

Addresses #130: Scrolling up and than the scroll view shows and hides the TabBar and NavigationBar respectively

Screenshots and Videos

Additional Context

Please let me know if there's a better way to do this! Thanks a lot!

[Que20]

Can't we keep a minimal navigation and bottom bar ? At least to cover up the safe areas and keep a good visibility over the status bar ?

[ShadowJonathan]

See the attached issue, we're trying to emulate Apollo's behaviour, which is to remove all of them entirely (even in the settings view, I found)

[Que20]

My bad. I did not use that feature. That being said: one of the power features of Apollo was flexibility and how users can tweak the UI to fit their needs.

Edit: And as I can see from the video, the status bar was covered even with that feature enabled.

[buresdv]

I don't like how dragging makes the status bar lose its background. It doesn't look very "Apple."

[ShadowJonathan]

Apollo still has an opaque background for the top status bar part

[noloman]

I'm a bit confused here sorry!

Should I then add an opaque background to the status bar or what should I do?

On Tue, Jun 13, 2023 at 2:28 PM Jonathan de Jong @.***> wrote:

Apollo still has an opaque background for the top status bar part

[image: image] https://user-images.githubusercontent.com/22740616/245475044-656df242-ed8d-463b-813c-ff727b5e7a28.png

— Reply to this email directly, view it on GitHub https://github.com/buresdv/Mlem/pull/136#issuecomment-1589208306, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABMXYCYACPYSTRWWG3RW7LXLBMG5ANCNFSM6AAAAAAZEMHF54 . You are receiving this because you authored the thread.Message ID: @.***>

[ShadowJonathan]

If that's possible, could you show a mock-up/screenshot here?

[noloman]

If that's possible, could you show a mock-up/screenshot here?

Indeed, the status bar is transparent, but I'm not sure how to set a background color on it

[westongpt]

Can we add this as an option? I have accessibility concerns about this being default behavior.

[Que20]

We have few options here: you can either completely hide the status bar (toggle the .statusBar(hidden: true) modifier) and get a real full screen experience, or place a view underneath it (using a simple thinMaterial view that ignores safe area with the modifier .ignoresSafeArea()) like Apollo does.

Maybe the user could choose it's preferred full screen mode from settings ? You can check on the PR https://github.com/buresdv/Mlem/pull/124 I made that introduces the setting options feature to allow users to get a list of selectable values in the settings.

[noloman]

We have few options here: you can either completely hide the status bar (toggle the .statusBar(hidden: true) modifier) and get a real full screen experience, or place a view underneath it (using a simple thinMaterial view that ignores safe area with the modifier .ignoresSafeArea()) like Apollo does.

Maybe the user could choose it's preferred full screen mode from settings ? You can check on the PR mlemgroup/mormaer-mlem#124 I made that introduces the setting options feature to allow users to get a list of selectable values in the settings.

Thanks! I already created the preferences, but I’ll adjust them to have these two options

[ShadowJonathan]

I think it's better to only have that thinMaterial variant, I don't see any reason why the status bar text would start to blend with the post text

[noloman]

hey, I'm not sure about what you exactly wanted it to be made with the thinMaterial but I came up with this:

[ShadowJonathan]

Looks good ^^

The only nit I have is that it doesn't stretch all the way to the bottom of the screen, but that's not blocking

[buresdv]

Does the tab bar at the bottom retain its transparency + blur when it's shown when the hide feature is enabled? I can't see it well in the example.

Also, when the feature is disabled, is the tab bar and toolbar transparent + blurry as well? If it's a solid color, that would be a problem.

[noloman]

Hey David,

I'm not very sure about what you exactly mean. When the feature is disabled, I'm not changing anything.

On Thu, Jun 15, 2023 at 11:47 AM David Bureš @.***> wrote:

Does the tab bar at the bottom retain its transparency when it's shown when the hide feature is enabled? I can't see it well in the example.

Also, when the feature is disabled, is the tab bar and toolbar transparent as well? If it's a solid color, that would be a problem.

— Reply to this email directly, view it on GitHub https://github.com/buresdv/Mlem/pull/136#issuecomment-1592724363, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABMXYBCEPR43XO2W4U5N4TXLLK4ZANCNFSM6AAAAAAZEMHF54 . You are receiving this because you authored the thread.Message ID: @.***>

[buresdv]

I'm not very sure about what you exactly mean

I was wondering if when the hiding is enabled, the tab bar at the bottom of the screen and the toolbar at the top are transparent and blurry like when the hiding is disabled. I can't see that in the video.

When the feature is disabled, I'm not changing anything.

Great 👌

[noloman]

Well I can try to upload a video somewhere else than GitHub (because of size reasons) so you can check it out. How does it sound to you?

Thanks!

On Thu, 15 Jun 2023 at 18:26, David Bureš @.***> wrote:

I'm not very sure about what you exactly mean

I was wondering if when the hiding is enabled, the tab bar at the bottom of the screen and the toolbar at the top are transparent and blurry like when the hiding is disabled. I can't see that in the video.

When the feature is disabled, I'm not changing anything.

Great 👌

— Reply to this email directly, view it on GitHub https://github.com/buresdv/Mlem/pull/136#issuecomment-1593377102, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABMXYC6ZDQUJMY6DNXWGQTXLMZUXANCNFSM6AAAAAAZEMHF54 . You are receiving this because you authored the thread.Message ID: @.***>

[buresdv]

Sounds good, can you upload it to https://streamable.com/?

[noloman]

@buresdv Here it is

[noloman]

Really like to see this in, but at the moment it has an issue where the user can get trapped in the settings tab, I can reproduce this by;

* Having the option disabled

* Scroll part of the way down a feed

* Switch to settings tab

* Enable this feature

At this point the tab bar is removed so I can't leave the settings screen 🙈 bar_issue.mov

is there a way to restrict the hiding of bars to only affect our feed tab?

This is strange.. the hiding of the top and bottom bars in the settings tab didn't happen before, and now (perhaps after merging 135 commits from master and fixing conflicts?) is happening. I'll work it out, thanks!

[mormaer]

This is strange.. the hiding of the top and bottom bars in the settings tab didn't happen before, and now (perhaps after merging 135 commits from master and fixing conflicts?) is happening. I'll work it out, thanks!

Yeah, I don't remember seeing it last time I ran this branch, hopefully it's a quick fix - thanks for looking into it.

If it's of any use it was ran on an iPhone 11 Pro / iOS 16.5

[noloman]

This is strange.. the hiding of the top and bottom bars in the settings tab didn't happen before, and now (perhaps after merging 135 commits from master and fixing conflicts?) is happening. I'll work it out, thanks!

Yeah, I don't remember seeing it last time I ran this branch, hopefully it's a quick fix - thanks for looking into it.

If it's of any use it was ran on an iPhone 11 Pro / iOS 16.5

Thanks, but this is very strange because I've been trying several times, and sometimes it hides the bars on the settings view, and sometimes it doesn't 😞

[ShadowJonathan]

Heya @noloman, we have a new repo at https://github.com/mlemgroup/mlem, due to some shuffling around we couldn't get it migrated properly, but if you could reopen this PR there, and link it back here, then it can continue to be considered ^^