Move left pane entirely to React
This commit is contained in:
parent
bf904ddd12
commit
b3ac1373fa
142 changed files with 5016 additions and 3428 deletions
|
@ -1,10 +1,12 @@
|
|||
/* global ConversationController: false */
|
||||
/* global extension: false */
|
||||
/* global getInboxCollection: false */
|
||||
/* global i18n: false */
|
||||
/* global Whisper: false */
|
||||
/* global textsecure: false */
|
||||
/* global Signal: false */
|
||||
/* global
|
||||
ConversationController,
|
||||
extension,
|
||||
getInboxCollection,
|
||||
i18n,
|
||||
Whisper,
|
||||
textsecure,
|
||||
Signal
|
||||
*/
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
|
@ -38,38 +40,6 @@
|
|||
},
|
||||
});
|
||||
|
||||
Whisper.FontSizeView = Whisper.View.extend({
|
||||
defaultSize: 14,
|
||||
maxSize: 30,
|
||||
minSize: 14,
|
||||
initialize() {
|
||||
this.currentSize = this.defaultSize;
|
||||
this.render();
|
||||
},
|
||||
events: { keydown: 'zoomText' },
|
||||
zoomText(e) {
|
||||
if (!e.ctrlKey) {
|
||||
return;
|
||||
}
|
||||
const keyCode = e.which || e.keyCode;
|
||||
const maxSize = 22; // if bigger text goes outside send-message textarea
|
||||
const minSize = 14;
|
||||
if (keyCode === 189 || keyCode === 109) {
|
||||
if (this.currentSize > minSize) {
|
||||
this.currentSize -= 1;
|
||||
}
|
||||
} else if (keyCode === 187 || keyCode === 107) {
|
||||
if (this.currentSize < maxSize) {
|
||||
this.currentSize += 1;
|
||||
}
|
||||
}
|
||||
this.render();
|
||||
},
|
||||
render() {
|
||||
this.$el.css('font-size', `${this.currentSize}px`);
|
||||
},
|
||||
});
|
||||
|
||||
Whisper.AppLoadingScreen = Whisper.View.extend({
|
||||
templateName: 'app-loading-screen',
|
||||
className: 'app-loading-screen',
|
||||
|
@ -92,20 +62,6 @@
|
|||
this.render();
|
||||
this.$el.attr('tabindex', '1');
|
||||
|
||||
// eslint-disable-next-line no-new
|
||||
new Whisper.FontSizeView({ el: this.$el });
|
||||
|
||||
const ourNumber = textsecure.storage.user.getNumber();
|
||||
const me = ConversationController.getOrCreate(ourNumber, 'private');
|
||||
this.mainHeaderView = new Whisper.ReactWrapperView({
|
||||
className: 'main-header-wrapper',
|
||||
Component: Signal.Components.MainHeader,
|
||||
props: me.format(),
|
||||
});
|
||||
const update = () => this.mainHeaderView.update(me.format());
|
||||
this.listenTo(me, 'change', update);
|
||||
this.$('.main-header-placeholder').append(this.mainHeaderView.el);
|
||||
|
||||
this.conversation_stack = new Whisper.ConversationStack({
|
||||
el: this.$('.conversation-stack'),
|
||||
model: { window: options.window },
|
||||
|
@ -125,40 +81,6 @@
|
|||
this.networkStatusView.render();
|
||||
}
|
||||
});
|
||||
this.listenTo(inboxCollection, 'select', this.openConversation);
|
||||
|
||||
this.inboxListView = new Whisper.ConversationListView({
|
||||
el: this.$('.inbox'),
|
||||
collection: inboxCollection,
|
||||
}).render();
|
||||
|
||||
this.inboxListView.listenTo(
|
||||
inboxCollection,
|
||||
'add change:timestamp change:name change:number',
|
||||
this.inboxListView.updateLocation
|
||||
);
|
||||
this.inboxListView.listenTo(
|
||||
inboxCollection,
|
||||
'remove',
|
||||
this.inboxListView.removeItem
|
||||
);
|
||||
|
||||
this.searchView = new Whisper.ConversationSearchView({
|
||||
el: this.$('.search-results'),
|
||||
input: this.$('input.search'),
|
||||
});
|
||||
|
||||
this.searchView.$el.hide();
|
||||
|
||||
this.listenTo(this.searchView, 'hide', function toggleVisibility() {
|
||||
this.searchView.$el.hide();
|
||||
this.inboxListView.$el.show();
|
||||
});
|
||||
this.listenTo(this.searchView, 'show', function toggleVisibility() {
|
||||
this.searchView.$el.show();
|
||||
this.inboxListView.$el.hide();
|
||||
});
|
||||
this.listenTo(this.searchView, 'open', this.openConversation);
|
||||
|
||||
this.networkStatusView = new Whisper.NetworkStatusView();
|
||||
this.$el
|
||||
|
@ -170,18 +92,78 @@
|
|||
banner.$el.prependTo(this.$el);
|
||||
this.$el.addClass('expired');
|
||||
}
|
||||
|
||||
this.setupLeftPane();
|
||||
},
|
||||
render_attributes: {
|
||||
welcomeToSignal: i18n('welcomeToSignal'),
|
||||
selectAContact: i18n('selectAContact'),
|
||||
searchForPeopleOrGroups: i18n('searchForPeopleOrGroups'),
|
||||
settings: i18n('settings'),
|
||||
},
|
||||
events: {
|
||||
click: 'onClick',
|
||||
'click #header': 'focusHeader',
|
||||
'click .conversation': 'focusConversation',
|
||||
'input input.search': 'filterContacts',
|
||||
},
|
||||
setupLeftPane() {
|
||||
// Here we set up a full redux store with initial state for our LeftPane Root
|
||||
const inboxCollection = getInboxCollection();
|
||||
const conversations = inboxCollection.map(
|
||||
conversation => conversation.cachedProps
|
||||
);
|
||||
const initialState = {
|
||||
conversations: {
|
||||
conversationLookup: Signal.Util.makeLookup(conversations, 'id'),
|
||||
},
|
||||
user: {
|
||||
regionCode: window.storage.get('regionCode'),
|
||||
ourNumber: textsecure.storage.user.getNumber(),
|
||||
i18n: window.i18n,
|
||||
},
|
||||
};
|
||||
|
||||
this.store = Signal.State.createStore(initialState);
|
||||
window.inboxStore = this.store;
|
||||
this.leftPaneView = new Whisper.ReactWrapperView({
|
||||
JSX: Signal.State.Roots.createLeftPane(this.store),
|
||||
className: 'left-pane-wrapper',
|
||||
});
|
||||
|
||||
// Enables our redux store to be updated by backbone events in the outside world
|
||||
const {
|
||||
conversationAdded,
|
||||
conversationChanged,
|
||||
conversationRemoved,
|
||||
removeAllConversations,
|
||||
messageExpired,
|
||||
openConversationExternal,
|
||||
} = Signal.State.bindActionCreators(
|
||||
Signal.State.Ducks.conversations.actions,
|
||||
this.store.dispatch
|
||||
);
|
||||
const { userChanged } = Signal.State.bindActionCreators(
|
||||
Signal.State.Ducks.user.actions,
|
||||
this.store.dispatch
|
||||
);
|
||||
|
||||
this.openConversationAction = openConversationExternal;
|
||||
|
||||
this.listenTo(inboxCollection, 'remove', conversation => {
|
||||
const { id } = conversation || {};
|
||||
conversationRemoved(id);
|
||||
});
|
||||
this.listenTo(inboxCollection, 'add', conversation => {
|
||||
const { id, cachedProps } = conversation || {};
|
||||
conversationAdded(id, cachedProps);
|
||||
});
|
||||
this.listenTo(inboxCollection, 'change', conversation => {
|
||||
const { id, cachedProps } = conversation || {};
|
||||
conversationChanged(id, cachedProps);
|
||||
});
|
||||
this.listenTo(inboxCollection, 'reset', removeAllConversations);
|
||||
|
||||
Whisper.events.on('messageExpired', messageExpired);
|
||||
Whisper.events.on('userChanged', userChanged);
|
||||
|
||||
// Finally, add it to the DOM
|
||||
this.$('.left-pane-placeholder').append(this.leftPaneView.el);
|
||||
},
|
||||
startConnectionListener() {
|
||||
this.interval = setInterval(() => {
|
||||
|
@ -237,30 +219,18 @@
|
|||
reloadBackgroundPage() {
|
||||
window.location.reload();
|
||||
},
|
||||
filterContacts(e) {
|
||||
this.searchView.filterContacts(e);
|
||||
const input = this.$('input.search');
|
||||
if (input.val().length > 0) {
|
||||
input.addClass('active');
|
||||
const textDir = window.getComputedStyle(input[0]).direction;
|
||||
if (textDir === 'ltr') {
|
||||
input.removeClass('rtl').addClass('ltr');
|
||||
} else if (textDir === 'rtl') {
|
||||
input.removeClass('ltr').addClass('rtl');
|
||||
}
|
||||
} else {
|
||||
input.removeClass('active');
|
||||
}
|
||||
},
|
||||
openConversation(conversation) {
|
||||
this.searchView.hideHints();
|
||||
if (conversation) {
|
||||
ConversationController.markAsSelected(conversation);
|
||||
this.conversation_stack.open(
|
||||
ConversationController.get(conversation.id)
|
||||
);
|
||||
this.focusConversation();
|
||||
async openConversation(id, messageId) {
|
||||
const conversation = await window.ConversationController.getOrCreateAndWait(
|
||||
id,
|
||||
'private'
|
||||
);
|
||||
|
||||
if (this.openConversationAction) {
|
||||
this.openConversationAction(id, messageId);
|
||||
}
|
||||
|
||||
this.conversation_stack.open(conversation);
|
||||
this.focusConversation();
|
||||
},
|
||||
closeRecording(e) {
|
||||
if (e && this.$(e.target).closest('.capture-audio').length > 0) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue