From d33e7b2a8b695ea882804fe27c8da244a2fa7e4e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 12 Aug 2020 18:23:24 +0200 Subject: [PATCH 01/10] basic element theme colors --- src/ui/web/css/themes/element/theme.css | 64 ++++++++----------------- 1 file changed, 20 insertions(+), 44 deletions(-) diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index 36cc0d77..1af36ee3 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/src/ui/web/css/themes/element/theme.css @@ -20,18 +20,18 @@ limitations under the License. .hydrogen { font-family: 'Inter', sans-serif, 'emoji'; background-color: white; - color: black; + color: #2e2f32; } .avatar { border-radius: 100%; - background: black; + background: #3D88FA; + color: white; } .LeftPanel { - background: #333; - color: white; + background: rgba(245, 245, 245, 0.90); } .LeftPanel ul { @@ -47,16 +47,8 @@ limitations under the License. } .LeftPanel li.active { - background: lightgray; - color: black; -} - -.LeftPanel li { - border-bottom: 1px #555 solid; -} - -.LeftPanel li:last-child { - border-bottom: none; + background: rgba(141, 151, 165, 0.1); + border-radius: 5px; } .LeftPanel li > * { @@ -73,7 +65,16 @@ a { .SessionStatusView { padding: 5px; - background-color: #555; + position: absolute; + top: 20px; + right: 20px; + background-color: #3D88FA; + color: white; + border-radius: 10px; +} + +.room-shown .SessionStatusView { + top: 72px; } .RoomPlaceholderView { @@ -86,10 +87,9 @@ a { background-color: grey; } - .RoomHeader { + background: rgba(245, 245, 245, 0.90); padding: 10px; - background-color: #333; } .RoomHeader button { @@ -115,11 +115,6 @@ a { font-size: 0.8em; } -.RoomHeader { - padding: 10px; - background-color: #333; -} - .RoomView_error { color: red; } @@ -130,10 +125,8 @@ a { } .message-container { - max-width: 80%; padding: 5px 10px; margin: 5px 10px; - background: blue; } .message-container .sender { @@ -145,7 +138,6 @@ a { .TextMessageView .message-container time { padding: 2px 0 0px 20px; font-size: 0.9em; - color: lightblue; } .message-container time { @@ -153,24 +145,8 @@ a { color: lightblue; } -.own time { - color: lightgreen; -} - -.own .message-container { - background-color: darkgreen; -} - -.TextMessageView.own .message-container { - margin-left: auto; -} - .TextMessageView.pending .message-container { - background-color: #333; -} - -.TextMessageView .message-container time { - float: right; + color: #ccc; } .message-container p { @@ -185,8 +161,8 @@ a { .AnnouncementView > div { margin: 0 auto; padding: 10px 20px; - background-color: #333; + background-color: rgba(245, 245, 245, 0.90); font-size: 0.9em; - color: #CCC; text-align: center; + border-radius: 10px; } From 44cc691c799ed1caae8353c792d9d326c818bbb2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 13 Aug 2020 12:41:00 +0200 Subject: [PATCH 02/10] add avatar and sender user colors --- src/domain/session/avatar.js | 40 ++++++++++++++++++- src/domain/session/room/RoomViewModel.js | 6 ++- .../room/timeline/tiles/MessageTile.js | 5 +++ .../session/roomlist/RoomTileViewModel.js | 6 ++- src/ui/web/css/themes/element/theme.css | 27 +++++++++++++ src/ui/web/session/RoomTile.js | 4 +- src/ui/web/session/room/RoomView.js | 2 +- src/ui/web/session/room/timeline/ImageView.js | 10 ++--- .../session/room/timeline/TextMessageView.js | 9 ++--- src/ui/web/session/room/timeline/common.js | 14 +++++++ 10 files changed, 102 insertions(+), 21 deletions(-) create mode 100644 src/ui/web/session/room/timeline/common.js diff --git a/src/domain/session/avatar.js b/src/domain/session/avatar.js index 355a6cf1..9184762b 100644 --- a/src/domain/session/avatar.js +++ b/src/domain/session/avatar.js @@ -15,6 +15,42 @@ limitations under the License. */ export function avatarInitials(name) { - const words = name.split(" ").slice(0, 2); - return words.reduce((i, w) => i + w.charAt(0).toUpperCase(), ""); + let words = name.split(" "); + if (words.length === 1) { + words = words[0].split("-"); + } + words = words.slice(0, 2); + return words.reduce((i, w) => { + let firstChar = w.charAt(0); + if (firstChar === "!" || firstChar === "@" || firstChar === "#") { + firstChar = w.charAt(1); + } + return i + firstChar.toUpperCase(); + }, ""); +} + +/** + * calculates a numeric hash for a given string + * + * @param {string} str string to hash + * + * @return {number} + */ +function hashCode(str) { + let hash = 0; + let i; + let chr; + if (str.length === 0) { + return hash; + } + for (i = 0; i < str.length; i++) { + chr = str.charCodeAt(i); + hash = ((hash << 5) - hash) + chr; + hash |= 0; + } + return Math.abs(hash); +} + +export function getIdentifierColorNumber(id) { + return (hashCode(id) % 8) + 1; } diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index d27f3737..af163c5f 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -15,7 +15,7 @@ limitations under the License. */ import {TimelineViewModel} from "./timeline/TimelineViewModel.js"; -import {avatarInitials} from "../avatar.js"; +import {avatarInitials, getIdentifierColorNumber} from "../avatar.js"; import {ViewModel} from "../../ViewModel.js"; export class RoomViewModel extends ViewModel { @@ -90,7 +90,9 @@ export class RoomViewModel extends ViewModel { return avatarInitials(this._room.name); } - + get avatarColorNumber() { + return getIdentifierColorNumber(this._room.id) + } async _sendMessage(message) { if (message) { diff --git a/src/domain/session/room/timeline/tiles/MessageTile.js b/src/domain/session/room/timeline/tiles/MessageTile.js index ffae90b8..e74a26a1 100644 --- a/src/domain/session/room/timeline/tiles/MessageTile.js +++ b/src/domain/session/room/timeline/tiles/MessageTile.js @@ -15,6 +15,7 @@ limitations under the License. */ import {SimpleTile} from "./SimpleTile.js"; +import {getIdentifierColorNumber} from "../../../avatar.js"; export class MessageTile extends SimpleTile { constructor(options) { @@ -32,6 +33,10 @@ export class MessageTile extends SimpleTile { return this._entry.sender; } + get senderColorNumber() { + return getIdentifierColorNumber(this._entry.sender); + } + get date() { return this._date.toLocaleDateString({}, {month: "numeric", day: "numeric"}); } diff --git a/src/domain/session/roomlist/RoomTileViewModel.js b/src/domain/session/roomlist/RoomTileViewModel.js index d1585262..a10ecc9c 100644 --- a/src/domain/session/roomlist/RoomTileViewModel.js +++ b/src/domain/session/roomlist/RoomTileViewModel.js @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {avatarInitials} from "../avatar.js"; +import {avatarInitials, getIdentifierColorNumber} from "../avatar.js"; import {ViewModel} from "../../ViewModel.js"; export class RoomTileViewModel extends ViewModel { @@ -60,4 +60,8 @@ export class RoomTileViewModel extends ViewModel { get avatarInitials() { return avatarInitials(this._room.name); } + + get avatarColorNumber() { + return getIdentifierColorNumber(this._room.id) + } } diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index 1af36ee3..1cf68963 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/src/ui/web/css/themes/element/theme.css @@ -21,6 +21,15 @@ limitations under the License. font-family: 'Inter', sans-serif, 'emoji'; background-color: white; color: #2e2f32; + + --usercolor1: #368BD6; + --usercolor2: #AC3BA8; + --usercolor3: #03B381; + --usercolor4: #E64F7A; + --usercolor5: #FF812D; + --usercolor6: #2DC2C5; + --usercolor7: #5C56F5; + --usercolor8: #74D12C; } .avatar { @@ -30,6 +39,15 @@ limitations under the License. color: white; } +.hydrogen .avatar.usercolor1 { background-color: var(--usercolor1); } +.hydrogen .avatar.usercolor2 { background-color: var(--usercolor2); } +.hydrogen .avatar.usercolor3 { background-color: var(--usercolor3); } +.hydrogen .avatar.usercolor4 { background-color: var(--usercolor4); } +.hydrogen .avatar.usercolor5 { background-color: var(--usercolor5); } +.hydrogen .avatar.usercolor6 { background-color: var(--usercolor6); } +.hydrogen .avatar.usercolor7 { background-color: var(--usercolor7); } +.hydrogen .avatar.usercolor8 { background-color: var(--usercolor8); } + .LeftPanel { background: rgba(245, 245, 245, 0.90); } @@ -135,6 +153,15 @@ a { font-weight: bold; } +.hydrogen .sender.usercolor1 { color: var(--usercolor1); } +.hydrogen .sender.usercolor2 { color: var(--usercolor2); } +.hydrogen .sender.usercolor3 { color: var(--usercolor3); } +.hydrogen .sender.usercolor4 { color: var(--usercolor4); } +.hydrogen .sender.usercolor5 { color: var(--usercolor5); } +.hydrogen .sender.usercolor6 { color: var(--usercolor6); } +.hydrogen .sender.usercolor7 { color: var(--usercolor7); } +.hydrogen .sender.usercolor8 { color: var(--usercolor8); } + .TextMessageView .message-container time { padding: 2px 0 0px 20px; font-size: 0.9em; diff --git a/src/ui/web/session/RoomTile.js b/src/ui/web/session/RoomTile.js index bdce01cc..9268bfe5 100644 --- a/src/ui/web/session/RoomTile.js +++ b/src/ui/web/session/RoomTile.js @@ -17,9 +17,9 @@ limitations under the License. import {TemplateView} from "../general/TemplateView.js"; export class RoomTile extends TemplateView { - render(t) { + render(t, vm) { return t.li({"className": {"active": vm => vm.isOpen}}, [ - t.div({className: "avatar medium"}, vm => vm.avatarInitials), + t.div({className: `avatar medium usercolor${vm.avatarColorNumber}`}, vm => vm.avatarInitials), t.div({className: "description"}, t.div({className: "name"}, vm => vm.name)) ]); } diff --git a/src/ui/web/session/room/RoomView.js b/src/ui/web/session/room/RoomView.js index 6080368d..0c7ace9e 100644 --- a/src/ui/web/session/room/RoomView.js +++ b/src/ui/web/session/room/RoomView.js @@ -30,7 +30,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"}, vm => vm.avatarInitials), + t.div({className: `avatar large usercolor${vm.avatarColorNumber}`}, vm => vm.avatarInitials), t.div({className: "room-description"}, [ t.h2(vm => vm.name), ]), diff --git a/src/ui/web/session/room/timeline/ImageView.js b/src/ui/web/session/room/timeline/ImageView.js index d5f9279f..4770510c 100644 --- a/src/ui/web/session/room/timeline/ImageView.js +++ b/src/ui/web/session/room/timeline/ImageView.js @@ -15,6 +15,7 @@ limitations under the License. */ import {TemplateView} from "../../../general/TemplateView.js"; +import {renderMessage} from "./common.js"; export class ImageView extends TemplateView { render(t, vm) { @@ -33,13 +34,8 @@ export class ImageView extends TemplateView { style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;` }, image); - return t.li( - {className: {"TextMessageView": true, own: vm.isOwn, pending: vm.isPending}}, - t.div({className: "message-container"}, [ - t.div({className: "sender"}, vm => vm.isContinuation ? "" : vm.sender), - t.div(linkContainer), - t.p(t.time(vm.date + " " + vm.time)), - ]) + return renderMessage(t, vm, + [t.div(linkContainer), t.p(t.time(vm.date + " " + vm.time))] ); } } diff --git a/src/ui/web/session/room/timeline/TextMessageView.js b/src/ui/web/session/room/timeline/TextMessageView.js index ed67a1fa..260eaf29 100644 --- a/src/ui/web/session/room/timeline/TextMessageView.js +++ b/src/ui/web/session/room/timeline/TextMessageView.js @@ -15,15 +15,12 @@ limitations under the License. */ import {TemplateView} from "../../../general/TemplateView.js"; +import {renderMessage} from "./common.js"; export class TextMessageView extends TemplateView { render(t, vm) { - return t.li( - {className: {"TextMessageView": true, own: vm.isOwn, pending: vm.isPending}}, - t.div({className: "message-container"}, [ - t.div({className: "sender"}, vm => vm.isContinuation ? "" : vm.sender), - t.p([vm.text, t.time(vm.date + " " + vm.time)]), - ]) + return renderMessage(t, vm, + [t.p([vm.text, t.time(vm.date + " " + vm.time)])] ); } } diff --git a/src/ui/web/session/room/timeline/common.js b/src/ui/web/session/room/timeline/common.js new file mode 100644 index 00000000..848f1cf5 --- /dev/null +++ b/src/ui/web/session/room/timeline/common.js @@ -0,0 +1,14 @@ +export function renderMessage(t, vm, children) { + const classes = { + "TextMessageView": true, + own: vm.isOwn, + pending: vm.isPending, + continuation: vm.isContinuation, + }; + const sender = t.div({className: `sender usercolor${vm.senderColorNumber}`}, vm => vm.isContinuation ? "" : vm.sender); + children = [sender].concat(children); + return t.li( + {className: classes}, + t.div({className: "message-container"}, children) + ); +} From d386343d5c7a75a25746a6da39805a17c845b993 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 13 Aug 2020 17:58:56 +0200 Subject: [PATCH 03/10] adjust spacing, etc in timeline --- src/ui/web/css/themes/element/theme.css | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index 1cf68963..517537bb 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/src/ui/web/css/themes/element/theme.css @@ -19,6 +19,7 @@ limitations under the License. .hydrogen { font-family: 'Inter', sans-serif, 'emoji'; + font-size: 15px; background-color: white; color: #2e2f32; @@ -58,8 +59,8 @@ limitations under the License. } .LeftPanel li { - margin: 5px; - padding: 10px; + margin: 5px 10px; + padding: 5px; /* vertical align */ align-items: center; } @@ -143,8 +144,13 @@ a { } .message-container { - padding: 5px 10px; - margin: 5px 10px; + padding: 2px 10px; + margin: 5px 10px 0 10px; +} + +.TextMessageView.continuation .message-container { + margin-top: 0; + margin-bottom: 0; } .message-container .sender { @@ -162,14 +168,10 @@ a { .hydrogen .sender.usercolor7 { color: var(--usercolor7); } .hydrogen .sender.usercolor8 { color: var(--usercolor8); } -.TextMessageView .message-container time { - padding: 2px 0 0px 20px; - font-size: 0.9em; -} - .message-container time { - font-size: 0.9em; - color: lightblue; + padding: 2px 0 0px 10px; + font-size: 0.8em; + color: #aaa; } .TextMessageView.pending .message-container { From 291a43b999259638a4bde70613c6f5d40a524d0a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 13 Aug 2020 17:59:10 +0200 Subject: [PATCH 04/10] remove spaces --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 09e51f34..cdf0ad4f 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,6 @@ navigator.serviceWorker.register('sw.js') .then(function() { console.log("Service Worker registered"); }); } - + From 84d4584302d9af9b3936d69e9cb1f183ba98779a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 13 Aug 2020 17:59:36 +0200 Subject: [PATCH 05/10] switch view gallery to element theme --- src/ui/web/view-gallery.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/web/view-gallery.html b/src/ui/web/view-gallery.html index f5db307f..43827afb 100644 --- a/src/ui/web/view-gallery.html +++ b/src/ui/web/view-gallery.html @@ -3,7 +3,7 @@ - +