diff --git a/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.tsx b/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.tsx index 0c1473676..303403c6b 100644 --- a/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.tsx +++ b/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.tsx @@ -100,11 +100,11 @@ const StyledName = styled.div` color: ${props => props.theme.color}; font-size: ${props => props.theme.fontSize}px; font-weight: bold; + padding-right: 5px; flex: 1; `; -const StyledVersion = styled.span` - margin-left: 5px; +const StyledVersion = styled.span` color: ${props => props.theme.colorFaded}; font-size: ${props => props.theme.fontSize * 0.9}px; `; @@ -190,7 +190,7 @@ export default function(props: Props) { return ( - {item.name} {item.deleted ? '(Deleted)' : ''} v{item.version} + {item.name} {item.deleted ? '(Deleted)' : ''}v{item.version} {renderToggleButton()} diff --git a/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.tsx b/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.tsx index ded45c317..76d683fb9 100644 --- a/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.tsx +++ b/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.tsx @@ -172,6 +172,10 @@ export default function(props: Props) { props.onChange({ value: pluginService.serializePluginSettings(newSettings) }); }, [pluginSettings, props.onChange]); + const onBrowsePlugins = useCallback(() => { + bridge().openExternal('https://github.com/joplin/plugins/blob/master/README.md#plugins'); + }, []); + const onPluginSettingsChange = useCallback((event: OnPluginSettingChangeEvent) => { props.onChange({ value: pluginService.serializePluginSettings(event.value) }); }, []); @@ -179,16 +183,20 @@ export default function(props: Props) { const onUpdate = useOnInstallHandler(setUpdatingPluginIds, pluginSettings, repoApi, onPluginSettingsChange, true); const onToolsClick = useCallback(async () => { - const template = []; - - template.push({ - label: _('Install from file'), - click: onInstall, - }); + const template = [ + { + label: _('Browse all plugins'), + click: onBrowsePlugins, + }, + { + label: _('Install from file'), + click: onInstall, + }, + ]; const menu = bridge().Menu.buildFromTemplate(template); menu.popup(bridge().window()); - }, [onInstall]); + }, [onInstall, onBrowsePlugins]); const onSearchQueryChange = useCallback((event: OnChangeEvent) => { setSearchQuery(event.value);