From 802678408ddc35679b88b0ea5fba9c57bd05a71c Mon Sep 17 00:00:00 2001 From: Jason Johnston Date: Wed, 17 May 2017 11:20:43 -0700 Subject: [PATCH 1/5] add linkedin share component --- .../share/linkedin-share-preview/index.jsx | 85 +++++++++++++++++++ .../share/linkedin-share-preview/style.scss | 0 2 files changed, 85 insertions(+) create mode 100644 client/components/share/linkedin-share-preview/index.jsx create mode 100644 client/components/share/linkedin-share-preview/style.scss diff --git a/client/components/share/linkedin-share-preview/index.jsx b/client/components/share/linkedin-share-preview/index.jsx new file mode 100644 index 0000000000000..6cd74021fb3e4 --- /dev/null +++ b/client/components/share/linkedin-share-preview/index.jsx @@ -0,0 +1,85 @@ +/** + * 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, + externalName: PropTypes.string, + imageUrl: PropTypes.string, + message: PropTypes.string, + }; + + render() { + const { + articleUrl, + externalProfilePicture, + externalProfileUrl, + externalName, + imageUrl, + message, + translate + } = this.props; + return ( +
+
+
+
+ +
+
+
+ + { externalName } + + + { + translate( 'published an article on {{a}}WordPress{{/a}}', { + components: { + a: + } + } ) + } + +
+ +
+
+
+
+ { message } +
+
+ + { articleUrl } + +
+ { imageUrl && +
+ +
+ } +
+
+
+ ); + } +} + +export default localize( LinkedinSharePreview ); diff --git a/client/components/share/linkedin-share-preview/style.scss b/client/components/share/linkedin-share-preview/style.scss new file mode 100644 index 0000000000000..e69de29bb2d1d From 690f9ba808e57265cb96ef68b8cf13730a5cdeaf Mon Sep 17 00:00:00 2001 From: Jason Johnston Date: Wed, 17 May 2017 14:04:21 -0700 Subject: [PATCH 2/5] add linkedin to preview modal --- assets/stylesheets/_components.scss | 1 + client/blocks/sharing-preview-pane/index.jsx | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss index 3447910b7dd48..b794db7888cb5 100644 --- a/assets/stylesheets/_components.scss +++ b/assets/stylesheets/_components.scss @@ -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'; diff --git a/client/blocks/sharing-preview-pane/index.jsx b/client/blocks/sharing-preview-pane/index.jsx index 606a3f4fd4b84..79550b24f9c97 100644 --- a/client/blocks/sharing-preview-pane/index.jsx +++ b/client/blocks/sharing-preview-pane/index.jsx @@ -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'; @@ -39,6 +40,7 @@ class SharingPreviewPane extends PureComponent { services: [ 'facebook', 'google_plus', + 'linkedin', 'twitter', 'tumblr', ] @@ -89,6 +91,8 @@ class SharingPreviewPane extends PureComponent { return ; case 'tumblr': return ; + case 'linkedin': + return ; case 'twitter': return Date: Fri, 31 Mar 2017 18:02:36 +0100 Subject: [PATCH 3/5] Sharing: Style the preview for LinkedIn --- .../share/linkedin-share-preview/index.jsx | 45 ++++------ .../share/linkedin-share-preview/style.scss | 90 +++++++++++++++++++ 2 files changed, 108 insertions(+), 27 deletions(-) diff --git a/client/components/share/linkedin-share-preview/index.jsx b/client/components/share/linkedin-share-preview/index.jsx index 6cd74021fb3e4..0fc0759af1ce0 100644 --- a/client/components/share/linkedin-share-preview/index.jsx +++ b/client/components/share/linkedin-share-preview/index.jsx @@ -22,8 +22,7 @@ export class LinkedinSharePreview extends PureComponent { externalProfileUrl, externalName, imageUrl, - message, - translate + message } = this.props; return (
@@ -40,41 +39,33 @@ export class LinkedinSharePreview extends PureComponent { { externalName } - - { - translate( 'published an article on {{a}}WordPress{{/a}}', { - components: { - a: - } - } ) - } -
-
- { message } -
- { imageUrl &&
- + + +
} +
diff --git a/client/components/share/linkedin-share-preview/style.scss b/client/components/share/linkedin-share-preview/style.scss index e69de29bb2d1d..9faaa2ac27e90 100644 --- a/client/components/share/linkedin-share-preview/style.scss +++ b/client/components/share/linkedin-share-preview/style.scss @@ -0,0 +1,90 @@ +.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 { + 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; +} From f106dd7cfb8fa8baad2f89b5549651412442b74c Mon Sep 17 00:00:00 2001 From: Jason Johnston Date: Fri, 19 May 2017 18:02:51 -0700 Subject: [PATCH 4/5] add site and external name to preview props --- client/blocks/sharing-preview-pane/index.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/blocks/sharing-preview-pane/index.jsx b/client/blocks/sharing-preview-pane/index.jsx index 79550b24f9c97..f86cc20e991bb 100644 --- a/client/blocks/sharing-preview-pane/index.jsx +++ b/client/blocks/sharing-preview-pane/index.jsx @@ -55,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 ) { @@ -65,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, @@ -77,11 +78,13 @@ class SharingPreviewPane extends PureComponent { articleUrl, articleTitle, articleContent, + externalDisplay, externalName, externalProfileURL, externalProfilePicture, message, imageUrl, + siteDomain, }; switch ( selectedService ) { From 8b734d3bc5093dbcf7bf1cc40a3406572cfe7d31 Mon Sep 17 00:00:00 2001 From: Jason Johnston Date: Fri, 19 May 2017 18:03:48 -0700 Subject: [PATCH 5/5] update preview display --- .../share/linkedin-share-preview/index.jsx | 17 ++++++++--------- .../share/linkedin-share-preview/style.scss | 3 +++ 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/client/components/share/linkedin-share-preview/index.jsx b/client/components/share/linkedin-share-preview/index.jsx index 0fc0759af1ce0..7d5daaf9aae22 100644 --- a/client/components/share/linkedin-share-preview/index.jsx +++ b/client/components/share/linkedin-share-preview/index.jsx @@ -10,19 +10,21 @@ export class LinkedinSharePreview extends PureComponent { articleUrl: PropTypes.string, externalProfilePicture: PropTypes.string, externalProfileUrl: PropTypes.string, - externalName: PropTypes.string, imageUrl: PropTypes.string, message: PropTypes.string, + name: PropTypes.string, + siteDomain: PropTypes.string, }; render() { const { articleUrl, + externalDisplay, externalProfilePicture, externalProfileUrl, - externalName, imageUrl, - message + message, + siteDomain, } = this.props; return (
@@ -37,12 +39,9 @@ export class LinkedinSharePreview extends PureComponent {
@@ -57,12 +56,12 @@ export class LinkedinSharePreview extends PureComponent {
} diff --git a/client/components/share/linkedin-share-preview/style.scss b/client/components/share/linkedin-share-preview/style.scss index 9faaa2ac27e90..37a1912911e03 100644 --- a/client/components/share/linkedin-share-preview/style.scss +++ b/client/components/share/linkedin-share-preview/style.scss @@ -66,6 +66,9 @@ 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;