LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add platforms to share buttons (#1721)

Browse source 
* Add Minds to share buttons

* Add Telegram & WhatsApp

* Adjust style on mobile

* Adjust WhatsApp share url on desktop

* Freeze icon size

* Adjust share buttons
This commit is contained in:
Rave | 図書館猫 2022-06-22 14:23:40 +02:00 committed by GitHub
parent e2166b6f03
commit 3bfdd7e920
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 76 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/app-strings.json
View file

@ -347,7 +347,6 @@
"Share on Facebook": "Share on Facebook",
"Share on Twitter": "Share on Twitter",
"Share on Telegram": "Share on Telegram",
"Share on LinkedIn": "Share on LinkedIn",
"Share via...": "Share via...",
"Embed this content": "Embed this content",
"You currently have the highest bid for this name.": "You currently have the highest bid for this name.",

38
ui/component/common/icon-custom.jsx
View file

@ -822,6 +822,25 @@ export const icons = {
//
// Share modal social icons
//
[ICONS.WHATSAPP]: buildIcon(
<g>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0 30C0 13.4315 13.4315 0 30 0C46.5685 0 60 13.4315 60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30Z"
fill="#25d366"
/>
<g transform="scale(2.5),translate(5.000000, 3.500000)">
<path
fill="white"
d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"
/>
</g>
</g>,
{
viewBox: '0 0 60 60',
}
),
[ICONS.TWITTER]: buildIcon(
<g>
<path
@ -945,25 +964,6 @@ export const icons = {
viewBox: '0 0 60 60',
}
),
[ICONS.LINKEDIN]: buildIcon(
<g>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0 30C0 13.4315 13.4315 0 30 0C46.5685 0 60 13.4315 60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30Z"
fill="#0077B5"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21.6484 18.5283C21.6042 16.5255 20.1721 15 17.8462 15C15.5205 15 14 16.5255 14 18.5283C14 20.4897 15.4756 22.0592 17.7581 22.0592H17.8015C20.1721 22.0592 21.6484 20.4897 21.6484 18.5283ZM21.2007 24.8473H14.4021V45.2744H21.2007V24.8473ZM37.8914 24.3677C42.3652 24.3677 45.7192 27.2878 45.7192 33.5621L45.719 45.2745H38.9207V34.3459C38.9207 31.601 37.9368 29.7278 35.4756 29.7278C33.5974 29.7278 32.4785 30.9906 31.9873 32.2102C31.8074 32.6473 31.7634 33.2563 31.7634 33.8668V45.275H24.9639C24.9639 45.275 25.0535 26.7646 24.9639 24.8479H31.7634V27.7412C32.6658 26.3503 34.2817 24.3677 37.8914 24.3677Z"
fill="white"
/>
</g>,
{
viewBox: '0 0 60 60',
}
),
[ICONS.EMBED]: buildIcon(
<g>
<path

48
ui/component/socialShare/view.jsx
View file

@ -172,6 +172,13 @@ function SocialShare(props: Props) {
title={__('Share on Twitter')}
href={tweetIntent}
/>
<Button
className="share"
iconSize={24}
icon={ICONS.FACEBOOK}
title={__('Share on Facebook')}
href={`https://facebook.com/sharer/sharer.php?u=${encodedLbryURL}`}
/>
<Button
className="share"
iconSize={24}
@ -179,7 +186,32 @@ function SocialShare(props: Props) {
title={__('Share on Reddit')}
href={`https://reddit.com/submit?url=${encodedLbryURL}`}
/>
{IOS && (
{!isMobile ? (
<Button
className="share"
iconSize={24}
icon={ICONS.WHATSAPP}
title={__('Share on WhatsApp')}
href={`https://web.whatsapp.com/send?text=${encodedLbryURL}`}
/>
) : (
<Button
className="share"
iconSize={24}
icon={ICONS.WHATSAPP}
title={__('Share on WhatsApp')}
href={`whatsapp://send?text=${encodedLbryURL}`}
/>
)}
{!IOS ? (
<Button
className="share"
iconSize={24}
icon={ICONS.TELEGRAM}
title={__('Share on Telegram')}
href={`https://t.me/share/url?url=${encodedLbryURL}`}
/>
) : (
// Only ios client supports share urls
<Button
className="share"
@ -189,20 +221,6 @@ function SocialShare(props: Props) {
href={`tg://msg_url?url=${encodedLbryURL}&amp;text=text`}
/>
)}
<Button
className="share"
iconSize={24}
icon={ICONS.LINKEDIN}
title={__('Share on LinkedIn')}
href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedLbryURL}`}
/>
<Button
className="share"
iconSize={24}
icon={ICONS.FACEBOOK}
title={__('Share on Facebook')}
href={`https://facebook.com/sharer/sharer.php?u=${encodedLbryURL}`}
/>
{webShareable && !isCollection && (
<Button
className="share"

2
ui/constants/icons.js
View file

@ -46,11 +46,11 @@ export const SHARE = 'Share2';
export const EXTERNAL = 'ExternalLink';
export const PLAY = 'Play';
export const PLAY_PREVIOUS = 'Play Previous';
export const WHATSAPP = 'WhatsApp';
export const FACEBOOK = 'Facebook';
export const TWITTER = 'Twitter';
export const TELEGRAM = 'Telegram';
export const REDDIT = 'Reddit';
export const LINKEDIN = 'LinkedIn';
export const EMBED = 'Embed';
export const MORE = 'More';
export const SHARE_LINK = 'ShareLink';

20
ui/scss/component/_card.scss
View file

@ -89,6 +89,26 @@
stroke: var(--color-primary-contrast) !important;
}
}
.section__actions {
margin-top: var(--spacing-m);
}
@media (max-width: $breakpoint-small) {
.section__actions {
.share {
.icon {
margin-right: var(--spacing-xxs);
margin-bottom: var(--spacing-xs);
}
}
&:last-child {
margin-right: 0 !important;
.icon {
margin-right: 0 !important;
}
}
}
}
}
.card--inline {

4
ui/scss/component/_modal.scss
View file

@ -37,7 +37,7 @@
border: 2px solid black;
border-radius: var(--border-radius);
.card {
padding: var(--spacing-m);
padding: var(--spacing-s);
border: unset;
.card__title {
margin-top: var(--spacing-s);
@ -121,7 +121,7 @@
.section__actions {
.button {
margin-top: var(--spacing-m);
margin-right: var(--spacing-m);
margin-right: var(--spacing-s);
padding: 0;
.button__content {
.button__label {

3
ui/scss/component/section.scss
View file

@ -174,11 +174,8 @@
@media (max-width: $breakpoint-medium) {
flex-wrap: wrap;
> * {
margin-bottom: var(--spacing-s);
}
}
[aria-expanded='true'].button--file-action:last-of-type {
background-color: var(--color-header-background);