From 953bb64e0b36a24074702eda57cef7845b997a31 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 17 Jul 2016 21:18:47 +0100 Subject: [PATCH 1/7] Some quick initial tweaks to the badge icon --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 9 +++++---- 1 file changed, 5 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 a8eead8669..d95d3aa6f7 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 @@ -64,18 +64,19 @@ limitations under the License. } .mx_RoomTile_badge { - min-width: 12px; - height: 16px; + min-width: 15px; + height: 18px; position: absolute; right: 16px; top: 50%; margin-top: -8px; - border-radius: 16px; + border-radius: 18px; color: #fff; font-weight: bold; font-size: 11px; text-align: center; - padding: 0px 4px 0px 4px; + padding: 2px 6px 0px 5px; + z-index: 200; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { From 3f7bd48c0a5098ade9a7d0653e8dca453d41fd43 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 18 Jul 2016 14:27:14 +0100 Subject: [PATCH 2/7] Made the collapsed badge smaller than the uncollapsed one, basically the same size as it was originally --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 6 +++++- 1 file changed, 5 insertions(+), 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 d95d3aa6f7..b6b0448161 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 @@ -61,6 +61,11 @@ limitations under the License. .collapsed .mx_RoomTile_badge { margin-top: -15px; right: 7px; + min-width: 12px; + height: 16px; + border-radius: 16px; + padding: 0px 4px 0px 4px; + z-index: 200; } .mx_RoomTile_badge { @@ -76,7 +81,6 @@ limitations under the License. font-size: 11px; text-align: center; padding: 2px 6px 0px 5px; - z-index: 200; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { From 8fd12d530d5beb53526ed1e7781221814478a1d8 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 18 Jul 2016 14:57:03 +0100 Subject: [PATCH 3/7] Added the hightlight badge restyling --- .../css/matrix-react-sdk/views/rooms/RoomTile.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) 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 b6b0448161..f2239487f0 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 @@ -68,6 +68,21 @@ limitations under the License. z-index: 200; } +.mx_RoomTile_highlight .mx_RoomTile_badge:after { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + margin-left: 8px; + border-top: 8px solid #ff0064; + border-right: 10px solid transparent; +} + +.collapsed .mx_RoomTile_badge:after { + display: none; +} + .mx_RoomTile_badge { min-width: 15px; height: 18px; From 2ee1a9c440478c4f163ad0b723d1d5c88a3f06c8 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 18 Jul 2016 16:20:44 +0100 Subject: [PATCH 4/7] Explanatory text about specificity --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 ++ 1 file changed, 2 insertions(+) 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 f2239487f0..88935fb65e 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 @@ -79,6 +79,8 @@ 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; } From f6d70529283ad263bf2e575ff0a56492ec4f8416 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 18 Jul 2016 16:38:29 +0100 Subject: [PATCH 5/7] Oixel tweak so that it work properly in firefox --- 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 88935fb65e..101fe3f350 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 @@ -74,7 +74,7 @@ limitations under the License. display: block; width: 0; height: 0; - margin-left: 8px; + margin-left: 7px; border-top: 8px solid #ff0064; border-right: 10px solid transparent; } From 384425582ae85b3fb95dc6849358c50d9a274fdb Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 19 Jul 2016 11:47:32 +0100 Subject: [PATCH 6/7] Fixed wonky white space --- 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 101fe3f350..ef31904db2 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 @@ -73,7 +73,7 @@ limitations under the License. position: absolute; display: block; width: 0; - height: 0; + height: 0; margin-left: 7px; border-top: 8px solid #ff0064; border-right: 10px solid transparent; From 8a28da198669429b1a36e48caad63dd2c8a94262 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 19 Jul 2016 12:13:29 +0100 Subject: [PATCH 7/7] Fixed white space issues --- src/skins/vector/css/common.css | 2 +- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 726484462c..b2c4c7c7b8 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -189,7 +189,7 @@ input[type=text]:focus, textarea:focus { .mx_Dialog_content { margin: 24px 58px 68px 0; font-size: 14px; - color: #4a4a4a; + color: #4a4a4a; word-wrap: break-word; } 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 ef31904db2..de8a964931 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 @@ -75,8 +75,8 @@ limitations under the License. width: 0; height: 0; margin-left: 7px; - border-top: 8px solid #ff0064; - border-right: 10px solid transparent; + border-top: 8px solid #ff0064; + border-right: 10px solid transparent; } /* Because the specificity of this and the above ".mx_RoomTile_highlight .mx_RoomTile_badge:after"