overte icon indicating copy to clipboard operation
overte copied to clipboard

Unified UI (Armored UI)

Open Armored-Dragon opened this issue 2 years ago • 7 comments

This is mostly an exploratory experiment on refactoring the UI of Overte. Feedback welcome!

Main Goals:

  • Modernize interface
  • General cleanup
  • Simplification
  • Theming support
    • Support custom global fonts
  • Overhaul tablet
    • New replacement interface

The first updates are targeting general usability of existing applications and ensuring they are consistent across the board. As an example, in some apps you are able to "flick" parts of the window to scroll faster. In the "Places" app, you can not flick. Some apps use a background of gray, while others will assault you with white. Some use gradients, some don't.

It would also help a lot to redesign the applications in such a way that most of the actual processing and instructions are happening in JavaScript files. This will make it easier to change themes or change how content is displayed without having to worry about anything else.

Linked issues

Closes #225 as complete. Closes #274 as complete. Closes #226 as complete.

First phase:

  • [ ] Update Settings UI
    • Consolidate where applicable to a single app
    • Avatar smoothing
    • [x] https://github.com/overte-org/overte/issues/316
    • [ ] https://github.com/overte-org/overte/issues/464
    • [ ] https://github.com/overte-org/overte/issues/457
    • [ ] https://github.com/overte-org/overte/issues/580
    • [ ] https://github.com/overte-org/overte/issues/529
  • [x] #961
    • A chat that only does chat with only a few niceties like image embedding.
  • [ ] Update Snapshots app
  • [ ] Update Avatar app
    • https://github.com/overte-org/overte/issues/616
    • https://github.com/overte-org/overte/issues/1109
    • Add animation packs easily
  • [ ] Update Pal app
  • [ ] Update Places app
    • https://github.com/overte-org/overte/issues/599
    • https://github.com/overte-org/overte/issues/592
  • [ ] Update Create app
    • https://github.com/overte-org/overte/issues/558
    • https://github.com/overte-org/overte/issues/555
    • https://github.com/overte-org/overte/issues/454
    • https://github.com/overte-org/overte/issues/383
    • https://github.com/overte-org/overte/issues/187
    • https://github.com/overte-org/overte/issues/798
    • https://github.com/overte-org/overte/issues/1130
    • [ ] Update Domain Asset Browser
  • [ ] Update Emote app
    • Allow respositories to be added to use custom emotes
    • Search and recently used section
    • https://github.com/overte-org/overte/issues/797
  • [ ] Update More app
    • Allow for repositories to be added in the same way Region servers can be added in the Places app.
    • (Testing) https://github.com/overte-org/community-apps/pull/89
  • [ ] Create Inventory app
    • #632
  • [ ] Update Entity Script QML Whitelist
  • [ ] Update Notifications
    • https://github.com/overte-org/overte/issues/357
  • [ ] Update Running Scripts app
  • [x] https://github.com/overte-org/overte/pull/1046

Second phase:

  • [ ] Unification - (Custom themes)
    • [ ] Update default HiFi colorscheme
    • [ ] Ensure consistent theming practices
    • [ ] Theming support
      • Allow users to install packs of .qml files that Overte will use instead of the default installed ones.
      • #980
      • [ ] https://github.com/overte-org/overte/issues/1080
    • [ ] Update widgets
  • [ ] Prefer system file pickers if available
  • [ ] https://github.com/overte-org/overte/issues/387
  • [ ] https://github.com/overte-org/overte/issues/310

Third phase:

  • [ ] Dashboard style tablet alternative
    • [ ] Emulate tablet interface in dashboard
      • Make it so that if an app was designed to run in a tablet style interface, have the aspect ratio and size match the tablet to prevent issues.
    • [ ] Profile
      • [ ] Display account information
      • [ ] View messages
        • In the event Overte adds support for messaging across domains.
        • https://github.com/overte-org/overte/discussions/979
      • [ ] View and manage friends
    • [ ] Domain
      • [ ] View users
      • [ ] Admin / moderation actions
      • [ ] Teleport / jump to actions
      • [ ] Edit (The create menu)
    • [ ] "Drop" a display into the world for others to see
      • https://github.com/overte-org/overte/issues/919
  • [ ] Toolbar alternative
    • Quick access area for scripts
    • Toggle activeness of scripts
  • [ ] https://github.com/overte-org/overte/issues/456
  • [ ] https://github.com/overte-org/overte/issues/283
  • [ ] https://github.com/overte-org/overte/issues/455
  • [ ] https://github.com/overte-org/overte/issues/309
  • [ ] https://github.com/overte-org/overte/issues/110

Armored-Dragon avatar Mar 22 '24 17:03 Armored-Dragon

Screenshots would be very helpful here

daleglass avatar Mar 23 '24 19:03 daleglass

Hey @Armored-Dragon can we get some screen shots please?

HeadClot avatar Mar 27 '24 02:03 HeadClot

@daleglass @HeadClot My apologies, I had figured I did not do enough work yet to justify images just yet, and I had gotten distracted the past week with other tasks. There has not yet been any major changes yet, but here is a video showing what has changed.

https://github.com/overte-org/overte/assets/43324896/621945ec-9c1e-444d-b0da-619287bb8bc4

At the moment I plan on reorganizing most of the existing ui elements. Most style changes will happen after some consolidation work and other simplification work.

Armored-Dragon avatar Mar 27 '24 20:03 Armored-Dragon

I would also like to mention that until theme support gets a little more fleshed out, most stylized designs will be made to my own liking, most notably colors. As more work gets done, I will be changing aspects of the default (pre-installed?) theme to fit a more neutral aesthetic. Do not let this stop you, or anyone else from suggesting changes though!

Armored-Dragon avatar Mar 27 '24 20:03 Armored-Dragon

I like it so far @Armored-Dragon good work! Keep iterating and I will provide feedback where I can :)

HeadClot avatar Mar 27 '24 21:03 HeadClot

Screencast_20240328_145952.webm

Example of transparent hover effects on overlays and windows.

Armored-Dragon avatar Mar 28 '24 20:03 Armored-Dragon

For everyone following this pull request to keep up to date with UI updates please be aware future updates will mostly be on the new project board: https://github.com/orgs/overte-org/projects/8. This PR will be closed soon after "Phase 1" is complete and no changes here will be merged.

Armored-Dragon avatar Sep 20 '24 07:09 Armored-Dragon