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,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 {

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

src/skins/vector/img/icons-hide-stickers.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
+<g id="Layer_1_1_" opacity="0.4">
+	<path id="Oval-109-Copy" fill="#76CFA6" d="M250,500c138.571,0,250-111.43,250-250C500,111.429,388.571,0,250,0
+		C111.429,0,0,111.429,0,250C0,388.57,111.429,500,250,500z"/>
+</g>
+<path fill="none" stroke="#FFFFFF" stroke-width="12" stroke-miterlimit="10" d="M250,430c-98.996,0-180-81.003-180-180
+	c0-98.998,81.005-180,180-180c98.994,0,180,81.002,180,180C430,348.997,348.995,430,250,430z M322.8,229.2
+	c17.686,0,31.201-13.519,31.201-31.2c0-17.683-13.519-31.2-31.201-31.2c-17.682,0-31.2,13.518-31.2,31.2S305.118,229.2,322.8,229.2z
+	 M177.2,229.2c17.682,0,31.2-13.519,31.2-31.2c0-17.683-13.519-31.2-31.2-31.2c-17.683,0-31.201,13.518-31.201,31.2
+	S159.518,229.2,177.2,229.2z M250,364.4c48.883,0,89.436-30.164,106.081-72.801H143.919C160.564,334.236,201.117,364.4,250,364.4z"
+	/>
+</svg>

src/skins/vector/img/icons-show-stickers.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
+<g id="Layer_1_1_" opacity="0.15">
+	<path id="Oval-109-Copy" fill="#76CFA6" d="M250,500c138.571,0,250-111.43,250-250C500,111.429,388.571,0,250,0
+		C111.429,0,0,111.429,0,250C0,388.57,111.429,500,250,500z"/>
+</g>
+<path fill="none" stroke="#76CFA6" stroke-width="12" stroke-miterlimit="10" d="M249,430c-98.996,0-180-81.003-180-180
+	c0-98.998,81.005-180,180-180c98.994,0,180,81.001,180,180C429,348.997,347.995,430,249,430z M321.8,229.2
+	c17.685,0,31.201-13.518,31.201-31.2s-13.519-31.2-31.201-31.2c-17.682,0-31.2,13.518-31.2,31.2S304.118,229.2,321.8,229.2z
+	 M176.2,229.2c17.682,0,31.2-13.518,31.2-31.2s-13.519-31.2-31.2-31.2c-17.683,0-31.201,13.518-31.201,31.2
+	S158.518,229.2,176.2,229.2z M249,364.4c48.883,0,89.436-30.164,106.081-72.801H142.919C159.564,334.236,200.117,364.4,249,364.4z"
+	/>
+</svg>