imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add right panel toggle button to room header when in grid

Browse source
This commit is contained in:
Bruno Windels 2019-01-08 12:05:39 +01:00
parent c9272c48e0
commit 7227049c2a
3 changed files with 38 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

17
res/img/feather-icons/toggle-right-panel.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="14px" viewBox="0 0 22 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Group 2</title>
<desc>Created with Sketch.</desc>
<g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="multi-room-test-copy-8" transform="translate(-826.000000, -15.000000)" stroke="#929EB4" stroke-width="1.6">
<g id="Group-4" transform="translate(341.000000, 7.000000)">
<g id="Group-2" transform="translate(486.000000, 8.000000)">
<path d="M20,1 L2.30926389e-14,1" id="Line-10"></path>
<path d="M20,7 L3,7" id="Line-10-Copy"></path>
<path d="M20,13 L6,13" id="Line-10-Copy-2"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 995 B

7
src/components/structures/GroupGridView.js
View file

@ -96,14 +96,14 @@ export default class RoomGridView extends React.Component {
if (activeRoomId) { if (activeRoomId) {
rightPanel = ( rightPanel = (
<div className="mx_GroupGridView_rightPanel"> <div className="mx_GroupGridView_rightPanel">
<div className="mx_GroupGridView_tabs"><RoomHeaderButtons collapsedRhs={this.props.collapsedRhs} /></div> <div className="mx_GroupGridView_tabs"><RoomHeaderButtons /></div>
{ !this.props.collapsedRhs ? <RightPanel roomId={activeRoomId} /> : undefined } <RightPanel roomId={activeRoomId} />
</div> </div>
); );
} }
return (<main className="mx_GroupGridView"> return (<main className="mx_GroupGridView">
<MainSplit panel={rightPanel} disableSizing={this.props.collapsedRhs} > <MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs} >
<div className="mx_GroupGridView_rooms"> <div className="mx_GroupGridView_rooms">
{ roomStores.map((roomStore, i) => { { roomStores.map((roomStore, i) => {
if (roomStore) { if (roomStore) {
@ -118,6 +118,7 @@ export default class RoomGridView extends React.Component {
className={tileClasses} className={tileClasses}
> >
<RoomView <RoomView
collapsedRhs={this.props.collapsedRhs}
isGrid={true} isGrid={true}
roomViewStore={roomStore} roomViewStore={roomStore}
isActive={isActive} isActive={isActive}

17
src/components/views/rooms/RoomHeader.js
View file

@ -24,6 +24,7 @@ import { _t } from '../../../languageHandler';
import MatrixClientPeg from '../../../MatrixClientPeg'; import MatrixClientPeg from '../../../MatrixClientPeg';
import Modal from "../../../Modal"; import Modal from "../../../Modal";
import RateLimitedFunc from '../../../ratelimitedfunc'; import RateLimitedFunc from '../../../ratelimitedfunc';
import dis from '../../../dispatcher';
import * as linkify from 'linkifyjs'; import * as linkify from 'linkifyjs';
import linkifyElement from 'linkifyjs/element'; import linkifyElement from 'linkifyjs/element';
@ -152,6 +153,14 @@ module.exports = React.createClass({
}); });
}, },
onToggleRightPanelClick: function(ev) {
if (this.props.collapsedRhs) {
dis.dispatch({action: "show_right_panel"});
} else {
dis.dispatch({action: "hide_right_panel"});
}
},
_hasUnreadPins: function() { _hasUnreadPins: function() {
const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", ''); const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", '');
if (!currentPinEvent) return false; if (!currentPinEvent) return false;
@ -409,6 +418,13 @@ module.exports = React.createClass({
</div>; </div>;
} }
let toggleRightPanelButton;
if (this.props.isGrid) {
toggleRightPanelButton = <AccessibleButton className="mx_RoomHeader_button" onClick={this.onToggleRightPanelClick} title={_t('Toggle right panel')}>
<TintableSvg src="img/feather-icons/toggle-right-panel.svg" width="20" height="20" />
</AccessibleButton>;
}
return ( return (
<div className={"mx_RoomHeader light-panel " + (this.props.editing ? "mx_RoomHeader_editing" : "")}> <div className={"mx_RoomHeader light-panel " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
<div className="mx_RoomHeader_wrapper"> <div className="mx_RoomHeader_wrapper">
@ -420,6 +436,7 @@ module.exports = React.createClass({
{ cancelButton } { cancelButton }
{ rightRow } { rightRow }
{ !this.props.isGrid ? <RoomHeaderButtons collapsedRhs={this.props.collapsedRhs} /> : undefined } { !this.props.isGrid ? <RoomHeaderButtons collapsedRhs={this.props.collapsedRhs} /> : undefined }
{ toggleRightPanelButton }
</div> </div>
</div> </div>
); );