element-web-Github/res/css/views/rooms/_ReplyTile.pcss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

141 lines
3.6 KiB
Plaintext
Raw Normal View History

/*
2020-04-10 21:27:39 +08:00
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 {
position: relative;
padding: 2px 0;
font-size: $font-14px;
&.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");
}
> a {
display: grid;
grid-template:
"sender" auto
"message" auto
/ auto;
text-decoration: none;
Further improve replies (#6396) * Give reply tile an avatar Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve `in reply to` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Drop `In reply to` for `Expand thread` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix default avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie some more code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Make replies lighter Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Give replies a hover effect Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Revert changes to sender profile in replies Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve padding Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Increase line height of replies to keep descenders from being cut off, and generally give them more room to breathe. Signed-off-by: Robin Townsend <robin@robin.town> * Replace reply hover effect with a color change Signed-off-by: Robin Townsend <robin@robin.town> * Replace expand thread hover effect with an opacity change Signed-off-by: Robin Townsend <robin@robin.town> * Simplify image and sticker reply designs Signed-off-by: Robin Townsend <robin@robin.town> * Revise file and deleted message padding to match new reply layout Signed-off-by: Robin Townsend <robin@robin.town> * Remove unneeded CSS Since the download button for files got moved out of the timeline and into the message action bar, hiding it manually is no longer necessary. Signed-off-by: Robin Townsend <robin@robin.town> * Hide edited indicator from replies There are a few reasons for this: it adds visual noise to what is meant to be a brief preview, it can sometimes add an extra line to the reply preview, and clicking on it inside a reply was broken due to the stacking of event listeners. Signed-off-by: Robin Townsend <robin@robin.town> * Fix i18n Signed-off-by: Robin Townsend <robin@robin.town> * "Expand thread" -> "Expand replies" Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Add a missing import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Use `this.state` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix sender profile confusion Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Implement suggested changes * Make "In reply to" the same color as reply previews Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> Signed-off-by: Robin Townsend <robin@robin.town> Co-authored-by: Robin Townsend <robin@robin.town>
2022-11-29 15:49:43 +08:00
color: $secondary-content;
transition: color ease 0.15s;
gap: 2px;
&:hover {
color: $primary-content;
}
}
.mx_RedactedBody {
line-height: $font-18px;
}
.mx_RedactedBody,
.mx_HiddenBody {
padding: 4px 0 2px 20px;
2020-04-10 21:03:27 +08:00
&::before {
height: 13px;
width: 13px;
Further improve replies (#6396) * Give reply tile an avatar Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve `in reply to` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Drop `In reply to` for `Expand thread` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix default avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie some more code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Make replies lighter Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Give replies a hover effect Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Revert changes to sender profile in replies Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve padding Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Increase line height of replies to keep descenders from being cut off, and generally give them more room to breathe. Signed-off-by: Robin Townsend <robin@robin.town> * Replace reply hover effect with a color change Signed-off-by: Robin Townsend <robin@robin.town> * Replace expand thread hover effect with an opacity change Signed-off-by: Robin Townsend <robin@robin.town> * Simplify image and sticker reply designs Signed-off-by: Robin Townsend <robin@robin.town> * Revise file and deleted message padding to match new reply layout Signed-off-by: Robin Townsend <robin@robin.town> * Remove unneeded CSS Since the download button for files got moved out of the timeline and into the message action bar, hiding it manually is no longer necessary. Signed-off-by: Robin Townsend <robin@robin.town> * Hide edited indicator from replies There are a few reasons for this: it adds visual noise to what is meant to be a brief preview, it can sometimes add an extra line to the reply preview, and clicking on it inside a reply was broken due to the stacking of event listeners. Signed-off-by: Robin Townsend <robin@robin.town> * Fix i18n Signed-off-by: Robin Townsend <robin@robin.town> * "Expand thread" -> "Expand replies" Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Add a missing import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Use `this.state` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix sender profile confusion Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Implement suggested changes * Make "In reply to" the same color as reply previews Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> Signed-off-by: Robin Townsend <robin@robin.town> Co-authored-by: Robin Townsend <robin@robin.town>
2022-11-29 15:49:43 +08:00
top: 3px;
}
}
/* We do reply size limiting with CSS to avoid duplicating the TextualBody component. */
.mx_EventTile_content {
grid-area: message;
$reply-lines: 2;
Further improve replies (#6396) * Give reply tile an avatar Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve `in reply to` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Drop `In reply to` for `Expand thread` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix default avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie some more code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Make replies lighter Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Give replies a hover effect Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Revert changes to sender profile in replies Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve padding Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Increase line height of replies to keep descenders from being cut off, and generally give them more room to breathe. Signed-off-by: Robin Townsend <robin@robin.town> * Replace reply hover effect with a color change Signed-off-by: Robin Townsend <robin@robin.town> * Replace expand thread hover effect with an opacity change Signed-off-by: Robin Townsend <robin@robin.town> * Simplify image and sticker reply designs Signed-off-by: Robin Townsend <robin@robin.town> * Revise file and deleted message padding to match new reply layout Signed-off-by: Robin Townsend <robin@robin.town> * Remove unneeded CSS Since the download button for files got moved out of the timeline and into the message action bar, hiding it manually is no longer necessary. Signed-off-by: Robin Townsend <robin@robin.town> * Hide edited indicator from replies There are a few reasons for this: it adds visual noise to what is meant to be a brief preview, it can sometimes add an extra line to the reply preview, and clicking on it inside a reply was broken due to the stacking of event listeners. Signed-off-by: Robin Townsend <robin@robin.town> * Fix i18n Signed-off-by: Robin Townsend <robin@robin.town> * "Expand thread" -> "Expand replies" Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Add a missing import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Use `this.state` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix sender profile confusion Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Implement suggested changes * Make "In reply to" the same color as reply previews Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> Signed-off-by: Robin Townsend <robin@robin.town> Co-authored-by: Robin Townsend <robin@robin.town>
2022-11-29 15:49:43 +08:00
$line-height: $font-18px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $reply-lines;
.mx_EventTile_body.mx_EventTile_bigEmoji {
line-height: $font-22px !important; /* Same as var(--EventTile_group_line-line-height) */
font-size: $font-14px !important; /* Override the big emoji override */
}
Further improve replies (#6396) * Give reply tile an avatar Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve `in reply to` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Drop `In reply to` for `Expand thread` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix default avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie some more code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Make replies lighter Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Give replies a hover effect Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Revert changes to sender profile in replies Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve padding Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Increase line height of replies to keep descenders from being cut off, and generally give them more room to breathe. Signed-off-by: Robin Townsend <robin@robin.town> * Replace reply hover effect with a color change Signed-off-by: Robin Townsend <robin@robin.town> * Replace expand thread hover effect with an opacity change Signed-off-by: Robin Townsend <robin@robin.town> * Simplify image and sticker reply designs Signed-off-by: Robin Townsend <robin@robin.town> * Revise file and deleted message padding to match new reply layout Signed-off-by: Robin Townsend <robin@robin.town> * Remove unneeded CSS Since the download button for files got moved out of the timeline and into the message action bar, hiding it manually is no longer necessary. Signed-off-by: Robin Townsend <robin@robin.town> * Hide edited indicator from replies There are a few reasons for this: it adds visual noise to what is meant to be a brief preview, it can sometimes add an extra line to the reply preview, and clicking on it inside a reply was broken due to the stacking of event listeners. Signed-off-by: Robin Townsend <robin@robin.town> * Fix i18n Signed-off-by: Robin Townsend <robin@robin.town> * "Expand thread" -> "Expand replies" Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Add a missing import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Use `this.state` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix sender profile confusion Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Implement suggested changes * Make "In reply to" the same color as reply previews Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> Signed-off-by: Robin Townsend <robin@robin.town> Co-authored-by: Robin Townsend <robin@robin.town>
2022-11-29 15:49:43 +08:00
// Hide line numbers and edited indicator
.mx_EventTile_lineNumbers,
.mx_EventTile_edited {
display: none;
}
/* Hack to cut content in <pre> tags too */
.mx_EventTile_pre_container > pre {
overflow-x: scroll;
overflow-y: 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_info {
padding-top: 0;
}
&.mx_ReplyTile_inline > a {
/* Render replies to emotes inline with the sender avatar */
grid-template:
"sender message" auto
/ max-content auto;
gap: 4px; // increase spacing
}
Further improve replies (#6396) * Give reply tile an avatar Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve `in reply to` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Drop `In reply to` for `Expand thread` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix default avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie some more code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Make replies lighter Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Give replies a hover effect Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Revert changes to sender profile in replies Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve padding Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Increase line height of replies to keep descenders from being cut off, and generally give them more room to breathe. Signed-off-by: Robin Townsend <robin@robin.town> * Replace reply hover effect with a color change Signed-off-by: Robin Townsend <robin@robin.town> * Replace expand thread hover effect with an opacity change Signed-off-by: Robin Townsend <robin@robin.town> * Simplify image and sticker reply designs Signed-off-by: Robin Townsend <robin@robin.town> * Revise file and deleted message padding to match new reply layout Signed-off-by: Robin Townsend <robin@robin.town> * Remove unneeded CSS Since the download button for files got moved out of the timeline and into the message action bar, hiding it manually is no longer necessary. Signed-off-by: Robin Townsend <robin@robin.town> * Hide edited indicator from replies There are a few reasons for this: it adds visual noise to what is meant to be a brief preview, it can sometimes add an extra line to the reply preview, and clicking on it inside a reply was broken due to the stacking of event listeners. Signed-off-by: Robin Townsend <robin@robin.town> * Fix i18n Signed-off-by: Robin Townsend <robin@robin.town> * "Expand thread" -> "Expand replies" Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Add a missing import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Use `this.state` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix sender profile confusion Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Implement suggested changes * Make "In reply to" the same color as reply previews Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> Signed-off-by: Robin Townsend <robin@robin.town> Co-authored-by: Robin Townsend <robin@robin.town>
2022-11-29 15:49:43 +08:00
.mx_ReplyTile_sender {
grid-area: sender;
Further improve replies (#6396) * Give reply tile an avatar Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve `in reply to` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Drop `In reply to` for `Expand thread` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix default avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie some more code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Make replies lighter Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Give replies a hover effect Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Revert changes to sender profile in replies Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve padding Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Increase line height of replies to keep descenders from being cut off, and generally give them more room to breathe. Signed-off-by: Robin Townsend <robin@robin.town> * Replace reply hover effect with a color change Signed-off-by: Robin Townsend <robin@robin.town> * Replace expand thread hover effect with an opacity change Signed-off-by: Robin Townsend <robin@robin.town> * Simplify image and sticker reply designs Signed-off-by: Robin Townsend <robin@robin.town> * Revise file and deleted message padding to match new reply layout Signed-off-by: Robin Townsend <robin@robin.town> * Remove unneeded CSS Since the download button for files got moved out of the timeline and into the message action bar, hiding it manually is no longer necessary. Signed-off-by: Robin Townsend <robin@robin.town> * Hide edited indicator from replies There are a few reasons for this: it adds visual noise to what is meant to be a brief preview, it can sometimes add an extra line to the reply preview, and clicking on it inside a reply was broken due to the stacking of event listeners. Signed-off-by: Robin Townsend <robin@robin.town> * Fix i18n Signed-off-by: Robin Townsend <robin@robin.town> * "Expand thread" -> "Expand replies" Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Add a missing import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Use `this.state` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix sender profile confusion Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Implement suggested changes * Make "In reply to" the same color as reply previews Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> Signed-off-by: Robin Townsend <robin@robin.town> Co-authored-by: Robin Townsend <robin@robin.town>
2022-11-29 15:49:43 +08:00
display: flex;
align-items: center;
gap: 4px;
.mx_DisambiguatedProfile {
font-size: $font-14px;
display: inline-block; // anti-zalgo, with overflow hidden
padding: 0;
margin: 0;
// truncate long display names
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mx_BaseAvatar {
line-height: 14px; // To match size
}
}
}