Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Bruno Windels 2018-10-23 21:38:04 +02:00
parent f95b50f6a9
commit 56ed38ad13
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
res/css/structures/_RightPanel.scss
View File

@ -29,7 +29,7 @@ limitations under the License.
border-bottom: 1px solid $primary-hairline-color;
margin-right: 20px;
flex: 0 0 70px;
flex: 0 0 52px;
}
/** Fixme - factor this out with the main header **/
@ -39,7 +39,8 @@ limitations under the License.
display: flex;
width: 100%;
background-color: $primary-bg-color;
margin-left: 0px;
padding: 0 9px;
align-items: center;
}
.mx_RightPanel_headerButton {
@ -50,26 +51,27 @@ limitations under the License.
padding-right: 5px;
text-align: center;
position: relative;
border-bottom: 2px solid transparent;
}
.mx_RightPanel_headerButton object {
pointer-events: none;
padding-bottom: 3px;
}
.mx_RightPanel_headerButton_highlight {
width: 25px;
height: 5px;
border-radius: 5px;
background-color: $accent-color;
opacity: 0.2;
border-color: $accent-color;
}
.mx_RightPanel_headerButton_badge {
font-size: 11px;
color: $accent-color;
font-size: 8px;
border-radius: 8px;
color: $accent-fg-color;
background-color: $accent-color;
font-weight: bold;
padding-bottom: 2px;
position: absolute;
top: -4px;
left: 20px;
padding: 2px 4px;
}
.mx_RightPanel_collapsebutton {

10
src/components/structures/RightPanel.js
View File

@ -49,19 +49,21 @@ class HeaderButton extends React.Component {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
const classes = classNames({
mx_RightPanel_headerButton: true,
mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
})
return <AccessibleButton
aria-label={this.props.title}
aria-expanded={this.props.isHighlighted}
title={this.props.title}
className="mx_RightPanel_headerButton"
className={classes}
onClick={this.onClick} >
<div className="mx_RightPanel_headerButton_badge">
{ this.props.badge ? this.props.badge : <span>&nbsp;</span> }
</div>
<TintableSvg src={this.props.iconSrc} width="25" height="25" />
{ this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight" /> : <div /> }
</AccessibleButton>;
}
}