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

Mobile: Fixes #2941: Fixed resource download auto mode

Browse Source
This commit is contained in:
Laurent Cozic 2020-04-08 17:40:32 +00:00
parent 9b26378fdd
commit a6459d3641
2 changed files with 71 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
ElectronClient/gui/ResourceScreen.tsx
View File

@ -81,34 +81,36 @@ const ResourceTable: React.FC<ResourceTable> = (props: ResourceTable) => {
fontWeight: 'bold',
};
return <table style={{ width: '100%' }}>
<thead>
<tr>
<th style={headerStyle}>{_('Title')} {sortOrderEngagedMarker('name')}</th>
<th style={headerStyle}>{_('Size')} {sortOrderEngagedMarker('size')}</th>
<th style={headerStyle}>{_('ID')}</th>
<th style={headerStyle}>{_('Action')}</th>
</tr>
</thead>
<tbody>
{props.resources.map((resource: Resource, index: number) =>
<tr key={index}>
<td style={titleCellStyle} className="titleCell">
<a
style={{ color: props.theme.htmlLinkColor }}
href="#"
onClick={() => props.onResourceClick(resource)}>{resource.title || `(${_('Untitled')})`}
</a>
</td>
<td style={cellStyle} className="dataCell">{prettyBytes(resource.size)}</td>
<td style={cellStyle} className="dataCell">{resource.id}</td>
<td style={cellStyle} className="dataCell">
<button style={props.theme.buttonStyle} onClick={() => props.onResourceDelete(resource)}>{_('Delete')}</button>
</td>
return (
<table style={{ width: '100%' }}>
<thead>
<tr>
<th style={headerStyle}>{_('Title')} {sortOrderEngagedMarker('name')}</th>
<th style={headerStyle}>{_('Size')} {sortOrderEngagedMarker('size')}</th>
<th style={headerStyle}>{_('ID')}</th>
<th style={headerStyle}>{_('Action')}</th>
</tr>
)}
</tbody>
</table>;
</thead>
<tbody>
{props.resources.map((resource: Resource, index: number) =>
<tr key={index}>
<td style={titleCellStyle} className="titleCell">
<a
style={{ color: props.theme.htmlLinkColor }}
href="#"
onClick={() => props.onResourceClick(resource)}>{resource.title || `(${_('Untitled')})`}
</a>
</td>
<td style={cellStyle} className="dataCell">{prettyBytes(resource.size)}</td>
<td style={cellStyle} className="dataCell">{resource.id}</td>
<td style={cellStyle} className="dataCell">
<button style={props.theme.buttonStyle} onClick={() => props.onResourceDelete(resource)}>{_('Delete')}</button>
</td>
</tr>
)}
</tbody>
</table>
);
};
const getSortingOrderColumn = (s: SortingOrder): string => {
@ -202,7 +204,7 @@ class ResourceScreenComponent extends React.Component<Props, State> {
const theme = themeStyle(this.props.theme);
const headerStyle = Object.assign({}, theme.headerStyle, { width: style.width });
const rootStyle = {
const rootStyle:any = {
...style,
overflowY: 'scroll',
color: theme.color,
@ -212,34 +214,36 @@ class ResourceScreenComponent extends React.Component<Props, State> {
rootStyle.height = style.height - 35; // Minus the header height
delete rootStyle.width;
return <div style={{ ...theme.containerStyle, fontFamily: theme.fontFamily }}>
<Header style={headerStyle} />
<div style={rootStyle}>
<div style={{ ...theme.notificationBox, marginBottom: 10 }}>{
_('This is an advanced tool to show the attachments that are linked to your notes. Please be careful when deleting one of them as they cannot be restored afterwards.')
}</div>
{this.state.isLoading && <div>{_('Please wait...')}</div>}
{!this.state.isLoading && <div>
{!this.state.resources && <div>
{_('No resources!')}
return (
<div style={{ ...theme.containerStyle, fontFamily: theme.fontFamily }}>
<Header style={headerStyle} />
<div style={rootStyle}>
<div style={{ ...theme.notificationBox, marginBottom: 10 }}>{
_('This is an advanced tool to show the attachments that are linked to your notes. Please be careful when deleting one of them as they cannot be restored afterwards.')
}</div>
{this.state.isLoading && <div>{_('Please wait...')}</div>}
{!this.state.isLoading && <div>
{!this.state.resources && <div>
{_('No resources!')}
</div>
}
{this.state.resources && this.state.resources.length === MAX_RESOURCES &&
<div>{_('Warning: not all resources shown for performance reasons (limit: %s).', MAX_RESOURCES)}</div>
}
{this.state.resources && <ResourceTable
theme={theme}
style={style}
resources={this.state.resources}
sorting={this.state.sorting}
onToggleSorting={(order) => this.onToggleSortOrder(order)}
onResourceClick={(resource) => this.openResource(resource)}
onResourceDelete={(resource) => this.onResourceDelete(resource)}
/>}
</div>
}
{this.state.resources && this.state.resources.length === MAX_RESOURCES &&
<div>{_('Warning: not all resources shown for performance reasons (limit: %s).', MAX_RESOURCES)}</div>
}
{this.state.resources && <ResourceTable
theme={theme}
style={style}
resources={this.state.resources}
sorting={this.state.sorting}
onToggleSorting={(order) => this.onToggleSortOrder(order)}
onResourceClick={(resource) => this.openResource(resource)}
onResourceDelete={(resource) => this.onResourceDelete(resource)}
/>}
</div>
}
</div>
</div>;
);
}
}

16
ReactNativeClient/lib/components/note-body-viewer.js
View File

@ -21,11 +21,14 @@ class NoteBodyViewer extends Component {
bodyHtml: '',
};
this.forceUpdate_ = false;
this.isMounted_ = false;
this.markupToHtml_ = markupLanguageUtils.newMarkupToHtml();
this.reloadNote = this.reloadNote.bind(this);
this.watchFn = this.watchFn.bind(this);
}
componentDidMount() {
@ -38,6 +41,8 @@ class NoteBodyViewer extends Component {
}
async reloadNote() {
this.forceUpdate_ = false;
const note = this.props.note;
const theme = themeStyle(this.props.theme);
@ -183,9 +188,18 @@ class NoteBodyViewer extends Component {
}
rebuildMd() {
this.forceUpdate_ = true;
this.forceUpdate();
}
watchFn() {
// react-async will not fetch the data again after the first render
// so we use this watchFn function to force it to reload in certain
// cases. It is used in particular when re-rendering the note when
// a resource has been downloaded in auto mode.
return this.forceUpdate_;
}
render() {
// Note: useWebKit={false} is needed to go around this bug:
// https://github.com/react-native-community/react-native-webview/issues/376
@ -206,7 +220,7 @@ class NoteBodyViewer extends Component {
return (
<View style={this.props.style}>
<Async promiseFn={this.reloadNote}>
<Async promiseFn={this.reloadNote} watchFn={this.watchFn}>
{({ data, error, isPending }) => {
if (error) {
console.error(error);