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

make TopRightMenu more intuitive

Browse source 
should fix https://github.com/vector-im/riot-web/issues/2827
This commit is contained in:
Matthew Hodgson 2017-02-02 18:42:03 +00:00
parent c4a590f6af
commit 4c3a723aa8
3 changed files with 23 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/structures/RightPanel.js
View file

@ -69,45 +69,21 @@ module.exports = React.createClass({
},
onMemberListButtonClick: function() {
if (this.props.collapsed || this.state.phase !== this.Phase.MemberList) {
this.setState({ phase: this.Phase.MemberList });
dis.dispatch({
action: 'show_right_panel',
});
}
else {
dis.dispatch({
action: 'hide_right_panel',
});
}
this.setState({ phase: this.Phase.MemberList });
},
onFileListButtonClick: function() {
if (this.props.collapsed || this.state.phase !== this.Phase.FilePanel) {
this.setState({ phase: this.Phase.FilePanel });
dis.dispatch({
action: 'show_right_panel',
});
}
else {
dis.dispatch({
action: 'hide_right_panel',
});
}
this.setState({ phase: this.Phase.FilePanel });
},
onNotificationListButtonClick: function() {
if (this.props.collapsed || this.state.phase !== this.Phase.NotificationPanel) {
this.setState({ phase: this.Phase.NotificationPanel });
dis.dispatch({
action: 'show_right_panel',
});
}
else {
dis.dispatch({
action: 'hide_right_panel',
});
}
this.setState({ phase: this.Phase.NotificationPanel });
},
onCollapseClick: function() {
dis.dispatch({
action: 'hide_right_panel',
});
},
onInviteButtonClick: function() {
@ -235,6 +211,9 @@ module.exports = React.createClass({
<TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
{ notificationsHighlight }
</div>
<div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" title="Hide panel" onClick={ this.onCollapseClick }>
<TintableSvg src="img/minimise.svg" width="10" height="16"/>
</div>
</div>;
}

4
src/components/structures/SearchBox.js
View file

@ -68,13 +68,13 @@ module.exports = React.createClass({
if (this.props.collapsed) {
toggleCollapse =
<div className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
<TintableSvg src="img/maximise.svg" width="10" height="16" alt="&lt;"/>
<TintableSvg src="img/maximise.svg" width="10" height="16" alt="Expand panel"/>
</div>
}
else {
toggleCollapse =
<div className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
<TintableSvg src="img/minimise.svg" width="10" height="16" alt="&lt;"/>
<TintableSvg src="img/minimise.svg" width="10" height="16" alt="Collapse panel"/>
</div>
}

11
src/skins/vector/css/vector-web/structures/_RightPanel.scss
View file

@ -34,14 +34,15 @@ limitations under the License.
.mx_RightPanel_headerButtonGroup {
margin-top: 6px;
float: left;
display: flex;
width: 100%;
background-color: $primary-bg-color;
margin-left: 0px;
}
.mx_RightPanel_headerButton {
cursor: pointer;
display: table-cell;
flex: 0;
vertical-align: top;
padding-left: 4px;
padding-right: 5px;
@ -69,6 +70,12 @@ limitations under the License.
padding-bottom: 2px;
}
.mx_RightPanel_collapsebutton {
flex: 1;
text-align: right;
margin-top: 20px;
}
.mx_RightPanel .mx_MemberList,
.mx_RightPanel .mx_MemberInfo,
.mx_RightPanel_blank {