mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages 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. limitations under the License.
*/ */
ul.Timeline > li.messageStatus .Timeline_messageBody > p {
font-style: italic;
color: #777;
}
.Timeline_message { .Timeline_message {
display: grid; display: grid;
grid-template: grid-template:
@ -106,6 +101,11 @@ ul.Timeline > li.messageStatus .Timeline_messageBody > p {
color: #aaa; color: #aaa;
} }
.Timeline_messageBody.statusMessage {
font-style: italic;
color: #777;
}
.Timeline_messageBody { .Timeline_messageBody {
grid-area: body; grid-area: body;
line-height: 2.2rem; 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`), t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Cancel`),
])); ]));
} else { } 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.button({className: "link", onClick: () => vm.download()}, vm => vm.label),
t.time(vm.date + " " + vm.time) 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 { export class MissingAttachmentView extends TemplateView {
render(t, vm) { render(t, vm) {
const remove = t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Remove`); 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) { render(t, vm) {
const cancelButton = t.if(vm => vm.isRedacting, t => t.button({onClick: () => vm.abortPendingRedaction()}, "Cancel")); const cancelButton = t.if(vm => vm.isRedacting, t => t.button({onClick: () => vm.abortPendingRedaction()}, "Cancel"));
return renderMessage(t, vm, 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 { export class TextMessageView extends TemplateView {
render(t, vm) { render(t, vm) {
const bodyView = t.mapView(vm => vm.body, body => new BodyView(body)); const bodyView = t.mapView(vm => vm.body, body => new BodyView(body));
return renderMessage(t, vm, return renderMessage(t, vm, t.p({
t.p({className: "Timeline_messageBody"}, [bodyView, t.time({className: {hidden: !vm.date}}, vm.date + " " + vm.time)]) 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, unsent: vm.isUnsent,
unverified: vm.isUnverified, unverified: vm.isUnverified,
continuation: vm => vm.isContinuation, 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}, [ return t.li({className: classes}, [
t.if(vm => !vm.isContinuation, t => renderStaticAvatar(vm, 30, "Timeline_messageAvatar")), t.if(vm => !vm.isContinuation, t => renderStaticAvatar(vm, 30, "Timeline_messageAvatar")),