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();