enable back keyboard navigation on message list

pull/1387/head
Audric Ackermann 5 years ago
parent 141e497af7
commit 857bea50ea
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4

@ -35,7 +35,6 @@
const { const {
Conversation, Conversation,
Contact, Contact,
Errors,
Message, Message,
PhoneNumber, PhoneNumber,
} = window.Signal.Types; } = window.Signal.Types;
@ -2215,7 +2214,6 @@
} }
}, },
hasMember(number) { hasMember(number) {
return _.contains(this.get('members'), number); return _.contains(this.get('members'), number);
}, },

@ -365,7 +365,6 @@
this.unload('windows closed'); this.unload('windows closed');
}); });
this.$('.send-message').focus(this.focusBottomBar.bind(this)); this.$('.send-message').focus(this.focusBottomBar.bind(this));
this.$('.send-message').blur(this.unfocusBottomBar.bind(this)); this.$('.send-message').blur(this.unfocusBottomBar.bind(this));

@ -129,8 +129,6 @@
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
background-color: $color-white;
} }
.module-message__attachment-container--with-content-below { .module-message__attachment-container--with-content-below {

@ -1337,11 +1337,9 @@ input {
.session-scroll-button { .session-scroll-button {
animation: fadein $session-fadein-duration; animation: fadein $session-fadein-duration;
position: sticky; position: fixed;
text-align: -webkit-right;
bottom: 15px;
right: 25px;
z-index: 2; z-index: 2;
right: 60px;
.session-icon-button { .session-icon-button {
display: flex; display: flex;

@ -9,7 +9,9 @@ $accentDarkTheme: #00f782;
$borderLightTheme: #f1f1f1; // search for references on ts TODO: make this exposed on ts $borderLightTheme: #f1f1f1; // search for references on ts TODO: make this exposed on ts
$borderDarkTheme: rgba($white, 0.06); $borderDarkTheme: rgba($white, 0.06);
$borderAvatarColor: unquote('#00000059'); // search for references on ts TODO: make this exposed on ts $borderAvatarColor: unquote(
'#00000059'
); // search for references on ts TODO: make this exposed on ts
$themes: ( $themes: (
light: ( light: (

@ -497,7 +497,11 @@ export class SessionCompositionBox extends React.Component<Props, State> {
'attachments' 'attachments'
); );
const linkPreviews = stagedLinkPreview && [_.pick(stagedLinkPreview, 'url', 'image', 'title')] || []; const linkPreviews =
(stagedLinkPreview && [
_.pick(stagedLinkPreview, 'url', 'image', 'title'),
]) ||
[];
try { try {
const attachments = await this.getFiles(); const attachments = await this.getFiles();
@ -510,7 +514,6 @@ export class SessionCompositionBox extends React.Component<Props, State> {
{} {}
); );
// Message sending sucess // Message sending sucess
this.props.onMessageSuccess(); this.props.onMessageSuccess();
@ -526,7 +529,6 @@ export class SessionCompositionBox extends React.Component<Props, State> {
stagedLinkPreview: undefined, stagedLinkPreview: undefined,
ignoredLink: undefined, ignoredLink: undefined,
}); });
} }
} catch (e) { } catch (e) {
// Message sending failed // Message sending failed

@ -395,9 +395,10 @@ export class SessionConversation extends React.Component<Props, State> {
messages.push({ ...messageModels[i], firstMessageOfSeries }); messages.push({ ...messageModels[i], firstMessageOfSeries });
previousSender = messageModels[i].authorPhoneNumber; previousSender = messageModels[i].authorPhoneNumber;
} }
const oldLen = this.state.messages.length;
const previousTopMessage = this.state.messages[0]?.id; const newLen = messages.length;
const newTopMessage = messages[0]?.id; const previousTopMessage = this.state.messages[oldLen - 1]?.id;
const newTopMessage = messages[newLen - 1]?.id;
this.setState({ messages, messageFetchTimestamp: timestamp }); this.setState({ messages, messageFetchTimestamp: timestamp });
@ -843,43 +844,43 @@ export class SessionConversation extends React.Component<Props, State> {
// ~~~~~~~~~~~ KEYBOARD NAVIGATION ~~~~~~~~~~~~ // ~~~~~~~~~~~ KEYBOARD NAVIGATION ~~~~~~~~~~~~
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
private onKeyDown(event: any) { private onKeyDown(event: any) {
// const messageContainer = this.messageContainerRef.current; const messageContainer = this.messageContainerRef.current;
// if (!messageContainer) { if (!messageContainer) {
// return; return;
// } }
// const selectionMode = !!this.state.selectedMessages.length; const selectionMode = !!this.state.selectedMessages.length;
// const recordingMode = this.state.showRecordingView; const recordingMode = this.state.showRecordingView;
// const pageHeight = messageContainer.clientHeight; const pageHeight = messageContainer.clientHeight;
// const arrowScrollPx = 50; const arrowScrollPx = 50;
// const pageScrollPx = pageHeight * 0.8; const pageScrollPx = pageHeight * 0.8;
// if (event.key === 'Escape') { if (event.key === 'Escape') {
// // EXIT MEDIA VIEW // EXIT MEDIA VIEW
// if (recordingMode) { if (recordingMode) {
// // EXIT RECORDING VIEW // EXIT RECORDING VIEW
// } }
// // EXIT WHAT ELSE? // EXIT WHAT ELSE?
// } }
// switch (event.key) { switch (event.key) {
// case 'Escape': case 'Escape':
// if (selectionMode) { if (selectionMode) {
// this.resetSelection(); this.resetSelection();
// } }
// break; break;
// // Scrolling // Scrolling
// case 'ArrowUp': case 'ArrowUp':
// messageContainer.scrollBy(0, -arrowScrollPx); messageContainer.scrollBy(0, -arrowScrollPx);
// break; break;
// case 'ArrowDown': case 'ArrowDown':
// messageContainer.scrollBy(0, arrowScrollPx); messageContainer.scrollBy(0, arrowScrollPx);
// break; break;
// case 'PageUp': case 'PageUp':
// messageContainer.scrollBy(0, -pageScrollPx); messageContainer.scrollBy(0, -pageScrollPx);
// break; break;
// case 'PageDown': case 'PageDown':
// messageContainer.scrollBy(0, pageScrollPx); messageContainer.scrollBy(0, pageScrollPx);
// break; break;
// default: default:
// } }
} }
private clearAttachments() { private clearAttachments() {

@ -208,7 +208,7 @@ export class SessionConversationMessagesList extends React.Component<
} }
if (isScrolledToBottom) { if (isScrolledToBottom) {
unread = messages[messages.length - 1]; unread = messages[0];
} else { } else {
unread = this.findNewestVisibleUnread(); unread = this.findNewestVisibleUnread();
} }
@ -385,48 +385,4 @@ export class SessionConversationMessagesList extends React.Component<
public resetSelection() { public resetSelection() {
this.props.resetSelection(); this.props.resetSelection();
} }
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ~~~~~~~~~~~ KEYBOARD NAVIGATION ~~~~~~~~~~~~
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
private onKeyDown(event: any) {
//FIXME Audric
// const messageContainer = this.messageContainerRef.current;
// if (!messageContainer) {
// return;
// }
// const selectionMode = !!this.props.selectedMessages.length;
// const recordingMode = this.props.showRecordingView;
// const pageHeight = messageContainer.clientHeight;
// const arrowScrollPx = 50;
// const pageScrollPx = pageHeight * 0.8;
// if (event.key === 'Escape') {
// // EXIT MEDIA VIEW
// if (recordingMode) {
// // EXIT RECORDING VIEW
// }
// // EXIT WHAT ELSE?
// }
// switch (event.key) {
// case 'Escape':
// if (selectionMode) {
// this.resetSelection();
// }
// break;
// // Scrolling
// case 'ArrowUp':
// messageContainer.scrollBy(0, -arrowScrollPx);
// break;
// case 'ArrowDown':
// messageContainer.scrollBy(0, arrowScrollPx);
// break;
// case 'PageUp':
// messageContainer.scrollBy(0, -pageScrollPx);
// break;
// case 'PageDown':
// messageContainer.scrollBy(0, pageScrollPx);
// break;
// default:
// }
}
} }

Loading…
Cancel
Save