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

Enable threads by default and mark it as a beta feature (#8081)

Browse source
This commit is contained in:
Germain 2022-04-05 17:15:31 +01:00 • committed by GitHub
parent 27e48062b6
commit 694c39e72d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 257 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

28
res/css/structures/_RightPanel.scss
View file

@ -103,6 +103,7 @@ $pulse-color: $alert;
mask-position: center;
}
}
.mx_RightPanel_headerButton_unreadIndicator_bg {
position: absolute;
right: $dot-offset;
@ -121,14 +122,6 @@ $pulse-color: $alert;
right: $dot-offset;
top: $dot-offset;
margin: 4px;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_RightPanel_indicator_pulse 2s infinite;
animation-iteration-count: 1;
&.mx_Indicator_red {
background: rgba($alert, 1);
@ -144,22 +137,6 @@ $pulse-color: $alert;
background: rgba($primary-content, 1);
box-shadow: rgba($primary-content, 1);
}
&::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transform: scale(1);
transform-origin: center center;
animation-name: mx_RightPanel_indicator_pulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: inherit;
}
}
.mx_RightPanel_timelineCardButton {
@ -250,7 +227,8 @@ $pulse-color: $alert;
margin: 16px 0;
}
h2, p {
h2,
p {
font-size: $font-14px;
}

70
res/css/structures/_RoomView.scss
View file

@ -105,7 +105,9 @@ limitations under the License.
flex: 1;
min-width: 0;
.mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
.mx_RoomView_messagePanel,
.mx_RoomView_messagePanelSpinner,
.mx_RoomView_messagePanelSearchSpinner {
order: 2;
}
}
@ -147,20 +149,17 @@ limitations under the License.
}
.mx_RoomView_messageListWrapper {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
}
.mx_RoomView_searchResultsPanel {
.mx_RoomView_messageListWrapper {
justify-content: flex-start;
> .mx_RoomView_MessageList > li > ol {
>.mx_RoomView_MessageList > li > ol {
list-style-type: none;
}
}
@ -295,3 +294,62 @@ hr.mx_RoomView_myReadMarker {
min-height: 42px;
}
}
@keyframes mx_Indicator_pulse {
0% {
transform: scale(0.95);
}
70% {
transform: scale(1);
}
100% {
transform: scale(0.95);
}
}
@keyframes mx_Indicator_pulse_shadow {
0% {
opacity: 0.7;
}
70% {
transform: scale(2.2);
opacity: 0;
}
100% {
opacity: 0;
}
}
.mx_Indicator {
position: absolute;
right: 0;
top: 0;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_Indicator_pulse 2s infinite;
animation-iteration-count: 1;
&::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transform: scale(1);
transform-origin: center center;
animation-name: mx_Indicator_pulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: inherit;
}
}

18
res/css/views/elements/_Tooltip.scss
View file

@ -16,13 +16,23 @@ limitations under the License.
*/
@keyframes mx_fadein {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mx_fadeout {
from { opacity: 1; }
to { opacity: 0; }
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.mx_Tooltip_chevron {

7
res/css/views/messages/_MessageActionBar.scss
View file

@ -48,7 +48,7 @@ limitations under the License.
cursor: initial;
}
> * {
>* {
white-space: nowrap;
display: inline-block;
position: relative;
@ -102,6 +102,11 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/message/thread.svg');
}
.mx_MessageActionBar_threadButton .mx_Indicator {
background: $links;
animation-iteration-count: infinite;
}
.mx_MessageActionBar_editButton::after {
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
}

24
res/css/views/right_panel/_ThreadPanel.scss
View file

@ -17,6 +17,8 @@ limitations under the License.
.mx_ThreadPanel {
display: flex;
flex-direction: column;
height: 100px;
overflow: visible;
.mx_BaseCard_header {
margin-bottom: 12px;
@ -225,6 +227,20 @@ limitations under the License.
display: none; // hide the hidden event expand button, not enough space, view source can still be used
}
}
.mx_BaseCard_footer {
text-align: left;
font-size: $font-12px;
align-items: center;
justify-content: end;
gap: 4px;
position: relative;
top: 2px;
.mx_AccessibleButton_kind_link_inline {
color: $secondary-content;
}
}
}
.mx_ThreadPanel_replies {
@ -269,10 +285,10 @@ limitations under the License.
align-items: center;
justify-content: center;
position: absolute;
top: 48px;
bottom: 8px;
left: 8px;
right: 8px;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
h2 {

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

@ -940,6 +940,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_ThreadView {
display: flex;
flex-direction: column;
max-height: 100%;
.mx_ThreadView_List {
flex: 1;

BIN
res/img/betas/threads.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 85 KiB

28
res/themes/light/css/_light.scss
View file

@ -8,9 +8,22 @@
/* Noto Color Emoji contains digits, in fixed-width, therefore causing
digits in flowed text to stand out.
TODO: Consider putting all emoji fonts to the end rather than the front. */
$font-family: 'Inter', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji';
$font-family: 'Inter',
'Twemoji',
'Apple Color Emoji',
'Segoe UI Emoji',
'Arial',
'Helvetica',
sans-serif,
'Noto Color Emoji';
$monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji';
$monospace-font-family: 'Inconsolata',
'Twemoji',
'Apple Color Emoji',
'Segoe UI Emoji',
'Courier',
monospace,
'Noto Color Emoji';
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120
// ********************
@ -57,7 +70,7 @@ $icon-button-color: $quaternary-content;
// Colors that aren't in Figma and are theme specific - we need to get rid of these
// ********************
$selection-fg-color: $background;
$yellow-background: #fff8e3;
$yellow-background: #fff8e3;
$secondary-accent-color: #f2f5f8;
$button-fg-color: $background;
$neutral-badge-color: #dbdbdb;
@ -79,7 +92,8 @@ $event-selected-color: #f6f7f8;
$topleftmenu-color: #212121;
$roomtopic-color: #9e9e9e;
$spacePanel-bg-color: rgba(232, 232, 232, 0.77);
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
$panel-gradient: rgba(242, 245, 248, 0),
rgba(242, 245, 248, 1);
$h3-color: #3d3b39;
$event-highlight-bg-color: $yellow-background;
$header-panel-text-primary-color: #91A1C0;
@ -296,6 +310,7 @@ $focus-brightness: 105%;
:root {
--lp-background-blur: 40px;
}
// ********************
// Icon URLs
@ -330,8 +345,7 @@ $location-live-secondary-color: #deddfd;
outline: none;
}
@define-mixin mx_DialogButton_hover {
}
@define-mixin mx_DialogButton_hover {}
@define-mixin mx_DialogButton_danger {
background-color: $accent;
@ -355,6 +369,7 @@ $location-live-secondary-color: #deddfd;
color: $accent;
text-decoration: none;
}
// ********************
// diff highlight colors
@ -366,4 +381,5 @@ $location-live-secondary-color: #deddfd;
.hljs-deletion {
background: #fdd;
}
// ********************