React-admin: Place logout button in appBar instead of menu

[sfenollosa]

I know that I can easily do it myself by writing my own layout, but then it also requires to override the AppBar component and the logout component ...
A tiny option on the admin component would be nice !

[fzaninotto]

But then, where should we show the loading spinner?

[sfenollosa]

Well, that's a good point ;-)
Actually, I would keep only the logout icon and the loading spinner good appear around it, or the circular spinner could be replaced by linear progress just under the appbar.
My problem with the logout button being under the ressources in the menu is that it is to easy to logout when quickly browsing the different resources ...

[sfenollosa]

just shifting a little the spinner to the left maybe ?

[fzaninotto]

pretty ugly IMO. Is there a webdesigner around here to suggest something better?

[fzaninotto]

Here is what I think:

• On Desktop, the spinner should be in the center of the app bar. There is plenty of space for it. The Logout button could be moved to the right side of the app bar
• On Mobile, there is not enough width to display 3 elements in the appBar, so we should only display two (the title on the right and the loader on the left). The logout button should be placed in the menu.

[sfenollosa]

Ok, it seems to be a good compromise, but on mobile, if you place the logout button in the menu, it should be separated from the other menuItems somehow.

[Phocea]

Just my 2 cents. But our designer here keep on putting the logout and profile information in the top right part of the hear bar. Their arguement is that there should be a separation between the navigation menu on the left hand side, with link to different data screen, and user related menu on the right hand side, holding the user profile info, logout, user preferences...
They apparently done some study on this :)
In which case, why not have a progress bar like on ng-admin ??

On mobile device, the 2 menus are "merging" together, with the user related menu at the bottom

[fzaninotto]

In which case, why not have a progress bar like on ng-admin ??

We've tried and it's ugly, because the material-ui <LinearProgress> component is slow and doesn't position well with the AppBar. The best solution is the one I've mentioned above, but it requires some work.

[djhi]

http://ricostacruz.com/nprogress/ ?

Not a react component but it may get the job done

[fzaninotto]

The problem is that a list refresh takes about 400ms, and this stops JS animations. In that context, a linear progress component is good only if it uses CSS animations.

[fmckeogh]

My web app needs a few buttons on the AppBar, did anyone ever find a good way of doing this? (Apart from overriding AppBar and layout)

Thanks!

[wesley6j]

@chocol4te Currently, it is not possible without custom layout.

[fmckeogh]

@wesley6j Okay, thanks!

[fmckeogh]

I got it working, for future reference if anyone wants buttons in the title bar, they will have to have not only a custom layout, but copy AppBar.js from admin-on-rest into their project and import that. Inside AppBar.js, iconElementRight works inside the MuiAppBar tags, but not inside Layout.js.

[aymendhaya]

Hi all,
I found myself here for the same need and i have a suggestion:
Why not doing a conditional render according to the _data status_ (ready/not ready) ? so we will see the spinner until the data is ready then we will get a logout button. _(or any item we need to render there)_ . And yeah, i think no one will think about logging out while data is fetching :smiling_imp:

[fzaninotto]

@aymendhaya I'm -1 for this, because the UI shouldn't use the same place for two distinct actions. Besides, I may want to log out while fetching, e.g. realizing the fetch takes a long time because I'm not using the right account.

[aymendhaya]

Hi @fzaninotto @djhi , it's ok it was a suggestion because i found too a need to have the app bar more flexible. By the way i'm working on something i call it oar-cli and im still at the beginning. Can you please have a quick look at it ? i hope that you appreciate the concept. https://github.com/aymendhaya/aor-cli/blob/master/README.md

[djhi]

Fixed by #1519 (will be released in 2.0)