Message selection fixed and optimised for speed

This commit is contained in:
Vincent 2020-01-10 16:25:29 +11:00
parent d20d62e8c6
commit 2b7af04587
7 changed files with 82 additions and 16 deletions

View file

@ -35,10 +35,6 @@
</script>
<script type='text/x-tmpl-mustache' id='conversation-loading-screen'>
<div class='content'>
<img src='images/session/brand.svg' class='session-filter-color-green session-logo-128' />
<p class='session-logo-text'>SESSION</p>
</div>
</script>
<script type='text/x-tmpl-mustache' id='two-column'>
@ -574,6 +570,7 @@
<script type='text/javascript' src='js/views/scroll_down_button_view.js'></script>
<script type='text/javascript' src='js/views/toast_view.js'></script>
<script type='text/javascript' src='js/views/session_toast_view.js'></script>
<script type='text/javascript' src='js/views/conversation_loading_view.js'></script>
<script type='text/javascript' src='js/views/session_toggle_view.js'></script>
<script type='text/javascript' src='js/views/session_modal_view.js'></script>
<script type='text/javascript' src='js/views/session_dropdown_view.js'></script>
@ -621,9 +618,6 @@
</head>
<body>
<div class='app-loading-screen'>
<div class='content'>
<img src='images/session/brand.svg' class='session-filter-color-green session-logo-128' />
<p class='session-logo-text'>SESSION</p>
</div>
<script type='text/javascript' src='js/background.js'></script>

View file

@ -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,

View file

@ -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);
},
});
})();

View file

@ -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'),

View file

@ -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',

View file

@ -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;

View file

@ -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 (
<div className="conversation-loader">
<SessionSpinner />
</div>
);
}
}