PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Allow theming group header buttons

Browse source
This commit is contained in:
J. Ryan Stinnett 2019-02-12 17:48:27 +00:00
parent 3cba5edd6f
commit e1edd56643
4 changed files with 30 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -44,13 +44,22 @@ limitations under the License.
}
.mx_GroupHeader_button {
margin-left: 12px;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
height: 20px;
width: 20px;
background-color: $groupheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_GroupHeader_button object {
// prevents clicks from being swallowed by svg in 'object' tag
pointer-events: none;
.mx_GroupHeader_editButton {
mask-image: url('$(res)/img/icons-settings-room.svg');
}
.mx_GroupHeader_shareButton {
mask-image: url('$(res)/img/icons-share.svg');
}
.mx_GroupView_editable {

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;
$groupheader-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;
$groupheader-button-color: #91A1C0;
$rightpanel-button-color: #91A1C0;
$roomtopic-color: #9fa9ba;
$eventtile-meta-color: $roomtopic-color;

23
src/components/structures/GroupView.js
View file

@ -1157,7 +1157,6 @@ export default React.createClass({
render: function() {
const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
const Spinner = sdk.getComponent("elements.Spinner");
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
if (this.state.summaryLoading && this.state.error === null || this.state.saving) {
@ -1248,13 +1247,17 @@ export default React.createClass({
if (this.state.editing) {
rightButtons.push(
<AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
onClick={this._onSaveClick} key="_saveButton"
key="_saveButton"
onClick={this._onSaveClick}
>
{ _t('Save') }
</AccessibleButton>,
);
rightButtons.push(
<AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this._onCancelClick} key="_cancelButton">
<AccessibleButton className="mx_RoomHeader_cancelButton"
key="_cancelButton"
onClick={this._onCancelClick}
>
<img src={require("../../../res/img/cancel.svg")} className="mx_filterFlipColor"
width="18" height="18" alt={_t("Cancel")} />
</AccessibleButton>,
@ -1262,16 +1265,20 @@ export default React.createClass({
} else {
if (summary.user && summary.user.membership === 'join') {
rightButtons.push(
<AccessibleButton className="mx_GroupHeader_button"
onClick={this._onEditClick} title={_t("Community Settings")} key="_editButton"
<AccessibleButton className="mx_GroupHeader_button mx_GroupHeader_editButton"
key="_editButton"
onClick={this._onEditClick}
title={_t("Community Settings")}
>
<TintableSvg src={require("../../../res/img/icons-settings-room.svg")} width="16" height="16" />
</AccessibleButton>,
);
}
rightButtons.push(
<AccessibleButton className="mx_GroupHeader_button" onClick={this._onShareClick} title={_t('Share Community')} key="_shareButton">
<TintableSvg src={require("../../../res/img/icons-share.svg")} width="16" height="16" />
<AccessibleButton className="mx_GroupHeader_button mx_GroupHeader_shareButton"
key="_shareButton"
onClick={this._onShareClick}
title={_t('Share Community')}
>
</AccessibleButton>,
);
}