From fae7e0cacec60094dc1ce78d9f63b19b1cacde2d Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 1 Dec 2019 07:06:20 +0100 Subject: [PATCH] [Glitch] Fix conversations not having an unread indicator in web UI Fix ed73376f1ca7ef5e254a3ec21e1ead85b2d34fd6 to glitch-soc Signed-off-by: Thibaut Girka --- .../components/conversation.js | 5 ++-- .../glitch/styles/components/index.scss | 26 +++++++++++++++++++ 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js index a80fa824bb..ba01f8d5c8 100644 --- a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js +++ b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js @@ -12,6 +12,7 @@ import IconButton from 'flavours/glitch/components/icon_button'; import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp'; import { HotKeys } from 'react-hotkeys'; import { autoPlayGif } from 'flavours/glitch/util/initial_state'; +import classNames from 'classnames'; const messages = defineMessages({ more: { id: 'status.more', defaultMessage: 'More' }, @@ -193,7 +194,7 @@ class Conversation extends ImmutablePureComponent { return ( -
+
@@ -201,7 +202,7 @@ class Conversation extends ImmutablePureComponent {
- + {unread && }
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 5ac2403d18..febc955132 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1507,6 +1507,16 @@ flex: 0 0 auto; padding: 10px; padding-top: 12px; + position: relative; + } + + &__unread { + display: inline-block; + background: $highlight-text-color; + border-radius: 50%; + width: 0.625rem; + height: 0.625rem; + margin: -.1ex .15em .1ex; } &__content { @@ -1554,6 +1564,22 @@ margin: 0; } } + + &--unread { + background: lighten($ui-base-color, 2%); + + &:focus { + background: lighten($ui-base-color, 4%); + } + + .conversation__content__info { + font-weight: 700; + } + + .conversation__content__relative-time { + color: $primary-text-color; + } + } } .ui .flash-message {