From 2b7af04587866aff1f898393c723e2a3a47a3dd1 Mon Sep 17 00:00:00 2001 From: Vincent Date: Fri, 10 Jan 2020 16:25:29 +1100 Subject: [PATCH] Message selection fixed and optimised for speed --- background.html | 8 +------ js/modules/signal.js | 4 ++++ js/views/conversation_loading_view.js | 25 +++++++++++++++++++++ js/views/conversation_view.js | 6 +---- js/views/inbox_view.js | 23 +++++++++++++++---- stylesheets/_session.scss | 13 +++++++++++ ts/components/ConversationLoadingScreen.tsx | 19 ++++++++++++++++ 7 files changed, 82 insertions(+), 16 deletions(-) create mode 100644 js/views/conversation_loading_view.js create mode 100644 ts/components/ConversationLoadingScreen.tsx diff --git a/background.html b/background.html index d035f7b37..5391da3f5 100644 --- a/background.html +++ b/background.html @@ -35,10 +35,6 @@ + @@ -621,9 +618,6 @@
-
- -

SESSION

diff --git a/js/modules/signal.js b/js/modules/signal.js index 2e2946858..b5f158f06 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -18,6 +18,9 @@ const LinkPreviews = require('./link_previews'); const AttachmentDownloads = require('./attachment_downloads'); // Components +const { + ConversationLoadingScreen, +} = require('../../ts/components/ConversationLoadingScreen'); const { AttachmentList, } = require('../../ts/components/conversation/AttachmentList'); @@ -245,6 +248,7 @@ exports.setup = (options = {}) => { }); const Components = { + ConversationLoadingScreen, AttachmentList, CaptionEditor, ContactDetail, diff --git a/js/views/conversation_loading_view.js b/js/views/conversation_loading_view.js new file mode 100644 index 000000000..c93b26f13 --- /dev/null +++ b/js/views/conversation_loading_view.js @@ -0,0 +1,25 @@ +/* global Whisper */ + +// eslint-disable-next-line func-names +(function() { + 'use strict'; + + window.Whisper = window.Whisper || {}; + + Whisper.ConversationLoadingScreen = Whisper.View.extend({ + initialize() { + }, + + render() { + this.toastView = new Whisper.ReactWrapperView({ + className: 'app-loading-wrapper', + Component: window.Signal.Components.ConversationLoadingScreen, + props: this.props, + }); + + this.$el.append(this.toastView.el); + }, + + }); + })(); + \ No newline at end of file diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 17e15899b..1e583ca86 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -46,11 +46,6 @@ }, }); - Whisper.ConversationLoadingScreen = Whisper.View.extend({ - templateName: 'conversation-loading-screen', - className: 'conversation-loading-screen', - }); - Whisper.ConversationView = Whisper.View.extend({ className() { return ['conversation', this.model.get('type')].join(' '); @@ -148,6 +143,7 @@ this.loadingScreen.render(); this.loadingScreen.$el.prependTo(this.$('.discussion-container')); + this.window = options.window; this.fileInput = new Whisper.FileInputView({ el: this.$('.attachment-list'), diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 23b978249..27889902e 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -23,17 +23,31 @@ open(conversation) { const id = `conversation-${conversation.cid}`; const container = $('#main-view .conversation-stack'); - const conversationOpened = container.children()[0].id === id + + // Has been opened since app sart, but not focussed + const conversationExists = container.children(`#${id}`).length > 0; + // Is focussed + const conversationOpened = container.children().first().id === id // To limit the size of the DOM for speed - const maxNumConversations = 5; + const maxNumConversations = 10; const numConversations = container.children().not('.conversation.placeholder').length; - const shouldRemoveConversation = numConversations > maxNumConversations; + const shouldTrimConversations = numConversations > maxNumConversations; - if (shouldRemoveConversation){ + if (shouldTrimConversations){ + // Removes conversation which has been hidden the longest container.children()[numConversations - 1].remove(); } + if (conversationExists) { + // User opened conversation, move it to top of stack, rather than re-rendering + const conversations = container.children().not('.conversation.placeholder'); + container.children(`#${id}`).first().insertBefore(conversations.first()); + conversation.trigger('opened'); + + return; + } + if (! conversationOpened) { this.$el .first() @@ -88,6 +102,7 @@ message: i18n('loading'), }, }); + Whisper.InboxView = Whisper.View.extend({ templateName: 'two-column', diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 83f19eec5..3d7abde01 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -854,6 +854,19 @@ label { margin-left: 75px; } + +.conversation-loader { + height: 100%; + margin-top: 45vh; + display: flex; + align-items: center; + justify-content: center; + + &>div{ + display: block; + } +} + .session-loader { display: inline-block; position: relative; diff --git a/ts/components/ConversationLoadingScreen.tsx b/ts/components/ConversationLoadingScreen.tsx new file mode 100644 index 000000000..869301023 --- /dev/null +++ b/ts/components/ConversationLoadingScreen.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import { SessionSpinner } from './session/SessionSpinner'; + + +export class ConversationLoadingScreen extends React.PureComponent { + constructor(props: any) { + super(props); + } + + public render() { + + return ( +
+ +
+ ); + } +}