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

fix basic room header layout

Browse source 
make room name take as much space as it needs (but not more than width)
put all items apart from right buttons in one flex container
 so name and topic can grow as required
more small tweaks
This commit is contained in:
Bruno Windels 2018-10-23 16:57:56 +02:00
parent f95b50f6a9
commit 18fedb23ec
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: 15px;
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 {

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

@ -302,11 +302,9 @@ 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;
const avatarSize = 28; const avatarSize = 28;
@ -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">
{ roomAvatar }
</div>
<div className="mx_RoomHeader_info">
{ name } { name }
{ topicElement } { topicElement }
</div>
</div>
{ spinner } { spinner }
{ saveButton } { saveButton }
{ cancelButton } { cancelButton }