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

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 { .mx_GroupHeader_button {
margin-left: 12px; margin-left: 5px;
margin-right: 5px;
cursor: pointer; cursor: pointer;
height: 20px;
width: 20px;
background-color: $groupheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
} }
.mx_GroupHeader_button object { .mx_GroupHeader_editButton {
// prevents clicks from being swallowed by svg in 'object' tag mask-image: url('$(res)/img/icons-settings-room.svg');
pointer-events: none; }
.mx_GroupHeader_shareButton {
mask-image: url('$(res)/img/icons-share.svg');
} }
.mx_GroupView_editable { .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; $roomheader-addroom-color: $header-panel-text-primary-color;
$tagpanel-button-color: $header-panel-text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color;
$roomheader-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; $rightpanel-button-color: $header-panel-text-primary-color;
$roomtopic-color: $text-secondary-color; $roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-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; $roomheader-addroom-color: #91A1C0;
$tagpanel-button-color: #91A1C0; $tagpanel-button-color: #91A1C0;
$roomheader-button-color: #91A1C0; $roomheader-button-color: #91A1C0;
$groupheader-button-color: #91A1C0;
$rightpanel-button-color: #91A1C0; $rightpanel-button-color: #91A1C0;
$roomtopic-color: #9fa9ba; $roomtopic-color: #9fa9ba;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;

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

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