Skip to content

Settings modal

HJ requested to merge settings-modal into develop

What's included:

  • Refactored all settings pages, both user-settings and settings into separate (sub)components
  • Consolidated both setting pages into single settings modal. Old pages removed
  • Settings modal with ability to "peek" - minimize modal instead of hiding it, revealing page underneath so that you can check how UI looks like after changing the settings.
  • Tab-switcher now has top-tabs (default) and side-tabs variants.
    • side-tabs currently only used with settings-modal only and has some styles that only make sense for that component (mostly because mobile)
    • in mobile view content page will use ~ 99% of screen width + side tabs fixed-ish width, intended use is that you can scroll horizontally to show tabs or show content, and there's a tiny bit of tabs visible when scrolled to content so that you don't forget that there are tabs on the left side.
    • tab-switcher also has small upgrade to allow setting content pane 100% height, used for blocks/mutes tab.
    • tab-switcher's css was massively improved to properly handle tab-switcher-within-tabswitcher case, doesn't look very pretty but what can you do.
  • settings-modal (and hopefully everything it pulls) are loaded asynchronously now
    • updated vue to 2.6 to utilize Vue.observable to make async component resettable (if async component has failed it will stay failed forever without it)
    • fixed user-profile not using tab-switcher (?????)

What's NOT included:

  • All pages are left as-is, only split from original sources (user-settings or settings). Therefore some things looks a bit weird like "Submit" buttons on some pages originating from user-settings
    • Small exception - "mutes" and "blocks" tabs are merged into "mutes and blocks" with level-2 tab switcher to switch between mutes and blocks. Just made sense to do that.

Screenshots

Desktop

image
image

Mobile

image image
image

Edited by HJ

Merge request reports