self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Ahmad Mamdouh 2021-07-22 11:21:57 +02:00 committed by GitHub
parent f611d7734b
commit c89037b4a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/app-cli/tests/support/plugins/dialog/src/index.ts
View File

@ -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);
},
});

1
packages/app-desktop/gui/MainScreen/MainScreen.tsx
View File

@ -779,6 +779,7 @@ class MainScreenComponent extends React.Component<Props, State> {
scripts={view.scripts}
pluginId={plugin.id}
buttons={view.buttons}
fitToContent={view.fitToContent}
/>);
}

4
packages/app-desktop/services/plugins/UserWebview.tsx
View File

@ -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'};
`;

3
packages/app-desktop/services/plugins/UserWebviewDialog.tsx
View File

@ -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}

8
packages/lib/services/plugins/WebviewController.ts
View File

@ -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);
}
}

9
packages/lib/services/plugins/api/JoplinViewsDialogs.ts
View File

@ -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;
}
}