mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Message selection fixed and optimised for speed
This commit is contained in:
parent
d20d62e8c6
commit
2b7af04587
7 changed files with 82 additions and 16 deletions
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
25
js/views/conversation_loading_view.js
Normal file
25
js/views/conversation_loading_view.js
Normal 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);
|
||||
},
|
||||
|
||||
});
|
||||
})();
|
||||
|
|
@ -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'),
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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;
|
||||
|
|
19
ts/components/ConversationLoadingScreen.tsx
Normal file
19
ts/components/ConversationLoadingScreen.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue