Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 22:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Dramatically simplify use of mx_fadable

Browse Source 
by applying it to parent elements of things that need to be faded.
This commit is contained in:
Luke Barnard 2017-10-25 15:15:49 +01:00
parent 2f8f2ce76e
commit b1f2a6c1e9
6 changed files with 21 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/structures/FilePanel.js
View File

@ -116,7 +116,6 @@ const FilePanel = React.createClass({
timelineSet={this.state.timelineSet}
showUrlPreview = {false}
tileShape="file_grid"
disabled={this.props.disabled}
empty={_t('There are no visible files in this room')}
/>
);

6
src/components/structures/MessagePanel.js
View File

@ -79,9 +79,6 @@ module.exports = React.createClass({
// callback which is called when more content is needed.
onFillRequest: React.PropTypes.func,
// whether to display as faded and uninteractable
disabled: React.PropTypes.bool,
// className for the panel
className: React.PropTypes.string.isRequired,
@ -652,10 +649,9 @@ module.exports = React.createClass({
const style = this.props.hidden ? { display: 'none' } : {};
const className = classNames(
this.props.className, "mx_fadable",
this.props.className,
{
"mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
"mx_fadable_faded": this.props.disabled,
},
);

1
src/components/structures/NotificationPanel.js
View File

@ -45,7 +45,6 @@ const NotificationPanel = React.createClass({
manageReadMarkers={false}
timelineSet={timelineSet}
showUrlPreview = {false}
opacity={this.props.opacity}
tileShape="notif"
empty={_t('You have no visible notifications')}
/>

27
src/components/structures/RoomView.js
View File

@ -1753,15 +1753,9 @@ module.exports = React.createClass({
let hideMessagePanel = false;
if (this.state.searchResults) {
const searchResultsClasses = classNames(
"mx_RoomView_messagePanel", "mx_RoomView_searchResultsPanel", "mx_fadable",
{
"mx_fadable_faded": this.props.disabled,
},
);
searchResultsPanel = (
<ScrollPanel ref="searchResultsPanel"
className={searchResultsClasses}
className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
onFillRequest={this.onSearchResultsFillRequest}
onResize={this.onSearchResultsResize}
>
@ -1794,21 +1788,14 @@ module.exports = React.createClass({
onScroll={this.onMessageListScroll}
onReadMarkerUpdated={this._updateTopUnreadMessagesBar}
showUrlPreview = {this.state.showUrlPreview}
disabled={this.props.disabled}
className="mx_RoomView_messagePanel"
/>);
let topUnreadMessagesBar = null;
if (this.state.showTopUnreadMessagesBar) {
const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
const topUnreadMessagesBarClasses = classNames(
"mx_RoomView_topUnreadMessagesBar", "mx_fadable",
{
"mx_fadable_faded": this.props.disabled,
},
);
topUnreadMessagesBar = (
<div className={topUnreadMessagesBarClasses}>
<div className="mx_RoomView_topUnreadMessagesBar">
<TopUnreadMessagesBar
onScrollUpClick={this.jumpToReadMarker}
onCloseClick={this.forgetReadMarker}
@ -1817,9 +1804,15 @@ module.exports = React.createClass({
);
}
const statusBarAreaClass = classNames(
"mx_RoomView_statusArea", "mx_fadable",
"mx_RoomView_statusArea",
{
"mx_RoomView_statusArea_expanded": isStatusAreaExpanded,
},
);
const fadableSectionClasses = classNames(
"mx_RoomView_body", "mx_fadable",
{
"mx_fadable_faded": this.props.disabled,
},
);
@ -1841,6 +1834,7 @@ module.exports = React.createClass({
onLeaveClick={(myMember && myMember.membership === "join") ? this.onLeaveClick : null}
/>
{ auxPanel }
<div className={fadableSectionClasses}>
{ topUnreadMessagesBar }
{ messagePanel }
{ searchResultsPanel }
@ -1852,6 +1846,7 @@ module.exports = React.createClass({
</div>
{ messageComposer }
</div>
</div>
);
},
});

4
src/components/structures/TimelinePanel.js
View File

@ -89,9 +89,6 @@ var TimelinePanel = React.createClass({
// callback which is called when the read-up-to mark is updated.
onReadMarkerUpdated: React.PropTypes.func,
// whether to display as faded and uninteractable
disabled: React.PropTypes.bool,
// maximum number of events to show in a timeline
timelineCap: React.PropTypes.number,
@ -1157,7 +1154,6 @@ var TimelinePanel = React.createClass({
onScroll={this.onMessageListScroll}
onFillRequest={this.onMessageListFillRequest}
onUnfillRequest={this.onMessageListUnfillRequest}
disabled={this.props.disabled}
isTwelveHour={this.state.isTwelveHour}
alwaysShowTimestamps={this.state.alwaysShowTimestamps}
className={this.props.className}

5
src/components/views/rooms/MessageComposer.js
View File

@ -371,7 +371,7 @@ export default class MessageComposer extends React.Component {
);
return (
<div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
<div className="mx_MessageComposer">
<div className="mx_MessageComposer_wrapper">
<div className="mx_MessageComposer_row">
{ controls }
@ -410,9 +410,6 @@ MessageComposer.propTypes = {
// callback when a file to upload is chosen
uploadFile: React.PropTypes.func.isRequired,
// opacity for dynamic UI fading effects
opacity: React.PropTypes.number,
// string representing the current room app drawer state
showApps: React.PropTypes.bool,
};