mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-26 20:55:56 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'nadonomy/ui-tweaks-part-deux' into 'element'

Browse source 
UI tweaks - part deux

See merge request new-vector/element/element-web/matrix-react-sdk!8
This commit is contained in:
Bruno Windels 2020-07-14 13:47:10 +00:00
commit ebbcbe231a
32 changed files with 243 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
res/css/_common.scss
View file

@ -160,9 +160,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
background-color: transparent; background-color: transparent;
color: $input-darker-fg-color; color: $input-darker-fg-color;
border-radius: 4px; border-radius: 4px;
border: 1px solid $dialog-close-fg-color; border: 1px solid rgba($primary-fg-color, .1);
// these things should probably not be defined // these things should probably not be defined globally
// globally
margin: 9px; margin: 9px;
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -264,7 +263,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
padding: 25px 30px 30px 30px; padding: 25px 30px 30px 30px;
max-height: 80%; max-height: 80%;
box-shadow: 2px 15px 30px 0 $dialog-shadow-color; box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
border-radius: 4px; border-radius: 8px;
overflow-y: auto; overflow-y: auto;
} }
@ -622,12 +621,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
// round the top corners of the top button for the hover effect to be bounded // round the top corners of the top button for the hover effect to be bounded
&:first-child .mx_AccessibleButton:first-child { &:first-child .mx_AccessibleButton:first-child {
border-radius: 4px 4px 0 0; // radius matches .mx_ContextualMenu border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
} }
// round the bottom corners of the bottom button for the hover effect to be bounded // round the bottom corners of the bottom button for the hover effect to be bounded
&:last-child .mx_AccessibleButton:last-child { &:last-child .mx_AccessibleButton:last-child {
border-radius: 0 0 4px 4px; // radius matches .mx_ContextualMenu border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
} }
.mx_AccessibleButton { .mx_AccessibleButton {

2
res/css/structures/_ContextualMenu.scss
View file

@ -31,7 +31,7 @@ limitations under the License.
} }
.mx_ContextualMenu { .mx_ContextualMenu {
border-radius: 4px; border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color; background-color: $menu-bg-color;
color: $primary-fg-color; color: $primary-fg-color;

2
res/css/structures/_LeftPanel2.scss
View file

@ -143,7 +143,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
margin-top: 12px; // so we're not up against the search/filter margin-top: 10px; // so we're not up against the search/filter
&.mx_LeftPanel2_roomListWrapper_stickyBottom { &.mx_LeftPanel2_roomListWrapper_stickyBottom {
padding-bottom: 32px; padding-bottom: 32px;

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

@ -23,6 +23,13 @@ limitations under the License.
max-width: 50%; max-width: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 8px;
margin: 5px;
padding: 4px 0;
.mx_RoomView_MessageList {
padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
}
} }
.mx_RightPanel_header { .mx_RightPanel_header {

17
res/css/structures/_ToastContainer.scss
View file

@ -48,13 +48,14 @@ limitations under the License.
padding: 8px; padding: 8px;
&.mx_Toast_hasIcon { &.mx_Toast_hasIcon {
&::after { &::before, &::after {
content: ""; content: "";
width: 22px; width: 22px;
height: 22px; height: 22px;
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
mask-size: 100%; mask-size: 100%;
mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -65,8 +66,18 @@ limitations under the License.
background-color: $primary-fg-color; background-color: $primary-fg-color;
} }
&.mx_Toast_icon_verification_warning::after { &.mx_Toast_icon_verification_warning {
background-image: url("$(res)/img/e2e/warning.svg"); // white infill for the hollow svg mask
&::before {
background-color: #ffffff;
mask-image: url('$(res)/img/e2e/normal.svg');
mask-size: 90%;
}
&::after {
mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $notice-primary-color;
}
} }
&.mx_Toast_icon_element_logo::after { &.mx_Toast_icon_element_logo::after {

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

@ -76,17 +76,14 @@ limitations under the License.
} }
.mx_Tooltip_timeline { .mx_Tooltip_timeline {
box-shadow: none; &.mx_Tooltip {
background-color: $tooltip-timeline-bg-color; background-color: $inverted-bg-color;
color: $tooltip-timeline-fg-color; color: $accent-fg-color;
text-align: center; border: 0;
border: none; text-align: center;
border-radius: 3px;
font-size: $font-14px;
line-height: 1.2;
padding: 6px 8px;
.mx_Tooltip_chevron::after { .mx_Tooltip_chevron {
border-right-color: $tooltip-timeline-bg-color; display: none;
}
} }
} }

4
res/css/views/right_panel/_UserInfo.scss
View file

@ -53,7 +53,7 @@ limitations under the License.
} }
.mx_UserInfo_separator { .mx_UserInfo_separator {
border-bottom: 1px solid lightgray; border-bottom: 1px solid rgba($primary-fg-color, .1);
} }
.mx_UserInfo_memberDetailsContainer { .mx_UserInfo_memberDetailsContainer {
@ -121,7 +121,7 @@ limitations under the License.
h3 { h3 {
text-transform: uppercase; text-transform: uppercase;
color: $notice-secondary-color; color: $notice-secondary-color;
font-weight: bold; font-weight: 600;
font-size: $font-12px; font-size: $font-12px;
margin: 4px 0; margin: 4px 0;
} }

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

@ -81,7 +81,7 @@ $AppsDrawerBodyHeight: 273px;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 5px solid $widget-menu-bar-bg-color; border: 5px solid $widget-menu-bar-bg-color;
border-radius: 4px; border-radius: 8px;
} }
.mx_AppTile_mini { .mx_AppTile_mini {

60
res/css/views/rooms/_E2EIcon.scss
View file

@ -22,28 +22,58 @@ limitations under the License.
display: block; display: block;
} }
.mx_E2EIcon_warning::after, .mx_E2EIcon_warning,
.mx_E2EIcon_normal::after, .mx_E2EIcon_normal,
.mx_E2EIcon_verified::after { .mx_E2EIcon_verified {
content: ""; &::before, &::after {
display: block; content: "";
position: absolute; display: block;
top: 0; position: absolute;
bottom: 0; top: 0;
left: 0; bottom: 0;
right: 0; left: 0;
background-repeat: no-repeat; right: 0;
background-size: contain; mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
// white infill for the transparency
.mx_E2EIcon::before {
background-color: #ffffff;
mask: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;
}
// transparent-looking border surrounding the shield for when overlain over avatars
.mx_E2EIcon_bordered {
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $header-panel-bg-color;
// shrink the actual badge
&::after {
mask-size: 75%;
}
// shrink the infill of the badge
&::before {
mask-size: 65%;
}
} }
.mx_E2EIcon_warning::after { .mx_E2EIcon_warning::after {
background-image: url('$(res)/img/e2e/warning.svg'); mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
} }
.mx_E2EIcon_normal::after { .mx_E2EIcon_normal::after {
background-image: url('$(res)/img/e2e/normal.svg'); mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $composer-e2e-icon-color;
} }
.mx_E2EIcon_verified::after { .mx_E2EIcon_verified::after {
background-image: url('$(res)/img/e2e/verified.svg'); mask-image: url('$(res)/img/e2e/verified.svg');
background-color: $accent-color;
} }

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

@ -26,8 +26,6 @@ limitations under the License.
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
right: 7px; right: 7px;
height: 15px;
width: 15px;
} }
} }

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

@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$left-gutter: 64px;
.mx_EventTile { .mx_EventTile {
max-width: 100%; max-width: 100%;
clear: both; clear: both;
@ -45,7 +47,7 @@ limitations under the License.
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
top: $font-8px; top: $font-8px;
left: 65px; left: $left-gutter;
} }
.mx_EventTile_continuation { .mx_EventTile_continuation {
@ -73,7 +75,7 @@ limitations under the License.
/* the next three lines, along with overflow hidden, truncate long display names */ /* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: calc(100% - 65px); max-width: calc(100% - $left-gutter);
} }
.mx_EventTile .mx_SenderProfile .mx_Flair { .mx_EventTile .mx_SenderProfile .mx_Flair {
@ -111,7 +113,7 @@ limitations under the License.
.mx_EventTile_line, .mx_EventTile_reply { .mx_EventTile_line, .mx_EventTile_reply {
position: relative; position: relative;
padding-left: 65px; /* left gutter */ padding-left: $left-gutter;
border-radius: 4px; border-radius: 4px;
} }
@ -182,7 +184,7 @@ limitations under the License.
* TODO: ultimately we probably want some transition on here. * TODO: ultimately we probably want some transition on here.
*/ */
.mx_EventTile_selected > .mx_EventTile_line { .mx_EventTile_selected > .mx_EventTile_line {
border-left: $accent-color 5px solid; border-left: $accent-color 4px solid;
padding-left: 60px; padding-left: 60px;
background-color: $event-selected-color; background-color: $event-selected-color;
} }
@ -328,9 +330,9 @@ limitations under the License.
.mx_EventTile_e2eIcon { .mx_EventTile_e2eIcon {
position: absolute; position: absolute;
top: 6px; top: 6px;
left: 46px; left: 44px;
width: 15px; width: 14px;
height: 15px; height: 14px;
display: block; display: block;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -339,23 +341,58 @@ limitations under the License.
background-size: contain; background-size: contain;
} }
.mx_EventTile_e2eIcon {
&::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: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;
}
}
.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
background-image: url('$(res)/img/e2e/warning.svg'); &::after {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
}
opacity: 1; opacity: 1;
} }
.mx_EventTile_e2eIcon_unknown { .mx_EventTile_e2eIcon_unknown {
background-image: url('$(res)/img/e2e/warning.svg'); &::after {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
}
opacity: 1; opacity: 1;
} }
.mx_EventTile_e2eIcon_unencrypted { .mx_EventTile_e2eIcon_unencrypted {
background-image: url('$(res)/img/e2e/warning.svg'); &::after {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $notice-primary-color;
}
opacity: 1; opacity: 1;
} }
.mx_EventTile_e2eIcon_unauthenticated { .mx_EventTile_e2eIcon_unauthenticated {
background-image: url('$(res)/img/e2e/normal.svg'); &::after {
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $composer-e2e-icon-color;
}
opacity: 1; opacity: 1;
} }
@ -397,10 +434,6 @@ limitations under the License.
margin-bottom: 0px; margin-bottom: 0px;
} }
.mx_EventTile_12hr .mx_EventTile_e2eIcon {
padding-left: 5px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
@ -408,15 +441,15 @@ limitations under the License.
} }
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color 5px solid; border-left: $e2e-verified-color 4px solid;
} }
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color 5px solid; border-left: $e2e-unverified-color 4px solid;
} }
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: $e2e-unknown-color 5px solid; border-left: $e2e-unknown-color 4px solid;
} }
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
@ -505,7 +538,7 @@ limitations under the License.
display: inline-block; display: inline-block;
visibility: hidden; visibility: hidden;
cursor: pointer; cursor: pointer;
top: 6px; top: 8px;
right: 6px; right: 6px;
width: 19px; width: 19px;
height: 19px; height: 19px;
@ -537,7 +570,6 @@ limitations under the License.
.mx_EventTile_content .markdown-body a { .mx_EventTile_content .markdown-body a {
color: $accent-color-alt; color: $accent-color-alt;
text-decoration: underline;
} }
.mx_EventTile_content .markdown-body .hljs { .mx_EventTile_content .markdown-body .hljs {

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

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$left-gutter: 65px; $left-gutter: 64px;
.mx_GroupLayout { .mx_GroupLayout {
.mx_EventTile { .mx_EventTile {

6
res/css/views/rooms/_MemberList.scss
View file

@ -26,6 +26,10 @@ limitations under the License.
flex: 1 0 auto; flex: 1 0 auto;
} }
.mx_SearchBox {
margin-bottom: 5px;
}
h2 { h2 {
text-transform: uppercase; text-transform: uppercase;
color: $h3-color; color: $h3-color;
@ -75,7 +79,7 @@ limitations under the License.
background-color: $button-bg-color; background-color: $button-bg-color;
border-radius: 4px; border-radius: 4px;
padding: 8px; padding: 8px;
margin: 9px; margin: 5px 9px 9px;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: $button-fg-color; color: $button-fg-color;

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

@ -20,7 +20,7 @@ limitations under the License.
margin: auto; margin: auto;
border-top: 1px solid $primary-hairline-color; border-top: 1px solid $primary-hairline-color;
position: relative; position: relative;
padding-left: 84px; padding-left: 83px;
} }
.mx_MessageComposer_replaced_wrapper { .mx_MessageComposer_replaced_wrapper {
@ -60,7 +60,7 @@ limitations under the License.
.mx_MessageComposer .mx_MessageComposer_avatar { .mx_MessageComposer .mx_MessageComposer_avatar {
position: absolute; position: absolute;
left: 27px; left: 26px;
} }
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
@ -76,8 +76,8 @@ limitations under the License.
left: 60px; left: 60px;
margin-right: 0; // Counteract the E2EIcon class margin-right: 0; // Counteract the E2EIcon class
margin-left: 3px; // Counteract the E2EIcon class margin-left: 3px; // Counteract the E2EIcon class
width: 15px; width: 12px;
height: 15px; height: 12px;
} }
.mx_MessageComposer_noperm_error { .mx_MessageComposer_noperm_error {

29
res/css/views/rooms/_RoomHeader.scss
View file

@ -15,27 +15,34 @@ limitations under the License.
*/ */
.mx_RoomHeader { .mx_RoomHeader {
flex: 0 0 56px; flex: 0 0 50px;
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
background-color: $roomheader-bg-color; background-color: $roomheader-bg-color;
.mx_E2EIcon { .mx_RoomHeader_e2eIcon {
margin: 0; height: 12px;
position: absolute; width: 12px;
bottom: -2px;
right: -6px; .mx_E2EIcon {
height: 15px; margin: 0;
width: 15px; position: absolute;
height: 12px;
width: 12px;
}
} }
} }
.mx_RoomHeader_wrapper { .mx_RoomHeader_wrapper {
margin: auto; margin: auto;
height: 56px; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 0; min-width: 0;
padding: 0 10px 0 19px; padding: 0 10px 0 18px;
.mx_InviteOnlyIcon_large {
margin: 0;
}
} }
.mx_RoomHeader_spinner { .mx_RoomHeader_spinner {
@ -174,7 +181,7 @@ limitations under the License.
.mx_RoomHeader_avatar { .mx_RoomHeader_avatar {
flex: 0; flex: 0;
margin: 0 7px 0 6px; margin: 0 6px 0 7px;
position: relative; position: relative;
} }

7
res/css/views/rooms/_RoomSublist2.scss
View file

@ -22,6 +22,7 @@ limitations under the License.
flex-direction: column; flex-direction: column;
margin-left: 8px; margin-left: 8px;
margin-bottom: 4px;
width: 100%; width: 100%;
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
@ -138,9 +139,8 @@ limitations under the License.
.mx_RoomSublist2_headerText { .mx_RoomSublist2_headerText {
flex: 1; flex: 1;
max-width: calc(100% - 16px); // 16px is the badge width max-width: calc(100% - 16px); // 16px is the badge width
text-transform: uppercase;
line-height: $font-16px; line-height: $font-16px;
font-size: $font-12px; font-size: $font-13px;
font-weight: 600; font-weight: 600;
// Ellipsize any text overflow // Ellipsize any text overflow
@ -183,6 +183,7 @@ limitations under the License.
// See also https://github.com/vector-im/riot-web/issues/14429. // See also https://github.com/vector-im/riot-web/issues/14429.
&:first-child .mx_RoomSublist2_headerContainer { &:first-child .mx_RoomSublist2_headerContainer {
height: 0; height: 0;
padding-bottom: 4px;
} }
.mx_RoomSublist2_resizeBox { .mx_RoomSublist2_resizeBox {
@ -202,7 +203,7 @@ limitations under the License.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
mask-image: linear-gradient(0deg, transparent, black 3px); mask-image: linear-gradient(0deg, transparent, black 4px)
} }
.mx_RoomSublist2_resizerHandles_showNButton { .mx_RoomSublist2_resizerHandles_showNButton {

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

@ -63,7 +63,7 @@ limitations under the License.
} }
.mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents { .mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents {
font-weight: 700; font-weight: 600;
} }
.mx_RoomTile2_messagePreview { .mx_RoomTile2_messagePreview {

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

@ -31,7 +31,7 @@
.mx_Stickers_addLink { .mx_Stickers_addLink {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
text-decoration: underline; color: $button-link-fg-color;
} }
.mx_Stickers_hideStickers { .mx_Stickers_hideStickers {

4
res/img/e2e/normal.svg
View file

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C12 21 21 17.2 21 11.5V4.85L12 2L3 4.85V11.5C3 17.2 12 21 12 21Z" fill="#2E2F32" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1.77777 8.24003V2.71114L7.99999 0.888916L14.2222 2.71114V8.24003C14.2222 13.8934 7.99999 15.1111 7.99999 15.1111C7.99999 15.1111 1.77777 13.8934 1.77777 8.24003Z" fill="#020202"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 303 B

After

Width:  |  Height:  |  Size: 293 B

5
res/img/e2e/verified.svg
View file

@ -1,4 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C12 21 21 17.2 21 11.5V4.85L12 2L3 4.85V11.5C3 17.2 12 21 12 21Z" fill="#03B381" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.77783 2.71114V8.24003C1.77783 13.8934 8.00005 15.1111 8.00005 15.1111C8.00005 15.1111 14.2223 13.8934 14.2223 8.24003V2.71114L8.00005 0.888916L1.77783 2.71114ZM10.6139 4.90635C10.7827 4.74635 11.0494 4.75524 11.2094 4.92413C11.3516 5.08413 11.3516 5.32413 11.2272 5.48413L7.47608 10.0263L7.44941 10.0619C7.20052 10.3641 6.74719 10.4086 6.44497 10.1597C6.41812 10.1463 6.39635 10.1227 6.37581 10.1005C6.36914 10.0933 6.36261 10.0862 6.35608 10.0797L4.74719 8.23079C4.56941 8.01746 4.58719 7.69746 4.80052 7.51968C4.9783 7.35968 5.23608 7.35968 5.42274 7.48413L6.8183 8.46191L10.6139 4.90635Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2268 7.80652C17.6053 8.17175 17.6053 8.7639 17.2268 9.12913L11.4013 14.7502C11.0228 15.1154 10.4091 15.1154 10.0306 14.7502L10.0145 14.7342C10.0084 14.7286 10.0023 14.7229 9.99635 14.7171L7.32348 12.1381C6.92604 11.7546 6.92604 11.1328 7.32348 10.7493C7.72091 10.3658 8.36528 10.3658 8.76272 10.7493L10.7838 12.6995L15.8561 7.80652C16.2346 7.44129 16.8483 7.44129 17.2268 7.80652Z" fill="white"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 753 B

After

Width:  |  Height:  |  Size: 764 B

6
res/img/e2e/warning.svg
View file

@ -1,5 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C12 21 21 17.2 21 11.5V4.85L12 2L3 4.85V11.5C3 17.2 12 21 12 21Z" fill="#FF4B55" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.77783 2.71114V8.24003C1.77783 13.8934 8.00005 15.1111 8.00005 15.1111C8.00005 15.1111 14.2223 13.8934 14.2223 8.24003V2.71114L8.00005 0.888916L1.77783 2.71114ZM7.92899 3.91112C7.42232 3.94668 7.04899 4.39113 7.09343 4.89779L7.37788 8.45335C7.40455 8.76446 7.64455 9.00446 7.95566 9.03113H8.00899C8.33788 9.03113 8.61343 8.78224 8.6401 8.45335L8.92455 4.89779V4.75557C8.87121 4.2489 8.42677 3.87557 7.92899 3.91112ZM8 11.5556C8.43201 11.5556 8.78222 11.2054 8.78222 10.7733C8.78222 10.3413 8.43201 9.99112 8 9.99112C7.56799 9.99112 7.21777 10.3413 7.21777 10.7733C7.21777 11.2054 7.56799 11.5556 8 11.5556Z" fill="#FF4B55"/>
<rect x="10.8" y="5.5" width="2.5" height="8" rx="1.25" fill="white"/>
<rect x="10.8" y="15" width="2.5" height="2.5" rx="1.25" fill="white"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 446 B

After

Width:  |  Height:  |  Size: 779 B

1
res/themes/dark/css/_dark.scss
View file

@ -103,6 +103,7 @@ $roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;
$header-divider-color: $header-panel-text-primary-color; $header-divider-color: $header-panel-text-primary-color;
$composer-e2e-icon-color: $header-panel-text-primary-color;
// ******************** // ********************

11
res/themes/element-dark/css/_element-dark.scss
View file

@ -35,7 +35,7 @@ $info-plinth-fg-color: #888;
$preview-bar-bg-color: $header-panel-bg-color; $preview-bar-bg-color: $header-panel-bg-color;
$tagpanel-bg-color: rgba(44, 50, 56, 0.92); $tagpanel-bg-color: rgba(38, 39, 43, 0.82);
$inverted-bg-color: $base-color; $inverted-bg-color: $base-color;
// used by AddressSelector // used by AddressSelector
@ -93,7 +93,7 @@ $settings-subsection-fg-color: $text-secondary-color;
$topleftmenu-color: $text-primary-color; $topleftmenu-color: $text-primary-color;
$roomheader-color: $text-primary-color; $roomheader-color: $text-primary-color;
$roomheader-bg-color: rgba(21, 25, 30, 0.6); $roomheader-bg-color: rgba(21, 25, 30, 0.6);
$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
$roomheader-addroom-fg-color: $text-primary-color; $roomheader-addroom-fg-color: $text-primary-color;
$tagpanel-button-color: $header-panel-text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color;
$roomheader-button-color: $header-panel-text-primary-color; $roomheader-button-color: $header-panel-text-primary-color;
@ -104,6 +104,7 @@ $roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;
$header-divider-color: $header-panel-text-primary-color; $header-divider-color: $header-panel-text-primary-color;
$composer-e2e-icon-color: $header-panel-text-primary-color;
// ******************** // ********************
@ -114,7 +115,7 @@ $theme-button-bg-color: #e3e8f0;
$roomlist2-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist2-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist2-bg-color: rgba(33, 38, 44, 0.92); $roomlist2-bg-color: rgba(33, 38, 44, 0.90);
$roomlist2-header-color: #8E99A4; $roomlist2-header-color: #8E99A4;
$roomsublist2-divider-color: $primary-fg-color; $roomsublist2-divider-color: $primary-fg-color;
@ -204,6 +205,10 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
// Appearance tab colors // Appearance tab colors
$appearance-tab-border-color: $room-highlight-color; $appearance-tab-border-color: $room-highlight-color;
// blur amounts for left left panel (only for element theme, used in _mods.scss)
$roomlist-background-blur-amount: 60px;
$tagpanel-background-blur-amount: 30px;
// ***** Mixins! ***** // ***** Mixins! *****
@define-mixin mx_DialogButton { @define-mixin mx_DialogButton {

6
res/themes/element-dark/css/element-dark.scss
View file

@ -2,6 +2,10 @@
@import "../../element/css/_paths.scss"; @import "../../element/css/_paths.scss";
@import "../../element/css/_fonts.scss"; @import "../../element/css/_fonts.scss";
@import "../../element/css/_element.scss"; @import "../../element/css/_element.scss";
@import "../../element/css/_mods.scss"; // important this goes before _mods,
// as $tagpanel-background-blur-amount and
// $roomlist-background-blur-amount
// are overridden in _element-dark.scss
@import "_element-dark.scss"; @import "_element-dark.scss";
@import "../../element/css/_mods.scss";
@import "../../../../res/css/_components.scss"; @import "../../../../res/css/_components.scss";

19
res/themes/element/css/_element.scss
View file

@ -18,11 +18,12 @@ $accent-color: #03b381;
$accent-bg-color: rgba(3, 179, 129, 0.16); $accent-bg-color: rgba(3, 179, 129, 0.16);
$notice-primary-color: #ff4b55; $notice-primary-color: #ff4b55;
$notice-primary-bg-color: rgba(255, 75, 85, 0.16); $notice-primary-bg-color: rgba(255, 75, 85, 0.16);
$notice-secondary-color: #61708b; $primary-fg-color: #2e2f32;
$roomlist2-header-color: $primary-fg-color;
$notice-secondary-color: $roomlist2-header-color;
$header-panel-bg-color: #f3f8fd; $header-panel-bg-color: #f3f8fd;
// typical text (dark-on-white in light skin) // typical text (dark-on-white in light skin)
$primary-fg-color: #2e2f32;
$primary-bg-color: #ffffff; $primary-bg-color: #ffffff;
$muted-fg-color: #61708b; // Commonly used in headings and relevant alt text $muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
@ -65,7 +66,7 @@ $preview-bar-bg-color: #f7f7f7;
$secondary-accent-color: #f2f5f8; $secondary-accent-color: #f2f5f8;
$tertiary-accent-color: #d3efe1; $tertiary-accent-color: #d3efe1;
$tagpanel-bg-color: #dee3ead1; $tagpanel-bg-color: rgba(232, 232, 232, 0.77);
// used by RoomDirectory permissions // used by RoomDirectory permissions
$plinth-bg-color: $secondary-accent-color; $plinth-bg-color: $secondary-accent-color;
@ -158,7 +159,7 @@ $rte-group-pill-color: #aaa;
$topleftmenu-color: #212121; $topleftmenu-color: #212121;
$roomheader-color: #45474a; $roomheader-color: #45474a;
$roomheader-bg-color: $primary-bg-color; $roomheader-bg-color: $primary-bg-color;
$roomheader-addroom-bg-color: #c9ced9; $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
$roomheader-addroom-fg-color: #5c6470; $roomheader-addroom-fg-color: #5c6470;
$tagpanel-button-color: #91A1C0; $tagpanel-button-color: #91A1C0;
$roomheader-button-color: #91A1C0; $roomheader-button-color: #91A1C0;
@ -168,7 +169,7 @@ $composer-button-color: #91A1C0;
$roomtopic-color: #9e9e9e; $roomtopic-color: #9e9e9e;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;
$composer-e2e-icon-color: #c9ced6; $composer-e2e-icon-color: #91A1C0;
$header-divider-color: #91A1C0; $header-divider-color: #91A1C0;
// ******************** // ********************
@ -179,8 +180,7 @@ $header-divider-color: #91A1C0;
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
$roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons $roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist2-bg-color: #f3f8fde8; $roomlist2-bg-color: rgba(245, 245, 245, 0.90);
$roomlist2-header-color: $primary-fg-color;
$roomsublist2-divider-color: $primary-fg-color; $roomsublist2-divider-color: $primary-fg-color;
$roomtile2-preview-color: #9e9e9e; $roomtile2-preview-color: #9e9e9e;
@ -331,6 +331,11 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
// FontSlider colors // FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color; $appearance-tab-border-color: $input-darker-bg-color;
// blur amounts for left left panel (only for element theme, used in _mods.scss)
$roomlist-background-blur-amount: 40px;
$tagpanel-background-blur-amount: 20px;
// ***** Mixins! ***** // ***** Mixins! *****
@define-mixin mx_DialogButton { @define-mixin mx_DialogButton {

10
res/themes/element/css/_mods.scss
View file

@ -13,14 +13,20 @@
} }
.mx_TagPanel { .mx_TagPanel {
backdrop-filter: blur(100px); backdrop-filter: blur($tagpanel-background-blur-amount);
} }
.mx_LeftPanel2 .mx_LeftPanel2_roomListContainer { .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer {
backdrop-filter: blur(175px); backdrop-filter: blur($roomlist-background-blur-amount);
} }
} }
.mx_RoomSublist2_showNButton { .mx_RoomSublist2_showNButton {
background-color: transparent !important; background-color: transparent !important;
} }
a:hover,
a:link,
a:visited {
text-decoration: none;
}

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

@ -169,7 +169,7 @@ $composer-button-color: #91a1c0;
$roomtopic-color: #9e9e9e; $roomtopic-color: #9e9e9e;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;
$composer-e2e-icon-color: #c9ced6; $composer-e2e-icon-color: #91a1c0;
$header-divider-color: #91a1c0; $header-divider-color: #91a1c0;
// ******************** // ********************

10
src/components/views/avatars/DecoratedRoomAvatar.tsx
View file

@ -30,6 +30,8 @@ interface IProps {
tag: TagID; tag: TagID;
displayBadge?: boolean; displayBadge?: boolean;
forceCount?: boolean; forceCount?: boolean;
oobData?: object;
viewAvatarOnClick?: boolean;
} }
interface IState { interface IState {
@ -57,7 +59,13 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
} }
return <div className="mx_DecoratedRoomAvatar"> return <div className="mx_DecoratedRoomAvatar">
<RoomAvatar room={this.props.room} width={this.props.avatarSize} height={this.props.avatarSize} /> <RoomAvatar
room={this.props.room}
width={this.props.avatarSize}
height={this.props.avatarSize}
oobData={this.props.oobData}
viewAvatarOnClick={this.props.viewAvatarOnClick}
/>
<RoomTileIcon room={this.props.room} tag={this.props.tag} /> <RoomTileIcon room={this.props.room} tag={this.props.tag} />
{badge} {badge}
</div>; </div>;

34
src/components/views/messages/TextualBody.js
View file

@ -35,6 +35,7 @@ import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
import {isPermalinkHost} from "../../../utils/permalinks/Permalinks"; import {isPermalinkHost} from "../../../utils/permalinks/Permalinks";
import {toRightOf} from "../../structures/ContextMenu"; import {toRightOf} from "../../structures/ContextMenu";
import {copyPlaintext} from "../../../utils/strings"; import {copyPlaintext} from "../../../utils/strings";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
export default createReactClass({ export default createReactClass({
displayName: 'TextualBody', displayName: 'TextualBody',
@ -146,7 +147,6 @@ export default createReactClass({
nextProps.showUrlPreview !== this.props.showUrlPreview || nextProps.showUrlPreview !== this.props.showUrlPreview ||
nextProps.editState !== this.props.editState || nextProps.editState !== this.props.editState ||
nextState.links !== this.state.links || nextState.links !== this.state.links ||
nextState.editedMarkerHovered !== this.state.editedMarkerHovered ||
nextState.widgetHidden !== this.state.widgetHidden); nextState.widgetHidden !== this.state.widgetHidden);
}, },
@ -367,42 +367,24 @@ export default createReactClass({
}); });
}, },
_onMouseEnterEditedMarker: function() {
this.setState({editedMarkerHovered: true});
},
_onMouseLeaveEditedMarker: function() {
this.setState({editedMarkerHovered: false});
},
_openHistoryDialog: async function() { _openHistoryDialog: async function() {
const MessageEditHistoryDialog = sdk.getComponent("views.dialogs.MessageEditHistoryDialog"); const MessageEditHistoryDialog = sdk.getComponent("views.dialogs.MessageEditHistoryDialog");
Modal.createDialog(MessageEditHistoryDialog, {mxEvent: this.props.mxEvent}); Modal.createDialog(MessageEditHistoryDialog, {mxEvent: this.props.mxEvent});
}, },
_renderEditedMarker: function() { _renderEditedMarker: function() {
let editedTooltip; const date = this.props.mxEvent.replacingEventDate();
if (this.state.editedMarkerHovered) { const dateString = date && formatDate(date);
const Tooltip = sdk.getComponent('elements.Tooltip');
const date = this.props.mxEvent.replacingEventDate();
const dateString = date && formatDate(date);
editedTooltip = <Tooltip
tooltipClassName="mx_Tooltip_timeline"
label={_t("Edited at %(date)s. Click to view edits.", {date: dateString})}
/>;
}
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return ( return (
<AccessibleButton <AccessibleTooltipButton
key="editedMarker"
className="mx_EventTile_edited" className="mx_EventTile_edited"
onClick={this._openHistoryDialog} onClick={this._openHistoryDialog}
onMouseEnter={this._onMouseEnterEditedMarker} title={_t("Edited at %(date)s. Click to view edits.", {date: dateString})}
onMouseLeave={this._onMouseLeaveEditedMarker} tooltipClassName="mx_Tooltip_timeline"
> >
{ editedTooltip }<span>{`(${_t("edited")})`}</span> <span>{`(${_t("edited")})`}</span>
</AccessibleButton> </AccessibleTooltipButton>
); );
}, },

3
src/components/views/rooms/E2EIcon.js
View file

@ -42,11 +42,12 @@ const crossSigningRoomTitles = {
[E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"), [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
}; };
const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => { const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordered}) => {
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
const classes = classNames({ const classes = classNames({
mx_E2EIcon: true, mx_E2EIcon: true,
mx_E2EIcon_bordered: bordered,
mx_E2EIcon_warning: status === E2E_STATE.WARNING, mx_E2EIcon_warning: status === E2E_STATE.WARNING,
mx_E2EIcon_normal: status === E2E_STATE.NORMAL, mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
mx_E2EIcon_verified: status === E2E_STATE.VERIFIED, mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,

2
src/components/views/rooms/EntityTile.js
View file

@ -170,7 +170,7 @@ const EntityTile = createReactClass({
let e2eIcon; let e2eIcon;
const { e2eStatus } = this.props; const { e2eStatus } = this.props;
if (e2eStatus) { if (e2eStatus) {
e2eIcon = <E2EIcon status={e2eStatus} isUser={true} />; e2eIcon = <E2EIcon status={e2eStatus} isUser={true} bordered={true} />;
} }
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');

31
src/components/views/rooms/RoomHeader.js
View file

@ -33,7 +33,8 @@ import SettingsStore from "../../../settings/SettingsStore";
import RoomHeaderButtons from '../right_panel/RoomHeaderButtons'; import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
import DMRoomMap from '../../../utils/DMRoomMap'; import DMRoomMap from '../../../utils/DMRoomMap';
import E2EIcon from './E2EIcon'; import E2EIcon from './E2EIcon';
import InviteOnlyIcon from './InviteOnlyIcon'; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
import {DefaultTagID} from "../../../stores/room-list/models";
export default createReactClass({ export default createReactClass({
displayName: 'RoomHeader', displayName: 'RoomHeader',
@ -152,25 +153,14 @@ export default createReactClass({
}, },
render: function() { render: function() {
const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
let searchStatus = null; let searchStatus = null;
let cancelButton = null; let cancelButton = null;
let settingsButton = null; let settingsButton = null;
let pinnedEventsButton = null; let pinnedEventsButton = null;
const e2eIcon = this.props.e2eStatus ?
<E2EIcon status={this.props.e2eStatus} /> :
undefined;
const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId); const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId);
const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", ""); const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", "");
const joinRule = joinRules && joinRules.getContent().join_rule; const joinRule = joinRules && joinRules.getContent().join_rule;
let privateIcon;
// Don't show an invite-only icon for DMs. Users know they're invite-only.
if (!dmUserId && joinRule === "invite") {
privateIcon = <InviteOnlyIcon />;
}
if (this.props.onCancelClick) { if (this.props.onCancelClick) {
cancelButton = <CancelButton onClick={this.props.onCancelClick} />; cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
@ -221,15 +211,16 @@ export default createReactClass({
} }
const topicElement = const topicElement =
<div className="mx_RoomHeader_topic" ref={this._topic} title={topic} dir="auto">{ topic }</div>; <div className="mx_RoomHeader_topic" ref={this._topic} title={topic} dir="auto">{ topic }</div>;
const avatarSize = 32;
let roomAvatar; let roomAvatar;
if (this.props.room) { if (this.props.room) {
roomAvatar = (<RoomAvatar roomAvatar = <DecoratedRoomAvatar
room={this.props.room} room={this.props.room}
width={avatarSize} avatarSize={32}
height={avatarSize} tag={DefaultTagID.Untagged} // to apply room publicity badging
oobData={this.props.oobData} oobData={this.props.oobData}
viewAvatarOnClick={true} />); viewAvatarOnClick={true}
/>;
} }
if (this.props.onSettingsClick) { if (this.props.onSettingsClick) {
@ -311,11 +302,13 @@ export default createReactClass({
{ searchButton } { searchButton }
</div>; </div>;
const e2eIcon = this.props.e2eStatus ? <E2EIcon status={this.props.e2eStatus} /> : undefined;
return ( return (
<div className="mx_RoomHeader light-panel"> <div className="mx_RoomHeader light-panel">
<div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel"> <div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
<div className="mx_RoomHeader_avatar">{ roomAvatar }{ e2eIcon }</div> <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
{ privateIcon } <div className="mx_RoomHeader_e2eIcon">{ e2eIcon }</div>
{ name } { name }
{ topicElement } { topicElement }
{ cancelButton } { cancelButton }