From 8b393464094f0c2d0b734e6511621440735fa950 Mon Sep 17 00:00:00 2001
From: Kaki In <91763754+Kaki-In@users.noreply.github.com>
Date: Fri, 22 Jul 2022 16:34:52 +0200
Subject: [PATCH] The error message can now be closed

---
 src/domain/session/room/RoomViewModel.js      |  5 ++
 .../web/ui/css/themes/element/theme.css       | 49 ++++++++++++++++++-
 src/platform/web/ui/session/room/RoomView.js  | 10 +++-
 3 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js
index 5ded5108..5415d6dd 100644
--- a/src/domain/session/room/RoomViewModel.js
+++ b/src/domain/session/room/RoomViewModel.js
@@ -416,6 +416,11 @@ export class RoomViewModel extends ViewModel {
             this._composerVM.setReplyingTo(entry);
         }
     }
+    
+    dismissError(evt) {
+        this._sendError = null;
+        this.emitChange("error");
+    }
 }
 
 function videoToInfo(video) {
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 16dfea12..f14100b2 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -526,15 +526,62 @@ a {
     padding-left : 20px;
     overflow : hidden;
     height : 0px;
+    font-weight : bold;
     transition : 0.25s all ease-out;
+    position : relative;
+    display : flex;
 }
 
 .RoomView_error:not(:empty) {
-   height : auto;
+    height : 40px;
+    align-items : center;
     padding-top : 20px;
     padding-bottom : 20px;
 }
 
+.RoomView_error p {
+	position : relative;
+	display : block;
+    width : 100%;
+    height : auto;
+    margin : 0;
+}
+
+.RoomView_error button {
+    width : 40px;
+    padding-top : 20px;
+    padding-bottom : 20px;
+    background : none;
+    border : none;
+    position : relative;
+}
+
+.RoomView_error button:hover {
+	background : #cfcfcf;
+}
+
+.RoomView_error button:after {
+	content:"";
+	position : absolute;
+	top : 10px;
+	right: 16px;
+	background : red;
+	width : 5px;
+	height : 20px;
+	transform: rotate(45deg);
+}
+
+.RoomView_error button:before {
+	content:"";
+	position : absolute;
+	top : 17px;
+	left: 10px;
+	background : red;
+	width : 20px;
+	height : 5px;
+	transform: rotate(45deg);
+}
+
 .MessageComposer_replyPreview .Timeline_message {
     margin: 0;
     margin-top: 5px;
diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js
index d36466dd..7cfd7d85 100644
--- a/src/platform/web/ui/session/room/RoomView.js
+++ b/src/platform/web/ui/session/room/RoomView.js
@@ -46,7 +46,13 @@ export class RoomView extends TemplateView {
                 })
             ]),
             t.div({className: "RoomView_body"}, [
-                t.div({className: "RoomView_error"}, vm => vm.error),
+                t.div({className: "RoomView_error"}, [
+					t.if(vm => vm.error, t => t.p({}, vm => vm.error)),
+					t.if(vm => vm.error, t => t.button({
+						className: "RoomView_error_closerButton",
+						onClick: evt => vm.dismissError(evt)
+					}))
+                ]),
                 t.mapView(vm => vm.timelineViewModel, timelineViewModel => {
                     return timelineViewModel ?
                         new TimelineView(timelineViewModel, this._viewClassForTile) :
@@ -64,7 +70,7 @@ export class RoomView extends TemplateView {
             ])
         ]);
     }
-
+    
     _toggleOptionsMenu(evt) {
         if (this._optionsPopup && this._optionsPopup.isOpen) {
             this._optionsPopup.close();