From 0943176177aa7e0ddf5bfb67c5faa4e253c223b6 Mon Sep 17 00:00:00 2001 From: Ayush PS Date: Mon, 3 May 2021 17:27:00 +0530 Subject: [PATCH 1/4] Added the base for failed to send reactions --- res/css/views/messages/_ReactionsRowButton.scss | 7 ++++++- src/components/views/messages/ReactionsRowButton.js | 6 ++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index 7158ffc0277..c708cb97363 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -33,6 +33,10 @@ limitations under the License. background-color: $reaction-row-button-selected-bg-color; border-color: $reaction-row-button-selected-border-color; } + &.mx_ReactionsRowButton_failed { + background-color: rgba(140, 12, 12, 0.748); + border-color: rgba(68, 0, 0, 0.748); + } .mx_ReactionsRowButton_content { max-width: 100px; @@ -40,5 +44,6 @@ limitations under the License. white-space: nowrap; text-overflow: ellipsis; padding-right: 4px; - } + } } + diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js index 06421c02a2a..3bb597e38ee 100644 --- a/src/components/views/messages/ReactionsRowButton.js +++ b/src/components/views/messages/ReactionsRowButton.js @@ -17,7 +17,7 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; - +import {EventStatus} from 'matrix-js-sdk/src/models/event'; import {MatrixClientPeg} from '../../../MatrixClientPeg'; import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; @@ -86,9 +86,11 @@ export default class ReactionsRowButton extends React.PureComponent { const ReactionsRowButtonTooltip = sdk.getComponent('messages.ReactionsRowButtonTooltip'); const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props; - + const failed =Boolean(mxEvent.staus === EventStatus.NOT_SENT) + const classes = classNames({ mx_ReactionsRowButton: true, + mx_ReactionsRowButton_failed:failed, mx_ReactionsRowButton_selected: !!myReactionEvent, }); From 15412c72a4bddd36f8050fc66545567efc609559 Mon Sep 17 00:00:00 2001 From: Ayush PS Date: Mon, 3 May 2021 18:17:45 +0530 Subject: [PATCH 2/4] Fixed Lint errors --- res/css/views/messages/_ReactionsRowButton.scss | 2 +- src/components/views/messages/ReactionsRowButton.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index c708cb97363..97ab7d39d35 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -44,6 +44,6 @@ limitations under the License. white-space: nowrap; text-overflow: ellipsis; padding-right: 4px; - } + } } diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js index 3bb597e38ee..919c64f1043 100644 --- a/src/components/views/messages/ReactionsRowButton.js +++ b/src/components/views/messages/ReactionsRowButton.js @@ -86,11 +86,11 @@ export default class ReactionsRowButton extends React.PureComponent { const ReactionsRowButtonTooltip = sdk.getComponent('messages.ReactionsRowButtonTooltip'); const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props; - const failed =Boolean(mxEvent.staus === EventStatus.NOT_SENT) - + const failed =Boolean(mxEvent.staus === EventStatus.NOT_SENT); + const classes = classNames({ mx_ReactionsRowButton: true, - mx_ReactionsRowButton_failed:failed, + mx_ReactionsRowButton_failed: failed, mx_ReactionsRowButton_selected: !!myReactionEvent, }); From 3700347c69464f338b7b0b47d445ae00f95ce01a Mon Sep 17 00:00:00 2001 From: Ayush Pratap Singh Date: Tue, 1 Jun 2021 20:09:54 +0530 Subject: [PATCH 3/4] Removed Boolean from failed Co-authored-by: Germain --- src/components/views/messages/ReactionsRowButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js index 919c64f1043..981d33b7497 100644 --- a/src/components/views/messages/ReactionsRowButton.js +++ b/src/components/views/messages/ReactionsRowButton.js @@ -86,7 +86,7 @@ export default class ReactionsRowButton extends React.PureComponent { const ReactionsRowButtonTooltip = sdk.getComponent('messages.ReactionsRowButtonTooltip'); const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props; - const failed =Boolean(mxEvent.staus === EventStatus.NOT_SENT); + const failed = mxEvent.status === EventStatus.NOT_SENT; const classes = classNames({ mx_ReactionsRowButton: true, From ef5d6ccf3f9af6ff01c6c73d0acf85807a421ed1 Mon Sep 17 00:00:00 2001 From: Ayush PS Date: Wed, 2 Jun 2021 02:34:54 +0530 Subject: [PATCH 4/4] Added color icon and base for further changes Signed-off-by: Ayush PS --- res/css/views/messages/_ReactionsRowButton.scss | 9 ++++++--- res/themes/dark/css/_dark.scss | 4 ++++ res/themes/legacy-dark/css/_legacy-dark.scss | 4 ++++ res/themes/legacy-light/css/_legacy-light.scss | 2 ++ res/themes/light/css/_light.scss | 2 ++ 5 files changed, 18 insertions(+), 3 deletions(-) diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index 97ab7d39d35..654928449c0 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -20,7 +20,7 @@ limitations under the License. margin-right: 6px; padding: 0 6px; border: 1px solid $reaction-row-button-border-color; - border-radius: 10px; + border-radius: 10px; background-color: $reaction-row-button-bg-color; cursor: pointer; user-select: none; @@ -34,8 +34,11 @@ limitations under the License. border-color: $reaction-row-button-selected-border-color; } &.mx_ReactionsRowButton_failed { - background-color: rgba(140, 12, 12, 0.748); - border-color: rgba(68, 0, 0, 0.748); + background-color: $reaction-notsent-color; + border-color: $reaction-notsent-border; + } + &.mx_ReactionsRowButton_failed::after{ + //Add a exclamation icon } .mx_ReactionsRowButton_content { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 925d268eb00..15e47dd75c6 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -145,6 +145,10 @@ $event-redacted-border-color: #000000; $event-highlight-fg-color: $warning-color; $event-highlight-bg-color: #25271F; +//event not sent +$reaction-notsent-color: rgba(140, 12, 12, 0.748); +$reaction-notsent-border: rgba(68, 0, 0, 0.748); + // event timestamp $event-timestamp-color: $text-secondary-color; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 28e6e223260..1b1bcb94280 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -143,6 +143,10 @@ $event-highlight-bg-color: #25271F; // event timestamp $event-timestamp-color: $text-secondary-color; +//event not sent +$reaction-notsent-color: rgba(140, 12, 12, 0.748); +$reaction-notsent-border: rgba(68, 0, 0, 0.748); + // Tabbed views $tab-label-fg-color: $text-primary-color; $tab-label-active-fg-color: $text-primary-color; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 7b6bdad4a4d..356980e82e3 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -231,6 +231,8 @@ $yellow-background: #fff8e3; // event tile lifecycle $event-notsent-color: #f44; +$reaction-notsent-color: rgba(140, 12, 12, 0.748); +$reaction-notsent-border: rgba(68, 0, 0, 0.748); $event-highlight-fg-color: $warning-color; $event-highlight-bg-color: $yellow-background; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 5b46138dae2..1ae5e72dcff 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -227,6 +227,8 @@ $yellow-background: #fff8e3; // event tile lifecycle $event-notsent-color: #f44; +$reaction-notsent-color: rgba(140, 12, 12, 0.748); +$reaction-notsent-border: rgba(68, 0, 0, 0.748); $event-highlight-fg-color: $warning-color; $event-highlight-bg-color: $yellow-background;