From 2c91f24d43e9a74450160637afa80eed02ff492b Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Thu, 16 Nov 2017 17:32:27 -0200 Subject: [PATCH 1/3] change the unread messages style --- .../client/imports/general/base.css | 50 +++++++++++++++++++ .../client/imports/general/base_old.css | 44 ---------------- packages/rocketchat-theme/server/colors.less | 11 ---- 3 files changed, 50 insertions(+), 55 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/general/base.css b/packages/rocketchat-theme/client/imports/general/base.css index 3feacf28d3b22..14c3c6ae8928f 100644 --- a/packages/rocketchat-theme/client/imports/general/base.css +++ b/packages/rocketchat-theme/client/imports/general/base.css @@ -117,3 +117,53 @@ button { .ps-scrollbar-y { width: 4px !important; } + +.first-unread { + & .body { + &::before { + position: absolute; + top: 0; + left: 0; + background: var(--rc-color-error); + z-index: 1; + content: ""; + width: 100%; + height: 1px; + } + + &::after { + position: absolute; + top: -10px; + right: 0; + content: attr(data-unread-text); + text-align: right; + text-transform: uppercase; + font-size: 10px; + padding: 0 1rem; + background: #ffffff; + color: var(--rc-color-error); + z-index: 2; + } + } +} + +.first-unread-opaque .body::after { + color: rgba(0, 0, 0, 0.2); + background: transparent; +} + +.message.new-day.first-unread { + &::after { + border-color: var(--rc-color-error); + } + + & .body { + &::before { + display: none; + } + + &::after { + top: -30px; + } + } +} diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css index 59c9a35863c5f..3a7ae70c6b36b 100644 --- a/packages/rocketchat-theme/client/imports/general/base_old.css +++ b/packages/rocketchat-theme/client/imports/general/base_old.css @@ -135,50 +135,6 @@ -moz-box-orient: vertical; } -.rc-old .first-unread, -.rc-old .cozy .first-unread, -.rc-old .compact .first-unread { - &.message, - &.sequential.message { - padding-top: 20px; - } - - & .body { - &::before { - position: absolute; - top: 0; - right: 0; - left: 0; - - display: block; - - height: 16px; - - content: ""; - transition: background-color, 0.5s, linear; - } - - &::after { - position: absolute; - top: 0; - right: 0; - left: 0; - - display: block; - - padding: 0 5px; - - content: attr(data-unread-text); - transition: color, 0.5s, linear; - text-align: center; - text-transform: uppercase; - - font-size: 12px; - line-height: 16px; - } - } -} - .rc-old .text-center { text-align: center; } diff --git a/packages/rocketchat-theme/server/colors.less b/packages/rocketchat-theme/server/colors.less index 627cea3d8e3f5..11719a4c66f0b 100755 --- a/packages/rocketchat-theme/server/colors.less +++ b/packages/rocketchat-theme/server/colors.less @@ -561,17 +561,6 @@ input:-webkit-autofill { /** ---------------------------------------------------------------------------- * Message content */ -.first-unread { - .body { - &::before { - background: @transparent-darker; - } - - &::after { - color: @primary-font-color; - } - } -} .first-unread-opaque { .body { From 408d4077f6826bdce42b0a836623ac7e60eaa7dc Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Fri, 17 Nov 2017 15:21:29 -0200 Subject: [PATCH 2/3] fix css selector --- .../client/imports/general/base.css | 55 ++++++++++--------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/general/base.css b/packages/rocketchat-theme/client/imports/general/base.css index 14c3c6ae8928f..a2c9adbab6f75 100644 --- a/packages/rocketchat-theme/client/imports/general/base.css +++ b/packages/rocketchat-theme/client/imports/general/base.css @@ -118,32 +118,37 @@ button { width: 4px !important; } -.first-unread { - & .body { - &::before { - position: absolute; - top: 0; - left: 0; - background: var(--rc-color-error); - z-index: 1; - content: ""; - width: 100%; - height: 1px; - } +.first-unread .body { + &::before { + position: absolute; + z-index: 1; + top: 0; + left: 0; - &::after { - position: absolute; - top: -10px; - right: 0; - content: attr(data-unread-text); - text-align: right; - text-transform: uppercase; - font-size: 10px; - padding: 0 1rem; - background: #ffffff; - color: var(--rc-color-error); - z-index: 2; - } + width: 100%; + height: 1px; + + content: ""; + + background: var(--rc-color-error); + } + + &::after { + position: absolute; + z-index: 2; + top: -10px; + right: 0; + + padding: 0 1rem; + + content: attr(data-unread-text); + text-align: right; + text-transform: uppercase; + + color: var(--rc-color-error); + background: #ffffff; + + font-size: 10px; } } From 2010ad8dca3861f0ff8ef0079eb1490ce4f4300e Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Fri, 17 Nov 2017 15:36:50 -0200 Subject: [PATCH 3/3] remove opaque --- packages/rocketchat-theme/client/imports/general/base.css | 5 ----- packages/rocketchat-theme/server/colors.less | 8 -------- packages/rocketchat-ui/client/lib/readMessages.js | 6 +----- 3 files changed, 1 insertion(+), 18 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/general/base.css b/packages/rocketchat-theme/client/imports/general/base.css index a2c9adbab6f75..05254e09e43fa 100644 --- a/packages/rocketchat-theme/client/imports/general/base.css +++ b/packages/rocketchat-theme/client/imports/general/base.css @@ -152,11 +152,6 @@ button { } } -.first-unread-opaque .body::after { - color: rgba(0, 0, 0, 0.2); - background: transparent; -} - .message.new-day.first-unread { &::after { border-color: var(--rc-color-error); diff --git a/packages/rocketchat-theme/server/colors.less b/packages/rocketchat-theme/server/colors.less index 11719a4c66f0b..fd8f2397df7e7 100755 --- a/packages/rocketchat-theme/server/colors.less +++ b/packages/rocketchat-theme/server/colors.less @@ -562,14 +562,6 @@ input:-webkit-autofill { * Message content */ -.first-unread-opaque { - .body { - &::before { - background: @transparent-dark; - } - } -} - .message { &.new-day::before { background-color: @content-background-color; diff --git a/packages/rocketchat-ui/client/lib/readMessages.js b/packages/rocketchat-ui/client/lib/readMessages.js index 72b7b10ca50e8..8fb246850e93e 100644 --- a/packages/rocketchat-ui/client/lib/readMessages.js +++ b/packages/rocketchat-ui/client/lib/readMessages.js @@ -125,9 +125,6 @@ const readMessage = new class { return; } - const $roomDom = $(room.dom); - $roomDom.find('.message.first-unread').addClass('first-unread-opaque'); - if (!subscription.alert && (subscription.unread === 0)) { room.unreadSince.set(undefined); return; @@ -137,7 +134,6 @@ const readMessage = new class { return; } - $roomDom.find('.message.first-unread').removeClass('first-unread').removeClass('first-unread-opaque'); let lastReadRecord = ChatMessage.findOne({ rid: subscription.rid, @@ -184,7 +180,7 @@ const readMessage = new class { if (firstUnreadRecord != null) { room.unreadFirstId = firstUnreadRecord._id; - return $roomDom.find(`.message#${ firstUnreadRecord._id }`).addClass('first-unread'); + $(room.dom).find(`.message#${ firstUnreadRecord._id }`).addClass('first-unread'); } } }