Mobile: Implement plugin screen redesign #10465
Conversation
personalizedrefrigerator
added
mobile
…plugin-screen-redesign
…plugin-screen-redesign
These styles were introduced by an incorrect merge.
personalizedrefrigerator
changed the title
| testID='searchbar' | ||
| placeholder={_('Search')} | ||
| mode='outlined' | ||
| left={<TextInput.Icon icon='magnify' />} |
There was a problem hiding this comment.
This currently causes a warning when the component is mounted:
Warning: TextInput.Icon: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
This upstream pull request, when merged, should remove the warning.
|
I've just found a bug where the version number doesn't update in the plugin modal after installing an update. I'm currently fixing this and writing a test case. Edit: Resolved. |
| public waitForLoadedPluginsChange() { | ||
| return new Promise<void>(resolve => { | ||
| this.pluginsChangeListeners_.push(() => resolve()); | ||
| }); | ||
| public addLoadedPluginsChangeListener(listener: ()=> void) { | ||
| this.pluginsChangeListeners_.push(listener); | ||
|
|
||
| return { | ||
| remove: () => { | ||
| this.pluginsChangeListeners_ = this.pluginsChangeListeners_.filter(l => (l !== listener)); | ||
| }, | ||
| }; | ||
| } |
There was a problem hiding this comment.
Previously, waitForLoadedPluginsChange (added to support mobile plugins), was used to wait for changes to the list of loaded plugins in a while loop. For example,
while (!event.cancelled) {
await service.waitForLoadedPluginsChange();
... update something ...
}This, however, has the drawback that waitFor listeners can't be cancelled when the plugin unloads. It's instead necessary to wait for the listener to be fired, before it can be removed. Additionally, it's necessary to call waitForLoadedPluginsChange from async code — the exhaustive dependency eslint task doesn't seem to check the dependencies of useAsyncEffect.
Because addLoadedPluginsChangeListener is now used in more places (usePlugin), it has been refactored.
Summary
This pull request partially implements a redesign of the plugin screen.
This implementation is based on a Figma design by @MartaLC.
Notes
To-do
Screenshots
Search and installed plugins in light mode:
Deleting a plugin from the plugin management dialog, no update available:
Advanced settings in light mode and in dark mode (below a search):
On a large-screen device:
Note: The "on a large screen device" screenshot was updated after reducing the maximum width of the info dialog.