From 9d260c692b467cccbc252c7148a86e5f99154706 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 19 Aug 2020 08:32:25 +0200 Subject: [PATCH 1/6] tweak font-sizes to what element web has --- src/ui/web/css/themes/element/theme.css | 15 +++++++++++---- src/ui/web/css/timeline.css | 2 -- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index f11c47b3..e1ef7a41 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/src/ui/web/css/themes/element/theme.css @@ -17,12 +17,16 @@ limitations under the License. @import url('inter.css'); +:root { + font-size: 10px; +} + + .hydrogen { font-family: 'Inter', sans-serif, 'emoji'; - font-size: 15px; background-color: white; color: #2e2f32; - + font-size: 1.4rem; --usercolor1: #368BD6; --usercolor2: #AC3BA8; --usercolor3: #03B381; @@ -136,6 +140,7 @@ button.styled { .LeftPanel { background: rgba(245, 245, 245, 0.90); + font-size: 1.5rem; } .LeftPanel ul { @@ -228,6 +233,10 @@ a { padding: 10px; } +.RoomHeader h2 { + font-size: 1.8rem; +} + .RoomHeader button { width: 40px; height: 40px; @@ -297,7 +306,6 @@ a { .message-container .sender { margin: 5px 0; - font-size: 0.9em; font-weight: bold; } @@ -333,7 +341,6 @@ a { margin: 0 auto; padding: 10px 20px; background-color: rgba(245, 245, 245, 0.90); - font-size: 0.9em; text-align: center; border-radius: 10px; } diff --git a/src/ui/web/css/timeline.css b/src/ui/web/css/timeline.css index 4b7f572d..14b60b26 100644 --- a/src/ui/web/css/timeline.css +++ b/src/ui/web/css/timeline.css @@ -35,8 +35,6 @@ limitations under the License. .message-container .sender { margin: 5px 0; - font-size: 0.9em; - font-weight: bold; } .message-container a { From fad728069a66e64f77d76ccc6ec3559f08fa3302 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 19 Aug 2020 10:27:27 +0200 Subject: [PATCH 2/6] don't show date & time on pending events --- src/domain/session/room/timeline/tiles/MessageTile.js | 6 +++--- src/ui/web/session/room/timeline/TextMessageView.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/domain/session/room/timeline/tiles/MessageTile.js b/src/domain/session/room/timeline/tiles/MessageTile.js index 74ba202c..f7c47030 100644 --- a/src/domain/session/room/timeline/tiles/MessageTile.js +++ b/src/domain/session/room/timeline/tiles/MessageTile.js @@ -21,7 +21,7 @@ export class MessageTile extends SimpleTile { constructor(options) { super(options); this._isOwn = this._entry.sender === options.ownUserId; - this._date = new Date(this._entry.timestamp); + this._date = this._entry.timestamp ? new Date(this._entry.timestamp) : null; this._isContinuation = false; } @@ -38,11 +38,11 @@ export class MessageTile extends SimpleTile { } get date() { - return this._date.toLocaleDateString({}, {month: "numeric", day: "numeric"}); + return this._date && this._date.toLocaleDateString({}, {month: "numeric", day: "numeric"}); } get time() { - return this._date.toLocaleTimeString({}, {hour: "numeric", minute: "2-digit"}); + return this._date && this._date.toLocaleTimeString({}, {hour: "numeric", minute: "2-digit"}); } get isOwn() { diff --git a/src/ui/web/session/room/timeline/TextMessageView.js b/src/ui/web/session/room/timeline/TextMessageView.js index 260eaf29..d3d8e167 100644 --- a/src/ui/web/session/room/timeline/TextMessageView.js +++ b/src/ui/web/session/room/timeline/TextMessageView.js @@ -20,7 +20,7 @@ import {renderMessage} from "./common.js"; export class TextMessageView extends TemplateView { render(t, vm) { return renderMessage(t, vm, - [t.p([vm.text, t.time(vm.date + " " + vm.time)])] + [t.p([vm.text, t.time({className: {hidden: !vm.date}}, vm.date + " " + vm.time)])] ); } } From 614a00b7417049bf6342f2d14c346d88831fb5ea Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 19 Aug 2020 10:28:09 +0200 Subject: [PATCH 3/6] don't continue messages from more than 5min ago --- src/domain/session/room/timeline/TimelineViewModel.js | 9 ++++++--- src/domain/session/room/timeline/tiles/MessageTile.js | 10 +++++++++- src/domain/session/room/timeline/tilesCreator.js | 4 ++-- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/domain/session/room/timeline/TimelineViewModel.js b/src/domain/session/room/timeline/TimelineViewModel.js index faf93609..1527d3ae 100644 --- a/src/domain/session/room/timeline/TimelineViewModel.js +++ b/src/domain/session/room/timeline/TimelineViewModel.js @@ -33,14 +33,17 @@ when loading, it just reads events from a sortkey backwards or forwards... */ import {TilesCollection} from "./TilesCollection.js"; import {tilesCreator} from "./tilesCreator.js"; +import {ViewModel} from "../../../ViewModel.js"; -export class TimelineViewModel { - constructor({room, timeline, ownUserId}) { +export class TimelineViewModel extends ViewModel { + constructor(options) { + super(options); + const {room, timeline, ownUserId} = options; this._timeline = timeline; // once we support sending messages we could do // timeline.entries.concat(timeline.pendingEvents) // for an ObservableList that also contains local echos - this._tiles = new TilesCollection(timeline.entries, tilesCreator({room, ownUserId})); + this._tiles = new TilesCollection(timeline.entries, tilesCreator({room, ownUserId, clock: this.clock})); } /** diff --git a/src/domain/session/room/timeline/tiles/MessageTile.js b/src/domain/session/room/timeline/tiles/MessageTile.js index f7c47030..8ad0b22e 100644 --- a/src/domain/session/room/timeline/tiles/MessageTile.js +++ b/src/domain/session/room/timeline/tiles/MessageTile.js @@ -20,6 +20,7 @@ import {getIdentifierColorNumber} from "../../../../avatar.js"; export class MessageTile extends SimpleTile { constructor(options) { super(options); + this._clock = options.clock; this._isOwn = this._entry.sender === options.ownUserId; this._date = this._entry.timestamp ? new Date(this._entry.timestamp) : null; this._isContinuation = false; @@ -59,7 +60,14 @@ export class MessageTile extends SimpleTile { updatePreviousSibling(prev) { super.updatePreviousSibling(prev); - const isContinuation = prev && prev instanceof MessageTile && prev.sender === this.sender; + let isContinuation = false; + if (prev && prev instanceof MessageTile && prev.sender === this.sender) { + // timestamp is null for pending events + const myTimestamp = this._entry.timestamp || this._clock.now(); + const otherTimestamp = prev._entry.timestamp || this._clock.now(); + // other message was sent less than 5min ago + isContinuation = (myTimestamp - otherTimestamp) < (5 * 60 * 1000); + } if (isContinuation !== this._isContinuation) { this._isContinuation = isContinuation; this.emitChange("isContinuation"); diff --git a/src/domain/session/room/timeline/tilesCreator.js b/src/domain/session/room/timeline/tilesCreator.js index 2e294467..1ae17bdc 100644 --- a/src/domain/session/room/timeline/tilesCreator.js +++ b/src/domain/session/room/timeline/tilesCreator.js @@ -22,9 +22,9 @@ import {RoomNameTile} from "./tiles/RoomNameTile.js"; import {RoomMemberTile} from "./tiles/RoomMemberTile.js"; import {EncryptedEventTile} from "./tiles/EncryptedEventTile.js"; -export function tilesCreator({room, ownUserId}) { +export function tilesCreator({room, ownUserId, clock}) { return function tilesCreator(entry, emitUpdate) { - const options = {entry, emitUpdate, ownUserId}; + const options = {entry, emitUpdate, ownUserId, clock}; if (entry.isGap) { return new GapTile(options, room); } else if (entry.eventType) { From fcf70522177465274934ac4bcea77b26b6e0b7d1 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 19 Aug 2020 10:28:39 +0200 Subject: [PATCH 4/6] forgot to add header here before --- src/ui/web/session/room/timeline/common.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/ui/web/session/room/timeline/common.js b/src/ui/web/session/room/timeline/common.js index 848f1cf5..f72f51f0 100644 --- a/src/ui/web/session/room/timeline/common.js +++ b/src/ui/web/session/room/timeline/common.js @@ -1,3 +1,20 @@ +/* +Copyright 2020 Bruno Windels +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + export function renderMessage(t, vm, children) { const classes = { "TextMessageView": true, From b2a01ba860140ba2407b1bc4d15aab444946cbbd Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 19 Aug 2020 11:02:27 +0200 Subject: [PATCH 5/6] timeline spacing and font-size tweaking --- src/ui/web/css/themes/element/theme.css | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index e1ef7a41..53ccb2f8 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/src/ui/web/css/themes/element/theme.css @@ -149,7 +149,7 @@ button.styled { } .LeftPanel li { - margin: 5px 10px; + margin: 3px 10px; padding: 5px; /* vertical align */ align-items: center; @@ -227,7 +227,6 @@ a { color: #FF4B55; } - .RoomHeader { background: rgba(245, 245, 245, 0.90); padding: 10px; @@ -235,6 +234,7 @@ a { .RoomHeader h2 { font-size: 1.8rem; + font-weight: 600; } .RoomHeader button { @@ -257,7 +257,7 @@ a { } .RoomHeader .topic { - font-size: 0.8em; + font-size: 14rem; } .RoomView_error { @@ -293,9 +293,16 @@ a { background-color: #E3E8F0; } +ul.Timeline > li:not(.continuation) { + margin-top: 7px; +} + +ul.Timeline > li.continuation .sender { + display: none; +} .message-container { - padding: 2px 10px; + padding: 1px 10px 0px 10px; margin: 5px 10px 0 10px; } @@ -305,8 +312,9 @@ a { } .message-container .sender { - margin: 5px 0; + margin: 6px 0; font-weight: bold; + line-height: 1.7rem; } .hydrogen .sender.usercolor1 { color: var(--usercolor1); } @@ -321,6 +329,7 @@ a { .message-container time { padding: 2px 0 0px 10px; font-size: 0.8em; + line-height: normal; color: #aaa; } @@ -329,7 +338,8 @@ a { } .message-container p { - margin: 5px 0; + margin: 3px 0; + line-height: 2.2rem; } .AnnouncementView { From 82762823e35f2ff5fa6edbe0e058fc7823d40d62 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 19 Aug 2020 11:02:47 +0200 Subject: [PATCH 6/6] use normal sized avatar for room header --- src/ui/web/session/room/RoomView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/web/session/room/RoomView.js b/src/ui/web/session/room/RoomView.js index de11619a..7a4abd45 100644 --- a/src/ui/web/session/room/RoomView.js +++ b/src/ui/web/session/room/RoomView.js @@ -26,7 +26,7 @@ export class RoomView extends TemplateView { t.div({className: "TimelinePanel"}, [ t.div({className: "RoomHeader"}, [ t.button({className: "back", onClick: () => vm.close()}), - t.div({className: `avatar large usercolor${vm.avatarColorNumber}`}, vm => vm.avatarInitials), + t.div({className: `avatar usercolor${vm.avatarColorNumber}`}, vm => vm.avatarInitials), t.div({className: "room-description"}, [ t.h2(vm => vm.name), ]),