Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into matthew/notif-panel

Browse Source
This commit is contained in:
Matthew Hodgson 2016-09-11 02:37:30 +01:00
commit 89f8ff4988
12 changed files with 98 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/component-index.js
View File

@ -48,8 +48,7 @@ module.exports.components['views.login.VectorLoginFooter'] = require('./componen
module.exports.components['views.login.VectorLoginHeader'] = require('./components/views/login/VectorLoginHeader');
module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator');
module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp');
module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile');
module.exports.components['views.rooms.RoomDNDView'] = require('./components/views/rooms/RoomDNDView');
module.exports.components['views.rooms.DNDRoomTile'] = require('./components/views/rooms/DNDRoomTile');
module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget');
module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip');
module.exports.components['views.rooms.SearchBar'] = require('./components/views/rooms/SearchBar');

25
src/components/structures/BottomLeftMenu.js
View File

@ -30,6 +30,7 @@ module.exports = React.createClass({
getInitialState: function() {
return({
directoryHover : false,
roomsHover : false,
peopleHover : false,
settingsHover : false,
@ -37,8 +38,20 @@ module.exports = React.createClass({
},
// Room events
onDirectoryClick: function() {
dis.dispatch({ action: 'view_room_directory' });
},
onDirectoryMouseEnter: function() {
this.setState({ directoryHover: true });
},
onDirectoryMouseLeave: function() {
this.setState({ directoryHover: false });
},
onRoomsClick: function() {
dis.dispatch({action: 'view_create_room'});
dis.dispatch({ action: 'view_create_room' });
},
onRoomsMouseEnter: function() {
@ -51,7 +64,7 @@ module.exports = React.createClass({
// People events
onPeopleClick: function() {
dis.dispatch({action: 'view_create_chat'});
dis.dispatch({ action: 'view_create_chat' });
},
onPeopleMouseEnter: function() {
@ -64,7 +77,7 @@ module.exports = React.createClass({
// Settings events
onSettingsClick: function() {
dis.dispatch({action: 'view_user_settings'});
dis.dispatch({ action: 'view_user_settings' });
},
onSettingsMouseEnter: function() {
@ -88,9 +101,13 @@ module.exports = React.createClass({
return (
<div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options">
<div className="mx_BottomLeftMenu_directory" onClick={ this.onDirectoryClick } onMouseEnter={ this.onDirectoryMouseEnter } onMouseLeave={ this.onDirectoryMouseLeave } >
<TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
{ this.getLabel("Room directory", this.state.directoryHover) }
</div>
<div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
<TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
{ this.getLabel("Rooms", this.state.roomsHover) }
{ this.getLabel("Create new room", this.state.roomsHover) }
</div>
<div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
<TintableSvg src="img/icons-people.svg" width="25" height="25" />

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

@ -368,12 +368,12 @@ var RoomSubList = React.createClass({
makeRoomTiles: function() {
var self = this;
var RoomTile = sdk.getComponent("rooms.RoomTile");
var DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
return this.state.sortedList.map(function(room) {
var selected = room.roomId == self.props.selectedRoom;
// XXX: is it evil to pass in self as a prop to RoomTile?
return (
<RoomTile
<DNDRoomTile
room={ room }
roomSubList={ self }
key={ room.roomId }

57
src/components/views/rooms/BottomLeftMenuTile.js
View File

@ -1,57 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
'use strict';
var React = require('react');
var sdk = require('matrix-react-sdk')
module.exports = React.createClass({
displayName: 'BottomLeftMenuTile',
getInitialState: function() {
return( { hover : false });
},
onMouseEnter: function() {
this.setState( { hover : true });
},
onMouseLeave: function() {
this.setState( { hover : false });
},
render: function() {
var label;
if (!this.props.collapsed) {
label = <div className="mx_RoomTile_name">{ this.props.label }</div>;
}
else if (this.state.hover) {
var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
label = <RoomTooltip bottom={ true } label={ this.props.label }/>;
}
return (
<div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
<div className="mx_RoomTile_avatar">
<img src={ this.props.img } width="26" height="26"/>
</div>
{ label }
</div>
);
}
});

8
src/components/views/rooms/RoomDNDView.js → src/components/views/rooms/DNDRoomTile.js
View File

@ -25,6 +25,13 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var sdk = require('matrix-react-sdk');
var RoomTile = require('matrix-react-sdk/lib/components/views/rooms/RoomTile');
/**
* Defines a new Component, DNDRoomTile that wraps RoomTile, making it draggable.
* Requires extra props:
* roomSubList: React.PropTypes.object.isRequired,
* refreshSubList: React.PropTypes.func.isRequired,
*/
/**
* Specifies the drag source contract.
* Only `beginDrag` function is required.
@ -202,4 +209,3 @@ DragSource('RoomTile', roomTileSource, function(connect, monitor) {
};
})(RoomTile));
module.exports.replaces = 'RoomTile';

2
src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
View File

@ -48,7 +48,7 @@ limitations under the License.
.mx_ChatInviteDialog_queryList {
position: absolute;
background-color: #fff;
width: 470px;
width: 485px;
max-height: 116px;
overflow-y: scroll;
border-radius: 3px;

10
src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
View File

@ -73,3 +73,13 @@ limitations under the License.
margin-left: 8px;
line-height: 23px;
}
.mx_MemberInfo_createRoom {
cursor: pointer;
}
.mx_MemberInfo_createRoom_label {
width: 160px ! important;
cursor: pointer;
}

2
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
View File

@ -35,5 +35,5 @@ limitations under the License.
/* Make sure the scrollbar is above the sticky headers from RoomList */
.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
z-index: 5;
z-index: 6;
}

21
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
View File

@ -36,6 +36,14 @@ limitations under the License.
height: 24px;
}
.mx_RightPanel .mx_RoomTile_nameContainer {
width: 170px;
}
.mx_RoomTile_avatar_container {
position: relative;
}
.mx_RoomTile_avatar {
display: inline-block;
padding-top: 5px;
@ -47,6 +55,14 @@ limitations under the License.
vertical-align: middle;
}
.mx_RoomTile_dm {
display: block;
position: absolute;
bottom: 0;
right: -5px;
z-index: 2;
}
.mx_RoomTile:hover .mx_RoomTile_avatar_container:before,
.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before {
display: block;
@ -55,7 +71,6 @@ limitations under the License.
border-radius: 40px;
background-image: url("img/icons_ellipsis.svg");
background-size: 25px;
left: 15px;
width: 24px;
height: 24px;
z-index: 4;
@ -68,11 +83,11 @@ limitations under the License.
content: "";
border-radius: 40px;
background: #4A4A4A;
top: 5px;
bottom: 0;
width: 24px;
height: 24px;
opacity: 0.6;
z-index: 2;
z-index: 1;
}
.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container:before {

16
src/skins/vector/css/vector-web/structures/LeftPanel.css
View File

@ -49,11 +49,11 @@ limitations under the License.
flex: 1 1 0;
overflow-y: auto;
z-index: 5;
z-index: 6;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
flex: 0 0 120px;
flex: 0 0 160px;
}
.mx_LeftPanel .mx_BottomLeftMenu {
@ -79,6 +79,7 @@ limitations under the License.
pointer-events: none;
}
.mx_LeftPanel .mx_BottomLeftMenu_directory,
.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
.mx_LeftPanel .mx_BottomLeftMenu_people,
.mx_LeftPanel .mx_BottomLeftMenu_settings {
@ -86,6 +87,7 @@ limitations under the License.
cursor: pointer;
}
.collapsed .mx_BottomLeftMenu_directory,
.collapsed .mx_BottomLeftMenu_createRoom,
.collapsed .mx_BottomLeftMenu_people,
.collapsed .mx_BottomLeftMenu_settings {
@ -94,8 +96,16 @@ limitations under the License.
padding-bottom: 3px ! important;
}
.mx_LeftPanel .mx_BottomLeftMenu_directory {
margin-right: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_createRoom {
margin-right: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_people {
margin-left: 10px;
margin-right: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_settings {

2
src/skins/vector/css/vector-web/structures/RoomSubList.css
View File

@ -46,7 +46,7 @@ limitations under the License.
.mx_RoomSubList_label.mx_RoomSubList_fixed {
position: fixed;
top: 0;
z-index: 4;
z-index: 5;
/* pointer-events: none; */
}

23
src/skins/vector/img/icon_person.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="11px" height="13px" viewBox="0 0 11 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>815EF7DE-169A-4322-AE2A-B65CBE91DCED</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Left-menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Left-menu-option-B" transform="translate(-33.000000, -223.000000)" fill="#FFFFFF" stroke="#76CFA6">
<g id="Left-panel">
<g id="Room-list" transform="translate(0.000000, 69.000000)">
<g id="Group-3" transform="translate(16.000000, 144.000000)">
<g id="icon_person" transform="translate(18.000000, 11.000000)">
<g>
<path d="M5.34291667,5.8555 C5.51425,5.86608333 5.68525,5.88091667 5.85566667,5.90108333 C5.987,5.91666667 6.118,5.93533333 6.24825,5.95783333 C6.96516667,6.08175 7.69391667,6.32633333 8.23175,6.83591667 C8.32116667,6.92058333 8.40433333,7.01166667 8.48041667,7.1085 C8.59608333,7.25566667 8.69475,7.41583333 8.77633333,7.58425 C8.92233333,7.8855 9.0125,8.21083333 9.06841667,8.54008333 C9.13758333,8.9475 9.15758333,9.36266667 9.1635,9.77533333 C9.1685,10.1279167 9.167,10.4805833 9.16725,10.8331667 L8.33333344e-05,10.8331667 C0.000250000001,10.4805833 -0.00125,10.1279167 0.00375,9.77533333 C0.00916666667,9.39616667 0.0268333333,9.01533333 0.083,8.63991667 C0.134833333,8.29291667 0.221666667,7.94891667 0.369333333,7.62966667 C0.44775,7.46033333 0.543,7.29875 0.65525,7.14958333 C0.729,7.05166667 0.809833333,6.95925 0.897,6.87308333 C1.41916667,6.35725 2.13533333,6.10216667 2.84408333,5.97125 C2.97233333,5.94758333 3.10125,5.92775 3.23058333,5.91108333 C3.39841667,5.8895 3.56683333,5.87333333 3.73558333,5.86133333 C3.95191667,5.846 4.16858333,5.8385 4.38533333,5.83458333 C4.48475,5.8335 4.58408333,5.83316667 4.6835,5.8335 C4.9035,5.83583333 5.12333333,5.84183333 5.34291667,5.8555 Z" id="Fill-1" stroke-linejoin="round"></path>
<path d="M4.99558333,0.031 C5.28133333,0.0745833333 5.55966667,0.1645 5.81691667,0.29625 C6.32075,0.554333333 6.7375,0.971 6.9955,1.47483333 C7.11691667,1.712 7.20291667,1.967 7.24975,2.22916667 C7.30216667,2.52283333 7.30583333,2.82525 7.26083333,3.12008333 C7.2205,3.38416667 7.14066667,3.642 7.02475,3.88266667 C6.88325,4.17633333 6.68833333,4.44375 6.45233333,4.66866667 C6.21591667,4.89408333 5.93891667,5.07633333 5.638,5.20358333 C5.30525,5.34433333 4.94491667,5.4165 4.58366667,5.4165 C4.22233333,5.4165 3.86208333,5.34433333 3.52925,5.20358333 C3.22833333,5.07633333 2.95133333,4.89408333 2.71491667,4.66866667 C2.479,4.44375 2.284,4.17633333 2.1425,3.88266667 C2.02658333,3.642 1.94675,3.38416667 1.90641667,3.12008333 C1.86141667,2.82525 1.86508333,2.52291667 1.91758333,2.22925 C1.96433333,1.967 2.05033333,1.712 2.17175,1.47483333 C2.42975,0.971 2.8465,0.554333333 3.35033333,0.29625 C3.60758333,0.1645 3.88591667,0.0745833333 4.17166667,0.031 C4.28525,0.0136666667 4.39916667,0.005 4.51391667,0.000666666667 C4.58391667,-0.000166666667 4.58366667,-0.000166666667 4.65333333,0.000666666667 C4.76808333,0.005 4.882,0.0136666667 4.99558333,0.031 Z" id="Fill-2"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB