imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into show-username

Browse source
This commit is contained in:
Šimon Brandner 2021-04-21 18:08:50 +02:00
commit 951fda4c3d
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
102 changed files with 2373 additions and 622 deletions
Download patch file Download diff file Expand all files Collapse all files

10
res/css/_common.scss
View file

@ -28,6 +28,16 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e
:root {
font-size: 10px;
--transition-short: .1s;
--transition-standard: .3s;
}
@media (prefers-reduced-motion) {
:root {
--transition-short: 0;
--transition-standard: 0;
}
}
html {

1
res/css/structures/_FilePanel.scss
View file

@ -22,7 +22,6 @@ limitations under the License.
}
.mx_FilePanel .mx_RoomView_messageListWrapper {
margin-right: 20px;
flex-direction: row;
align-items: center;
justify-content: center;

1
res/css/structures/_ScrollPanel.scss
View file

@ -21,6 +21,5 @@ limitations under the License.
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow-y: hidden;
}
}

26
res/css/structures/_UserMenu.scss
View file

@ -117,6 +117,32 @@ limitations under the License.
.mx_UserMenu_headerButtons {
// No special styles: the rest of the layout happens to make it work.
}
.mx_UserMenu_dnd {
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
&::before {
content: '';
position: absolute;
width: 24px;
height: 24px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $muted-fg-color;
}
&.mx_UserMenu_dnd_noisy::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
&.mx_UserMenu_dnd_muted::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
}
}
}
&.mx_UserMenu_minimized {

7
res/css/views/dialogs/_AddExistingToSpaceDialog.scss
View file

@ -101,7 +101,8 @@ limitations under the License.
}
.mx_SearchBox {
margin: 0;
// To match the space around the title
margin: 0 0 15px 0;
flex-grow: 0;
}
@ -123,7 +124,9 @@ limitations under the License.
}
.mx_AddExistingToSpaceDialog_section {
margin-top: 24px;
&:not(:first-child) {
margin-top: 24px;
}
> h3 {
margin: 0;

2
res/css/views/rooms/_BasicMessageComposer.scss
View file

@ -68,8 +68,8 @@ limitations under the License.
}
&.mx_BasicMessageComposer_input_disabled {
// Ignore all user input to avoid accidentally triggering the composer
pointer-events: none;
cursor: not-allowed;
}
}

5
res/css/views/rooms/_EventTile.scss
View file

@ -159,6 +159,7 @@ $left-gutter: 64px;
.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;
@ -282,6 +283,10 @@ $left-gutter: 64px;
display: inline-block;
height: $font-14px;
width: $font-14px;
transition:
left var(--transition-short) ease-out,
top var(--transition-standard) ease-out;
}
.mx_EventTile_readAvatarRemainder {

19
res/css/views/rooms/_IRCLayout.scss
View file

@ -216,6 +216,25 @@ $irc-line-height: $font-18px;
}
}
}
.mx_EventTile_emote {
> .mx_EventTile_avatar {
margin-left: initial;
}
}
.mx_MessageTimestamp {
width: initial;
}
/**
* adding the icon back in the document flow
* if it's not present, there's no unwanted wasted space
*/
.mx_EventTile_e2eIcon {
position: relative;
order: -1;
}
}
.mx_ProfileResizer {

8
res/css/views/rooms/_RoomSublist.scss
View file

@ -18,6 +18,10 @@ limitations under the License.
margin-left: 8px;
margin-bottom: 4px;
&.mx_RoomSublist_hidden {
display: none;
}
.mx_RoomSublist_headerContainer {
// Create a flexbox to make alignment easy
display: flex;
@ -37,7 +41,9 @@ limitations under the License.
// The combined height must be set in the LeftPanel component for sticky headers
// to work correctly.
padding-bottom: 8px;
height: 24px;
// Allow the container to collapse on itself if its children
// are not in the normal document flow
max-height: 24px;
color: $roomlist-header-color;
.mx_RoomSublist_stickable {

26
res/css/views/rooms/_VoiceRecordComposerTile.scss
View file

@ -53,7 +53,8 @@ limitations under the License.
font-size: $font-14px;
&::before {
// TODO: @@ TravisR: Animate
animation: recording-pulse 2s infinite;
content: '';
background-color: $voice-record-live-circle-color;
width: 10px;
@ -74,3 +75,26 @@ limitations under the License.
width: 42px; // we're not using a monospace font, so fake it
}
}
// The keyframes are slightly weird here to help make a ramping/punch effect
// for the recording dot. We start and end at 100% opacity to help make the
// dot feel a bit like a real lamp that is blinking: the animation ends up
// spending a lot of its time showing a steady state without a fade effect.
// This lamp effect extends into why the 0% opacity keyframe is not in the
// midpoint: lamps take longer to turn off than they do to turn on, and the
// extra frames give it a bit of a realistic punch for when the animation is
// ramping back up to 100% opacity.
//
// Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s
// (intended to be used in a loop for 2s animation speed)
@keyframes recording-pulse {
0% {
opacity: 1;
}
35% {
opacity: 0;
}
65% {
opacity: 1;
}
}