Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-11-11 01:54:40 +08:00
Code Issues Projects Releases Packages Wiki Activity

Apply explicit width and height to custom signature images for Outlook #737

Browse source
This commit is contained in:
Ben Gotow 2018-04-03 17:05:14 -07:00
parent 3c18f51555
commit e7ddad7862
2 changed files with 39 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/internal_packages/composer-signature/lib/signature-photo-picker.jsx
View file

@ -84,15 +84,22 @@ export default class SignaturePhotoPicker extends React.Component {
// png, gif, svg stay in PNG format, everything else gets converted to
// a JPG with lossy compression
if (ext === 'png' || ext === 'gif' || ext === 'svg') {
source.toBlob(this._onChooseImageBlob, 'image/png');
source.toBlob(
blob => this._onChooseImageBlob(blob, source.width, source.height),
'image/png'
);
} else {
source.toBlob(this._onChooseImageBlob, 'image/jpg', 0.65);
source.toBlob(
blob => this._onChooseImageBlob(blob, source.width, source.height),
'image/jpg',
0.65
);
}
};
img.src = `file://${filepath}`;
};
_onChooseImageBlob = async blob => {
_onChooseImageBlob = async (blob, width, height) => {
this.setState({ isUploading: true });
const ext = { 'image/jpg': 'jpg', 'image/png': 'png' }[blob.type];
@ -111,7 +118,9 @@ export default class SignaturePhotoPicker extends React.Component {
this.setState({ isUploading: false });
}
this.props.onChange({ target: { value: `${link}?t=${Date.now()}`, id: 'photoURL' } });
this.props.onChange({
target: { value: `${link}?t=${Date.now()}&w=${width}&h=${height}`, id: 'photoURL' },
});
};
render() {

27
app/internal_packages/composer-signature/lib/templates.es6
View file

@ -1,4 +1,5 @@
import { React } from 'mailspring-exports';
import querystring from 'querystring';
// Static components
@ -19,6 +20,25 @@ const TWITTER_SHARE = (
/>
);
function widthAndHeightForPhotoURL(photoURL, { maxWidth, maxHeight } = {}) {
if (!photoURL) {
return {};
}
let q = {};
try {
q = querystring.parse(photoURL);
} catch (err) {
return {};
}
if (!q.w || !q.h) {
return {};
}
const scale = Math.min(1, maxWidth / q.w, maxHeight / q.h);
return {
width: Math.round(q.w * scale),
height: Math.round(q.h * scale),
};
}
// Generic components used across templates
const PrefixStyles = {
@ -129,7 +149,8 @@ const Templates = [
alt=""
key={props.photoURL}
src={props.photoURL}
style={{ maxWidth: 60, maxHeight: 60, paddingRight: 10 }}
{...widthAndHeightForPhotoURL(props.photoURL, { maxWidth: 60, maxHeight: 60 })}
style={{ maxWidth: 60, maxHeight: 60, marginRight: 10 }}
/>
)}
</td>
@ -179,6 +200,7 @@ const Templates = [
alt=""
key={props.photoURL}
src={props.photoURL}
{...widthAndHeightForPhotoURL(props.photoURL, { maxWidth: 200, maxHeight: 60 })}
style={{ maxWidth: 200, maxHeight: 60 }}
/>
)}
@ -214,6 +236,7 @@ const Templates = [
alt=""
key={props.photoURL}
src={props.photoURL}
{...widthAndHeightForPhotoURL(props.photoURL, { maxWidth: 200, maxHeight: 130 })}
style={{ maxWidth: 200, maxHeight: 130, marginRight: 20 }}
/>
)}
@ -276,6 +299,7 @@ const Templates = [
alt=""
key={props.photoURL}
src={props.photoURL}
{...widthAndHeightForPhotoURL(props.photoURL, { maxWidth: 200, maxHeight: 130 })}
style={{ maxWidth: 200, maxHeight: 130, marginTop: 12, marginBottom: 12 }}
/>
)}
@ -309,6 +333,7 @@ const Templates = [
alt=""
key={props.photoURL}
src={props.photoURL}
{...widthAndHeightForPhotoURL(props.photoURL, { maxWidth: 60, maxHeight: 60 })}
style={{ maxWidth: 60, maxHeight: 60, marginRight: 10 }}
/>
)}