mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2240 from matrix-org/bwindels/roomheader1

Browse source 
Redesign: fix basic room header layout
This commit is contained in:
Bruno Windels 2018-10-23 19:40:41 +00:00 committed by GitHub
commit 15dafa7eb6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
res/css/views/rooms/_RoomHeader.scss
View file

@ -24,17 +24,13 @@ limitations under the License.
height: 52px;
align-items: center;
display: flex;
}
.mx_RoomHeader_leftRow {
display: flex;
margin-left: 26px;
order: 1;
flex: 1;
overflow: hidden;
align-items: center;
min-width: 0;
padding: 0 10px 0 19px;
}
.mx_RoomHeader_spinner {
flex: 1;
height: 36px;
order: 2;
padding-left: 12px;
@ -63,12 +59,11 @@ limitations under the License.
padding-right: 12px;
}
.mx_RoomHeader_rightRow {
margin-top: 4px;
background-color: $primary-bg-color;
.mx_RoomHeader_buttons {
display: flex;
align-items: center;
order: 3;
margin-top: 4px;
background-color: $primary-bg-color;
}
.mx_RoomHeader_info {
@ -99,19 +94,19 @@ limitations under the License.
}
.mx_RoomHeader_name {
flex: 0 1 auto;
overflow: hidden;
color: $roomheader-color;
font-weight: 600;
font-size: 18px;
padding-left: 15px;
padding-right: 15px;
/* why isn't text-overflow working? */
text-overflow: ellipsis;
margin: 0 7px;
border-bottom: 1px solid transparent;
}
.mx_RoomHeader_nametext {
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mx_RoomHeader_settingsHint {
@ -163,20 +158,23 @@ limitations under the License.
}
.mx_RoomHeader_topic {
max-height: 38px;
flex: 1;
color: $roomtopic-color;
font-weight: 400;
font-size: 13px;
margin-right: 13px;
margin: 0 7px;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
line-height: 1.2em;
max-height: 2.4em;
}
.mx_RoomHeader_avatar {
flex: 0;
width: 28px;
height: 28px;
margin: 0 7px;
}
.mx_RoomHeader_avatar .mx_BaseAvatar_image {

20
src/components/views/rooms/RoomHeader.js
View file

@ -302,10 +302,8 @@ module.exports = React.createClass({
topic = ev.getContent().topic;
}
}
if (topic) {
topicElement =
<div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
}
topicElement =
<div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
}
let roomAvatar = null;
@ -413,7 +411,7 @@ module.exports = React.createClass({
if (!this.props.editing) {
rightRow =
<div className="mx_RoomHeader_rightRow">
<div className="mx_RoomHeader_buttons">
{ settingsButton }
{ pinnedEventsButton }
{ shareRoomButton }
@ -427,15 +425,9 @@ module.exports = React.createClass({
return (
<div className={"mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
<div className="mx_RoomHeader_wrapper">
<div className="mx_RoomHeader_leftRow">
<div className="mx_RoomHeader_avatar">
{ roomAvatar }
</div>
<div className="mx_RoomHeader_info">
{ name }
{ topicElement }
</div>
</div>
<div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
{ name }
{ topicElement }
{ spinner }
{ saveButton }
{ cancelButton }