mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-15 20:54:59 +08:00
update to new bottomleftmenu. update header and composer heights
This commit is contained in:
parent
96c4a24d3d
commit
6bc4c87ce4
@ -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>
|
||||
);
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -15,7 +15,7 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomList {
|
||||
padding-top: 24px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 12px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user