mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-11-30 23:31:28 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/develop' into develop

Browse source
This commit is contained in:
Weblate 2018-06-14 10:47:49 +00:00
commit d2b267e32d
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
res/css/structures/_TagPanel.scss
View file

@ -17,7 +17,6 @@ limitations under the License.
.mx_TagPanel { .mx_TagPanel {
flex: 0 0 60px; flex: 0 0 60px;
background-color: $tertiary-accent-color; background-color: $tertiary-accent-color;
cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -25,7 +24,11 @@ limitations under the License.
justify-content: space-between; justify-content: space-between;
} }
.mx_TagPanel .mx_TagPanel_clearButton { .mx_TagPanel_items_selected {
cursor: pointer;
}
.mx_TagPanel .mx_TagPanel_clearButton_container {
/* Constant height within flex mx_TagPanel */ /* Constant height within flex mx_TagPanel */
height: 70px; height: 70px;
width: 60px; width: 60px;

17
src/components/structures/TagPanel.js
View file

@ -1,5 +1,5 @@
/* /*
Copyright 2017 New Vector Ltd. Copyright 2017, 2018 New Vector Ltd.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -26,6 +26,7 @@ import dis from '../../dispatcher';
import { _t } from '../../languageHandler'; import { _t } from '../../languageHandler';
import { Droppable } from 'react-beautiful-dnd'; import { Droppable } from 'react-beautiful-dnd';
import classNames from 'classnames';
const TagPanel = React.createClass({ const TagPanel = React.createClass({
displayName: 'TagPanel', displayName: 'TagPanel',
@ -116,8 +117,10 @@ const TagPanel = React.createClass({
/>; />;
}); });
const itemsSelected = this.state.selectedTags.length > 0;
let clearButton; let clearButton;
if (this.state.selectedTags.length > 0) { if (itemsSelected) {
clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}> clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
<TintableSvg src="img/icons-close.svg" width="24" height="24" <TintableSvg src="img/icons-close.svg" width="24" height="24"
alt={_t("Clear filter")} alt={_t("Clear filter")}
@ -126,8 +129,14 @@ const TagPanel = React.createClass({
</AccessibleButton>; </AccessibleButton>;
} }
return <div className="mx_TagPanel"> const classes = classNames('mx_TagPanel', {
{ clearButton } mx_TagPanel_items_selected: itemsSelected,
});
return <div className={classes}>
<div className="mx_TagPanel_clearButton_container">
{ clearButton }
</div>
<div className="mx_TagPanel_divider" /> <div className="mx_TagPanel_divider" />
<GeminiScrollbarWrapper <GeminiScrollbarWrapper
className="mx_TagPanel_scroller" className="mx_TagPanel_scroller"