Skip to content

Commit f299572

Browse files
ara4nara4n
authored
Merge pull request element-hq#2113 from vector-im/matthew/notif-panel
FilePanel and NotificationPanel support
2 parents e6c4273 + 89f8ff4 commit f299572

File tree

10 files changed

+347
-22
lines changed

10 files changed

+347
-22
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-break: break-all;
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-break: break-all;
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: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
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+
}
48+
49+
.mx_NotificationPanel .mx_EventTile_roomName a {
50+
color: #4a4a4a;
51+
}
52+
53+
.mx_NotificationPanel .mx_EventTile_avatar {
54+
top: 8px;
55+
left: 0px;
56+
}
57+
58+
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
59+
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
60+
color: #000;
61+
opacity: 0.3;
62+
font-size: 12px;
63+
display: inline;
64+
padding-left: 0px;
65+
}
66+
67+
.mx_NotificationPanel .mx_EventTile_senderDetails {
68+
padding-left: 32px;
69+
padding-top: 8px;
70+
position: relative;
71+
}
72+
73+
.mx_NotificationPanel .mx_EventTile_roomName a,
74+
.mx_NotificationPanel .mx_EventTile_senderDetails a {
75+
text-decoration: none ! important;
76+
}
77+
78+
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
79+
visibility: visible;
80+
position: initial;
81+
display: inline;
82+
}
83+
84+
.mx_NotificationPanel .mx_EventTile_line {
85+
margin-right: 0px;
86+
padding-left: 32px;
87+
padding-top: 0px;
88+
padding-bottom: 0px;
89+
padding-right: 0px;
90+
}
91+
92+
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
93+
background-color: #fff;
94+
}
95+
96+
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
97+
padding-left: 0px;
98+
}
99+
100+
.mx_NotificationPanel .mx_EventTile_content {
101+
margin-right: 0px;
102+
}

‎src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ limitations under the License.
3030

3131
.mx_MImageBody_download {
3232
color: #76cfa6;
33-
cursor: pointer;
3433
}
3534

3635
.mx_MImageBody_download a {

‎src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,14 @@ limitations under the License.
8888
height: 37px;
8989
border: 1px solid #979797;
9090
margin-right: 13px;
91+
cursor: pointer;
9192
}
9293

9394
.mx_RoomSettings .mx_RoomSettings_roomColor_selected {
9495
position: absolute;
9596
left: 10px;
9697
top: 4px;
98+
cursor: default ! important;
9799
}
98100

99101
.mx_RoomSettings .mx_RoomSettings_roomColorPrimary {

0 commit comments

Comments
 (0)