diff --git a/app/lib/client/defaultTabBars.js b/app/lib/client/defaultTabBars.js index cc7ca5b20509..b75d34376135 100644 --- a/app/lib/client/defaultTabBars.js +++ b/app/lib/client/defaultTabBars.js @@ -1,7 +1,7 @@ import { Session } from 'meteor/session'; import { TabBar, popover } from '../../ui-utils'; -import { isMobile, share } from '../../utils'; +import { share, isShareAvailable } from '../../utils'; import { Rooms } from '../../models'; import { hasAllPermission } from '../../authorization'; @@ -72,26 +72,21 @@ TabBar.addButton({ order: 4, }); -TabBar.addButton({ +// Add Share button in Room +const shareButton = { groups: ['channel', 'group', 'direct'], id: 'share', i18nTitle: 'Share', icon: 'share', template: 'share', order: 500, - // action(event) { - // console.log(event); - // share(); - // popover.close(); - // const options = []; - // const config = { - // template: 'share', - // // currentTarget: e.target, - // data: { - // options, - // }, - // // offsetVertical: e.target.clientHeight + 10, - // }; - // popover.open(config); - // }, -}); +}; + +if (isShareAvailable()) { + shareButton.action = () => { + share(); + popover.close(); + }; +} + +TabBar.addButton(shareButton); diff --git a/app/theme/client/imports/components/share.css b/app/theme/client/imports/components/share.css index c037fe8de873..528846c331e1 100644 --- a/app/theme/client/imports/components/share.css +++ b/app/theme/client/imports/components/share.css @@ -17,6 +17,7 @@ cursor: pointer; background-color: transparent; padding: 16px 0; + box-shadow: inset 0 0 20px rgba(0,0,0, 0); &:hover { box-shadow: inset 0 0 20px rgba(0,0,0, .125); diff --git a/app/ui-share/client/share.js b/app/ui-share/client/share.js index d96c51938575..401385366ee9 100644 --- a/app/ui-share/client/share.js +++ b/app/ui-share/client/share.js @@ -7,13 +7,33 @@ function getShareString() { return `${ data.title } \n${ data.url } \n${ data.text }`; } +function fallbackCopyTextToClipboard(text) { + const textArea = document.createElement('textarea'); + textArea.value = text; + textArea.style.position = 'fixed'; // avoid scrolling to bottom + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + + try { + document.execCommand('copy'); + } catch (err) { + console.error('Unable to copy', err); + } + + document.body.removeChild(textArea); +} + Template.share.helpers({ }); Template.share.events({ 'click [data-type="copy"]'() { - console.log(getShareString()); + if (!navigator.clipboard) { + fallbackCopyTextToClipboard(getShareString()); + return; + } navigator.clipboard.writeText(getShareString()); }, 'click [data-type="print"]'() { @@ -24,7 +44,7 @@ Template.share.events({ window.open(`mailto:?subject=${ title }&body=${ getShareString() }`); }, 'click [data-type="sms"]'() { - location.href = `sms:'Pick a contact'?&body=${ getShareString() }`; + location.href = `sms:?&body=${ getShareString() }`; }, @@ -44,7 +64,7 @@ Template.share.events({ }, 'click [data-type="telegram"]'() { const { url } = getShareData(); - window.open(isMobile() ? `tg://msg?text=${ getShareString() }` : `https://telegram.me/share/msg?url=${ url }&text=${ getShareString() }`); + window.open(`https://telegram.me/share/msg?url=${ url }&text=${ getShareString() }`); }, }); diff --git a/app/utils/client/lib/share.js b/app/utils/client/lib/share.js index 9e429dd07ae2..b8059290a67c 100644 --- a/app/utils/client/lib/share.js +++ b/app/utils/client/lib/share.js @@ -2,7 +2,10 @@ import { Meteor } from 'meteor/meteor'; // TODO: Remove logs -export const isShareAvailable = () => navigator.share; +export const isShareAvailable = () => { + if (navigator.share) { return true; } + return false; +}; export const getShareData = () => { const data = {};