From 8c37e850707b50759100fc69c1644729d6e040b3 Mon Sep 17 00:00:00 2001 From: Alexandrshy Date: Fri, 22 Mar 2019 08:54:39 +0400 Subject: [PATCH] Added new share button: Evernot, Facebook, LinkedIn --- src/App.vue | 395 +++++++++++++++++---------- src/components/BloggerButton.vue | 10 +- src/components/DiggButton.vue | 6 +- src/components/EvernoteButton.vue | 68 +++++ src/components/FacebookButton.vue | 68 +++++ src/components/LinkedInButton.vue | 68 +++++ src/components/LiveJournalButton.vue | 10 +- src/components/RenrenButton.vue | 8 +- src/components/TwitterButton.vue | 8 +- src/components/VkontakteButton.vue | 8 +- src/components/WeiboButton.vue | 8 +- src/style/bloggerButton.css | 21 +- src/style/diggButton.css | 3 +- src/style/evernoteButton.css | 42 +++ src/style/facebookButton.css | 42 +++ src/style/linkedInButton.css | 42 +++ src/style/livejournalButton.css | 3 +- src/style/renrenButton.css | 1 - src/style/twitterButton.css | 1 - src/style/vkontakteButton.css | 1 - src/style/weiboButton.css | 3 +- 21 files changed, 626 insertions(+), 190 deletions(-) create mode 100644 src/components/EvernoteButton.vue create mode 100644 src/components/FacebookButton.vue create mode 100644 src/components/LinkedInButton.vue create mode 100644 src/style/evernoteButton.css create mode 100644 src/style/facebookButton.css create mode 100644 src/style/linkedInButton.css diff --git a/src/App.vue b/src/App.vue index 1d89fbd..840a1da 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,146 +1,253 @@ @@ -151,7 +258,10 @@ import BloggerButton from "./components/BloggerButton"; import DiggButton from "./components/DiggButton"; import RenrenButton from "./components/RenrenButton"; import WeiboButton from "./components/WeiboButton"; +import EvernoteButton from "./components/EvernoteButton"; import VkontakteButton from "./components/VkontakteButton"; +import FacebookButton from "./components/FacebookButton"; +import LinkedInButton from "./components/LinkedInButton"; export default { name: "app-share-buttons", @@ -162,7 +272,10 @@ export default { DiggButton, RenrenButton, WeiboButton, - VkontakteButton + EvernoteButton, + VkontakteButton, + FacebookButton, + LinkedInButton } }; diff --git a/src/components/BloggerButton.vue b/src/components/BloggerButton.vue index 572e286..bf344d5 100644 --- a/src/components/BloggerButton.vue +++ b/src/components/BloggerButton.vue @@ -5,7 +5,7 @@ :class="className" :shareUrl="shareUrl" :shareTitle="shareTitle" - :shareText="shareText" + :shareDescription="shareDescription" :sharePic="sharePic" :btnText="btnText" :windowWidth="windowWidth" @@ -16,7 +16,7 @@ > {{btnText}} @@ -38,8 +38,8 @@ export default { props: { className: { type: String }, shareUrl: { type: String, default: getDocumentHref }, - shareTitle: { type: String }, - shareText: { type: String, default: getDocumentTitle }, + shareTitle: { type: String, default: "" }, + shareDescription: { type: String, default: getDocumentTitle }, sharePic: { type: String, default: "" }, btnText: { type: String, default: "Blogger" }, windowWidth: { type: Number }, @@ -54,7 +54,7 @@ export default { const url = `https://www.blogger.com/blog-this.g?u=${ this.$props.shareUrl }&n=${encodeURIComponent(this.$props.shareTitle)}&t=${encodeURIComponent( - this.$props.shareText + this.$props.shareDescription )}`; return this.$props.isBlank diff --git a/src/components/DiggButton.vue b/src/components/DiggButton.vue index cbd1b02..e08038a 100644 --- a/src/components/DiggButton.vue +++ b/src/components/DiggButton.vue @@ -5,7 +5,7 @@ :class="className" :shareUrl="shareUrl" :shareTitle="shareTitle" - :shareText="shareText" + :shareDescription="shareDescription" :sharePic="sharePic" :btnText="btnText" :windowWidth="windowWidth" @@ -38,8 +38,8 @@ export default { props: { className: { type: String }, shareUrl: { type: String, default: getDocumentHref }, - shareTitle: { type: String }, - shareText: { type: String, default: getDocumentTitle }, + shareTitle: { type: String, default: "" }, + shareDescription: { type: String, default: getDocumentTitle }, sharePic: { type: String, default: "" }, btnText: { type: String, default: "Digg" }, windowWidth: { type: Number }, diff --git a/src/components/EvernoteButton.vue b/src/components/EvernoteButton.vue new file mode 100644 index 0000000..bc23865 --- /dev/null +++ b/src/components/EvernoteButton.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/src/components/FacebookButton.vue b/src/components/FacebookButton.vue new file mode 100644 index 0000000..7cde5f5 --- /dev/null +++ b/src/components/FacebookButton.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/src/components/LinkedInButton.vue b/src/components/LinkedInButton.vue new file mode 100644 index 0000000..479da19 --- /dev/null +++ b/src/components/LinkedInButton.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/src/components/LiveJournalButton.vue b/src/components/LiveJournalButton.vue index c4e7233..6bb6d0b 100644 --- a/src/components/LiveJournalButton.vue +++ b/src/components/LiveJournalButton.vue @@ -5,7 +5,7 @@ :class="className" :shareUrl="shareUrl" :shareTitle="shareTitle" - :shareText="shareText" + :shareDescription="shareDescription" :sharePic="sharePic" :btnText="btnText" :windowWidth="windowWidth" @@ -38,8 +38,8 @@ export default { props: { className: { type: String }, shareUrl: { type: String, default: getDocumentHref }, - shareTitle: { type: String }, - shareText: { type: String, default: getDocumentTitle }, + shareTitle: { type: String, default: "" }, + shareDescription: { type: String, default: getDocumentTitle }, sharePic: { type: String, default: "" }, btnText: { type: String, default: "LiveJournal" }, windowWidth: { type: Number }, @@ -52,8 +52,8 @@ export default { eventEmit(this, { name: "LiveJournal" }); const configWindow = createWindow(); const url = `https://livejournal.com/update.bml?event=${encodeURIComponent( - this.$props.shareUrl - )}&subject=${encodeURIComponent(this.$props.shareText)}`; + this.$props.shareDescription + )}&subject=${encodeURIComponent(this.$props.shareUrl)}`; return this.$props.isBlank ? window.open(url, "__blank") diff --git a/src/components/RenrenButton.vue b/src/components/RenrenButton.vue index f56f434..b76bc04 100644 --- a/src/components/RenrenButton.vue +++ b/src/components/RenrenButton.vue @@ -5,7 +5,7 @@ :class="className" :shareUrl="shareUrl" :shareTitle="shareTitle" - :shareText="shareText" + :shareDescription="shareDescription" :sharePic="sharePic" :btnText="btnText" :windowWidth="windowWidth" @@ -41,8 +41,8 @@ export default { props: { className: { type: String }, shareUrl: { type: String, default: getDocumentHref }, - shareTitle: { type: String }, - shareText: { type: String, default: getDocumentTitle }, + shareTitle: { type: String, default: "" }, + shareDescription: { type: String, default: getDocumentTitle }, sharePic: { type: String, default: "" }, btnText: { type: String, default: "Renren" }, windowWidth: { type: Number }, @@ -56,7 +56,7 @@ export default { const configWindow = createWindow(); const url = `http://share.renren.com/share/buttonshare.do?link=${encodeURIComponent( this.$props.shareUrl - )}&title=${encodeURIComponent(this.$props.shareText)}`; + )}&title=${encodeURIComponent(this.$props.shareTitle)}`; return this.$props.isBlank ? window.open(url, "__blank") diff --git a/src/components/TwitterButton.vue b/src/components/TwitterButton.vue index c94d40f..3741db8 100644 --- a/src/components/TwitterButton.vue +++ b/src/components/TwitterButton.vue @@ -5,7 +5,7 @@ :class="className" :shareUrl="shareUrl" :shareTitle="shareTitle" - :shareText="shareText" + :shareDescription="shareDescription" :sharePic="sharePic" :btnText="btnText" :windowWidth="windowWidth" @@ -38,8 +38,8 @@ export default { props: { className: { type: String }, shareUrl: { type: String, default: getDocumentHref }, - shareTitle: { type: String }, - shareText: { type: String, default: getDocumentTitle }, + shareTitle: { type: String, default: "" }, + shareDescription: { type: String, default: getDocumentTitle }, sharePic: { type: String, default: "" }, btnText: { type: String, default: "Twitter" }, windowWidth: { type: Number }, @@ -53,7 +53,7 @@ export default { const configWindow = createWindow(); const url = `https://twitter.com/share?url=${encodeURIComponent( this.$props.shareUrl - )}&text=${encodeURIComponent(this.$props.shareText)}`; + )}&text=${encodeURIComponent(this.$props.shareDescription)}`; return this.$props.isBlank ? window.open(url, "__blank") diff --git a/src/components/VkontakteButton.vue b/src/components/VkontakteButton.vue index 5d71462..0a94b04 100644 --- a/src/components/VkontakteButton.vue +++ b/src/components/VkontakteButton.vue @@ -4,7 +4,7 @@ type="button" :class="className" :shareUrl="shareUrl" - :shareText="shareText" + :shareDescription="shareDescription" :shareTitle="shareTitle" :btnText="btnText" :windowWidth="windowWidth" @@ -37,8 +37,8 @@ export default { props: { className: { type: String }, shareUrl: { type: String, default: getDocumentHref }, - shareTitle: { type: String }, - shareText: { type: String, default: getDocumentTitle }, + shareTitle: { type: String, default: "" }, + shareDescription: { type: String, default: getDocumentTitle }, sharePic: { type: String, default: "" }, btnText: { type: String, default: "Vkontakte" }, windowWidth: { type: Number }, @@ -55,7 +55,7 @@ export default { )}&title=${encodeURIComponent( this.$props.shareTitle )}&comment=${encodeURIComponent( - this.$props.shareText + this.$props.shareDescription )}&image=${encodeURIComponent(this.$props.sharePic)}&noparse=true`; return this.$props.isBlank diff --git a/src/components/WeiboButton.vue b/src/components/WeiboButton.vue index 7b64814..321daad 100644 --- a/src/components/WeiboButton.vue +++ b/src/components/WeiboButton.vue @@ -5,7 +5,7 @@ :class="className" :shareUrl="shareUrl" :shareTitle="shareTitle" - :shareText="shareText" + :shareDescription="shareDescription" :sharePic="sharePic" :btnText="btnText" :windowWidth="windowWidth" @@ -38,8 +38,8 @@ export default { props: { className: { type: String }, shareUrl: { type: String, default: getDocumentHref }, - shareTitle: { type: String }, - shareText: { type: String, default: getDocumentTitle }, + shareTitle: { type: String, default: "" }, + shareDescription: { type: String, default: getDocumentTitle }, sharePic: { type: String, default: "" }, btnText: { type: String, default: "Weibo" }, windowWidth: { type: Number }, @@ -54,7 +54,7 @@ export default { const url = `http://service.weibo.com/share/share.php?url=${encodeURIComponent( this.$props.shareUrl )}&title=${encodeURIComponent( - this.$props.shareText + this.$props.shareTitle )}&pic=${encodeURIComponent(this.$props.sharePic)}`; return this.$props.isBlank diff --git a/src/style/bloggerButton.css b/src/style/bloggerButton.css index cef3629..c59b794 100644 --- a/src/style/bloggerButton.css +++ b/src/style/bloggerButton.css @@ -1,43 +1,42 @@ -/* blogger */ +/* Blogger */ .share-button--blogger { - background-color: hsla(195, 100%, 46%, 1); + background-color: hsla(14, 100%, 57%, 1); } .share-button--blogger:focus { - box-shadow: 0 0 0 3px hsla(195, 94%, 71%, 0.4); + box-shadow: 0 0 0 3px hsla(14, 94%, 82%, 0.4); } .share-button--blogger:hover { - background-color: hsla(195, 100%, 46%, 0.9); + background-color: hsla(14, 100%, 57%, 0.9); } .share-button--blogger .share-button__icon path { fill: #fff; } -/* Circle */ .share-button--blogger.share-button--outline { background-color: transparent; - border-color: hsl(195, 100%, 46%, 1); + border-color: hsl(14, 100%, 57%, 1); } .share-button--blogger.share-button--outline:hover { background-color: transparent; - border-color: hsla(195, 100%, 46%, 0.9); + border-color: hsla(14, 100%, 57%, 0.9); } .share-button--blogger.share-button--outline .share-button__text { - color: hsla(195, 100%, 46%, 1); + color: hsla(14, 100%, 57%, 1); } .share-button--blogger.share-button--outline:hover .share-button__text { - color: hsla(195, 100%, 46%, 0.9); + color: hsla(14, 100%, 57%, 0.9); } .share-button--blogger.share-button--outline .share-button__icon path { - fill: hsla(195, 100%, 46%, 1); + fill: hsla(14, 100%, 57%, 1); } .share-button--blogger.share-button--outline:hover .share-button__icon path { - fill: hsla(195, 100%, 46%, 0.9); + fill: hsla(14, 100%, 57%, 0.9); } diff --git a/src/style/diggButton.css b/src/style/diggButton.css index feb88fa..6e6b57c 100644 --- a/src/style/diggButton.css +++ b/src/style/diggButton.css @@ -1,4 +1,4 @@ -/* digg */ +/* Digg */ .share-button--digg { background-color: hsla(0, 0%, 0%, 1); } @@ -15,7 +15,6 @@ fill: #fff; } -/* Circle */ .share-button--digg.share-button--outline { background-color: transparent; border-color: hsl(0, 0%, 0%, 1); diff --git a/src/style/evernoteButton.css b/src/style/evernoteButton.css new file mode 100644 index 0000000..31aadf9 --- /dev/null +++ b/src/style/evernoteButton.css @@ -0,0 +1,42 @@ +/* Evernote */ +.share-button--evernote { + background-color: hsla(136, 100%, 33%, 1); +} + +.share-button--evernote:focus { + box-shadow: 0 0 0 3px hsla(136, 94%, 58%, 0.4); +} + +.share-button--evernote:hover { + background-color: hsla(136, 100%, 33%, 0.9); +} + +.share-button--evernote .share-button__icon path { + fill: #fff; +} + +.share-button--evernote.share-button--outline { + background-color: transparent; + border-color: hsl(136, 100%, 33%, 1); +} + +.share-button--evernote.share-button--outline:hover { + background-color: transparent; + border-color: hsla(136, 100%, 33%, 0.9); +} + +.share-button--evernote.share-button--outline .share-button__text { + color: hsla(136, 100%, 33%, 1); +} + +.share-button--evernote.share-button--outline:hover .share-button__text { + color: hsla(136, 100%, 33%, 0.9); +} + +.share-button--evernote.share-button--outline .share-button__icon path { + fill: hsla(136, 100%, 33%, 1); +} + +.share-button--evernote.share-button--outline:hover .share-button__icon path { + fill: hsla(136, 100%, 33%, 0.9); +} diff --git a/src/style/facebookButton.css b/src/style/facebookButton.css new file mode 100644 index 0000000..aa2f101 --- /dev/null +++ b/src/style/facebookButton.css @@ -0,0 +1,42 @@ +/* Facebook */ +.share-button--facebook { + background-color: hsla(221, 44%, 41%, 1); +} + +.share-button--facebook:focus { + box-shadow: 0 0 0 3px hsla(221, 38%, 66%, 0.4); +} + +.share-button--facebook:hover { + background-color: hsla(221, 44%, 41%, 0.9); +} + +.share-button--facebook .share-button__icon path { + fill: #fff; +} + +.share-button--facebook.share-button--outline { + background-color: transparent; + border-color: hsl(221, 44%, 41%, 1); +} + +.share-button--facebook.share-button--outline:hover { + background-color: transparent; + border-color: hsla(221, 44%, 41%, 0.9); +} + +.share-button--facebook.share-button--outline .share-button__text { + color: hsla(221, 44%, 41%, 1); +} + +.share-button--facebook.share-button--outline:hover .share-button__text { + color: hsla(221, 44%, 41%, 0.9); +} + +.share-button--facebook.share-button--outline .share-button__icon path { + fill: hsla(221, 44%, 41%, 1); +} + +.share-button--facebook.share-button--outline:hover .share-button__icon path { + fill: hsla(221, 44%, 41%, 0.9); +} diff --git a/src/style/linkedInButton.css b/src/style/linkedInButton.css new file mode 100644 index 0000000..60167af --- /dev/null +++ b/src/style/linkedInButton.css @@ -0,0 +1,42 @@ +/* LinkedIn */ +.share-button--linkedIn { + background-color: hsla(201, 100%, 35%, 1); +} + +.share-button--linkedIn:focus { + box-shadow: 0 0 0 3px hsla(201, 94%, 60%, 0.4); +} + +.share-button--linkedIn:hover { + background-color: hsla(201, 100%, 35%, 0.9); +} + +.share-button--linkedIn .share-button__icon path { + fill: #fff; +} + +.share-button--linkedIn.share-button--outline { + background-color: transparent; + border-color: hsl(201, 100%, 35%, 1); +} + +.share-button--linkedIn.share-button--outline:hover { + background-color: transparent; + border-color: hsla(201, 100%, 35%, 0.9); +} + +.share-button--linkedIn.share-button--outline .share-button__text { + color: hsla(201, 100%, 35%, 1); +} + +.share-button--linkedIn.share-button--outline:hover .share-button__text { + color: hsla(201, 100%, 35%, 0.9); +} + +.share-button--linkedIn.share-button--outline .share-button__icon path { + fill: hsla(201, 100%, 35%, 1); +} + +.share-button--linkedIn.share-button--outline:hover .share-button__icon path { + fill: hsla(201, 100%, 35%, 0.9); +} diff --git a/src/style/livejournalButton.css b/src/style/livejournalButton.css index 6e9646f..3846a6c 100644 --- a/src/style/livejournalButton.css +++ b/src/style/livejournalButton.css @@ -1,4 +1,4 @@ -/* livejournal */ +/* Livejournal */ .share-button--livejournal { background-color: hsla(195, 100%, 46%, 1); } @@ -15,7 +15,6 @@ fill: #fff; } -/* Circle */ .share-button--livejournal.share-button--outline { background-color: transparent; border-color: hsl(195, 100%, 46%, 1); diff --git a/src/style/renrenButton.css b/src/style/renrenButton.css index 966d1db..2e2fe22 100644 --- a/src/style/renrenButton.css +++ b/src/style/renrenButton.css @@ -15,7 +15,6 @@ fill: #fff; } -/* Circle */ .share-button--renren.share-button--outline { background-color: transparent; border-color: hsl(207, 71%, 45%, 1); diff --git a/src/style/twitterButton.css b/src/style/twitterButton.css index 158506a..7e6c38f 100644 --- a/src/style/twitterButton.css +++ b/src/style/twitterButton.css @@ -15,7 +15,6 @@ fill: #fff; } -/* Circle */ .share-button--twitter.share-button--outline { background-color: transparent; border-color: hsla(203, 89%, 53%, 1); diff --git a/src/style/vkontakteButton.css b/src/style/vkontakteButton.css index 5a88d33..250a1a8 100644 --- a/src/style/vkontakteButton.css +++ b/src/style/vkontakteButton.css @@ -15,7 +15,6 @@ fill: #fff; } -/* Circle */ .share-button--vk.share-button--outline { background-color: transparent; border-color: hsla(212, 28%, 52%, 1); diff --git a/src/style/weiboButton.css b/src/style/weiboButton.css index bfd4005..c00c5fb 100644 --- a/src/style/weiboButton.css +++ b/src/style/weiboButton.css @@ -1,4 +1,4 @@ -/* weibo */ +/* Weibo */ .share-button--weibo { background-color: hsl(353, 83%, 49%); } @@ -15,7 +15,6 @@ fill: #fff; } -/* Circle */ .share-button--weibo.share-button--outline { background-color: transparent; border-color: hsl(353, 83%, 49%, 1);