OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

WIP

pull/21833/head
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; border-bottom: 1px solid $primary-hairline-color;
margin-right: 20px; margin-right: 20px;
flex: 0 0 70px; flex: 0 0 52px;
} }
/** Fixme - factor this out with the main header **/ /** Fixme - factor this out with the main header **/
@ -39,7 +39,8 @@ limitations under the License.
display: flex; display: flex;
width: 100%; width: 100%;
background-color: $primary-bg-color; background-color: $primary-bg-color;
margin-left: 0px; padding: 0 9px;
align-items: center;
} }
.mx_RightPanel_headerButton { .mx_RightPanel_headerButton {
@ -50,26 +51,27 @@ limitations under the License.
padding-right: 5px; padding-right: 5px;
text-align: center; text-align: center;
position: relative; position: relative;
border-bottom: 2px solid transparent;
} }
.mx_RightPanel_headerButton object { .mx_RightPanel_headerButton object {
pointer-events: none; pointer-events: none;
padding-bottom: 3px;
} }
.mx_RightPanel_headerButton_highlight { .mx_RightPanel_headerButton_highlight {
width: 25px; border-color: $accent-color;
height: 5px;
border-radius: 5px;
background-color: $accent-color;
opacity: 0.2;
} }
.mx_RightPanel_headerButton_badge { .mx_RightPanel_headerButton_badge {
font-size: 11px; font-size: 8px;
color: $accent-color; border-radius: 8px;
color: $accent-fg-color;
background-color: $accent-color;
font-weight: bold; font-weight: bold;
padding-bottom: 2px; position: absolute;
top: -4px;
left: 20px;
padding: 2px 4px;
} }
.mx_RightPanel_collapsebutton { .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 TintableSvg = sdk.getComponent("elements.TintableSvg");
const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
const classes = classNames({
mx_RightPanel_headerButton: true,
mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
})
return <AccessibleButton return <AccessibleButton
aria-label={this.props.title} aria-label={this.props.title}
aria-expanded={this.props.isHighlighted} aria-expanded={this.props.isHighlighted}
title={this.props.title} title={this.props.title}
className="mx_RightPanel_headerButton" className={classes}
onClick={this.onClick} > onClick={this.onClick} >
<div className="mx_RightPanel_headerButton_badge"> <div className="mx_RightPanel_headerButton_badge">
{ this.props.badge ? this.props.badge : <span>&nbsp;</span> } { this.props.badge ? this.props.badge : <span>&nbsp;</span> }
</div> </div>
<TintableSvg src={this.props.iconSrc} width="25" height="25" /> <TintableSvg src={this.props.iconSrc} width="25" height="25" />
{ this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight" /> : <div /> }
</AccessibleButton>; </AccessibleButton>;
} }
} }