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

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; height: 52px;
align-items: center; align-items: center;
display: flex; display: flex;
} align-items: center;
min-width: 0;
.mx_RoomHeader_leftRow { padding: 0 10px 0 19px;
display: flex;
margin-left: 26px;
order: 1;
flex: 1;
overflow: hidden;
} }
.mx_RoomHeader_spinner { .mx_RoomHeader_spinner {
flex: 1;
height: 36px; height: 36px;
order: 2; order: 2;
padding-left: 12px; padding-left: 12px;
@ -63,12 +59,11 @@ limitations under the License.
padding-right: 12px; padding-right: 12px;
} }
.mx_RoomHeader_rightRow { .mx_RoomHeader_buttons {
margin-top: 4px;
background-color: $primary-bg-color;
display: flex; display: flex;
align-items: center; align-items: center;
order: 3; margin-top: 4px;
background-color: $primary-bg-color;
} }
.mx_RoomHeader_info { .mx_RoomHeader_info {
@ -99,19 +94,19 @@ limitations under the License.
} }
.mx_RoomHeader_name { .mx_RoomHeader_name {
flex: 0 1 auto;
overflow: hidden; overflow: hidden;
color: $roomheader-color; color: $roomheader-color;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
padding-left: 15px; margin: 0 7px;
padding-right: 15px;
/* why isn't text-overflow working? */
text-overflow: ellipsis;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }
.mx_RoomHeader_nametext { .mx_RoomHeader_nametext {
display: inline-block; white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
.mx_RoomHeader_settingsHint { .mx_RoomHeader_settingsHint {
@ -163,20 +158,23 @@ limitations under the License.
} }
.mx_RoomHeader_topic { .mx_RoomHeader_topic {
max-height: 38px; flex: 1;
color: $roomtopic-color; color: $roomtopic-color;
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
margin-right: 13px; margin: 0 7px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
line-height: 1.2em;
max-height: 2.4em;
} }
.mx_RoomHeader_avatar { .mx_RoomHeader_avatar {
flex: 0; flex: 0;
width: 28px; width: 28px;
height: 28px; height: 28px;
margin: 0 7px;
} }
.mx_RoomHeader_avatar .mx_BaseAvatar_image { .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; topic = ev.getContent().topic;
} }
} }
if (topic) { topicElement =
topicElement = <div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
<div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
}
} }
let roomAvatar = null; let roomAvatar = null;
@ -413,7 +411,7 @@ module.exports = React.createClass({
if (!this.props.editing) { if (!this.props.editing) {
rightRow = rightRow =
<div className="mx_RoomHeader_rightRow"> <div className="mx_RoomHeader_buttons">
{ settingsButton } { settingsButton }
{ pinnedEventsButton } { pinnedEventsButton }
{ shareRoomButton } { shareRoomButton }
@ -427,15 +425,9 @@ module.exports = React.createClass({
return ( return (
<div className={"mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "")}> <div className={"mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
<div className="mx_RoomHeader_wrapper"> <div className="mx_RoomHeader_wrapper">
<div className="mx_RoomHeader_leftRow"> <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
<div className="mx_RoomHeader_avatar"> { name }
{ roomAvatar } { topicElement }
</div>
<div className="mx_RoomHeader_info">
{ name }
{ topicElement }
</div>
</div>
{ spinner } { spinner }
{ saveButton } { saveButton }
{ cancelButton } { cancelButton }