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

Stickerpacks

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