diff --git a/.gitignore b/.gitignore index 2ad05012a0..46d294ecf7 100644 --- a/.gitignore +++ b/.gitignore @@ -16,4 +16,5 @@ electron/dist electron/pub **/.idea /config.json +/config.local*.json /src/component-index.js diff --git a/src/components/views/context_menus/GenericElementContextMenu.js b/src/components/views/context_menus/GenericElementContextMenu.js new file mode 100644 index 0000000000..3f4804dbd1 --- /dev/null +++ b/src/components/views/context_menus/GenericElementContextMenu.js @@ -0,0 +1,60 @@ +/* +Copyright 2017 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. +*/ + +'use strict'; + +import React from 'react'; +import PropTypes from 'prop-types'; + +/* + * This component can be used to display generic HTML content in a contextual + * menu. + */ + + +export default class GenericElementContextMenu extends React.Component { + static PropTypes = { + element: PropTypes.element.isRequired, + // Function to be called when the parent window is resized + // This can be used to reposition or close the menu on resize and + // ensure that it is not displayed in a stale position. + onResize: PropTypes.func, + }; + + constructor(props) { + super(props); + this.resize = this.resize.bind(this); + } + + componentDidMount() { + this.resize = this.resize.bind(this); + window.addEventListener("resize", this.resize); + } + + componentWillUnmount() { + window.removeEventListener("resize", this.resize); + } + + resize() { + if (this.props.onResize) { + this.props.onResize(); + } + } + + render() { + return
{ this.props.element }
; + } +} diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 97db4916da..39d8958d5e 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -21,6 +21,8 @@ var ReactDOM = require('react-dom'); var dis = require('matrix-react-sdk/lib/dispatcher'); import classNames from 'classnames'; +const MIN_TOOLTIP_HEIGHT = 25; + module.exports = React.createClass({ displayName: 'RoomTooltip', @@ -39,6 +41,9 @@ module.exports = React.createClass({ this.tooltipContainer = document.createElement("div"); this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper"; document.body.appendChild(this.tooltipContainer); + window.addEventListener('scroll', this._renderTooltip, true); + + this.parent = ReactDOM.findDOMNode(this).parentNode; this._renderTooltip(); }, @@ -57,6 +62,18 @@ module.exports = React.createClass({ ReactDOM.unmountComponentAtNode(this.tooltipContainer); document.body.removeChild(this.tooltipContainer); + window.removeEventListener('scroll', this._renderTooltip, true); + }, + + _updatePosition(style) { + const parentBox = this.parent.getBoundingClientRect(); + let offset = 0; + if (parentBox.height > MIN_TOOLTIP_HEIGHT) { + offset = Math.floor((parentBox.height - MIN_TOOLTIP_HEIGHT) / 2); + } + style.top = (parentBox.top - 2) + window.pageYOffset + offset; + style.left = 6 + parentBox.right + window.pageXOffset; + return style; }, _renderTooltip: function() { @@ -66,10 +83,9 @@ module.exports = React.createClass({ // positioned, also taking into account any window zoom // NOTE: The additional 6 pixels for the left position, is to take account of the // tooltips chevron - var parent = ReactDOM.findDOMNode(this); + var parent = ReactDOM.findDOMNode(this).parentNode; var style = {}; - style.top = parent.getBoundingClientRect().top + window.pageYOffset; - style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset; + style = this._updatePosition(style); style.display = "block"; const tooltipClasses = classNames( @@ -97,8 +113,8 @@ module.exports = React.createClass({ render: function() { // Render a placeholder return ( -
+
); - } + }, }); diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 837fe4532f..0bcc48c3b8 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -48,6 +48,7 @@ @import "./matrix-react-sdk/views/messages/_MEmoteBody.scss"; @import "./matrix-react-sdk/views/messages/_MFileBody.scss"; @import "./matrix-react-sdk/views/messages/_MImageBody.scss"; +@import "./matrix-react-sdk/views/messages/_MStickerBody.scss"; @import "./matrix-react-sdk/views/messages/_MNoticeBody.scss"; @import "./matrix-react-sdk/views/messages/_MTextBody.scss"; @import "./matrix-react-sdk/views/messages/_RoomAvatarEvent.scss"; @@ -62,6 +63,7 @@ @import "./matrix-react-sdk/views/rooms/_MemberInfo.scss"; @import "./matrix-react-sdk/views/rooms/_MemberList.scss"; @import "./matrix-react-sdk/views/rooms/_MessageComposer.scss"; +@import "./matrix-react-sdk/views/rooms/_Stickers.scss"; @import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss"; @import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss"; @import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss index 1702aac8ad..bf483feda3 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss @@ -15,15 +15,6 @@ limitations under the License. */ .mx_MImageBody { - display: block; - margin-right: 34px; -} - -.mx_MImageBody_thumbnail { - max-width: 100%; -/* - background-color: $primary-bg-color; - border: 2px solid $primary-bg-color; - border-radius: 1px; -*/ + display: block; + margin-right: 34px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/_MStickerBody.scss b/src/skins/vector/css/matrix-react-sdk/views/messages/_MStickerBody.scss new file mode 100644 index 0000000000..3e6bbe5aa4 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/messages/_MStickerBody.scss @@ -0,0 +1,46 @@ +/* +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_MStickerBody { + display: block; + margin-right: 34px; + min-height: 110px; + padding: 20px 0; +} + +.mx_MStickerBody_image_container { + display: inline-block; + position: relative; +} + +.mx_MStickerBody_image { + max-width: 100%; + opacity: 0; +} + +.mx_MStickerBody_image_visible { + opacity: 1; +} + +.mx_MStickerBody_placeholder { + position: absolute; + opacity: 1; +} + +.mx_MStickerBody_placeholder_invisible { + transition: 500ms; + opacity: 0; +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 2d61ca7743..e22207676f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -18,6 +18,10 @@ limitations under the License. margin: 5px; } +.mx_AppsDrawer_hidden { + display: none; +} + .mx_AppsContainer { display: flex; flex-direction: row; @@ -54,6 +58,7 @@ limitations under the License. margin-right: 5px; border: 1px solid $primary-hairline-color; border-radius: 2px; + background-color: $dialog-background-bg-color; } .mx_AppTile:last-child { @@ -67,8 +72,6 @@ limitations under the License. padding: 0; border: 1px solid $primary-hairline-color; border-radius: 2px; - // height: 350px; - // display: inline-block; } .mx_AppTile, .mx_AppTileFullWidth { @@ -103,7 +106,6 @@ limitations under the License. } .mx_AppTileMenuBarWidget { - // pointer-events: none; cursor: pointer; width: 10px; height: 10px; @@ -122,14 +124,14 @@ limitations under the License. } .mx_AppTileBody{ - height: 350px; + height: 280px; width: 100%; overflow: hidden; } .mx_AppTileBody iframe { width: 100%; - height: 350px; + height: 280px; overflow: hidden; border: none; padding: 0; @@ -137,9 +139,6 @@ limitations under the License. display: block; } -// .mx_CloseAppWidget { -// } - .mx_AppTileMenuBarWidgetPadding { margin-right: 5px; } @@ -253,12 +252,21 @@ form.mx_Custom_Widget_Form div { } .mx_AppLoading { - min-height: 305px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: bold; + position: relative; + height: 280px; +} + +.mx_AppLoading .mx_Spinner { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; } .mx_AppLoading iframe { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index 98be3885cc..2e8f07b7ef 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -34,6 +34,10 @@ limitations under the License. width: 100%; } +.mx_MessageComposer_row div:last-child{ + padding-right: 0; +} + .mx_MessageComposer .mx_MessageComposer_avatar { padding-left: 10px; padding-right: 28px; @@ -158,7 +162,8 @@ limitations under the License. .mx_MessageComposer_hangup, .mx_MessageComposer_voicecall, .mx_MessageComposer_videocall, -.mx_MessageComposer_apps { +.mx_MessageComposer_apps, +.mx_MessageComposer_stickers { /*display: table-cell;*/ /*vertical-align: middle;*/ /*padding-left: 10px;*/ @@ -171,7 +176,8 @@ limitations under the License. .mx_MessageComposer_hangup object, .mx_MessageComposer_voicecall object, .mx_MessageComposer_videocall object, -.mx_MessageComposer_apps object { +.mx_MessageComposer_apps object, +.mx_MessageComposer_stickers object { pointer-events: none; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Stickers.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Stickers.scss new file mode 100644 index 0000000000..ee6c38b24d --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Stickers.scss @@ -0,0 +1,30 @@ +.mx_Stickers_content { + overflow: hidden; +} + +.mx_Stickers_content .mx_AppTileFullWidth { + border: none; +} + +.mx_Stickers_contentPlaceholder { + display: flex; + flex-grow: 1; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + +.mx_Stickers_contentPlaceholder p { + max-width: 200px; +} + +.mx_Stickers_addLink { + display: inline; + cursor: pointer; + text-decoration: underline; +} + +.mx_Stickers_hideStickers { + z-index: 2001; +} diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss index 5469a9e6d3..9988425b8f 100644 --- a/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss +++ b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss @@ -49,5 +49,6 @@ limitations under the License. line-height: 14px; font-size: 13px; color: $primary-fg-color; + max-width: 600px; + margin-right: 50px; } - diff --git a/src/skins/vector/img/icons-hide-stickers.svg b/src/skins/vector/img/icons-hide-stickers.svg new file mode 100644 index 0000000000..f28e8646e6 --- /dev/null +++ b/src/skins/vector/img/icons-hide-stickers.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/src/skins/vector/img/icons-show-stickers.svg b/src/skins/vector/img/icons-show-stickers.svg new file mode 100644 index 0000000000..26779a3940 --- /dev/null +++ b/src/skins/vector/img/icons-show-stickers.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/src/skins/vector/img/stickerpack-placeholder.png b/src/skins/vector/img/stickerpack-placeholder.png new file mode 100644 index 0000000000..7980114438 Binary files /dev/null and b/src/skins/vector/img/stickerpack-placeholder.png differ