From 472acd4792b33184440caf9d80ff599483bf3b37 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 2 Aug 2016 14:46:31 +0100 Subject: [PATCH] New design for long names --- .../structures/MatrixChat.css | 2 +- .../matrix-react-sdk/views/rooms/RoomTile.css | 57 ++++++++++++------- .../css/vector-web/structures/RoomSubList.css | 4 +- .../vector-web/views/rooms/RoomDropTarget.css | 5 +- 4 files changed, 44 insertions(+), 24 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css index d28f4d94..bd6f72e6 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css @@ -94,7 +94,7 @@ limitations under the License. background-color: #eaf5f0; -webkit-flex: 0 0 210px; - flex: 0 0 210px; + flex: 0 0 235px; } .mx_MatrixChat .mx_LeftPanel.collapsed { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index e3e29d69..97cbcedd 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -15,6 +15,7 @@ limitations under the License. */ .mx_RoomTile { + position: relative; cursor: pointer; /* This fixes wrapping of long room names, but breaks drag & drop previews */ /* display: table-row; */ @@ -26,6 +27,12 @@ limitations under the License. opacity: 0.4; } +.mx_RoomTile_nameContainer { + display: inline-block; + width: 170px; + height: 36px; +} + .mx_RoomTile_avatar { display: inline-block; padding-top: 6px; @@ -40,18 +47,19 @@ limitations under the License. .mx_RoomTile_name { display: inline-block; position: relative; - width: 103px; + width: 157px; vertical-align: middle; - overflow: hidden; - /* word-break: break-word; */ - white-space: nowrap; - padding-left: 5px; - padding-right: 15px; + padding-left: 6px; + padding-right: 6px; padding-top: 2px; - padding-bottom: 2px; + padding-bottom: 3px; color: rgba(69, 69, 69, 0.8); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } +/* .mx_RoomTile_name:before { content:''; width:103px; @@ -62,6 +70,7 @@ limitations under the License. padding-left: 20px; background:linear-gradient(to right, rgba(234,245,240,0) 80%, #eaf5f0 99%); } +*/ .mx_RoomTile_ellipsis .mx_RoomTile_name { font-style: italic; @@ -82,8 +91,7 @@ limitations under the License. } .collapsed .mx_RoomTile_badge { - top: -40px; - left: 31px; + top: -2px; min-width: 12px; height: 16px; border-radius: 16px; @@ -95,16 +103,17 @@ limitations under the License. .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { background-color: rgba(0,0,0,0); opacity: 0; - top: -40px; + top: -2px; } /* 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; background-color: rgb(214, 214, 214); letter-spacing: 0.1em; opacity: 1; - top: -40px; + top: -2px; } /* Hide the bottom of speech bubble */ @@ -128,9 +137,9 @@ limitations under the License. display: inline-block; min-width: 14px; height: 17px; - position: relative; - left: 8px; - top: 2px; + position: absolute; + right: 9px; + top: 9px; border-radius: 14px; color: #fff; font-weight: 600; @@ -141,24 +150,26 @@ limitations under the License. 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; opacity: 1; } /* 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); letter-spacing: 0.1em; opacity: 1; - top: 2px; + top: 9px; } /* Position mute icon when room muted */ .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { background-color: rgba(0,0,0,0); opacity: 1; - top: 4px; + top: 11px; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { @@ -182,6 +193,14 @@ limitations under the License. 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 { position: absolute; right: 0px; diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 8f9db8fe..83f8c873 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -25,8 +25,8 @@ limitations under the License. color: #3d3b39; font-weight: 600; font-size: 13px; - padding-left: 12px; - padding-right: 12px; + padding-left: 18px; + padding-right: 18px; margin-top: 8px; margin-bottom: 4px; cursor: pointer; diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css b/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css index 7ad5e893..61fbbf74 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css @@ -16,8 +16,8 @@ limitations under the License. .mx_RoomDropTarget { font-size: 13px; - margin-left: 10px; - margin-right: 15px; + margin-left: 18px; + margin-right: 18px; padding-top: 5px; padding-bottom: 5px; border: 1px dashed #76cfa6; @@ -28,6 +28,7 @@ limitations under the License. .collapsed .mx_RoomDropTarget { margin-right: 10px; + margin-left: 10px; } .mx_RoomDropTarget_placeholder {