From ad74d264a3e59601a3c3b205cb2c64a7018e78a0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 11:37:40 +0100 Subject: [PATCH 1/7] Selected room highlight teaked to better fit previous design --- .../css/matrix-react-sdk/views/rooms/RoomTile.css | 14 +++++--------- 1 file changed, 5 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 770a3a625f..66e1178139 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 @@ -27,6 +27,7 @@ limitations under the License. padding-top: 6px; padding-bottom: 6px; padding-left: 18px; + padding-right: 6px; width: 24px; height: 24px; vertical-align: middle; @@ -38,8 +39,10 @@ limitations under the License. vertical-align: middle; overflow: hidden; word-break: break-word; - padding-left: 11px; + padding-left: 5px; padding-right: 15px; + padding-top: 4px; + padding-bottom: 4px; color: rgba(69, 69, 69, 0.8); } @@ -128,14 +131,7 @@ style are the same, this style needs to be AFTER it to take effect when matched font-weight: bold; } -.mx_RoomTile_selected .mx_RoomTile_name span { - display: inline-block; - position: relative; - width: 100%; - padding: 4px; - margin-top: -4px; - margin-bottom: -4px; - border-radius: 2px; +.mx_RoomTile_selected .mx_RoomTile_name { background-color: rgba(118,207,166,0.2); } From 73bb3179253771508c5db6845652c9f3fef0a943 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 12:19:11 +0100 Subject: [PATCH 2/7] Slight tweak to the name padding so there is a little less space above and below the name --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 4 ++-- 1 file changed, 2 insertions(+), 2 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 66e1178139..5eb9026870 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 @@ -41,8 +41,8 @@ limitations under the License. word-break: break-word; padding-left: 5px; padding-right: 15px; - padding-top: 4px; - padding-bottom: 4px; + padding-top: 2px; + padding-bottom: 2px; color: rgba(69, 69, 69, 0.8); } From df163d8cb7f06cdf4214a44343446d5fbd82ff45 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 14:33:27 +0100 Subject: [PATCH 3/7] Clean up of the CSS, and refactor to better match current code --- .../matrix-react-sdk/views/rooms/RoomTile.css | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 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 5eb9026870..d2437c4ef2 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 @@ -56,14 +56,14 @@ limitations under the License. */ } -.collapsed .mx_RoomTile_name { - display: none; -} - .collapsed .mx_RoomTile { height: 36px; } +.collapsed .mx_RoomTile_name { + display: none; +} + .collapsed .mx_RoomTile_badge { top: -40px; left: 30px; @@ -74,6 +74,11 @@ limitations under the License. z-index: 200; } +/* Hide the bottom of speech bubble */ +.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after { + display: none; +} + /* This is the bottom of the speech bubble */ .mx_RoomTile_highlight .mx_RoomTile_badge:after { content: ""; @@ -86,12 +91,6 @@ limitations under the License. border-right: 10px solid transparent; } -/* Because the specificity of this and the above ".mx_RoomTile_highlight .mx_RoomTile_badge:after" -style are the same, this style needs to be AFTER it to take effect when matched */ -.collapsed .mx_RoomTile_badge:after { - display: none; -} - .mx_RoomTile_badge { display: inline-block; min-width: 14px; @@ -109,7 +108,7 @@ style are the same, this style needs to be AFTER it to take effect when matched padding-right: 4px; } -.mx_RoomTile_badge:hover { +.mx_RoomTile .mx_RoomTile_badge:hover { letter-spacing: 0.1em; opacity: 1; } @@ -122,7 +121,7 @@ style are the same, this style needs to be AFTER it to take effect when matched background-color: #ff0064; } -.mx_RoomTile_badge_no_unread { +.mx_RoomTile_read .mx_RoomTile_badge { background-color: rgb(214, 214, 214); opacity: 0; } From e988f5ca3ba9452dde55c05a1c5ba4eb9a63c533 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 17:54:33 +0100 Subject: [PATCH 4/7] Badge visual tweaks --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 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 d2437c4ef2..1b5c02b961 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 @@ -94,16 +94,16 @@ limitations under the License. .mx_RoomTile_badge { display: inline-block; min-width: 14px; - height: 18px; + height: 17px; position: relative; left: 8px; top: 2px; - border-radius: 18px; + border-radius: 14px; color: #fff; - font-weight: bold; + font-weight: 600; font-size: 11px; text-align: center; - padding-top: 2px; + padding-top: 1px; padding-left: 4px; padding-right: 4px; } From 24e021b91f0474ac8d9ee8ca76891e6e78ece37a Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 18:19:52 +0100 Subject: [PATCH 5/7] Badge dohickey shown on name hover and badge hover --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1b5c02b961..221d707ce4 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 @@ -108,7 +108,7 @@ limitations under the License. padding-right: 4px; } -.mx_RoomTile .mx_RoomTile_badge:hover { +.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton { letter-spacing: 0.1em; opacity: 1; } From ce5311191fde6d5fc9df3b824cc8c3714a54a855 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 22 Jul 2016 11:30:41 +0100 Subject: [PATCH 6/7] Tweaked tooltip z-index --- .../css/vector-web/views/rooms/RoomTooltip.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css index 3aec0fa7f6..f1ec610eaa 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -14,19 +14,19 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_RoomTooltip_chevron { + position: absolute; + left: -9px; + top: 7px; +} + .mx_RoomTooltip { display: none; position: fixed; border: 1px solid #a4a4a4; border-radius: 8px; background-color: #fff; - z-index: 1000; + z-index: 2000; left: 64px; padding: 6px; } - -.mx_RoomTooltip_chevron { - position: absolute; - left: -9px; - top: 8px; -} From 72b4a86eedffc6b9551fc2e88c1036858930554b Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 22 Jul 2016 14:59:02 +0100 Subject: [PATCH 7/7] Tweaked the tooltip to be better aligned. Also added the fading of the room name if too long --- .../css/matrix-react-sdk/views/rooms/RoomTile.css | 15 ++++++++++++++- .../css/vector-web/structures/LeftPanel.css | 1 + .../css/vector-web/views/rooms/RoomTooltip.css | 2 +- 3 files changed, 16 insertions(+), 2 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 221d707ce4..fb28b559b5 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 @@ -35,10 +35,12 @@ limitations under the License. .mx_RoomTile_name { display: inline-block; + position: relative; width: 100px; vertical-align: middle; overflow: hidden; - word-break: break-word; + /* word-break: break-word; */ + white-space: nowrap; padding-left: 5px; padding-right: 15px; padding-top: 2px; @@ -46,6 +48,17 @@ limitations under the License. color: rgba(69, 69, 69, 0.8); } +.mx_RoomTile_name:before { + content:''; + width:100px; + height:22px; + top: 0px; + left: 0px; + position:absolute; + 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; color: #454545; diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index ea12c953fe..0ea76c928a 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -63,6 +63,7 @@ limitations under the License. margin-right: 18px; -webkit-flex: 0 0 60px; flex: 0 0 60px; + z-index: 1; } .mx_LeftPanel .mx_BottomLeftMenu_options { diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css index f1ec610eaa..deb8cd3f96 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -27,6 +27,6 @@ limitations under the License. border-radius: 8px; background-color: #fff; z-index: 2000; - left: 64px; + left: 52px; padding: 6px; }