Settings modal
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
Mobile
Merge request reports
Activity
added 119 commits
-
a872c534...1ae89359 - 117 commits from branch
develop - 1e606d2f - split modal's content into another component, add lazy loading
- 138ec850 - Merge remote-tracking branch 'origin/develop' into settings-modal
-
a872c534...1ae89359 - 117 commits from branch
bugs:
- Needs a spinner for when modal is loading
- Tab-switcher needs to reset scroll when switching tabs
- Cog-icon needs pointer cursor
- No "settings saved" indicator
also:
- Try adding icons to side tabs?
Edited by HJadded 1 commit
- 0286e102 - fix cursor on desktop, add modal link on mobile
added 1 commit
- bb418bf1 - fix tests. user-profile didn't have tab-switcher compnent imported!!
-
bugs:
- Icons change color when clicking
- Buttons in titlebar are uncomfortably close
- Doesn't hide the sidebar on mobile
Edited by HJ -
feature is live at SGSGB https://shigusegubu.club/
1 import { filter, trim } from 'lodash' 2 import { instanceDefaultProperties, defaultState as configDefaultState } from 'src/modules/config.js' 3 4 const multiChoiceProperties = [ -
basically because there's no centralized explicit settings declaration, so type of setting's value isn't known beforehand. And the purpose of this entire thing is to make making UI for settings as easy as possible, that's how it was in original MR, i just separated it to make it re-usable in several pages which are different components now.
I think I can add code to guess if it's multi-choice or not by
typeof this.$store.getters.instanceDefaultConfig[key]but that's kinda hacky changed this line in version 15 of the diff
-
_modalwas used to differentiate it from oldsettingsto aid development (so that i can still have originals while moving stuff into tabs) and also to ease the review (file with tons of weird changes vs. old file deleted, new file added). Also easier to resolve merge conflicts. I can rename it back if it's too obnoxious._tabwas added in SOME tabs because i.e.GeneralTabsounds less weird thanGeneralas a component name, and then I just renamed the rest of them for consistency. and also possibly easier to grep things. Also can rename them if it's too obnoxious.
- Resolved by HJ
I can't say I'm a big fan of the way the side tabs work on mobile, sideways scrolling is always iffy and when the view opens it just looks off with a split in the middle of the screen and the tab buttons being so big that all of them don't even fit the screen. I have two suggestions for this
-
making the navigation two level on mobile, so you have a top level view with all the options, you click one and it takes you there, you go back to top level view using a back button on top
-
having the text on tab buttons disappear on mobile, allowing them to be much smaller so that you don't have to scroll sideways
-
- Last reply by Shpuld Shpludson
- Resolved by HJ
oh, the big spinner is pretty ugly, it'd be better if it was a modal the size of the setting window but just without content and a regular spinner on it
- Last reply by Shpuld Shpludson
mentioned in merge request !1124 (merged)
-
There's basically two things left to do:
- side tabs have wrong padding on the right side
- mutes/blocks have weird double-scrolling because of full-height + mobile tab header
Edited by HJ added 1 commit
- 4fae2f8e - track if settings modal has been opened once
added 34 commits
-
4fae2f8e...e47d0f21 - 33 commits from branch
develop - 9e3e6b0c - Merge remote-tracking branch 'origin/develop' into settings-modal
-
4fae2f8e...e47d0f21 - 33 commits from branch
enabled an automatic merge when the pipeline for 68482fd3 succeeds
mentioned in commit a5de8db5