feature: ModalSocialShare

[jessopb]

Resubmitted after verifying the bug I was worried about was due to redux lacking my MODAL constant.

This was closely modeled after the modalSendTip and walletSendTip components.
It should shares either anonymous and channel-based spee.ch links
Sharing is available only if the content meets shareable criteria.
It uses share urls from http://www.sharelinkgenerator.com/ to share to Facebook, Twitter, and Google Plus.

There are some improvements that could be made:

• feathericons has no actual google-plus icon, I think
• it could share a tinyurl version
• the formatting and spacing could be better
• the mouseover tooltips could be more responsive: they seem to give up sometimes - ideas?
• the link could come preselected, rather than wait for a click in the text field
• the modal could give feedback that the link copy was successful: 'link copied to clipboard'
• it could close the modal when clicking the background or pressing esc
  Also, the ViewOnWebButton component is apparently no longer in use.

I look forward to more guidance in these areas.

[neb-b]

Awesome! I'll give this a test and review the code in a bit. Thanks for the contribution! 🙂

[neb-b]

This is looking great!

Additional comments:
Clicking off the modal doesn't close it.

• This should happen by default, maybe look at other modals to see if you are doing anything different.

I think we should create a new component to avoid having duplicate code in two spots.

For the tooltip issue I'm guessing you will need to add something with overflow: visible so it can extend beyond the modal screen.

[neb-b]

Since the above code is pretty much identical to the Address component at component/address/view.jsx we should probably break this into it's own component.

Maybe CopyableInput?

I'm only talking about everything inside of the FormRow. It would just need two props (I think), value and copySuccessMessage (for the snackbar after you copy it)

[jessopb]

I originally tried to use <Address /> and it crashed at that point. Using <Address /> now has the odd behavior that it doesn't show the snackbar until after the modal is closed (modal over modal?). I will need to really look into how doNotify on top of doNotify works. Perhaps it's putting the next notification in a queue that doesn't get activated until my modal is closed?

If so, taking doNotify functionality out of Address and making it an optional passed prop might be best?

[neb-b]

Ah you are right. I forgot about that. I just created an issue for it.
#1945

I'm fine with passing in a prop for now to disable this (it should default to notify) for now. Just include a link to this issue #1945 in a comment above it.

We should probably rename the Address component if we are going to use it here.

[neb-b]

I don't think we need google plus, especially since we don't have an icon for it.

[neb-b]

This should be card__actions. It should give the buttons proper spacing.

[jessopb]

Ok, I think it's ready to be looked at again.

I'm hesitant to mess too much with <Address>, but I added a temporary noSnackbar bool to it (3 ways until the linter stopped complaining). With my change, The wallet copy button throws the snackbar, but the modal copy button does not. Renaming <Address> I think is a change with its own scope?

Messing with Z-index and overflow (and size) in scss for .tooltip_body didn't do anything to help the tooltip clipping. For now I'd like to center it and figure out how to make tooltips play with modals later.

I made the remaining changes of removing google_plus, making the modal close on esc, and changing the style className for better spacing on the buttons.

I hate how many steps it is to change a commit message;
commit message for 434c is supposed to use "bool" not "binary"

[neb-b]

I'm ok with the centering of buttons for now. I do they they should be on the bottom though. I'll give this another test/better look tomorrow.

[neb-b]

This looks good. I think once the share buttons are moved below the address component this can be merged.

[jessopb]

Which do you like better?

[jessopb]

Should be set.

[neb-b]

@kauffj I like the top one more, it is more consistent with other modals in the app. Also I don't think we need the : in the title

[jessopb]

This seems to match the sendTip modal best: Green buttons are actions, link buttons are exits.

If you let me know a final opinion on the following, I'll make the changes and push them.

Heading:

• Share this content
• other preferred text and capitalization.

Share link buttons:

• 'primary' (green), 'alt' (white)

Close button:

• 'primary' (green), 'alt' (white), 'link' (text)
• justify left, center

[neb-b]

Hey @jessopb. Sorry for the late reply.

I've been looking over the existing modals and the general pattern is that the title is left aligned and the buttons are both centered. The main button is normally green, but I think it's ok to keep it as just text since it's the close button.

I also think that the social buttons should be the same color as external links. Every link that opens the browser is that color so I think it makes sense if they were blue too.

[jessopb]

The latest commit looks like this, adding an available blue stroke color to the Icon class.

[neb-b]

@jessopb This looks great. I will give it a better test later today.

[tzarebczan]

Hey @jessopb, thanks again for another successful PR! We appreciate all the contributions, check out https://lbry.io/faq/tips :)

I've added you to our developer mailing list also :)