Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

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 {