ehealthsolutions/healthchat-web
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/healthchat-web.git synced 2026-11-06 06:28:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering

Browse Source
This commit is contained in:
Tulir Asokan
2021-06-07 19:26:12 +03:00
parent cc919452b5 c6de1c3fc8
commit 059241b5cc
287 changed files with 12260 additions and 4912 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/rooms/_EventTile.scss
+3 -21
View File
@@ -85,12 +85,11 @@ $left-gutter: 64px;
}
.mx_EventTile_isEditing .mx_MessageTimestamp {
visibility: hidden !important;
visibility: hidden;
}
.mx_EventTile .mx_MessageTimestamp {
display: block;
visibility: hidden;
white-space: nowrap;
left: 0px;
text-align: center;
@@ -104,7 +103,7 @@ $left-gutter: 64px;
.mx_EventTile_line, .mx_EventTile_reply {
position: relative;
padding-left: $left-gutter;
border-radius: 4px;
border-radius: 8px;
}
.mx_RoomView_timeline_rr_enabled,
@@ -142,29 +141,11 @@ $left-gutter: 64px;
line-height: 57px !important;
}
.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: 3px;
width: auto;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
// The first set is to handle the 'group layout' (default) and the second for the IRC layout
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
[data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,
@@ -280,6 +261,7 @@ $left-gutter: 64px;
height: $font-14px;
width: $font-14px;
will-change: left, top;
transition:
left var(--transition-short) ease-out,
top var(--transition-standard) ease-out;
res/css/views/rooms/_IRCLayout.scss
+7 -11
View File
@@ -115,8 +115,7 @@ $irc-line-height: $font-18px;
.mx_EventTile_line {
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_MTextBody,
.mx_ReplyThread_wrapper_empty {
.mx_MTextBody {
display: inline-block;
}
}
@@ -177,16 +176,13 @@ $irc-line-height: $font-18px;
.mx_SenderProfile_hover {
background-color: $primary-bg-color;
overflow: hidden;
display: flex;
> span {
display: flex;
> .mx_SenderProfile_name {
overflow: hidden;
text-overflow: ellipsis;
min-width: var(--name-width);
text-align: end;
}
> .mx_SenderProfile_name {
overflow: hidden;
text-overflow: ellipsis;
min-width: var(--name-width);
text-align: end;
}
}
res/css/views/rooms/_JumpToBottomButton.scss
+1
View File
@@ -52,6 +52,7 @@ limitations under the License.
.mx_JumpToBottomButton_scrollDown {
position: relative;
display: block;
height: 38px;
border-radius: 19px;
box-sizing: border-box;
res/css/views/rooms/_NewRoomIntro.scss
+2 -2
View File
@@ -18,8 +18,8 @@ limitations under the License.
margin: 40px 0 48px 64px;
.mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
&::before, &::after {
content: unset;
.mx_MiniAvatarUploader_indicator {
display: none;
}
}
res/css/views/rooms/_PinnedEventTile.scss
+76 -47
View File
@@ -16,62 +16,91 @@ limitations under the License.
.mx_PinnedEventTile {
min-height: 40px;
margin-bottom: 5px;
width: 100%;
border-radius: 5px; // for the hover
}
padding: 0 4px 12px;
.mx_PinnedEventTile:hover {
background-color: $event-selected-color;
}
display: grid;
grid-template-areas:
"avatar name remove"
"content content content"
"footer footer footer";
grid-template-rows: max-content auto max-content;
grid-template-columns: 24px auto 24px;
grid-row-gap: 12px;
grid-column-gap: 8px;
.mx_PinnedEventTile .mx_PinnedEventTile_sender,
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
color: #868686;
font-size: 0.8em;
vertical-align: top;
display: inline-block;
padding-bottom: 3px;
}
& + .mx_PinnedEventTile {
padding: 12px 4px;
border-top: 1px solid $menu-border-color;
}
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
padding-left: 15px;
display: none;
}
.mx_PinnedEventTile_senderAvatar {
grid-area: avatar;
}
.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
float: left;
margin-right: 10px;
}
.mx_PinnedEventTile_sender {
grid-area: name;
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-24px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_PinnedEventTile_actions {
float: right;
margin-right: 10px;
display: none;
}
.mx_PinnedEventTile_unpinButton {
visibility: hidden;
grid-area: remove;
position: relative;
width: 24px;
height: 24px;
border-radius: 8px;
.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
display: inline-block;
}
&:hover {
background-color: $roomheader-addroom-bg-color;
}
.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
display: block;
}
&::before {
content: "";
position: absolute;
//top: 0;
//left: 0;
height: inherit;
width: inherit;
background: $secondary-fg-color;
mask-position: center;
mask-size: 8px;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/image-view/close.svg');
}
}
.mx_PinnedEventTile_unpinButton {
display: inline-block;
cursor: pointer;
margin-left: 10px;
}
.mx_PinnedEventTile_message {
grid-area: content;
}
.mx_PinnedEventTile_gotoButton {
display: inline-block;
font-size: 0.7em; // Smaller text to avoid conflicting with the layout
}
.mx_PinnedEventTile_footer {
grid-area: footer;
font-size: 10px;
line-height: 12px;
.mx_PinnedEventTile_message {
margin-left: 50px;
position: relative;
top: 0;
left: 0;
.mx_PinnedEventTile_timestamp {
font-size: inherit;
line-height: inherit;
color: $secondary-fg-color;
}
.mx_AccessibleButton_kind_link {
padding: 0;
margin-left: 12px;
font-size: inherit;
line-height: inherit;
}
}
&:hover {
.mx_PinnedEventTile_unpinButton {
visibility: visible;
}
}
}
res/css/views/rooms/_PinnedEventsPanel.scss
-37
View File
@@ -1,37 +0,0 @@
/*
Copyright 2017 Travis Ralston
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_PinnedEventsPanel {
border-top: 1px solid $primary-hairline-color;
}
.mx_PinnedEventsPanel_body {
max-height: 300px;
overflow-y: auto;
padding-bottom: 15px;
}
.mx_PinnedEventsPanel_header {
margin: 0;
padding-top: 8px;
padding-bottom: 15px;
}
.mx_PinnedEventsPanel_cancel {
margin: 12px;
float: right;
display: inline-block;
}
res/css/views/rooms/_RoomBreadcrumbs.scss
+3 -3
View File
@@ -32,14 +32,14 @@ limitations under the License.
// first triggering the enter state with the newest breadcrumb off screen (-40px) then
// sliding it into view.
&.mx_RoomBreadcrumbs-enter {
margin-left: -40px; // 32px for the avatar, 8px for the margin
transform: translateX(-40px); // 32px for the avatar, 8px for the margin
}
&.mx_RoomBreadcrumbs-enter-active {
margin-left: 0;
transform: translateX(0);
// Timing function is as-requested by design.
// NOTE: The transition time MUST match the value passed to CSSTransition!
transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
}
.mx_RoomBreadcrumbs_placeholder {
res/css/views/rooms/_RoomHeader.scss
-18
View File
@@ -277,24 +277,6 @@ limitations under the License.
margin-top: 18px;
}
.mx_RoomHeader_pinnedButton::before {
mask-image: url('$(res)/img/element-icons/room/pin.svg');
}
.mx_RoomHeader_pinsIndicator {
position: absolute;
right: 0;
bottom: 4px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $pinned-color;
}
.mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color;
}
@media only screen and (max-width: 480px) {
.mx_RoomHeader_wrapper {
padding: 0;
res/css/views/rooms/_RoomSublist.scss
+9 -3
View File
@@ -61,8 +61,8 @@ limitations under the License.
&.mx_RoomSublist_headerContainer_sticky {
position: fixed;
height: 32px; // to match the header container
// width set by JS
width: calc(100% - 22px);
// width set by JS because of a compat issue between Firefox and Chrome
width: calc(100% - 15px);
}
// We don't have a top style because the top is dependent on the room list header's
@@ -98,7 +98,7 @@ limitations under the License.
position: relative;
width: 24px;
height: 24px;
border-radius: 32px;
border-radius: 8px;
&::before {
content: '';
@@ -114,6 +114,11 @@ limitations under the License.
}
}
.mx_RoomSublist_auxButton:hover,
.mx_RoomSublist_menuButton:hover {
background: $roomlist-button-bg-color;
}
// Hide the menu button by default
.mx_RoomSublist_menuButton {
visibility: hidden;
@@ -193,6 +198,7 @@ limitations under the License.
// as the box model should be top aligned. Happens in both FF and Chromium
display: flex;
flex-direction: column;
align-self: stretch;
mask-image: linear-gradient(0deg, transparent, black 4px);
}
res/css/views/rooms/_RoomTile.scss
+4
View File
@@ -19,6 +19,10 @@ limitations under the License.
margin-bottom: 4px;
padding: 4px;
contain: content; // Not strict as it will break when resizing a sublist vertically
height: 40px;
box-sizing: border-box;
// The tile is also a flexbox row itself
display: flex;
res/css/views/rooms/_VoiceRecordComposerTile.scss
+2 -2
View File
@@ -46,11 +46,11 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/trashcan.svg');
}
.mx_VoiceRecordComposerTile_recording.mx_VoiceMessagePrimaryContainer {
.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
// Note: remaining class properties are in the PlayerContainer CSS.
margin: 6px; // force the composer area to put a gutter around us
margin-right: 12px; // isolate from stop button
margin-right: 12px; // isolate from stop/send button
position: relative; // important for the live circle