mirror of https://github.com/vector-im/riot-web
unbubble some type of events
Germain Souquet
parent
6a03ab825f
commit
55896223aa
|
|
@ -27,7 +27,7 @@ limitations under the License.
|
|||
position: relative;
|
||||
margin-top: var(--gutterSize);
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
margin-right: 100px;
|
||||
|
||||
&.mx_EventTile_continuation {
|
||||
margin-top: 2px;
|
||||
|
|
@ -45,7 +45,7 @@ limitations under the License.
|
|||
top: -1px;
|
||||
bottom: -1px;
|
||||
left: -60px;
|
||||
right: -65px;
|
||||
right: -60px;
|
||||
z-index: -1;
|
||||
background: $eventbubble-bg-hover;
|
||||
border-radius: 4px;
|
||||
|
|
@ -65,7 +65,9 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_SenderProfile {
|
||||
padding: 0 var(--gutterSize);
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: calc(-1 * var(--gutterSize));
|
||||
}
|
||||
|
||||
&[data-self=false] {
|
||||
|
|
@ -73,7 +75,7 @@ limitations under the License.
|
|||
border-bottom-right-radius: var(--cornerRadius);
|
||||
}
|
||||
.mx_EventTile_avatar {
|
||||
left: calc(-1 * var(--avatarSize));
|
||||
left: -48px;
|
||||
}
|
||||
|
||||
.mx_MessageActionBar {
|
||||
|
|
@ -107,7 +109,7 @@ limitations under the License.
|
|||
}
|
||||
.mx_EventTile_avatar {
|
||||
top: -19px; // height of the sender block
|
||||
right: -45px;
|
||||
right: -35px;
|
||||
}
|
||||
|
||||
--backgroundColor: $eventbubble-self-bg;
|
||||
|
|
@ -120,7 +122,7 @@ limitations under the License.
|
|||
border-top-right-radius: var(--cornerRadius);
|
||||
background: var(--backgroundColor);
|
||||
display: flex;
|
||||
gap: var(--gutterSize);
|
||||
gap: 5px;
|
||||
margin: 0 -12px 0 -22px;
|
||||
> a {
|
||||
position: absolute;
|
||||
|
|
@ -214,6 +216,29 @@ limitations under the License.
|
|||
.mx_EventListSummary_avatars {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.mx_EventTile {
|
||||
margin: 0 58px;
|
||||
}
|
||||
}
|
||||
|
||||
/* events that do not require bubble layout */
|
||||
& ~ .mx_EventListSummary,
|
||||
&.mx_EventTile_bad {
|
||||
.mx_EventTile_line {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + .mx_EventListSummary {
|
||||
|
|
@ -229,13 +254,30 @@ limitations under the License.
|
|||
|
||||
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
|
||||
&.mx_EventTile_bad > .mx_EventTile_line {
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template:
|
||||
"reply reply" auto
|
||||
"shield body" auto
|
||||
"shield link" auto
|
||||
/ auto 1fr;
|
||||
.mx_EventTile_e2eIcon {
|
||||
grid-area: shield;
|
||||
}
|
||||
.mx_UnknownBody {
|
||||
grid-area: body;
|
||||
}
|
||||
.mx_EventTile_keyRequestInfo {
|
||||
grid-area: link;
|
||||
}
|
||||
.mx_ReplyThread_wrapper {
|
||||
grid-area: reply;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mx_EventTile_readAvatars {
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
right: -110px;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -254,73 +254,6 @@ $hover-select-border: 4px;
|
|||
filter: none;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 44px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0.2;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #ffffff;
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_unknown {
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_unencrypted {
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_unauthenticated {
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
background-color: $composer-e2e-icon-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
|
||||
|
|
@ -368,6 +301,14 @@ $hover-select-border: 4px;
|
|||
.mx_MImageBody {
|
||||
margin-right: 34px;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 44px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_bubbleContainer {
|
||||
|
|
@ -431,6 +372,70 @@ $hover-select-border: 4px;
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
opacity: 0.2;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #ffffff;
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_unknown {
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_unencrypted {
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon_unauthenticated {
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
background-color: $composer-e2e-icon-color;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Various markdown overrides */
|
||||
|
||||
.mx_EventTile_body pre {
|
||||
|
|
|
|||
|
|
@ -712,6 +712,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
|
|||
layout={this.props.layout}
|
||||
enableFlair={this.props.enableFlair}
|
||||
showReadReceipts={this.props.showReadReceipts}
|
||||
hideSender={this.props.room.getMembers().length <= 2}
|
||||
/>
|
||||
</TileErrorBoundary>,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -289,6 +289,9 @@ interface IProps {
|
|||
|
||||
// whether or not to always show timestamps
|
||||
alwaysShowTimestamps?: boolean;
|
||||
|
||||
// whether or not to display the sender
|
||||
hideSender?: boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
|
@ -978,7 +981,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
|||
);
|
||||
}
|
||||
|
||||
if (needsSenderProfile) {
|
||||
if (needsSenderProfile && this.props.hideSender !== true) {
|
||||
if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') {
|
||||
sender = <SenderProfile onClick={this.onSenderProfileClick}
|
||||
mxEvent={this.props.mxEvent}
|
||||
|
|
|
|||
Loading…
Reference in New Issue