OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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

Stickerpacks
pull/6447/head
Richard Lewis 2018-03-29 16:12:53 +01:00 committed by GitHub
parent 13cc13924e e3a3dec8a2
commit 1abe5771fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 221 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

60
src/components/views/context_menus/GenericElementContextMenu.js Normal file
View File

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

26
src/components/views/rooms/RoomTooltip.js
View File

@ -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>
);
}
},
});

2
src/skins/vector/css/_components.scss
View File

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

13
src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
View File

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

46
src/skins/vector/css/matrix-react-sdk/views/messages/_MStickerBody.scss Normal file
View File

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

26
src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
View File

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

10
src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
View File

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

30
src/skins/vector/css/matrix-react-sdk/views/rooms/_Stickers.scss Normal file
View File

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

3
src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
View File

@ -49,5 +49,6 @@ limitations under the License.
line-height: 14px;
font-size: 13px;
color: $primary-fg-color;
max-width: 600px;
margin-right: 50px;
}

16
src/skins/vector/img/icons-hide-stickers.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

16
src/skins/vector/img/icons-show-stickers.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/skins/vector/img/stickerpack-placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB