Merge pull request #57 from vector-im/bwindels/size-tweaking

Font-size and spacing tweaks to be more like element-web

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 {
+export class TimelineViewModel extends ViewModel {
-    constructor({room, timeline, ownUserId}) {
+    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}));
     }
 
     /**

src/domain/session/room/timeline/tiles/MessageTile.js

@@ -20,8 +20,9 @@ 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 = new Date(this._entry.timestamp);
+        this._date = this._entry.timestamp ? new Date(this._entry.timestamp) : null;
         this._isContinuation = false;
     }
 
@@ -38,11 +39,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() {
@@ -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");

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) {

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 {
@@ -144,7 +149,7 @@ button.styled {
 }
 
 .LeftPanel li {
-    margin: 5px 10px;
+    margin: 3px 10px;
     padding: 5px;
     /* vertical align */
     align-items: center;
@@ -222,12 +227,16 @@ a {
     color: #FF4B55;
 }
 
-
 .RoomHeader {
     background: rgba(245, 245, 245, 0.90);
     padding: 10px;
 }
 
+.RoomHeader h2 {
+    font-size: 1.8rem;
+    font-weight: 600;
+}
+
 .RoomHeader button {
     width: 40px;
     height: 40px;
@@ -248,7 +257,7 @@ a {
 }
 
 .RoomHeader .topic {
-    font-size: 0.8em;
+    font-size: 14rem;
 }
 
 .RoomView_error {
@@ -284,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;
 }
 
@@ -296,9 +312,9 @@ a {
 }
 
 .message-container .sender {
-    margin: 5px 0;
+    margin: 6px 0;
-    font-size: 0.9em;
     font-weight: bold;
+    line-height: 1.7rem;
 }
 
 .hydrogen .sender.usercolor1 { color: var(--usercolor1); }
@@ -313,6 +329,7 @@ a {
 .message-container time {
     padding: 2px 0 0px 10px;
     font-size: 0.8em;
+    line-height: normal;
     color: #aaa;
 }
 
@@ -321,7 +338,8 @@ a {
 }
 
 .message-container p {
-    margin: 5px 0;
+    margin: 3px 0;
+    line-height: 2.2rem;
 }
 
 .AnnouncementView {
@@ -333,7 +351,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;
 }

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 {

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),
                     ]),

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)])]
         );
     }
 }

src/ui/web/session/room/timeline/common.js

@@ -1,3 +1,20 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+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,