mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Allow theming right panel header buttons

Browse source
This commit is contained in:
J. Ryan Stinnett 2019-02-12 17:31:47 +00:00
parent 8652a094f3
commit 3cba5edd6f
6 changed files with 42 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,9 +25,7 @@ limitations under the License.
.mx_RightPanel_header {
order: 1;
border-bottom: 1px solid $primary-hairline-color;
flex: 0 0 52px;
}
@ -45,16 +43,35 @@ limitations under the License.
cursor: pointer;
flex: 0 0 auto;
vertical-align: top;
margin-top: 4px;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
position: relative;
border-bottom: 2px solid transparent;
height: 20px;
width: 20px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_RightPanel_headerButton object {
pointer-events: none;
.mx_RightPanel_membersButton {
mask-image: url('$(res)/img/feather-icons/user.svg');
}
.mx_RightPanel_filesButton {
mask-image: url('$(res)/img/feather-icons/files.svg');
}
.mx_RightPanel_notifsButton {
mask-image: url('$(res)/img/feather-icons/notifications.svg');
}
.mx_RightPanel_groupMembersButton {
mask-image: url('$(res)/img/icons-people.svg');
}
.mx_RightPanel_roomsButton {
mask-image: url('$(res)/img/icons-room-nobg.svg');
}
.mx_RightPanel_headerButton_highlight {

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

@ -77,6 +77,7 @@ $roomheader-color: $text-primary-color;
$roomheader-addroom-color: $header-panel-text-primary-color;
$tagpanel-button-color: $header-panel-text-primary-color;
$roomheader-button-color: $header-panel-text-primary-color;
$rightpanel-button-color: $header-panel-text-primary-color;
$roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color;

1
res/themes/dharma/css/_dharma.scss
View file

@ -147,6 +147,7 @@ $roomheader-color: #45474a;
$roomheader-addroom-color: #91A1C0;
$tagpanel-button-color: #91A1C0;
$roomheader-button-color: #91A1C0;
$rightpanel-button-color: #91A1C0;
$roomtopic-color: #9fa9ba;
$eventtile-meta-color: $roomtopic-color;

6
src/components/views/right_panel/GroupHeaderButtons.js
View file

@ -65,12 +65,14 @@ export default class GroupHeaderButtons extends HeaderButtons {
];
return [
<HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc={require("../../../../res/img/icons-people.svg")}
<HeaderButton key="groupMembersButton" name="groupMembersButton"
title={_t('Members')}
isHighlighted={this.isPhase(groupPhases)}
clickPhase={RightPanel.Phase.GroupMemberList}
analytics={['Right Panel', 'Group Member List Button', 'click']}
/>,
<HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc={require("../../../../res/img/icons-room-nobg.svg")}
<HeaderButton key="roomsButton" name="roomsButton"
title={_t('Rooms')}
isHighlighted={this.isPhase(roomPhases)}
clickPhase={RightPanel.Phase.GroupRoomList}
analytics={['Right Panel', 'Group Room List Button', 'click']}

11
src/components/views/right_panel/HeaderButton.js
View file

@ -23,7 +23,6 @@ import classNames from 'classnames';
import dis from '../../../dispatcher';
import Analytics from '../../../Analytics';
import AccessibleButton from '../elements/AccessibleButton';
import TintableSvg from '../elements/TintableSvg';
export default class HeaderButton extends React.Component {
constructor() {
@ -44,6 +43,7 @@ export default class HeaderButton extends React.Component {
const classes = classNames({
mx_RightPanel_headerButton: true,
mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
[`mx_RightPanel_${this.props.name}`]: true,
});
return <AccessibleButton
@ -51,9 +51,8 @@ export default class HeaderButton extends React.Component {
aria-expanded={this.props.isHighlighted}
title={this.props.title}
className={classes}
onClick={this.onClick} >
<TintableSvg src={this.props.iconSrc} width="20" height="20" />
</AccessibleButton>;
onClick={this.onClick}>
</AccessibleButton>;
}
}
@ -62,14 +61,14 @@ HeaderButton.propTypes = {
isHighlighted: PropTypes.bool.isRequired,
// The phase to swap to when the button is clicked
clickPhase: PropTypes.string.isRequired,
// The source file of the icon to display
iconSrc: PropTypes.string.isRequired,
// The badge to display above the icon
badge: PropTypes.node,
// The parameters to track the click event
analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
// Button name
name: PropTypes.string.isRequired,
// Button title
title: PropTypes.string.isRequired,
};

9
src/components/views/right_panel/RoomHeaderButtons.js
View file

@ -52,17 +52,20 @@ export default class RoomHeaderButtons extends HeaderButtons {
];
return [
<HeaderButton key="_membersButton" title={_t('Members')} iconSrc={require("../../../../res/img/feather-icons/user.svg")}
<HeaderButton key="membersButton" name="membersButton"
title={_t('Members')}
isHighlighted={this.isPhase(membersPhases)}
clickPhase={RightPanel.Phase.RoomMemberList}
analytics={['Right Panel', 'Member List Button', 'click']}
/>,
<HeaderButton key="_filesButton" title={_t('Files')} iconSrc={require("../../../../res/img/feather-icons/files.svg")}
<HeaderButton key="filesButton" name="filesButton"
title={_t('Files')}
isHighlighted={this.isPhase(RightPanel.Phase.FilePanel)}
clickPhase={RightPanel.Phase.FilePanel}
analytics={['Right Panel', 'File List Button', 'click']}
/>,
<HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc={require("../../../../res/img/feather-icons/notifications.svg")}
<HeaderButton key="notifsButton" name="notifsButton"
title={_t('Notifications')}
isHighlighted={this.isPhase(RightPanel.Phase.NotificationPanel)}
clickPhase={RightPanel.Phase.NotificationPanel}
analytics={['Right Panel', 'Notification List Button', 'click']}