UI Overhaul

[COM8]

A complete UI overhaule is needed to improve the UI responsiveness and fix related issues.

Related issues:

• OMEMO implementation state/tracking #5
• Add more TSL options #28
• Background in app #38
• Rewrite the way chat messages get handled by the UI #39
• Fix Main Thread async #40
• Fix stowed_exception in stowed_exception_80070057_uwp_xmpp_client.dll!uwp_xmpp_client::controls::accountselectioncontrol.loadaccounts #45
• Chat image downloads not updating #69

ToDo (updated 28.03.2020):

• Move to a MVVM desing
  • Chat page
    • Design
    • UI
    • Logic
    • Low performance device optimizations (phones)
  • Settings overview page
    • Design
    • UI
    • Logic
    • Low performance device optimizations (phones)
  • Other settings pages
    • Account settings page
      • Design
      • UI
      • Logic
      • Low performance device optimizations (phones)
    • Personalize settings page
      • Design
      • UI
      • Logic
      • Low performance device optimizations (phones)
    • Chat settings page
      • Design
      • UI
      • Logic
      • Low performance device optimizations (phones)
    • Data settings page
      • Design
      • UI
      • Logic
      • Low performance device optimizations (phones)
    • Background Tasks settings page
      • Design
      • UI
      • Logic
      • Low performance device optimizations (phones)
    • Security settings page
      • Design
      • UI
      • Logic
      • Low performance device optimizations (phones)
    • Donate page
      • Design
      • UI
      • Logic
      • Low performance device optimizations (phones)
    • Misc settings page
      • Design
      • UI
      • Logic
      • Low performance device optimizations (phones)
  • Manage bookmarks page
    • Design
    • UI
    • Logic
    • Low performance device optimizations (phones)
  • Browse MUCs page
    • Design
    • UI
    • Logic
    • Low performance device optimizations (phones)
  • Add account page
    • Design
    • UI
    • Logic
    • Low performance device optimizations (phones)
  • Contact info page
    • Design
    • UI
    • Logic
    • Low performance device optimizations (phones)
  • MUC info page
    • Design
    • UI
    • Logic
    • Low performance device optimizations (phones)
  • Add chat dialog
    • Design
    • UI
    • Logic
    • Low performance device optimizations (phones)
  • Add MUC dialog
    • Design
    • UI
    • Logic
    • Low performance device optimizations (phones)
  • Change presence dialog
    • Design
    • UI
    • Logic
    • Low performance device optimizations (phones)
• Add Fluent Design support
• Add localisation support
• Improve general UI performance
• Improve UI usability
• Proper light and dark theme support
• New app logo
• Update logo to the new XMPP logo (uwpx.github.io#1)

Want more up to date news?

Follow @UWPX_APP on .

[Echolon]

Thank you very much for your efforts! Looking forward!

Have a happy new XMPP year 2019! Guten Rutsch!

My +1 for the new UI as well as the background!

[COM8]

Here some new preview images of the WIP UI overhaul.
The white theme still has some contrast problems, but it's getting there.
Let me know if you have any suggestions!

[Echolon]

Looks AWESOME!

You probably saw it yourself, but the text 'Select a chat to view' in the bright mode cannot be read nicely.

Cheers

[COM8]

Yeah :D

[COM8]

Since there won't be a new release this month (mainly because I have to prepare for a lot of exams right now) I decided to write a small status update about what I've done since the last pictures ~14 days ago:

• I've updated the initial comment to show, more accurate, the progress of the UI overhaule
• I've been working on a "new" UWPX logo
• The accounts page now actually has logic behind it
• I've started adding more logic for the chats page (add/remove bookmark, add remove from roster, ...)

The plan for March:

With the March release (v.0.14.0.0) I want the new UI to be at a point where it's more or less usable.
You will be able to select the new or old UI on the initial app start (don't worry you can still switch between them via the settings 😉).
Since I'm writing exams until the 1st of March, plan with an update around the 10th of March.

Here is the new UWPX logo:

And for comparison the old one:

Let me know if you have any suggestions how I can make the new logo even better looking (since I'm only a programmer 😉 not an artist)!

[Echolon]

Awsaum! ;)

All the best for your exams, I like the new logo!

[COM8]

Since I was not really happy with the way the "new" UWPX logo was scaling I decided to work on a new logo again...

Here it is:

The new logo solves these issues and also matches the new simple Windows 10 logo style.

(Source: Meet the new icons for Office 365)

Examples:

Here are a few more example of the new logo on action:

Splash screen PC:

Taskbar:

Pined

Pined and one unread message

Opened and has focus

Tile:

Medium and red accent color

Like always: Let me know if you have any suggestions how I can make the new logo even better.

[Echolon]

Buddy, that looks so good, users might think XMPP is a Mircosoft thing ;)

Only point: May remove the tiny ticks in the small logo, so it is a simpler logo. However, not important!

Maybe also place a single "U" like the PowerPoint thing looks like.

Nice!

[COM8]

Thanks!
Remove triangles for the small icon: Yes that's a great idea.
"U": I was experimenting with that but it always looked like a German U-Bahn sign.
Here is an early prototype with it:

For reference a German U-Bahm sign:

Source: München.de

[Echolon]

Hi,

I personally wouldnt have related this to the Ubahn, as there probably also 'UWPX' is shown. What you could do instead is using an 'X' instead of 'U'
maybe call the app 'uwpX' :)

Still, the first chat symbol should be place mor to the left I think

[COM8]

I'm not really a fan of the X and/or changing the name capitalization. Sorry :D

Will have to play around with it a bit more.
Let's see if I find a font that does not immediately remember me on U-Bahn signs. 😁

[Supded]

Now embedded emoji did not match with system ones.

[Supded]

System revolver is water pistol in app. I think, it's better to use system emoji, if someone needs new emoji on old system - he can install them by guide from xda-developers.

[COM8]

I personally prefer to have the same Emoji on my phone that I have on my PC.
If you'd like to use all the latest Emoji, you can enable the UWPX "Emoji picker" via "Settings"->"Chat"->"Enable Emoji button".
Well in theory I could make this an option which is on by default, if there are more people that would like to see an option for that.

[Supded]

https://forum.xda-developers.com/windows-10-mobile/app-dhtemojiupdate-emojies-phone-t3855561

[COM8]

Well I don't think this will be a good way for all users.

• I personally wouldn't sideload an app that is not open source - who knows what is packaged with it
• Normal users that just wan't to use the app would never take the path to install an additional app where you would have to enable sideloading and the connect via the debug web page to your phone.

I also hate it, that they replaced the original revolver icon and it would be no problem to replace it back with the old one but then we get into license violation territory.

So: if there are multiple people that would like to see an option I will add one.

[nogweii]

2 things that annoy me with the latest version I've downloaded from the Microsoft Store on my Win10 desktop (v0.20.0.0):

• The font size of the text seems larger than the conversation body size. This may be a result of my 4k screen and Windows' scaling
• I can't use Enter to send a message, or one of the expected alternatives of Shift+Enter or Ctrl+Enter. I had to click on the send icon with my mouse. That's annoying on the desktop.

[COM8]

@evaryont Which fonts do you mean?

Did you enable "Enter to send" in the chat settings? For PCs it's disabled by default.

[nogweii]

The font size of the input box is larger than the message's size:

Did you enable "Enter to send" in the chat settings? For PCs it's disabled by default.

Ah, apparently I didn't look at all of the settings. My bad!

[COM8]

@evaryont I've created a new issue (#73) for it.
I will have a look at it.
Thanks for reporting!

[COM8]

@evaryont Fixed it.
Should be included in this month's release.

[Echolon]

rel. [UI] Add chat screen: Inconsistent sizing of windows and overlapping #77