mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-04 22:00:42 +03:00
173669b375
Fixes https://github.com/vector-im/riot-web/issues/3383 This achieves the result by counting up the number of highlights across all rooms and setting that as the badge above the icon. If there are no highlights, nothing is displayed. The red highlight on the bell is done by abusing how the Tinter works: because it has access to the properties of the SVG that we'd need to override it, we give it a collection of colors it should use instead of the theme/tint it is trying to apply. This results in the Tinter using our warning color instead of whatever it was going to apply. The RightPanel now listens for events to update the count too, otherwise when the user receives a ping they'd have to switch rooms to see the change.
137 lines
2.8 KiB
SCSS
137 lines
2.8 KiB
SCSS
/*
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
|
|
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_RightPanel {
|
|
position: relative;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mx_RightPanel_header {
|
|
order: 1;
|
|
|
|
border-bottom: 1px solid $primary-hairline-color;
|
|
margin-right: 20px;
|
|
|
|
flex: 0 0 70px;
|
|
}
|
|
|
|
/** Fixme - factor this out with the main header **/
|
|
|
|
.mx_RightPanel_headerButtonGroup {
|
|
margin-top: 6px;
|
|
display: flex;
|
|
width: 100%;
|
|
background-color: $primary-bg-color;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.mx_RightPanel_headerButton {
|
|
cursor: pointer;
|
|
flex: 0 0 auto;
|
|
vertical-align: top;
|
|
padding-left: 4px;
|
|
padding-right: 5px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.mx_RightPanel_headerButton object {
|
|
pointer-events: none;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.mx_RightPanel_headerButton_badgeHighlight .mx_RightPanel_headerButton_badge {
|
|
color: $warning-color;
|
|
}
|
|
|
|
.mx_RightPanel_headerButton_highlight {
|
|
width: 25px;
|
|
height: 5px;
|
|
border-radius: 5px;
|
|
background-color: $accent-color;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.mx_RightPanel_headerButton_badge {
|
|
font-size: 11px;
|
|
color: $accent-color;
|
|
font-weight: bold;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.mx_RightPanel_collapsebutton {
|
|
flex: 1;
|
|
text-align: right;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.mx_RightPanel .mx_MemberList,
|
|
.mx_RightPanel .mx_MemberInfo,
|
|
.mx_RightPanel .mx_GroupRoomList,
|
|
.mx_RightPanel_blank {
|
|
order: 2;
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.mx_RightPanel .mx_RoomView_messagePanelSpinner {
|
|
order: 2;
|
|
margin: auto;
|
|
}
|
|
|
|
.mx_RightPanel_footer {
|
|
order: 3;
|
|
|
|
border-top: 1px solid $primary-hairline-color;
|
|
margin-right: 20px;
|
|
|
|
flex: 0 0 60px;
|
|
}
|
|
|
|
.mx_RightPanel_footer .mx_RightPanel_invite {
|
|
font-size: 14px;
|
|
color: $primary-fg-color;
|
|
padding-top: 13px;
|
|
padding-left: 5px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
|
|
display: none;
|
|
}
|
|
|
|
.mx_RightPanel_invite .mx_RightPanel_icon object {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mx_RightPanel_invite .mx_RightPanel_message {
|
|
padding-left: 10px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.mx_MatrixChat_useCompactLayout {
|
|
.mx_RightPanel_footer {
|
|
flex: 0 0 50px;
|
|
}
|
|
|
|
.mx_RightPanel_footer .mx_RightPanel_invite {
|
|
line-height: 25px;
|
|
padding-top: 8px;
|
|
}
|
|
}
|