LBRYCommunity/lbry-desktop

Fork 0

feature: ModalSocialShare #1943

Merged

jessopb merged 1 commit from modals into master

2018-09-13 21:43:30 +02:00

jessopb commented

2018-09-07 08:40:50 +02:00

(Migrated from github.com)

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.

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 commented

2018-09-07 16:23:01 +02:00

(Migrated from github.com)

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

neb-b (Migrated from github.com) requested changes 2018-09-07 19:19:05 +02:00

neb-b (Migrated from github.com) left a comment

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.

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.

src/renderer/component/socialShare/view.jsx

neb-b (Migrated from github.com) commented

2018-09-07 19:15:14 +02:00

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)

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)

neb-b (Migrated from github.com) commented

2018-09-07 19:15:49 +02:00

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

neb-b (Migrated from github.com) commented

2018-09-07 19:16:22 +02:00

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

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

jessopb (Migrated from github.com) reviewed 2018-09-07 20:58:20 +02:00

src/renderer/component/socialShare/view.jsx

jessopb (Migrated from github.com) commented

2018-09-07 20:58:19 +02:00

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?

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 (Migrated from github.com) reviewed 2018-09-07 21:07:53 +02:00

src/renderer/component/socialShare/view.jsx

neb-b (Migrated from github.com) commented

2018-09-07 21:07:53 +02:00

Ah you are right. I forgot about that. I just created an issue for it.
https://github.com/lbryio/lbry-desktop/issues/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.

Ah you are right. I forgot about that. I just created an issue for it. https://github.com/lbryio/lbry-desktop/issues/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.

jessopb commented

2018-09-08 02:08:54 +02:00

(Migrated from github.com)

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"

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. ![modalsharecropped](https://user-images.githubusercontent.com/36554050/45247136-855b5900-b2d3-11e8-8d53-f307520347a9.png) 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 commented

2018-09-08 07:47:52 +02:00

(Migrated from github.com)

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 commented

2018-09-08 18:51:10 +02:00

(Migrated from github.com)

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

jessopb commented

2018-09-08 21:37:35 +02:00

(Migrated from github.com)

Which do you like better?

![ssa](https://user-images.githubusercontent.com/36554050/45257965-10dcf480-b37d-11e8-85a7-1d592cb4ec69.png) ![ssb](https://user-images.githubusercontent.com/36554050/45257967-14707b80-b37d-11e8-90ed-f13324212d0c.png) Which do you like better?

jessopb commented

2018-09-08 23:19:33 +02:00

(Migrated from github.com)

Should be set.

neb-b commented

2018-09-10 17:02:15 +02:00

(Migrated from github.com)

@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

@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 commented

2018-09-11 04:31:22 +02:00

(Migrated from github.com)

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

This seems to match the sendTip modal best: Green buttons are actions, link buttons are exits. ![socialsharee](https://user-images.githubusercontent.com/36554050/45334501-01120b80-b549-11e8-86cc-2fe0f07b1fde.png) 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 commented

2018-09-12 07:23:48 +02:00

(Migrated from github.com)

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.

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 commented

2018-09-12 18:59:55 +02:00

(Migrated from github.com)

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

The latest commit looks like this, adding an available blue stroke color to the Icon class. ![modalsharelinks](https://user-images.githubusercontent.com/36554050/45440914-9cab9500-b68b-11e8-93b9-ecc446f3554d.png)

neb-b commented

2018-09-12 20:37:24 +02:00

(Migrated from github.com)

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

neb-b (Migrated from github.com) approved these changes 2018-09-13 21:42:55 +02:00

tzarebczan commented

2018-09-19 17:50:57 +02:00

(Migrated from github.com)

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 :)

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 :)

👍 1