Plugins: Add ability to make dialogs fit the application window (#5219)

laurent22 · Jul 22, 2021 · c89037b · c89037b
1 parent f611d77
commit c89037b
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 3 deletions.
diff --git a/packages/app-cli/tests/support/plugins/dialog/src/index.ts b/packages/app-cli/tests/support/plugins/dialog/src/index.ts
@@ -42,6 +42,21 @@ joplin.plugins.register({
 		const result3 = await dialogs.open(handle3);
 		console.info('Got result: ' + JSON.stringify(result3));		
 
+
+		const handle4 = await dialogs.create('myDialog4');
+		await dialogs.setHtml(handle4, `
+		<h1>This dialog tests dynamic sizing</h1>
+		<h3>Resize the window and the dialog should resize accordingly</h3>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+		</p>
+		`);
+		await (dialogs as any).fitToContent(handle4, false);
+		await dialogs.open(handle4);
+
 	},
 
 });
diff --git a/packages/app-desktop/gui/MainScreen/MainScreen.tsx b/packages/app-desktop/gui/MainScreen/MainScreen.tsx
@@ -779,6 +779,7 @@ class MainScreenComponent extends React.Component<Props, State> {
 				scripts={view.scripts}
 				pluginId={plugin.id}
 				buttons={view.buttons}
+				fitToContent={view.fitToContent}
 			/>);
 		}
 

diff --git a/packages/app-desktop/services/plugins/UserWebview.tsx b/packages/app-desktop/services/plugins/UserWebview.tsx
@@ -31,8 +31,8 @@ export interface Props {
 const StyledFrame = styled.iframe`
 	padding: 0;
 	margin: 0;
-	width: ${(props: any) => props.fitToContent ? `${props.width}px` : '100%'};
-	height: ${(props: any) => props.fitToContent ? `${props.height}px` : '100%'};
+	width: ${(props: any) => props.fitToContent ? `${props.width}px` : '90vw'};
+	height: ${(props: any) => props.fitToContent ? `${props.height}px` : '80vh'};
 	border: none;
 	border-bottom: ${(props: Props) => props.borderBottom ? `1px solid ${props.theme.dividerColor}` : 'none'};
 `;

diff --git a/packages/app-desktop/services/plugins/UserWebviewDialog.tsx b/packages/app-desktop/services/plugins/UserWebviewDialog.tsx
@@ -9,6 +9,7 @@ const styled = require('styled-components').default;
 
 interface Props extends UserWebviewProps {
 	buttons: ButtonSpec[];
+	fitToContent: boolean;
 }
 
 const StyledRoot = styled.div`
@@ -113,7 +114,7 @@ export default function UserWebviewDialog(props: Props) {
 						viewId={props.viewId}
 						themeId={props.themeId}
 						borderBottom={false}
-						fitToContent={true}
+						fitToContent={props.fitToContent}
 						onSubmit={onSubmit}
 						onDismiss={onDismiss}
 						onReady={onReady}

diff --git a/packages/lib/services/plugins/WebviewController.ts b/packages/lib/services/plugins/WebviewController.ts
@@ -58,6 +58,7 @@ export default class WebviewController extends ViewController {
 				scripts: [],
 				opened: false,
 				buttons: null,
+				fitToContent: true,
 			},
 		});
 	}
@@ -173,4 +174,11 @@ export default class WebviewController extends ViewController {
 		this.setStoreProp('buttons', buttons);
 	}
 
+	public get fitToContent(): boolean {
+		return this.storeView.fitToContent;
+	}
+
+	public set fitToContent(fitToContent: boolean) {
+		this.setStoreProp('fitToContent', fitToContent);
+	}
 }
diff --git a/packages/lib/services/plugins/api/JoplinViewsDialogs.ts b/packages/lib/services/plugins/api/JoplinViewsDialogs.ts
@@ -98,4 +98,13 @@ export default class JoplinViewsDialogs {
 		return this.controller(handle).open();
 	}
 
+	/**
+	 * Toggle on whether to fit the dialog size to the content or not.
+	 * When set to false, the dialog stretches to fill the application
+	 * window.
+	 * @default true
+	 */
+	public async setFitToContent(handle: ViewHandle, status: boolean) {
+		return this.controller(handle).fitToContent = status;
+	}
 }