The error message can now be closed

This commit is contained in:
Kaki In 2022-07-22 16:34:52 +02:00
parent fb58d9c9ef
commit 8b39346409
3 changed files with 61 additions and 3 deletions

View file

@ -416,6 +416,11 @@ export class RoomViewModel extends ViewModel {
this._composerVM.setReplyingTo(entry); this._composerVM.setReplyingTo(entry);
} }
} }
dismissError(evt) {
this._sendError = null;
this.emitChange("error");
}
} }
function videoToInfo(video) { function videoToInfo(video) {

View file

@ -526,15 +526,62 @@ a {
padding-left : 20px; padding-left : 20px;
overflow : hidden; overflow : hidden;
height : 0px; height : 0px;
font-weight : bold;
transition : 0.25s all ease-out; transition : 0.25s all ease-out;
position : relative;
display : flex;
} }
.RoomView_error:not(:empty) { .RoomView_error:not(:empty) {
height : auto; height : 40px;
align-items : center;
padding-top : 20px; padding-top : 20px;
padding-bottom : 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 { .MessageComposer_replyPreview .Timeline_message {
margin: 0; margin: 0;
margin-top: 5px; margin-top: 5px;

View file

@ -46,7 +46,13 @@ export class RoomView extends TemplateView {
}) })
]), ]),
t.div({className: "RoomView_body"}, [ 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 => { t.mapView(vm => vm.timelineViewModel, timelineViewModel => {
return timelineViewModel ? return timelineViewModel ?
new TimelineView(timelineViewModel, this._viewClassForTile) : new TimelineView(timelineViewModel, this._viewClassForTile) :