From 13427aaf0778a8a09d574d99ea33388586ee9a79 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 25 May 2021 13:02:09 +0100
Subject: [PATCH] Add a pulse animation to the pinned messages indicator and
move it
---
res/css/views/rooms/_RoomHeader.scss | 41 ++++++++++++++++++------
res/img/element-icons/room/pin.svg | 10 +++---
src/components/views/rooms/RoomHeader.js | 11 +------
3 files changed, 37 insertions(+), 25 deletions(-)
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 387d1588a3..a102dfcdd7 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -281,18 +281,39 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/pin.svg');
}
-.mx_RoomHeader_pinsIndicator {
- position: absolute;
- right: 0;
- bottom: 4px;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background-color: $pinned-color;
-}
+$dot-size: 8px;
+$pulse-color: $pinned-unread-color;
.mx_RoomHeader_pinsIndicatorUnread {
- background-color: $pinned-unread-color;
+ position: absolute;
+ right: 0;
+ top: 0;
+ margin: 4px;
+ width: $dot-size;
+ height: $dot-size;
+ border-radius: 50%;
+ transform: scale(1);
+ background: rgba($pulse-color, 1);
+ box-shadow: 0 0 0 0 rgba($pulse-color, 1);
+ animation: mx_RoomHeader_indicator_pulse 2s infinite;
+ animation-iteration-count: 1;
+}
+
+@keyframes mx_RoomHeader_indicator_pulse {
+ 0% {
+ transform: scale(0.95);
+ box-shadow: 0 0 0 0 rgba($pulse-color, 0.7);
+ }
+
+ 70% {
+ transform: scale(1);
+ box-shadow: 0 0 0 10px rgba($pulse-color, 0);
+ }
+
+ 100% {
+ transform: scale(0.95);
+ box-shadow: 0 0 0 0 rgba($pulse-color, 0);
+ }
}
@media only screen and (max-width: 480px) {
diff --git a/res/img/element-icons/room/pin.svg b/res/img/element-icons/room/pin.svg
index 16941b329b..2448fc61c5 100644
--- a/res/img/element-icons/room/pin.svg
+++ b/res/img/element-icons/room/pin.svg
@@ -1,7 +1,7 @@
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 6d3b50c10d..7eeb5875ef 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -110,13 +110,6 @@ export default class RoomHeader extends React.Component {
return true;
}
- _hasPins() {
- const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", '');
- if (!currentPinEvent) return false;
-
- return !(currentPinEvent.getContent().pinned && currentPinEvent.getContent().pinned.length <= 0);
- }
-
render() {
let searchStatus = null;
let cancelButton = null;
@@ -184,9 +177,7 @@ export default class RoomHeader extends React.Component {
if (this.props.onPinnedClick && SettingsStore.getValue('feature_pinning')) {
let pinsIndicator = null;
if (this._hasUnreadPins()) {
- pinsIndicator = ();
- } else if (this._hasPins()) {
- pinsIndicator = ();
+ pinsIndicator = ();
}
pinnedEventsButton =