diff --git a/package.json b/package.json index 1fed55748c..33aa428d4b 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "optimist": "^0.6.1", "pako": "^1.0.5", "prop-types": "^15.5.8", + "qrcode-react": "^0.1.16", "querystring": "^0.2.0", "react": "^15.6.0", "react-addons-css-transition-group": "15.3.2", diff --git a/res/css/_components.scss b/res/css/_components.scss index 2734939ae3..173939e143 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -42,6 +42,7 @@ @import "./views/dialogs/_SetEmailDialog.scss"; @import "./views/dialogs/_SetMxIdDialog.scss"; @import "./views/dialogs/_SetPasswordDialog.scss"; +@import "./views/dialogs/_ShareDialog.scss"; @import "./views/dialogs/_UnknownDeviceDialog.scss"; @import "./views/directory/_NetworkDropdown.scss"; @import "./views/elements/_AccessibleButton.scss"; diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index a0191b92cf..7474c3d107 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -16,7 +16,7 @@ limitations under the License. .mx_ContextualMenu_wrapper { position: fixed; - z-index: 2000; + z-index: 5000; } .mx_ContextualMenu_background { @@ -26,7 +26,7 @@ limitations under the License. width: 100%; height: 100%; opacity: 1.0; - z-index: 2000; + z-index: 5000; } .mx_ContextualMenu { @@ -37,7 +37,7 @@ limitations under the License. position: absolute; padding: 6px; font-size: 14px; - z-index: 2001; + z-index: 5001; } .mx_ContextualMenu.mx_ContextualMenu_right { diff --git a/res/css/views/dialogs/_ShareDialog.scss b/res/css/views/dialogs/_ShareDialog.scss new file mode 100644 index 0000000000..116bef8dfd --- /dev/null +++ b/res/css/views/dialogs/_ShareDialog.scss @@ -0,0 +1,89 @@ +/* +Copyright 2018 New Vector Ltd. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_ShareDialog { + // this is to center the content + padding-right: 58px; +} + +.mx_ShareDialog hr { + margin-top: 25px; + margin-bottom: 25px; + border-color: $light-fg-color; +} + +.mx_ShareDialog_content { + margin: 10px 0; +} + +.mx_ShareDialog_matrixto { + display: flex; + justify-content: space-between; + border-radius: 5px; + border: solid 1px $light-fg-color; + margin-bottom: 10px; + margin-top: 30px; + padding: 10px; +} + +.mx_ShareDialog_matrixto a { + text-decoration: none; +} + +.mx_ShareDialog_matrixto_link { + flex-shrink: 1; + overflow: hidden; + text-overflow: ellipsis; +} + +.mx_ShareDialog_matrixto_copy { + flex-shrink: 0; + cursor: pointer; + margin-left: 20px; + display: inherit; +} +.mx_ShareDialog_matrixto_copy > div { + background-image: url($copy-button-url); + margin-left: 5px; + width: 20px; + height: 20px; +} + +.mx_ShareDialog_split { + display: flex; + flex-wrap: wrap; +} + +.mx_ShareDialog_qrcode_container { + float: left; + background-color: #ffffff; + padding: 5px; // makes qr code more readable in dark theme + border-radius: 5px; + height: 256px; + width: 256px; + margin-right: 64px; +} + +.mx_ShareDialog_social_container { + display: inline-block; + width: 299px; +} + +.mx_ShareDialog_social_icon { + display: inline-grid; + margin-right: 10px; + margin-bottom: 10px; +} diff --git a/res/img/icons-share.svg b/res/img/icons-share.svg new file mode 100644 index 0000000000..b27616d5d5 --- /dev/null +++ b/res/img/icons-share.svg @@ -0,0 +1,6 @@ + + diff --git a/res/img/matrix-m.svg b/res/img/matrix-m.svg new file mode 100644 index 0000000000..ccb1df0fc5 --- /dev/null +++ b/res/img/matrix-m.svg @@ -0,0 +1,15 @@ + + + diff --git a/res/img/social/email-1.png b/res/img/social/email-1.png new file mode 100644 index 0000000000..193cb659da Binary files /dev/null and b/res/img/social/email-1.png differ diff --git a/res/img/social/facebook.png b/res/img/social/facebook.png new file mode 100644 index 0000000000..6a29e3820a Binary files /dev/null and b/res/img/social/facebook.png differ diff --git a/res/img/social/linkedin.png b/res/img/social/linkedin.png new file mode 100644 index 0000000000..2b868a585b Binary files /dev/null and b/res/img/social/linkedin.png differ diff --git a/res/img/social/reddit.png b/res/img/social/reddit.png new file mode 100644 index 0000000000..bd6131186f Binary files /dev/null and b/res/img/social/reddit.png differ diff --git a/res/img/social/twitter-2.png b/res/img/social/twitter-2.png new file mode 100644 index 0000000000..84f8033a30 Binary files /dev/null and b/res/img/social/twitter-2.png differ diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js index 3e867ad384..91ec312f43 100644 --- a/src/components/structures/ContextualMenu.js +++ b/src/components/structures/ContextualMenu.js @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +Copyright 2018 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -15,12 +16,10 @@ limitations under the License. */ -'use strict'; - -const classNames = require('classnames'); -const React = require('react'); -const ReactDOM = require('react-dom'); +import React from 'react'; +import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; // Shamelessly ripped off Modal.js. There's probably a better way // of doing reusable widgets like dialog boxes & menus where we go and @@ -61,7 +60,12 @@ export default class ContextualMenu extends React.Component { // If true, insert an invisible screen-sized element behind the // menu that when clicked will close it. hasBackground: PropTypes.bool, - } + + // The component to render as the context menu + elementClass: PropTypes.element.isRequired, + // on resize callback + windowResize: PropTypes.func + }; constructor() { super(); @@ -145,7 +149,7 @@ export default class ContextualMenu extends React.Component { `; } - const chevron =
; + const chevron = ; const className = 'mx_ContextualMenu_wrapper'; const menuClasses = classNames({ @@ -191,13 +195,13 @@ export default class ContextualMenu extends React.Component { { chevron }