Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Publicize: add linkedin preview #14198

Merged
merged 5 commits into from
May 23, 2017
Merged

Publicize: add linkedin preview #14198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8026784
add linkedin share component
jhnstn May 17, 2017
690f9ba
add linkedin to preview modal
jhnstn May 17, 2017
eff50b9
Sharing: Style the preview for LinkedIn
iamtakashi Mar 31, 2017
f106dd7
add site and external name to preview props
jhnstn May 20, 2017
8b734d3
update preview display
jhnstn May 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/stylesheets/_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@
@import 'components/share/facebook-share-preview/style';
@import 'components/share/google-plus-share-preview/style';
@import 'components/share/tumblr-share-preview/style';
@import 'components/share/linkedin-share-preview/style';
@import 'components/share/twitter-share-preview/style';
@import 'blocks/upgrade-nudge-expanded/style';
@import 'components/seo/preview-upgrade-nudge/style';
Expand Down
9 changes: 8 additions & 1 deletion client/blocks/sharing-preview-pane/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { get, find } from 'lodash';
import { getPostImage, getExcerptForPost } from './utils';
import FacebookSharePreview from 'components/share/facebook-share-preview';
import GooglePlusSharePreview from 'components/share/google-plus-share-preview';
import LinkedinSharePreview from 'components/share/linkedin-share-preview';
import TwitterSharePreview from 'components/share/twitter-share-preview';
import TumblrSharePreview from 'components/share/tumblr-share-preview';
import VerticalMenu from 'components/vertical-menu';
Expand Down Expand Up @@ -39,6 +40,7 @@ class SharingPreviewPane extends PureComponent {
services: [
'facebook',
'google_plus',
'linkedin',
'twitter',
'tumblr',
]
Expand All @@ -53,7 +55,7 @@ class SharingPreviewPane extends PureComponent {
};

renderPreview() {
const { post, message, connections } = this.props;
const { post, site, message, connections } = this.props;
const { selectedService } = this.state;
const connection = find( connections, { service: selectedService } );
if ( ! connection ) {
Expand All @@ -63,6 +65,7 @@ class SharingPreviewPane extends PureComponent {
const articleUrl = get( post, 'URL', '' );
const articleTitle = get( post, 'title', '' );
const articleContent = getExcerptForPost( post );
const siteDomain = get( site, 'domain', '' );
const imageUrl = getPostImage( post );
const {
external_name: externalName,
Expand All @@ -75,11 +78,13 @@ class SharingPreviewPane extends PureComponent {
articleUrl,
articleTitle,
articleContent,
externalDisplay,
externalName,
externalProfileURL,
externalProfilePicture,
message,
imageUrl,
siteDomain,
};

switch ( selectedService ) {
Expand All @@ -89,6 +94,8 @@ class SharingPreviewPane extends PureComponent {
return <GooglePlusSharePreview { ...previewProps } />;
case 'tumblr':
return <TumblrSharePreview { ...previewProps } />;
case 'linkedin':
return <LinkedinSharePreview { ...previewProps } />;
case 'twitter':
return <TwitterSharePreview
{ ...previewProps }
Expand Down
75 changes: 75 additions & 0 deletions client/components/share/linkedin-share-preview/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
/**
* External dependencies
*/
import React, { PureComponent, PropTypes } from 'react';
import { localize } from 'i18n-calypso';

export class LinkedinSharePreview extends PureComponent {

static PropTypes = {
articleUrl: PropTypes.string,
externalProfilePicture: PropTypes.string,
externalProfileUrl: PropTypes.string,
imageUrl: PropTypes.string,
message: PropTypes.string,
name: PropTypes.string,
siteDomain: PropTypes.string,
};

render() {
const {
articleUrl,
externalDisplay,
externalProfilePicture,
externalProfileUrl,
imageUrl,
message,
siteDomain,
} = this.props;
return (
<div className="linkedin-share-preview">
<div className="linkedin-share-preview__content">
<div className="linkedin-share-preview__header">
<div className="linkedin-share-preview__profile-picture-part">
<img
className="linkedin-share-preview__profile-picture"
src={ externalProfilePicture }
/>
</div>
<div className="linkedin-share-preview__profile-line-part">
<div className="linkedin-share-preview__profile-line">
<a className="linkedin-share-preview__profile-name" href={ externalProfileUrl }>
{ externalDisplay }
</a>
</div>
</div>
</div>
<div className="linkedin-share-preview__body">
{ imageUrl &&
<div className="linkedin-share-preview__image-wrapper">
<a href={ articleUrl }>
<img
className="linkedin-share-preview__image"
src={ imageUrl }
/>
</a>
</div>
}
<div className="linkedin-share-preview__message-part">
<a className="linkedin-share-preview__message-link" href={ articleUrl }>
<div className="linkedin-share-preview__message">
{ message }
</div>
<div className="linkedin-share-preview__site-url">
{ siteDomain }
</div>
</a>
</div>
</div>
</div>
</div>
);
}
}

export default localize( LinkedinSharePreview );
93 changes: 93 additions & 0 deletions client/components/share/linkedin-share-preview/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
.linkedin-share-preview {
background: $white;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.2);
font-family: Source Sans Pro,Helvetica,Arial,sans-serif,Hiragino Kaku Gothic Pro,Meiryo,Hiragino Sans GB W3,Noto Naskh Arabic,Droid Arabic Naskh,Geeza Pro,Simplified Arabic,Noto Sans Thai,Thonburi,Dokchampa,Droid Sans Thai,Droid Sans Fallback,-apple-system,'.SFNSDisplay-Regular',Heiti SC,Microsoft Yahei,Segoe UI;
margin: 0 auto;
max-width: 552px;
padding: 16px;
}

.linkedin-share-preview__header {
display: flex;
}

.linkedin-share-preview__profile-picture-part {
flex: 0 0 48px;
}

.linkedin-share-preview__profile-picture {
border-radius: 50%;
display: block;
height: 48px;
width: 48px;
}

.linkedin-share-preview__profile-line-part {
margin-left: 8px;
}

.linkedin-share-preview__profile-line {
font-size: 15px;
line-height: 20px;
}

.linkedin-share-preview__profile-name {
color: rgba(0, 0, 0, 0.85);
font-weight: 600;
}

.linkedin-share-preview__meta-line {
color: rgba(0, 0, 0, 0.55);
font-size: 13px;
line-height: 16px;
}

.linkedin-share-preview__body {
align-items: center;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
display: flex;
margin-top: 16px;
padding: 8px;
}

.linkedin-share-preview__image-wrapper {
flex: 0 0 138px;
height: 72px;
margin-right: 8px;
max-width: 138px;
overflow: hidden;
position: relative;
}

.linkedin-share-preview__image {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

.linkedin-share-preview__message-link {
text-decoration: none;
}
.linkedin-share-preview__message {
color: rgba(0, 0, 0, 0.85);
display: -webkit-box;
font-size: 15px;
font-weight: 600;
line-height: 16px;
max-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

.linkedin-share-preview__site-url {
color: rgba(0, 0, 0, 0.55);
font-size: 13px;
font-weight: 400;
line-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}