PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

update to new bottomleftmenu. update header and composer heights

Browse source
This commit is contained in:
Matthew Hodgson 2016-04-14 21:43:49 +01:00
parent 96c4a24d3d
commit 6bc4c87ce4
9 changed files with 46 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/structures/BottomLeftMenu.js
View file

@ -47,12 +47,19 @@ module.exports = React.createClass({
render: function() {
var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile');
var TintableSvg = sdk.getComponent('elements.TintableSvg');
return (
<div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options">
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Start chat" onClick={ this.onCreateRoomClick }/>
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.svg" label="Directory" onClick={ this.onRoomDirectoryClick }/>
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.svg" label="Settings" onClick={ this.onSettingsClick }/>
<div className="mx_BottomLeftMenu_createRoom" title="Start chat" onClick={ this.onCreateRoomClick }>
<TintableSvg src="img/icons-create-room.svg" width="24" height="24"/>
</div>
<div className="mx_BottomLeftMenu_directory" title="Room directory" onClick={ this.onRoomDirectoryClick }>
<TintableSvg src="img/icons-directory.svg" width="24" height="24"/>
</div>
<div className="mx_BottomLeftMenu_settings" title="Settings" onClick={ this.onSettingsClick }>
<TintableSvg src="img/icons-settings.svg" width="24" height="24"/>
</div>
</div>
</div>
);

6
src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
View file

@ -36,8 +36,8 @@ limitations under the License.
-webkit-order: 1;
order: 1;
-webkit-flex: 0 0 83px;
flex: 0 0 83px;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
.mx_RoomView_fileDropTarget {
@ -64,7 +64,7 @@ limitations under the License.
border: 2px #e1dddd solid;
border-bottom: none;
position: absolute;
top: 83px;
top: 70px;
bottom: 0px;
z-index: 3000;
}

4
src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
View file

@ -36,8 +36,8 @@ limitations under the License.
-webkit-order: 1;
order: 1;
-webkit-flex: 0 0 83px;
flex: 0 0 83px;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
.mx_UserSettings_body {

4
src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
View file

@ -79,8 +79,8 @@ limitations under the License.
.mx_MemberList_bottom {
order: 4;
flex: 0 0 72px;
-webkit-flex: 0 0 72px;
flex: 0 0 60px;
-webkit-flex: 0 0 60px;
}
.mx_MemberList_bottomRule {

4
src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
View file

@ -45,7 +45,7 @@ limitations under the License.
display: table-cell;
width: 100%;
vertical-align: middle;
height: 70px;
height: 60px;
text-align: center;
font-style: italic;
color: #888;
@ -55,7 +55,7 @@ limitations under the License.
display: table-cell;
width: 100%;
vertical-align: middle;
height: 70px;
height: 60px;
}
.mx_MessageComposer_input textarea {

4
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_RoomHeader_wrapper {
max-width: 960px;
margin: auto;
height: 83px;
height: 70px;
-webkit-align-items: center;
align-items: center;
@ -118,7 +118,7 @@ limitations under the License.
}
.mx_RoomHeader_simpleHeader {
line-height: 83px;
line-height: 70px;
color: #454545;
font-size: 22px;
font-weight: bold;

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

@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_RoomList {
padding-top: 24px;
padding-top: 8px;
padding-bottom: 12px;
min-height: 400px;
}

34
src/skins/vector/css/vector-web/structures/LeftPanel.css
View file

@ -58,23 +58,29 @@ limitations under the License.
-webkit-order: 3;
order: 3;
-webkit-flex: 0 0 140px;
flex: 0 0 140px;
background-color: rgba(118,207,166,0.2);
border-top: 1px solid rgba(0,0,0,0.1);
margin-left: 20px;
margin-right: 20px;
-webkit-flex: 0 0 60px;
flex: 0 0 60px;
}
.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
color: #454545;
}
.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
margin-top: 15px;
.mx_LeftPanel .mx_BottomLeftMenu_options {
margin-top: 18px;
width: 100%;
}
.mx_LeftPanel .mx_BottomLeftMenu img {
border-radius: 0px;
background-color: transparent;
vertical-align: middle;
.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
.mx_LeftPanel .mx_BottomLeftMenu_directory,
.mx_LeftPanel .mx_BottomLeftMenu_settings {
display: inline-block;
cursor: pointer;
}
.mx_LeftPanel .mx_BottomLeftMenu_directory {
margin-left: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_settings {
float: right;
}

6
src/skins/vector/css/vector-web/structures/RightPanel.css
View file

@ -33,14 +33,14 @@ limitations under the License.
-webkit-order: 1;
order: 1;
-webkit-flex: 0 0 83px;
flex: 0 0 83px;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
/** Fixme - factor this out with the main header **/
.mx_RightPanel_headerButtonGroup {
margin-top: 32px;
margin-top: 25px;
float: left;
background-color: #fff;
margin-left: -4px;