diff --git a/.eslintignore b/.eslintignore index 063a87441..d612f5f78 100644 --- a/.eslintignore +++ b/.eslintignore @@ -326,9 +326,18 @@ packages/app-desktop/gui/ConfigScreen/ConfigScreen.js.map packages/app-desktop/gui/ConfigScreen/SideBar.d.ts packages/app-desktop/gui/ConfigScreen/SideBar.js packages/app-desktop/gui/ConfigScreen/SideBar.js.map -packages/app-desktop/gui/ConfigScreen/controls/PluginsStates.d.ts -packages/app-desktop/gui/ConfigScreen/controls/PluginsStates.js -packages/app-desktop/gui/ConfigScreen/controls/PluginsStates.js.map +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.d.ts +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.js +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.js.map +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.d.ts +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.js +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.js.map +packages/app-desktop/gui/ConfigScreen/controls/plugins/SearchPlugins.d.ts +packages/app-desktop/gui/ConfigScreen/controls/plugins/SearchPlugins.js +packages/app-desktop/gui/ConfigScreen/controls/plugins/SearchPlugins.js.map +packages/app-desktop/gui/ConfigScreen/controls/plugins/useOnInstallHandler.d.ts +packages/app-desktop/gui/ConfigScreen/controls/plugins/useOnInstallHandler.js +packages/app-desktop/gui/ConfigScreen/controls/plugins/useOnInstallHandler.js.map packages/app-desktop/gui/DropboxLoginScreen.d.ts packages/app-desktop/gui/DropboxLoginScreen.js packages/app-desktop/gui/DropboxLoginScreen.js.map @@ -656,9 +665,6 @@ packages/app-desktop/gui/Root_UpgradeSyncTarget.js.map packages/app-desktop/gui/SearchBar/SearchBar.d.ts packages/app-desktop/gui/SearchBar/SearchBar.js packages/app-desktop/gui/SearchBar/SearchBar.js.map -packages/app-desktop/gui/SearchBar/styles/index.d.ts -packages/app-desktop/gui/SearchBar/styles/index.js -packages/app-desktop/gui/SearchBar/styles/index.js.map packages/app-desktop/gui/ShareNoteDialog.d.ts packages/app-desktop/gui/ShareNoteDialog.js packages/app-desktop/gui/ShareNoteDialog.js.map @@ -707,6 +713,9 @@ packages/app-desktop/gui/hooks/usePrevious.js.map packages/app-desktop/gui/hooks/usePropsDebugger.d.ts packages/app-desktop/gui/hooks/usePropsDebugger.js packages/app-desktop/gui/hooks/usePropsDebugger.js.map +packages/app-desktop/gui/lib/SearchInput/SearchInput.d.ts +packages/app-desktop/gui/lib/SearchInput/SearchInput.js +packages/app-desktop/gui/lib/SearchInput/SearchInput.js.map packages/app-desktop/gui/lib/ToggleButton/ToggleButton.d.ts packages/app-desktop/gui/lib/ToggleButton/ToggleButton.js packages/app-desktop/gui/lib/ToggleButton/ToggleButton.js.map @@ -1121,6 +1130,9 @@ packages/lib/services/plugins/Plugin.js.map packages/lib/services/plugins/PluginService.d.ts packages/lib/services/plugins/PluginService.js packages/lib/services/plugins/PluginService.js.map +packages/lib/services/plugins/RepositoryApi.d.ts +packages/lib/services/plugins/RepositoryApi.js +packages/lib/services/plugins/RepositoryApi.js.map packages/lib/services/plugins/ToolbarButtonController.d.ts packages/lib/services/plugins/ToolbarButtonController.js packages/lib/services/plugins/ToolbarButtonController.js.map diff --git a/.gitignore b/.gitignore index a80a33285..fc906e788 100644 --- a/.gitignore +++ b/.gitignore @@ -315,9 +315,18 @@ packages/app-desktop/gui/ConfigScreen/ConfigScreen.js.map packages/app-desktop/gui/ConfigScreen/SideBar.d.ts packages/app-desktop/gui/ConfigScreen/SideBar.js packages/app-desktop/gui/ConfigScreen/SideBar.js.map -packages/app-desktop/gui/ConfigScreen/controls/PluginsStates.d.ts -packages/app-desktop/gui/ConfigScreen/controls/PluginsStates.js -packages/app-desktop/gui/ConfigScreen/controls/PluginsStates.js.map +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.d.ts +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.js +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.js.map +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.d.ts +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.js +packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.js.map +packages/app-desktop/gui/ConfigScreen/controls/plugins/SearchPlugins.d.ts +packages/app-desktop/gui/ConfigScreen/controls/plugins/SearchPlugins.js +packages/app-desktop/gui/ConfigScreen/controls/plugins/SearchPlugins.js.map +packages/app-desktop/gui/ConfigScreen/controls/plugins/useOnInstallHandler.d.ts +packages/app-desktop/gui/ConfigScreen/controls/plugins/useOnInstallHandler.js +packages/app-desktop/gui/ConfigScreen/controls/plugins/useOnInstallHandler.js.map packages/app-desktop/gui/DropboxLoginScreen.d.ts packages/app-desktop/gui/DropboxLoginScreen.js packages/app-desktop/gui/DropboxLoginScreen.js.map @@ -645,9 +654,6 @@ packages/app-desktop/gui/Root_UpgradeSyncTarget.js.map packages/app-desktop/gui/SearchBar/SearchBar.d.ts packages/app-desktop/gui/SearchBar/SearchBar.js packages/app-desktop/gui/SearchBar/SearchBar.js.map -packages/app-desktop/gui/SearchBar/styles/index.d.ts -packages/app-desktop/gui/SearchBar/styles/index.js -packages/app-desktop/gui/SearchBar/styles/index.js.map packages/app-desktop/gui/ShareNoteDialog.d.ts packages/app-desktop/gui/ShareNoteDialog.js packages/app-desktop/gui/ShareNoteDialog.js.map @@ -696,6 +702,9 @@ packages/app-desktop/gui/hooks/usePrevious.js.map packages/app-desktop/gui/hooks/usePropsDebugger.d.ts packages/app-desktop/gui/hooks/usePropsDebugger.js packages/app-desktop/gui/hooks/usePropsDebugger.js.map +packages/app-desktop/gui/lib/SearchInput/SearchInput.d.ts +packages/app-desktop/gui/lib/SearchInput/SearchInput.js +packages/app-desktop/gui/lib/SearchInput/SearchInput.js.map packages/app-desktop/gui/lib/ToggleButton/ToggleButton.d.ts packages/app-desktop/gui/lib/ToggleButton/ToggleButton.js packages/app-desktop/gui/lib/ToggleButton/ToggleButton.js.map @@ -1110,6 +1119,9 @@ packages/lib/services/plugins/Plugin.js.map packages/lib/services/plugins/PluginService.d.ts packages/lib/services/plugins/PluginService.js packages/lib/services/plugins/PluginService.js.map +packages/lib/services/plugins/RepositoryApi.d.ts +packages/lib/services/plugins/RepositoryApi.js +packages/lib/services/plugins/RepositoryApi.js.map packages/lib/services/plugins/ToolbarButtonController.d.ts packages/lib/services/plugins/ToolbarButtonController.js packages/lib/services/plugins/ToolbarButtonController.js.map diff --git a/packages/app-desktop/gui/ConfigScreen/ConfigScreen.tsx b/packages/app-desktop/gui/ConfigScreen/ConfigScreen.tsx index 5a577a592..caf790c9b 100644 --- a/packages/app-desktop/gui/ConfigScreen/ConfigScreen.tsx +++ b/packages/app-desktop/gui/ConfigScreen/ConfigScreen.tsx @@ -5,7 +5,7 @@ import Button, { ButtonLevel } from '../Button/Button'; import { _ } from '@joplin/lib/locale'; import bridge from '../../services/bridge'; import Setting from '@joplin/lib/models/Setting'; -import control_PluginsStates from './controls/PluginsStates'; +import control_PluginsStates from './controls/plugins/PluginsStates'; const { connect } = require('react-redux'); const { themeStyle } = require('@joplin/lib/theme'); @@ -159,10 +159,14 @@ class ConfigScreenComponent extends React.Component { const settingComps = createSettingComponents(false); const advancedSettingComps = createSettingComponents(true); + const sectionWidths: Record = { + plugins: 900, + }; + const sectionStyle: any = { marginTop: 20, marginBottom: 20, - maxWidth: 640, + maxWidth: sectionWidths[section.name] ? sectionWidths[section.name] : 640, }; if (!selected) sectionStyle.display = 'none'; @@ -277,7 +281,7 @@ class ConfigScreenComponent extends React.Component { color: theme.color, fontSize: theme.fontSize * 1.083333, fontWeight: 500, - marginBottom: theme.mainPadding / 4, + marginBottom: theme.mainPadding / 2, }); } @@ -310,7 +314,7 @@ class ConfigScreenComponent extends React.Component { const output: any = null; const rowStyle = { - marginBottom: theme.mainPadding, + marginBottom: theme.mainPadding * 1.5, }; const labelStyle = this.labelStyle(this.props.themeId); @@ -366,9 +370,10 @@ class ConfigScreenComponent extends React.Component { if (settingKeyToControl[key]) { const SettingComponent = settingKeyToControl[key]; + const label = md.label ? this.renderLabel(this.props.themeId, md.label()) : null; return (
- {this.renderLabel(this.props.themeId, md.label())} + {label} {this.renderDescription(this.props.themeId, md.description ? md.description() : null)} { onChange={(event: any) => { updateSettingValue(key, event.value); }} + renderLabel={this.renderLabel} + renderDescription={this.renderDescription} />
); diff --git a/packages/app-desktop/gui/ConfigScreen/controls/PluginsStates.tsx b/packages/app-desktop/gui/ConfigScreen/controls/PluginsStates.tsx deleted file mode 100644 index 8a8473485..000000000 --- a/packages/app-desktop/gui/ConfigScreen/controls/PluginsStates.tsx +++ /dev/null @@ -1,255 +0,0 @@ -import * as React from 'react'; -import { useCallback, useMemo } from 'react'; -import PluginService, { defaultPluginSetting, Plugins, PluginSetting, PluginSettings } from '@joplin/lib/services/plugins/PluginService'; -import { _ } from '@joplin/lib/locale'; -import styled from 'styled-components'; -import ToggleButton from '../../lib/ToggleButton/ToggleButton'; -import Button, { ButtonLevel } from '../../Button/Button'; -import bridge from '../../../services/bridge'; -import produce from 'immer'; - -const Root = styled.div` - display: flex; - flex-direction: column; -`; - -const TableRoot = styled.div` - display: flex; - flex-wrap: wrap; -`; - -const InstallButton = styled(Button)` - margin-bottom: 10px; -`; - -const CellRoot = styled.div` - display: flex; - background-color: ${props => props.theme.backgroundColor}; - flex-direction: column; - align-items: flex-start; - padding: 15px; - border: 1px solid ${props => props.theme.dividerColor}; - border-radius: 6px; - width: 250px; - margin-right: 20px; - margin-bottom: 20px; - box-shadow: 1px 1px 3px rgba(0,0,0,0.2); -`; - -const CellTop = styled.div` - display: flex; - flex-direction: row; - width: 100%; - margin-bottom: 10px; -`; - -const CellContent = styled.div` - display: flex; - margin-bottom: 10px; - flex: 1; -`; - -const CellFooter = styled.div` - display: flex; - flex-direction: row; -`; - -const DevModeLabel = styled.div` - border: 1px solid ${props => props.theme.color}; - border-radius: 4px; - padding: 4px 6px; - font-size: ${props => props.theme.fontSize * 0.75}px; - color: ${props => props.theme.color}; -`; - -const StyledName = styled.div` - font-family: ${props => props.theme.fontFamily}; - color: ${props => props.theme.color}; - font-size: ${props => props.theme.fontSize}px; - font-weight: bold; - flex: 1; -`; - -const StyledDescription = styled.div` - font-family: ${props => props.theme.fontFamily}; - color: ${props => props.theme.colorFaded}; - font-size: ${props => props.theme.fontSize}px; - line-height: 1.6em; -`; - -interface Props { - value: any; - themeId: number; - onChange: Function; -} - -interface CellProps { - item: PluginItem; - themeId: number; - onToggle: Function; - onDelete: Function; -} - -interface PluginItem { - id: string; - name: string; - description: string; - enabled: boolean; - deleted: boolean; - devMode: boolean; -} - -function Cell(props: CellProps) { - const { item } = props; - - // For plugins in dev mode things like enabling/disabling or - // uninstalling them doesn't make sense, as that should be done by - // adding/removing them from wherever they were loaded from. - - function renderToggleButton() { - if (item.devMode) { - return DEV; - } - - return props.onToggle({ item: props.item })} - />; - } - - function renderFooter() { - if (item.devMode) return null; - - return ( - -