Skip to content

Commit 81bbc05

Browse files
aviraldgaviraldg
committed
Merge branch 'develop' of github.com:vector-im/vector-web into develop
2 parents d65b791 + 562c3b0 commit 81bbc05

File tree

18 files changed

+494
-32
lines changed

18 files changed

+494
-32
lines changed

‎src/components/structures/RightPanel.js‎

Lines changed: 60 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,16 @@ var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
2626
module.exports = React.createClass({
2727
displayName: 'RightPanel',
2828

29+
propTypes: {
30+
userId: React.PropTypes.string, // if showing an orphaned MemberInfo page, this is set
31+
roomId: React.PropTypes.string, // if showing panels for a given room, this is set
32+
collapsed: React.PropTypes.bool,
33+
},
34+
2935
Phase : {
3036
MemberList: 'MemberList',
31-
FileList: 'FileList',
37+
FilePanel: 'FilePanel',
38+
NotificationPanel: 'NotificationPanel',
3239
MemberInfo: 'MemberInfo',
3340
},
3441

@@ -61,7 +68,7 @@ module.exports = React.createClass({
6168
},
6269

6370
onMemberListButtonClick: function() {
64-
if (this.props.collapsed) {
71+
if (this.props.collapsed || this.state.phase !== this.Phase.MemberList) {
6572
this.setState({ phase: this.Phase.MemberList });
6673
dis.dispatch({
6774
action: 'show_right_panel',
@@ -74,6 +81,34 @@ module.exports = React.createClass({
7481
}
7582
},
7683

84+
onFileListButtonClick: function() {
85+
if (this.props.collapsed || this.state.phase !== this.Phase.FilePanel) {
86+
this.setState({ phase: this.Phase.FilePanel });
87+
dis.dispatch({
88+
action: 'show_right_panel',
89+
});
90+
}
91+
else {
92+
dis.dispatch({
93+
action: 'hide_right_panel',
94+
});
95+
}
96+
},
97+
98+
onNotificationListButtonClick: function() {
99+
if (this.props.collapsed || this.state.phase !== this.Phase.NotificationPanel) {
100+
this.setState({ phase: this.Phase.NotificationPanel });
101+
dis.dispatch({
102+
action: 'show_right_panel',
103+
});
104+
}
105+
else {
106+
dis.dispatch({
107+
action: 'hide_right_panel',
108+
});
109+
}
110+
},
111+
77112
onRoomStateMember: function(ev, state, member) {
78113
// redraw the badge on the membership list
79114
if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
@@ -118,42 +153,54 @@ module.exports = React.createClass({
118153

119154
render: function() {
120155
var MemberList = sdk.getComponent('rooms.MemberList');
156+
var NotificationPanel = sdk.getComponent('structures.NotificationPanel');
157+
var FilePanel = sdk.getComponent('structures.FilePanel');
121158
var TintableSvg = sdk.getComponent("elements.TintableSvg");
122159
var buttonGroup;
123160
var panel;
124161

125162
var filesHighlight;
126163
var membersHighlight;
164+
var notificationsHighlight;
127165
if (!this.props.collapsed) {
128166
if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) {
129167
membersHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
130168
}
131-
else if (this.state.phase == this.Phase.FileList) {
169+
else if (this.state.phase == this.Phase.FilePanel) {
132170
filesHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
133171
}
172+
else if (this.state.phase == this.Phase.NotificationPanel) {
173+
notificationsHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
174+
}
134175
}
135176

136177
var membersBadge;
137178
if ((this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) && this.props.roomId) {
138179
var cli = MatrixClientPeg.get();
139180
var room = cli.getRoom(this.props.roomId);
140181
if (room) {
141-
membersBadge = <div className="mx_RightPanel_headerButton_badge">{ room.getJoinedMembers().length }</div>;
182+
membersBadge = room.getJoinedMembers().length;
142183
}
143184
}
144185

145186
if (this.props.roomId) {
146187
buttonGroup =
147188
<div className="mx_RightPanel_headerButtonGroup">
148189
<div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
149-
{ membersBadge }
190+
<div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
150191
<TintableSvg src="img/icons-people.svg" width="25" height="25"/>
151192
{ membersHighlight }
152193
</div>
153-
<div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">
154-
<TintableSvg src="img/files.svg" width="17" height="22"/>
194+
<div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files" onClick={ this.onFileListButtonClick }>
195+
<div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
196+
<TintableSvg src="img/icons-files.svg" width="25" height="25"/>
155197
{ filesHighlight }
156198
</div>
199+
<div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton" title="Notifications" onClick={ this.onNotificationListButtonClick }>
200+
<div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
201+
<TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
202+
{ notificationsHighlight }
203+
</div>
157204
</div>;
158205
}
159206

@@ -165,6 +212,12 @@ module.exports = React.createClass({
165212
var MemberInfo = sdk.getComponent('rooms.MemberInfo');
166213
panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.props.userId} />
167214
}
215+
else if (this.state.phase == this.Phase.NotificationPanel) {
216+
panel = <NotificationPanel />
217+
}
218+
else if (this.state.phase == this.Phase.FilePanel) {
219+
panel = <FilePanel roomId={this.props.roomId} />
220+
}
168221
}
169222

170223
if (!panel) {

‎src/skins/vector/css/hide.css‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/*
2+
Copyright 2016 OpenMarket Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_FilePanel {
18+
-webkit-box-ordinal-group: 2;
19+
-moz-box-ordinal-group: 2;
20+
-ms-flex-order: 2;
21+
-webkit-order: 2;
22+
order: 2;
23+
24+
-webkit-flex: 1 1 0;
25+
flex: 1 1 0;
26+
27+
width: 100%;
28+
29+
overflow-y: auto;
30+
}
31+
32+
.mx_FilePanel .mx_RoomView_messageListWrapper {
33+
margin-right: 20px;
34+
}
35+
36+
.mx_FilePanel .mx_RoomView_MessageList h2 {
37+
display: none;
38+
}
39+
40+
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
41+
we should make EventTile a base CSS class and customise it specifically
42+
for usage in {Message,File,Notification}Panel. */
43+
44+
.mx_FilePanel .mx_EventTile_avatar {
45+
display: none;
46+
}
47+
48+
/* Overrides for the attachment body tiles */
49+
50+
.mx_FilePanel .mx_EventTile .mx_MImageBody {
51+
margin-right: 0px;
52+
}
53+
54+
.mx_FilePanel .mx_EventTile .mx_MImageBody_download {
55+
display: flex;
56+
font-size: 14px;
57+
color: #acacac;
58+
}
59+
60+
.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
61+
flex: 1 1 auto;
62+
color: #747474;
63+
word-wrap: break-word;
64+
}
65+
66+
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
67+
flex: 1 0 0;
68+
font-size: 11px;
69+
text-align: right;
70+
white-space: nowrap;
71+
}
72+
73+
/* Overides for the sender details line */
74+
75+
.mx_FilePanel .mx_EventTile_senderDetails {
76+
display: flex;
77+
margin-top: -2px;
78+
}
79+
80+
.mx_FilePanel .mx_EventTile_senderDetailsLink {
81+
text-decoration: none;
82+
}
83+
84+
.mx_FilePanel .mx_EventTile .mx_SenderProfile {
85+
flex: 1 1 auto;
86+
line-height: initial;
87+
padding: 0px;
88+
font-size: 11px;
89+
opacity: 1.0;
90+
color: #acacac;
91+
word-wrap: break-word;
92+
}
93+
94+
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
95+
flex: 1 0 0;
96+
text-align: right;
97+
visibility: visible;
98+
position: initial;
99+
font-size: 11px;
100+
opacity: 1.0;
101+
color: #acacac;
102+
}
103+
104+
/* Overrides for the wrappers around the body tile */
105+
106+
.mx_FilePanel .mx_EventTile_line {
107+
margin-right: 0px;
108+
padding-left: 0px;
109+
}
110+
111+
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
112+
background-color: #fff;
113+
}
114+
115+
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
116+
padding-left: 0px;
117+
}
118+

‎src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/*
2+
Copyright 2015, 2016 OpenMarket Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_NotificationPanel {
18+
-webkit-box-ordinal-group: 2;
19+
-moz-box-ordinal-group: 2;
20+
-ms-flex-order: 2;
21+
-webkit-order: 2;
22+
order: 2;
23+
24+
-webkit-flex: 1 1 0;
25+
flex: 1 1 0;
26+
27+
width: 100%;
28+
29+
overflow-y: auto;
30+
}
31+
32+
.mx_NotificationPanel .mx_RoomView_messageListWrapper {
33+
margin-right: 20px;
34+
}
35+
36+
.mx_NotificationPanel .mx_RoomView_MessageList h2 {
37+
margin-left: 0px;
38+
}
39+
40+
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
41+
we should make EventTile a base CSS class and customise it specifically
42+
for usage in {Message,File,Notification}Panel. */
43+
44+
.mx_NotificationPanel .mx_EventTile_roomName {
45+
font-weight: bold;
46+
font-size: 14px;
47+
word-wrap: break-word;
48+
}
49+
50+
.mx_NotificationPanel .mx_EventTile_roomName a {
51+
color: #4a4a4a;
52+
}
53+
54+
.mx_NotificationPanel .mx_EventTile_avatar {
55+
top: 8px;
56+
left: 0px;
57+
}
58+
59+
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
60+
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
61+
color: #000;
62+
opacity: 0.3;
63+
font-size: 12px;
64+
display: inline;
65+
padding-left: 0px;
66+
word-wrap: break-word;
67+
}
68+
69+
.mx_NotificationPanel .mx_EventTile_senderDetails {
70+
padding-left: 32px;
71+
padding-top: 8px;
72+
position: relative;
73+
}
74+
75+
.mx_NotificationPanel .mx_EventTile_roomName a,
76+
.mx_NotificationPanel .mx_EventTile_senderDetails a {
77+
text-decoration: none ! important;
78+
}
79+
80+
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
81+
visibility: visible;
82+
position: initial;
83+
display: inline;
84+
}
85+
86+
.mx_NotificationPanel .mx_EventTile_line {
87+
margin-right: 0px;
88+
padding-left: 32px;
89+
padding-top: 0px;
90+
padding-bottom: 0px;
91+
padding-right: 0px;
92+
}
93+
94+
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
95+
background-color: #fff;
96+
}
97+
98+
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
99+
padding-left: 0px;
100+
}
101+
102+
.mx_NotificationPanel .mx_EventTile_content {
103+
margin-right: 0px;
104+
}

0 commit comments

Comments
 (0)