Add right click context menu on all text inputs #1486

Merged

dan1d merged 3 commits from right-click-menu-context into master

2018-05-29 21:57:38 +02:00

dan1d commented

2018-05-16 23:48:11 +02:00

(Migrated from github.com)

Hi this PR partially fix: #1470, this pr adds the right click menu only on text inputs and copy/cut/paste works, also if you are in development mode it will show "open developers tools".

So currently works on this two items:
1.) if the copy cut paste will be enforced in the search bar then i'd recommend a "select all" option as well.
3.) If there is nothing in the search, the cut and copy can be greyed out leaving the paste option visible if there is something on the clipboard otherwise also greyed.

On this one:
2.) A right click on any of the videos can give options like copy video url or any other information on the video that copy cut paste.
I need to figure out what's the best approach to fix this one, if you have an idea, let me know!

Hi this PR partially fix: #1470, this pr adds the right click menu only on text inputs and copy/cut/paste works, also if you are in development mode it will show "open developers tools". So currently works on this two items: 1.) if the copy cut paste will be enforced in the search bar then i'd recommend a "select all" option as well. 3.) If there is nothing in the search, the cut and copy can be greyed out leaving the paste option visible if there is something on the clipboard otherwise also greyed. ![screenshot from 2018-05-16 18-54-43](https://user-images.githubusercontent.com/3293616/40146075-a0c1a9bc-593a-11e8-914e-e098ae77d1fe.png) ![screenshot from 2018-05-16 18-35-57](https://user-images.githubusercontent.com/3293616/40145422-167171fe-5938-11e8-98d4-406a2cff7cbf.png) On this one: 2.) A right click on any of the videos can give options like copy video url or any other information on the video that copy cut paste. I need to figure out what's the best approach to fix this one, if you have an idea, let me know!

skhameneh (Migrated from github.com) reviewed 2018-05-16 23:48:11 +02:00

neb-b commented

2018-05-16 23:58:44 +02:00

(Migrated from github.com)

Thanks for the PR @dan1d! We already have some code for the context menu here: https://github.com/lbryio/lbry-app/blob/master/src/main/menu/setupContextMenu.js

That would be a better place to add this.

Thanks for the PR @dan1d! We already have some code for the context menu here: https://github.com/lbryio/lbry-app/blob/master/src/main/menu/setupContextMenu.js That would be a better place to add this.

dan1d commented

2018-05-21 03:12:08 +02:00

(Migrated from github.com)

I know you suggested on discord to move it to renderer/ folder, but I think the context menu shouldn't be a component as It can be easily modified.
I've deleted the code under src/menu/setupContextMenu.js and moved it to util/contextMenu which has a few functions exported to open the desired menu, if it is an input then it open this one:

If it is a video link, the react component can be customized to open a different context menu:

Currently when I copy the link I get an url copied like this one: lbry://why-i-m-bullish-but-selling-alts#19d0d7e3a3c17303d4b69fcc2b78512dd58c74db, how I should build the url to be able to share it to others users and when they click the link the lbry-app is the one that opens that link?, is there a service to use ?

Also, could you take a look at the new code on this PR please?
Also I can add a snackbar notification when the link is copied if it is required, I've only added the copy link feature just to the home page but it can be added on a lot of others components.

The code is also development aware so it will only show the inspect element option only if the environment is DEV.

Daniel

Hi @seanyesmunt , After looking around on others libraries that handlesContext and reading the electron documentation, it took me a lot of testing/moving/copiying/looking other people solutions/react context menu libraries, I think I have the easiest and correct solution, I've realized that we can call the function `onContextMenu` on any component(if I knew this before It would saved me a lot of reading on github issues) I know you suggested on discord to move it to `renderer/` folder, but I think the context menu shouldn't be a component as It can be easily modified. I've deleted the code under `src/menu/setupContextMenu.js` and moved it to `util/contextMenu` which has a few functions exported to open the desired menu, if it is an input then it open this one: ![screenshot from 2018-05-20 22-12-26](https://user-images.githubusercontent.com/3293616/40286139-ea1fdc58-5c7a-11e8-9edf-ccdc83c8e3ca.png) If it is a video link, the react component can be customized to open a different context menu: ![screenshot from 2018-05-20 22-08-31](https://user-images.githubusercontent.com/3293616/40286093-5bfb3c06-5c7a-11e8-9860-9a030d0b0fdc.png) Currently when I copy the link I get an url copied like this one: `lbry://why-i-m-bullish-but-selling-alts#19d0d7e3a3c17303d4b69fcc2b78512dd58c74db`, how I should build the url to be able to share it to others users and when they click the link the lbry-app is the one that opens that link?, is there a service to use ? Also, could you take a look at the new code on this PR please? Also I can add a snackbar notification when the link is copied if it is required, I've only added the copy link feature just to the home page but it can be added on a lot of others components. The code is also development aware so it will only show the `inspect element` option only if the environment is DEV. Daniel

dan1d commented

2018-05-21 19:30:45 +02:00

(Migrated from github.com)

Hi @seanyesmunt I've updated the code on this PR to parse an URI and added a new PR on lbry-redux, read my PR comment on lbry-redux!

So for example given this URI:
lbry://why-doesn-t-capitalism-work-for#36cd5b217bcc4083a6fc35cc4de2cc1196581ef9
it will convert it to this
https://open.lbry.io/why-doesn-t-capitalism-work-for#36cd5b217bcc4083a6fc35cc4de2cc1196581ef9
and now the link can be shared by just copying the link when right click is pressed on a video card.

Hi @seanyesmunt I've updated the code on this PR to parse an URI and added a new [PR on lbry-redux](https://github.com/lbryio/lbry-redux/pull/27), read my PR comment on lbry-redux! So for example given this URI: `lbry://why-doesn-t-capitalism-work-for#36cd5b217bcc4083a6fc35cc4de2cc1196581ef9` it will convert it to this `https://open.lbry.io/why-doesn-t-capitalism-work-for#36cd5b217bcc4083a6fc35cc4de2cc1196581ef9` and now the link can be shared by just copying the link when right click is pressed on a video card.

neb-b commented

2018-05-22 17:09:57 +02:00

(Migrated from github.com)

@skhameneh

neb-b (Migrated from github.com) approved these changes 2018-05-25 17:06:51 +02:00