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

33
src/components/structures/RightPanel.js
View File

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

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

@ -68,13 +68,13 @@ module.exports = React.createClass({
if (this.props.collapsed) { if (this.props.collapsed) {
toggleCollapse = toggleCollapse =
<div className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }> <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> </div>
} }
else { else {
toggleCollapse = toggleCollapse =
<div className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }> <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> </div>
} }

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

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