Merge pull request #6242 from vector-im/rxl881/snapshot

Stickerpacks

.gitignore

@@ -16,4 +16,5 @@ electron/dist
 electron/pub
 **/.idea
 /config.json
+/config.local*.json
 /src/component-index.js

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 <div>{ this.props.element }</div>;
+    }
+}

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 (
-            <div className={ this.props.className } >
+            <div className={this.props.className} >
             </div>
         );
-    }
+    },
 });

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";

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;
 }

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;
+}

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,24 +124,21 @@ 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;
     margin: 0;
     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 {

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;
 }
 

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;
+}

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;
 }
-