Merge pull request #3553 from maunium/compact-reply-rendering

res/css/_components.scss

@@ -164,6 +164,7 @@
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
+@import "./views/messages/_MImageReplyBody.scss";
 @import "./views/messages/_MJitsiWidgetEvent.scss";
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MStickerBody.scss";
@@ -213,6 +214,7 @@
 @import "./views/rooms/_PinnedEventTile.scss";
 @import "./views/rooms/_PresenceLabel.scss";
 @import "./views/rooms/_ReplyPreview.scss";
+@import "./views/rooms/_ReplyTile.scss";
 @import "./views/rooms/_RoomBreadcrumbs.scss";
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";

res/css/views/elements/_ReplyThread.scss

@@ -18,20 +18,46 @@ limitations under the License.
  margin-top: 0;
 }
 
-.mx_ReplyThread .mx_DateSeparator {
- font-size: 1em !important;
- margin-top: 0;
- margin-bottom: 0;
- padding-bottom: 1px;
- bottom: -5px;
-}
-
 .mx_ReplyThread_show {
  cursor: pointer;
 }
 
 blockquote.mx_ReplyThread {
  margin-left: 0;
+ margin-right: 0;
+ margin-bottom: 8px;
  padding-left: 10px;
- border-left: 4px solid $blockquote-bar-color;
+ border-left: 4px solid $button-bg-color;
+
+ &.mx_ReplyThread_color1 {
+ border-left-color: $username-variant1-color;
+ }
+
+ &.mx_ReplyThread_color2 {
+ border-left-color: $username-variant2-color;
+ }
+
+ &.mx_ReplyThread_color3 {
+ border-left-color: $username-variant3-color;
+ }
+
+ &.mx_ReplyThread_color4 {
+ border-left-color: $username-variant4-color;
+ }
+
+ &.mx_ReplyThread_color5 {
+ border-left-color: $username-variant5-color;
+ }
+
+ &.mx_ReplyThread_color6 {
+ border-left-color: $username-variant6-color;
+ }
+
+ &.mx_ReplyThread_color7 {
+ border-left-color: $username-variant7-color;
+ }
+
+ &.mx_ReplyThread_color8 {
+ border-left-color: $username-variant8-color;
+ }
 }

res/css/views/messages/_MFileBody.scss

@@ -83,12 +83,12 @@ limitations under the License.
  mask-size: cover;
  mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
  background-color: $message-body-panel-icon-fg-color;
- width: 13px;
+ width: 15px;
  height: 15px;
 
  position: absolute;
  top: 8px;
- left: 9px;
+ left: 8px;
  }
  }
 

res/css/views/messages/_MImageReplyBody.scss

@@ -0,0 +1,37 @@
+/*
+Copyright 2020 Tulir Asokan <tulir@maunium.net>
+
+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_MImageReplyBody {
+ display: flex;
+
+ .mx_MImageBody_thumbnail_container {
+ flex: 1;
+ margin-right: 4px;
+ }
+
+ .mx_MImageReplyBody_info {
+ flex: 1;
+
+ .mx_MImageReplyBody_sender {
+ grid-area: sender;
+ }
+
+ .mx_MImageReplyBody_filename {
+ grid-area: filename;
+ }
+ }
+}
+

res/css/views/rooms/_ReplyPreview.scss

@@ -29,19 +29,24 @@ limitations under the License.
 }
 
 .mx_ReplyPreview_header {
- margin: 12px;
+ margin: 8px;
  color: $primary-fg-color;
  font-weight: 400;
  opacity: 0.4;
 }
 
+.mx_ReplyPreview_tile {
+ margin: 0 8px;
+}
+
 .mx_ReplyPreview_title {
  float: left;
 }
 
 .mx_ReplyPreview_cancel {
  float: right;
  cursor: pointer;
+ display: flex;
 }
 
 .mx_ReplyPreview_clear {

res/css/views/rooms/_ReplyTile.scss

@@ -0,0 +1,123 @@
+/*
+Copyright 2020 Tulir Asokan <tulir@maunium.net>
+
+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_ReplyTile {
+ padding-top: 2px;
+ padding-bottom: 2px;
+ font-size: $font-14px;
+ position: relative;
+ line-height: $font-16px;
+
+ &.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
+ mask-image: url("$(res)/img/element-icons/speaker.svg");
+ }
+
+ &.mx_ReplyTile_video .mx_MFileBody_info_icon::before {
+ mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+ }
+
+ .mx_MFileBody {
+ .mx_MFileBody_info {
+ margin: 5px 0;
+ }
+
+ .mx_MFileBody_download {
+ display: none;
+ }
+ }
+}
+
+.mx_ReplyTile > a {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none;
+ color: $primary-fg-color;
+}
+
+.mx_ReplyTile .mx_RedactedBody {
+ padding: 4px 0 2px 20px;
+
+ &::before {
+ height: 13px;
+ width: 13px;
+ top: 5px;
+ }
+}
+
+// We do reply size limiting with CSS to avoid duplicating the TextualBody component.
+.mx_ReplyTile .mx_EventTile_content {
+ $reply-lines: 2;
+ $line-height: $font-22px;
+
+ pointer-events: none;
+
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: $reply-lines;
+ line-height: $line-height;
+
+ .mx_EventTile_body.mx_EventTile_bigEmoji {
+ line-height: $line-height !important;
+ // Override the big emoji override
+ font-size: $font-14px !important;
+ }
+
+ // Hide line numbers
+ .mx_EventTile_lineNumbers {
+ display: none;
+ }
+
+ // Hack to cut content in <pre> tags too
+ .mx_EventTile_pre_container > pre {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: $reply-lines;
+ padding: 4px;
+ }
+
+ .markdown-body blockquote,
+ .markdown-body dl,
+ .markdown-body ol,
+ .markdown-body p,
+ .markdown-body pre,
+ .markdown-body table,
+ .markdown-body ul {
+ margin-bottom: 4px;
+ }
+}
+
+.mx_ReplyTile.mx_ReplyTile_info {
+ padding-top: 0;
+}
+
+.mx_ReplyTile .mx_SenderProfile {
+ color: $primary-fg-color;
+ font-size: $font-14px;
+ display: inline-block; /* anti-zalgo, with overflow hidden */
+ overflow: hidden;
+ cursor: pointer;
+ padding-left: 0; /* left gutter */
+ padding-bottom: 0;
+ padding-top: 0;
+ margin: 0;
+ line-height: $font-17px;
+ /* the next three lines, along with overflow hidden, truncate long display names */
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}

src/components/views/elements/ImageView.tsx

@@ -33,6 +33,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { normalizeWheelEvent } from "../../../utils/Mouse";
+import { IDialogProps } from '../dialogs/IDialogProps';
 
 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -43,14 +44,13 @@ const ZOOM_COEFFICIENT = 0.0025;
 // If we have moved only this much we can zoom
 const ZOOM_DISTANCE = 10;
 
-interface IProps {
+interface IProps extends IDialogProps {
  src: string; // the source of the image being displayed
  name?: string; // the main title ('name') for the image
  link?: string; // the link (if any) applied to the name of the image
  width?: number; // width of the image src in pixels
  height?: number; // height of the image src in pixels
  fileSize?: number; // size of the image src in bytes
- onFinished(): void; // callback when the lightbox is dismissed
 
  // the event (if any) that the Image is displaying. Used for event-specific stuff like
  // redactions, senders, timestamps etc. Other descriptors are taken from the explicit