Status-react: Topbar

[flexsurfer]

implement topbar component similar to list-item component, move statusbar into topbar, replace all usages of statusbar and toolbar on new topbar, implement {:type :big} for topbar and use large-toolbar implementation

do not implement browser topbar in this component

https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=794%3A0

[flexsurfer]

@bitsikka wdyt? :)

[bitsikka]

@bitsikka wdyt? :)

Yes, of-course, I would love to tame this important component well. Got to have V1 is ship-shape :).

Current one ain't broken, but in Profile there is a problem when there is 3 word name of varying length, because of having to use negative margin and unweildy structure.

[bitsikka]

While committed to [8447] [Multi-Account] Design touch-ups for account explorer + wallet UI, I'm jumping on this one with higher priority. Will be working on it(+) over the weekend.

[bitsikka]

Spent some time understanding the status-bar over the weekend, with weekendy distractions on the way. Got a handle on this particular area of this issue now(previously unfamiliar). Seeing now how it needed an update just as much as toolbar.

Previous status-bar + toolbar = Current(to be) top-bar seems like a pretty good idea so far.

Pulling threads around, see where it leads(led to some related fixes(+ somewhat remotely related fixes) in routing area as well - like re-locating tabs.styles/tabs-height from :home and :my-profile). Trying out using StatusBar the native component as opposed to StatusBar imperative api in use - so far so good. May go back to using the imperative api slightly differently.

And so barely starting to stitch the top-bar together.

Realizing the need to be careful, and test thoroughly with this global thingy.

[rachelhamlin]

Just fyi @bitsikka - you may already know, but we're on our team offsite in Istanbul this week and so weighing in a bit more slowly than usual, in case you need anything :)

[bitsikka]

Just fyi @bitsikka - you may already know, but we're on our team offsite in Istanbul this week and so weighing in a bit more slowly than usual, in case you need anything :)

Got it!
Take your time. Have a wonderful offsite!!!

[bitsikka]

I am still on this and 8847. Sorry for delays. It is due mainly to my own temporary motivational deficiencies and distractions :p

[rachelhamlin]

You're doing great @bitsikka 😄 Thanks for the update.

[siphiuel]

@flexsurfer Do we want to integrate it with react-navigation's header? https://reactnavigation.org/docs/en/headers.html#replacing-the-title-with-a-custom-component.

[bitsikka]

@flexsurfer Do we want to integrate it with react-navigation's header? https://reactnavigation.org/docs/en/headers.html#replacing-the-title-with-a-custom-component.

Thanks for bringing this up @siphiuel 👍

I'll see how to make topbar play proper with react-navigation, as the approach (previous/new(so-far)) has been to ignore react-navigation.

I did wonder about it sometimes, because it has been a while since I noticed that currently, (in the continued ignoring approach), the transition from chat-list to specific chat, (the header area transition), in iOS (sometimes)* is weird/annoying/inconsistent. *It happens when there are more than 10 chat messages in scrolled-to-recent(default) chat view.

Can be fixed by setting initialNumToRender of chat-view flat-list higher - which seems unwise.
Or, integrate better with react-navigation - Not sure if that visual inconsistency in transition in iOS can be eliminated by integrating with react-navigation properly, but just have to do it and see.

Anyway, one of the reason for slow action on my part has also been these tangled concerns. Would like for the implementation to really be what it needs to be, as opposed to a waste of time.

[StatusSceptre]

Hi @bitsikka! Just checking in with you. How are things?

[bitsikka]

@StatusSceptre I am back from vacation, and continuing work on this. Expecting to send a PR by the end of this week.

[bitsikka]

@jakubgs @PombeirP
Help!
I am having problems running make shell with target env iOS in latest develop :(

└> make shell
Configuring default Nix shell for target 'ios'...
Configuring default Nix shell for target 'ios'...
Configuring default Nix shell for target 'ios'...
error: getting status of '/private/tmp/tmp-status-react-Checking for modifications in node_modules... No modifications detected. ': No such file or directory
make: *** [shell] Error 1

this started happening after recent merge of https://github.com/status-im/status-react/commit/f28fd8fc9c218000842eda9c9a488cf24869322f

[jakubgs]

@bitsikka Oh yeah, there was a bug there, in this line:
https://github.com/status-im/status-react/blob/dbb4dfa61bb579bb0e9051f4dadd84e48b18157e/Makefile#L32
If you change the = to := it should work fine.

[bitsikka]

@bitsikka Oh yeah, there was a bug there, in this line:
https://github.com/status-im/status-react/blob/dbb4dfa61bb579bb0e9051f4dadd84e48b18157e/Makefile#L32

If you change the = to := it should work fine.

@jakubgs
Thanks!!!
I can move ahead with temp local fix 👍

[hesterbruikman]

@bitsikka can you tell if the topbar is also used in open browser window? Checking if it also resolves this issue: https://github.com/status-im/status-react/issues/7990#issuecomment-494757234

[bitsikka]

@hesterbruikman

This issue specifically mentions "do not implement browser topbar in this component" in the original post above.

I think the intention is to keep the implementation of StatusBar-in-Topbar and Status-Bar-in-borwser-topbar separate. So, PR for this issue likely won't fix that issue directly.

But, clearly, issues related to StatuBar are related, and how it is handled in one can be useful in handling in other.

So the PR for whichever comes first, might be useful indirectly like that. That was my interest in that issue back a while ago https://github.com/status-im/status-react/issues/7990#issuecomment-535766342

Unfortunately, as I mentioned here https://github.com/status-im/status-react/issues/8447#issuecomment-544949113 I do not have undivided attention on my work on this until the end of this month. I'm working intermittently until then. Beginning November, I will be completely in the flow as previously. Please bare with me.

My plan is to wrap-this-up/have-this-in-good-place, by first week of November.

[hesterbruikman]

This issue specifically mentions "do not implement browser topbar in this component" in the original post above.

Missed that comment! Thanks for pointing out.

Unfortunately, as I mentioned here #8447 (comment) I do not have undivided attention on my work on this until the end of this month. I'm working intermittently until then. Beginning November, I will be completely in the flow as previously. Please bare with me.

Noted. There's no overstating how much your work on all these issues is appreciated! Please do take your time and we'll be happy to see you back in the flow in November.

[flexsurfer]

First iteration: https://github.com/status-im/status-react/pull/9711

[rachelhamlin]

@flexsurfer can you expand on the work to be continued here when you have a chance? Maybe we can add this to the UI backlog for @Ferossgp.

[flexsurfer]

i've implemented simple toolbar

we need to implement specific versions

for chat with avatar , for profile etc

[rachelhamlin]

Cool, thanks Andrey. I'm adding it to the UI clean up project for Gheorghe, low priority.