New design for long names

pull/1900/head
wmwragg 2016-08-02 14:46:31 +01:00
parent ef5ea46830
commit 472acd4792
4 changed files with 44 additions and 24 deletions

View File

@ -94,7 +94,7 @@ limitations under the License.
background-color: #eaf5f0; background-color: #eaf5f0;
-webkit-flex: 0 0 210px; -webkit-flex: 0 0 210px;
flex: 0 0 210px; flex: 0 0 235px;
} }
.mx_MatrixChat .mx_LeftPanel.collapsed { .mx_MatrixChat .mx_LeftPanel.collapsed {

View File

@ -15,6 +15,7 @@ limitations under the License.
*/ */
.mx_RoomTile { .mx_RoomTile {
position: relative;
cursor: pointer; cursor: pointer;
/* This fixes wrapping of long room names, but breaks drag & drop previews */ /* This fixes wrapping of long room names, but breaks drag & drop previews */
/* display: table-row; */ /* display: table-row; */
@ -26,6 +27,12 @@ limitations under the License.
opacity: 0.4; opacity: 0.4;
} }
.mx_RoomTile_nameContainer {
display: inline-block;
width: 170px;
height: 36px;
}
.mx_RoomTile_avatar { .mx_RoomTile_avatar {
display: inline-block; display: inline-block;
padding-top: 6px; padding-top: 6px;
@ -40,18 +47,19 @@ limitations under the License.
.mx_RoomTile_name { .mx_RoomTile_name {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 103px; width: 157px;
vertical-align: middle; vertical-align: middle;
overflow: hidden; padding-left: 6px;
/* word-break: break-word; */ padding-right: 6px;
white-space: nowrap;
padding-left: 5px;
padding-right: 15px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 3px;
color: rgba(69, 69, 69, 0.8); color: rgba(69, 69, 69, 0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
/*
.mx_RoomTile_name:before { .mx_RoomTile_name:before {
content:''; content:'';
width:103px; width:103px;
@ -62,6 +70,7 @@ limitations under the License.
padding-left: 20px; padding-left: 20px;
background:linear-gradient(to right, rgba(234,245,240,0) 80%, #eaf5f0 99%); background:linear-gradient(to right, rgba(234,245,240,0) 80%, #eaf5f0 99%);
} }
*/
.mx_RoomTile_ellipsis .mx_RoomTile_name { .mx_RoomTile_ellipsis .mx_RoomTile_name {
font-style: italic; font-style: italic;
@ -82,8 +91,7 @@ limitations under the License.
} }
.collapsed .mx_RoomTile_badge { .collapsed .mx_RoomTile_badge {
top: -40px; top: -2px;
left: 31px;
min-width: 12px; min-width: 12px;
height: 16px; height: 16px;
border-radius: 16px; border-radius: 16px;
@ -95,16 +103,17 @@ limitations under the License.
.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
opacity: 0; opacity: 0;
top: -40px; top: -2px;
} }
/* Position menu icon when room muted and collapsed */ /* Position menu icon when room muted and collapsed */
.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute,
.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
display: inline-block; display: inline-block;
background-color: rgb(214, 214, 214); background-color: rgb(214, 214, 214);
letter-spacing: 0.1em; letter-spacing: 0.1em;
opacity: 1; opacity: 1;
top: -40px; top: -2px;
} }
/* Hide the bottom of speech bubble */ /* Hide the bottom of speech bubble */
@ -128,9 +137,9 @@ limitations under the License.
display: inline-block; display: inline-block;
min-width: 14px; min-width: 14px;
height: 17px; height: 17px;
position: relative; position: absolute;
left: 8px; right: 9px;
top: 2px; top: 9px;
border-radius: 14px; border-radius: 14px;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
@ -141,24 +150,26 @@ limitations under the License.
padding-right: 4px; padding-right: 4px;
} }
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge { .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge {
letter-spacing: 0.1em; letter-spacing: 0.1em;
opacity: 1; opacity: 1;
} }
/* Position menu icon when room muted */ /* Position menu icon when room muted */
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute,
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
background-color: rgb(214, 214, 214); background-color: rgb(214, 214, 214);
letter-spacing: 0.1em; letter-spacing: 0.1em;
opacity: 1; opacity: 1;
top: 2px; top: 9px;
} }
/* Position mute icon when room muted */ /* Position mute icon when room muted */
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
opacity: 1; opacity: 1;
top: 4px; top: 11px;
} }
.mx_RoomTile_unreadNotify .mx_RoomTile_badge { .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@ -182,6 +193,14 @@ limitations under the License.
background-color: rgba(118,207,166,0.2); background-color: rgba(118,207,166,0.2);
} }
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
width: 144px;
}
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name.mx_RoomTile_badgeShown {
width: 136px;
}
.mx_RoomTile_arrow { .mx_RoomTile_arrow {
position: absolute; position: absolute;
right: 0px; right: 0px;

View File

@ -25,8 +25,8 @@ limitations under the License.
color: #3d3b39; color: #3d3b39;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
padding-left: 12px; padding-left: 18px;
padding-right: 12px; padding-right: 18px;
margin-top: 8px; margin-top: 8px;
margin-bottom: 4px; margin-bottom: 4px;
cursor: pointer; cursor: pointer;

View File

@ -16,8 +16,8 @@ limitations under the License.
.mx_RoomDropTarget { .mx_RoomDropTarget {
font-size: 13px; font-size: 13px;
margin-left: 10px; margin-left: 18px;
margin-right: 15px; margin-right: 18px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border: 1px dashed #76cfa6; border: 1px dashed #76cfa6;
@ -28,6 +28,7 @@ limitations under the License.
.collapsed .mx_RoomDropTarget { .collapsed .mx_RoomDropTarget {
margin-right: 10px; margin-right: 10px;
margin-left: 10px;
} }
.mx_RoomDropTarget_placeholder { .mx_RoomDropTarget_placeholder {