From 882d09bf85149a2617542ebbba5b527a8c06f0c8 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 20 Jul 2016 12:46:44 +0100 Subject: [PATCH 1/2] Initial reworking of the RoomTile CSS --- .../matrix-react-sdk/views/rooms/RoomTile.css | 56 +++++++------------ 1 file changed, 20 insertions(+), 36 deletions(-) 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 de8a9649310..ef8df12a5cd 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 @@ -19,27 +19,26 @@ limitations under the License. /* This fixes wrapping of long room names, but breaks drag & drop previews */ /* display: table-row; */ font-size: 13px; - position: relative; + display: block; } .mx_RoomTile_avatar { - display: table-cell; - padding-right: 11px; + display: inline-block; padding-top: 6px; padding-bottom: 6px; padding-left: 18px; width: 24px; height: 24px; - position: relative; vertical-align: middle; } .mx_RoomTile_name { - display: table-cell; - width: 100%; + display: inline-block; + width: 100px; vertical-align: middle; overflow: hidden; word-break: break-word; + padding-left: 15px; padding-right: 15px; color: rgba(69, 69, 69, 0.8); } @@ -59,8 +58,8 @@ limitations under the License. } .collapsed .mx_RoomTile_badge { - margin-top: -15px; - right: 7px; + bottom: 40px; + left: 30px; min-width: 12px; height: 16px; border-radius: 16px; @@ -68,13 +67,14 @@ limitations under the License. z-index: 200; } +/* This is the bottom of the speech bubble */ .mx_RoomTile_highlight .mx_RoomTile_badge:after { content: ""; position: absolute; display: block; width: 0; height: 0; - margin-left: 7px; + margin-left: 4px; border-top: 8px solid #ff0064; border-right: 10px solid transparent; } @@ -86,18 +86,20 @@ style are the same, this style needs to be AFTER it to take effect when matched } .mx_RoomTile_badge { - min-width: 15px; + display: inline-block; + min-width: 12px; height: 18px; - position: absolute; - right: 16px; + position: relative; + right: 4px; top: 50%; - margin-top: -8px; border-radius: 18px; color: #fff; font-weight: bold; font-size: 11px; text-align: center; - padding: 2px 6px 0px 5px; + padding-top: 2px; + padding-left: 5px; + padding-right: 5px; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { @@ -108,24 +110,12 @@ style are the same, this style needs to be AFTER it to take effect when matched background-color: #ff0064; } -.mx_RoomTile_unread, -.mx_RoomTile_highlight { - font-weight: bold; -} - -/* the inner highlight span has 4px of padding on it, so we shrink the _avatar by 4px and grow the _name by 4px to fit it in */ -.mx_RoomTile_selected .mx_RoomTile_name { - padding-right: 19px; -} -.mx_RoomTile_selected .mx_RoomTile_avatar { - padding-right: 7px; +.mx_RoomTile_badge.mx_RoomTile_badge_no_unread { + background-color: rgba(74, 73, 74, 0.2); } -/* leave room for the badge, if present. - N.B. this has to come after the above _selected width tweaks */ -.mx_RoomTile_unreadNotify .mx_RoomTile_name, -.mx_RoomTile_highlight .mx_RoomTile_name { - padding-right: 40px; +.mx_RoomTile_unread, .mx_RoomTile_highlight { + font-weight: bold; } .mx_RoomTile_selected .mx_RoomTile_name span { @@ -139,12 +129,6 @@ style are the same, this style needs to be AFTER it to take effect when matched background-color: rgba(118,207,166,0.2); } -/* stop the span from overlapping with the badge */ -.mx_RoomTile_unreadNotify.mx_RoomTile_selected .mx_RoomTile_name span, -.mx_RoomTile_highlight.mx_RoomTile_selected .mx_RoomTile_name span { - padding-right: 22px; -} - .mx_RoomTile_arrow { position: absolute; right: 0px; From f3586a79c200388255c541492717177e7e05f4ce Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 20 Jul 2016 17:10:23 +0100 Subject: [PATCH 2/2] Final CSS tweaks for the hover and collapsed states --- .../matrix-react-sdk/views/rooms/RoomTile.css | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) 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 ef8df12a5cd..770a3a625f2 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 @@ -38,7 +38,7 @@ limitations under the License. vertical-align: middle; overflow: hidden; word-break: break-word; - padding-left: 15px; + padding-left: 11px; padding-right: 15px; color: rgba(69, 69, 69, 0.8); } @@ -57,8 +57,12 @@ limitations under the License. display: none; } +.collapsed .mx_RoomTile { + height: 36px; +} + .collapsed .mx_RoomTile_badge { - bottom: 40px; + top: -40px; left: 30px; min-width: 12px; height: 16px; @@ -87,19 +91,24 @@ style are the same, this style needs to be AFTER it to take effect when matched .mx_RoomTile_badge { display: inline-block; - min-width: 12px; + min-width: 14px; height: 18px; position: relative; - right: 4px; - top: 50%; + left: 8px; + top: 2px; border-radius: 18px; color: #fff; font-weight: bold; font-size: 11px; text-align: center; padding-top: 2px; - padding-left: 5px; - padding-right: 5px; + padding-left: 4px; + padding-right: 4px; +} + +.mx_RoomTile_badge:hover { + letter-spacing: 0.1em; + opacity: 1; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { @@ -110,8 +119,9 @@ style are the same, this style needs to be AFTER it to take effect when matched background-color: #ff0064; } -.mx_RoomTile_badge.mx_RoomTile_badge_no_unread { - background-color: rgba(74, 73, 74, 0.2); +.mx_RoomTile_badge_no_unread { + background-color: rgb(214, 214, 214); + opacity: 0; } .mx_RoomTile_unread, .mx_RoomTile_highlight {