mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Packages Projects Releases Wiki Activity

adjust message status styling to css grid changes

Browse source
This commit is contained in:
Bruno Windels 2021-05-28 12:17:59 +02:00
parent bbf9832d6a
commit f82e873da8
6 changed files with 15 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/platform/web/ui/css/themes/element/timeline.css
View file

@ -15,11 +15,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
ul.Timeline > li.messageStatus .Timeline_messageBody > p {
font-style: italic;
color: #777;
}
.Timeline_message {
display: grid;
grid-template:
@ -106,6 +101,11 @@ ul.Timeline > li.messageStatus .Timeline_messageBody > p {
color: #aaa;
}
.Timeline_messageBody.statusMessage {
font-style: italic;
color: #777;
}
.Timeline_messageBody {
grid-area: body;
line-height: 2.2rem;

2
src/platform/web/ui/session/room/timeline/FileView.js
View file

@ -26,7 +26,7 @@ export class FileView extends TemplateView {
t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Cancel`),
]));
} else {
return renderMessage(t, vm, t.p({className: "Timeline_messageBody"}, [
return renderMessage(t, vm, t.p({className: "Timeline_messageBody statusMessage"}, [
t.button({className: "link", onClick: () => vm.download()}, vm => vm.label),
t.time(vm.date + " " + vm.time)
]));

2
src/platform/web/ui/session/room/timeline/MissingAttachmentView.js
View file

@ -20,6 +20,6 @@ import {renderMessage} from "./common.js";
export class MissingAttachmentView extends TemplateView {
render(t, vm) {
const remove = t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Remove`);
return renderMessage(t, vm, t.p({className: "Timeline_messageBody"}, [vm.label, " ", remove]));
return renderMessage(t, vm, t.p({className: "Timeline_messageBody statusMessage"}, [vm.label, " ", remove]));
}
}

2
src/platform/web/ui/session/room/timeline/RedactedView.js
View file

@ -21,7 +21,7 @@ export class RedactedView extends TemplateView {
render(t, vm) {
const cancelButton = t.if(vm => vm.isRedacting, t => t.button({onClick: () => vm.abortPendingRedaction()}, "Cancel"));
return renderMessage(t, vm,
t.p({className: "Timeline_messageBody"}, [vm => vm.description, " ", cancelButton])
t.p({className: "Timeline_messageBody statusMessage"}, [vm => vm.description, " ", cancelButton])
);
}
}

10
src/platform/web/ui/session/room/timeline/TextMessageView.js
View file

@ -22,9 +22,13 @@ import {renderMessage} from "./common.js";
export class TextMessageView extends TemplateView {
render(t, vm) {
const bodyView = t.mapView(vm => vm.body, body => new BodyView(body));
return renderMessage(t, vm,
t.p({className: "Timeline_messageBody"}, [bodyView, t.time({className: {hidden: !vm.date}}, vm.date + " " + vm.time)])
);
return renderMessage(t, vm, t.p({
className: "Timeline_messageBody",
statusMessage: vm => vm.shape === "message-status"
}, [
bodyView,
t.time({className: {hidden: !vm.date}}, vm.date + " " + vm.time)
]));
}
}

1
src/platform/web/ui/session/room/timeline/common.js
View file

@ -24,7 +24,6 @@ export function renderMessage(t, vm, body) {
unsent: vm.isUnsent,
unverified: vm.isUnverified,
continuation: vm => vm.isContinuation,
messageStatus: vm => vm.shape === "message-status" || vm.shape === "missing-attachment" || vm.shape === "file" || vm.shape === "redacted",
};
return t.li({className: classes}, [
t.if(vm => !vm.isContinuation, t => renderStaticAvatar(vm, 30, "Timeline_messageAvatar")),