diff --git a/public/sym/throbber.svg b/public/sym/throbber.svg new file mode 100644 index 0000000..eed8ddf --- /dev/null +++ b/public/sym/throbber.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/components/throbber.vue b/src/components/throbber.vue new file mode 100644 index 0000000..88bf393 --- /dev/null +++ b/src/components/throbber.vue @@ -0,0 +1,39 @@ + + + + {{text}} + + + + + + \ No newline at end of file diff --git a/src/views/rooms.vue b/src/views/rooms.vue index 65bf8c6..cc359ef 100644 --- a/src/views/rooms.vue +++ b/src/views/rooms.vue @@ -1,18 +1,22 @@ - loading... + [chat] - - - {{room.name}} + + + + + {{room.name}} + {{getPreviewString(room)}} + 0?avatarState[avatarState.length-1].getContent().url:undefined; + }, + getLatestEvent(room){ + if (!room.timeline[room.timeline.length-1]) return undefined; + return room.timeline[room.timeline.length-1].event; + }, + getPreviewString(room){ + let event = this.getLatestEvent(room); + if (!event) return ''; + let text = event.content.body + ? event.content.body.length>20?event.content.body.substr(0,19)+'…':event.content.body + : 'unknown event'; + return `${this.calcUserName(event.sender)}: ${text} ${getTime(event.origin_server_ts)}`; + + }, + calcUserName(userId) { + if (matrix.user === userId) return 'you'; + return matrix.client.getUser(userId).displayName || userId; } }, data(){ return { matrix, currentRoom: undefined, - showChatInfo: false + showChatInfo: false, + search: '' } }, mounted() { @@ -108,9 +133,15 @@ export default { } .roomListName{ position: absolute; - left: 4.5rem; - top: 1rem; - color: #fff; + left: 4rem; + top: 0.25rem; +} +.preview{ + position: absolute; + top: 1.5rem; + left: 4rem; + font-size: 0.8rem; + text-align: left; } .roomListSmall{ position: absolute; @@ -154,6 +185,27 @@ export default { .roomImg.small{ margin-left: calc(50% - 2rem); } +.throbber{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +input{ + padding: 0 2rem 0 2rem; + height: 2.5rem; + width: calc(100% - 6rem); + left: 1rem; + color: #fff; + background-color: #1d1d1d; + border-radius: 1.25rem; + border: 1px solid #fff; + text-align: center; + font-size: 1.1rem; + margin: 0.5rem; + appearance: none; + outline: none; +} @media (max-width: 48rem) { .roomList{