Mobile UI for desktop

desktop

#1

This topic created to show progress that we have with bringing mobile UI to desktop platforms.

(Inspired by thread about Nix from @pedro)

Why we aim for single UI?

  • it is inconvenient to add new features in two UIs
  • it is hard to make fixes in two UIs
  • it is harder to test
  • it would be nice to bring 2-pane UI to mobile platform (for tablets)

Why didn’t we have single UI from start?

Status Desktop implemented with react-native-desktop technology that wasn’t mature enough when we started work on desktop.

What has been done for merge?

So far we have a PR with basic implementation. It is fully functional for chatting but has review notes that need to be fixed.

That PR combines changes in status-react and react-native-desktop:

In react-native-desktop:

  • Added getInitialUrl function to Linking module
  • Fixed color processing for inline styles
  • Added support to flexbox values in percents
  • Added default values for styling
  • Fixed backgroundColorSetting when border color defined
  • Fixed issue with multiline textinput resizing
  • TextInput defaultValue property fixed

In status-react:

  • temporary disabled: wallet, qr scan, avatar changing
  • fixed links and tags color
  • chat text input lags
  • send by enter for desktop
  • context popup menus fixed for desktop

What next?

PR review revealed issues:

  • (fixed) unsent text not saved when switching chats
  • (fixed) no way to open user profile from public chat
  • (fixed) search box lags
  • (fixed) no context menu for messages in chats
  • (fixed) some actions in popup menus don’t work
  • messages preview not truncated
  • bad scrollview performance in chat
  • UI glitch - last two messages in chat overlapped

cc @igor


#2

Update:
Currently in desktop UI you can’t click on user’s avatar and open profile. Working on the underlying problem in react-native-desktop - https://github.com/status-im/react-native-desktop/issues/469


#3

Nice! Are chat commands usable too?


#4

@julien, not yet. Thanks for mentioning them. Will add to list of issues.


#5

Thanks for sharing this!


#6

Update:
Problem with nested TouchableHighlight was solved, so now on desktop it is possible to open profiles from avatar in chat.
Also fixed lags in chat search box and removed context menu options and buttons that call actions specific for mobile, like “share”, “invite friends”, “scan qr code”
Context menu for chat messages now called by right mouse click.

Next step will be investigation of poor FlatList performance on desktop.


#7

@volodymyr.kozieiev Thanks for this thread and the updates. Do you think we could create an issue in Github (possibly with multiple issues linked to it) that outlines the known steps to getting mobile UI into desktop? Any thoughts on rough timeline for doing this? With our without poor perf.

Wrike milestone: https://www.wrike.com/open.htm?id=342148749


#8

@oskarth, I’ll create an issue. Mobile UI already works, so without FlatList optimization I’d say it is not more than week needed to check/merge it with some additional fixes. As for FlatList - can’t say for sure, I don’t know where is the source of a problem yet.


#9

Update:

  • FlatList performance investigation is in progress, so far no solution found.
  • To merge big and long-lasting PR @oskarth suggested to put all changes related to new UI under the flag. So PR was changed. By default it shows old desktop UI, but if MOBILE_UI_FOR_DESKTOP=1 specified in .env file, app runs mobile UI for desktop.