oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Scroll down button: when scrolled up, or new non-visible message 

FREEBIE
This commit is contained in:
Scott Nonnenberg 2017-05-18 18:33:35 -07:00
parent 13322c7071
commit 4c7bfbe9ff
12 changed files with 249 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_locales/en/messages.json
View File

@ -3,6 +3,18 @@
"message": "You left the group",
"description": "Displayed when a user can't send a message because they have left the group"
},
"scrollDown": {
"message": "Scroll to bottom of conversation",
"description": "Alt text for button to take user down to bottom of conversation, shown when user scrolls up"
},
"messageBelow": {
"message": "New message below",
"description": "Alt text for button to take user down to bottom of conversation with a new message out of screen"
},
"messagesBelow": {
"message": "New messages below",
"description": "Alt text for button to take user down to bottom of conversation with more than one message out of screen"
},
"unreadMessage": {
"message": "1 unread message",
"description": "Text for unread message separator, just one message"

6
background.html
View File

@ -42,6 +42,11 @@
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
<button class='text {{ cssClass }}' alt='{{ moreBelow }}'>
<div class='icon'></div>
</button>
</script>
<script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
<div class='text'>
{{ unreadMessages }}
@ -636,6 +641,7 @@
<script type='text/javascript' src='js/views/whisper_view.js'></script>
<script type='text/javascript' src='js/views/last_seen_indicator_view.js'></script>
<script type='text/javascript' src='js/views/scroll_down_button_view.js'></script>
<script type='text/javascript' src='js/views/debug_log_view.js'></script>
<script type='text/javascript' src='js/views/toast_view.js'></script>
<script type='text/javascript' src='js/views/attachment_preview_view.js'></script>

1
images/down.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g fill="none" fill-rule="evenodd"><path d="M0 0h48v48H0z"/><g stroke="#000" stroke-width="3.78"><path d="M24 6.41v32.814M38.29 23.028L24 39.226 9.706 23.028"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 258 B

42
js/views/conversation_view.js
View File

@ -26,6 +26,7 @@
this.$('.menu-list').toggle();
}
});
var TimerMenuView = MenuView.extend({
initialize: function() {
this.render();
@ -151,10 +152,14 @@
'click .back': 'resetPanel',
'click .microphone': 'captureAudio',
'click .disappearing-messages': 'enableDisappearingMessages',
'click .scroll-down-button-view': 'scrollToBottom',
'focus .send-message': 'focusBottomBar',
'change .file-input': 'toggleMicrophone',
'blur .send-message': 'unfocusBottomBar',
'loadMore .message-list': 'fetchMessages',
'newOffscreenMessage .message-list': 'addScrollDownButtonWithCount',
'atBottom .message-list': 'hideScrollDownButton',
'farFromBottom .message-list': 'addScrollDownButton',
'close .menu': 'closeMenu',
'select .message-list .entry': 'messageDetail',
'force-resize': 'forceUpdateMessageFieldSize',
@ -218,6 +223,35 @@
}
},
addScrollDownButtonWithCount: function() {
this.updateScrollDownButton(1);
},
addScrollDownButton: function() {
if (!this.scrollDownButton) {
this.updateScrollDownButton();
}
},
updateScrollDownButton: function(count) {
if (this.scrollDownButton) {
this.scrollDownButton.increment(count);
} else {
this.scrollDownButton = new Whisper.ScrollDownButtonView({count: count});
this.scrollDownButton.render();
var container = this.$('.discussion-container');
console.log('showscrollDownButton', container);
container.append(this.scrollDownButton.el);
}
},
hideScrollDownButton: function() {
if (this.scrollDownButton) {
this.scrollDownButton.remove();
this.scrollDownButton = null;
}
},
removeLastSeenIndicator: function() {
if (this.lastSeenIndicator) {
this.lastSeenIndicator.remove();
@ -225,6 +259,10 @@
}
},
scrollToBottom: function() {
this.view.scrollToBottom();
},
updateLastSeenIndicator: function() {
this.removeLastSeenIndicator();
@ -239,6 +277,10 @@
unreadEl.insertBefore(this.$('#' + oldestUnread.get('id')));
var position = unreadEl[0].scrollIntoView(true);
if (this.view.bottomOffset === 0) {
this.addScrollDownButtonWithCount(unreadCount);
}
}
},

21
js/views/message_list_view.js
View File

@ -17,18 +17,24 @@
if (this.$el.scrollTop() === 0) {
this.$el.trigger('loadMore');
}
if (this.bottomOffset === 0) {
this.$el.trigger('atBottom');
} else if (this.bottomOffset > this.outerHeight) {
this.$el.trigger('farFromBottom');
}
},
measureScrollPosition: function() {
if (this.el.scrollHeight === 0) { // hidden
return;
}
this.scrollPosition = this.$el.scrollTop() + this.$el.outerHeight();
this.outerHeight = this.$el.outerHeight();
this.scrollPosition = this.$el.scrollTop() + this.outerHeight;
this.scrollHeight = this.el.scrollHeight;
this.shouldStickToBottom = this.scrollPosition === this.scrollHeight;
if (this.shouldStickToBottom) {
this.bottomOffset = 0;
} else {
this.bottomOffset = this.scrollHeight - this.$el.scrollTop();
this.bottomOffset = this.scrollHeight - this.$el.scrollTop() - this.$el.outerHeight();
}
},
resetScrollPosition: function() {
@ -36,10 +42,13 @@
},
scrollToBottomIfNeeded: function() {
if (this.bottomOffset === 0) {
this.$el.scrollTop(this.el.scrollHeight);
this.measureScrollPosition();
this.scrollToBottom();
}
},
scrollToBottom: function() {
this.$el.scrollTop(this.el.scrollHeight);
this.measureScrollPosition();
},
addOne: function(model) {
var view;
if (model.isExpirationTimerUpdate()) {
@ -54,6 +63,10 @@
var index = this.collection.indexOf(model);
this.measureScrollPosition();
if (model.get('unread') && this.bottomOffset > 0) {
this.$el.trigger('newOffscreenMessage');
}
if (index === this.collection.length - 1) {
// add to the bottom.
this.$el.append(view.el);

39
js/views/scroll_down_button_view.js Normal file
View File

@ -0,0 +1,39 @@
/*
* vim: ts=4:sw=4:expandtab
*/
(function () {
'use strict';
window.Whisper = window.Whisper || {};
Whisper.ScrollDownButtonView = Whisper.View.extend({
className: 'scroll-down-button-view',
templateName: 'scroll-down-button-view',
initialize: function(options) {
options = options || {};
this.count = options.count || 0;
},
increment: function(count) {
count = count || 0;
this.count += count;
this.render();
},
render_attributes: function() {
var cssClass = this.count > 0 ? 'new-messages' : '';
var moreBelow = i18n('scrollDown');
if (this.count > 1) {
moreBelow = i18n('messagesBelow');
} else if (this.count === 1) {
moreBelow = i18n('messageBelow');
}
return {
cssClass: cssClass,
moreBelow: moreBelow
};
}
});
})();

28
stylesheets/_conversation.scss
View File

@ -696,3 +696,31 @@ li.entry .error-icon-container {
background-color: $grey_l2;
}
}
.discussion-container .scroll-down-button-view {
position: absolute;
right: 20px;
bottom: 10px;
button {
height: 44px;
width: 44px;
border-radius: 22px;
text-align: center;
background-color: $grey_l;
border: none;
.icon {
@include color-svg('/images/down.svg', $grey_l3);
height: 100%;
width: 100%;
}
&.new-messages {
background-color: $grey_l4;
.icon {
@include color-svg('/images/down.svg', black);
}
}
}
}

17
stylesheets/android-dark.scss
View File

@ -207,4 +207,21 @@ $text-dark: #CCCCCC;
margin: 2em;
background-color: $grey-dark_l2;
}
.discussion-container .scroll-down-button-view {
button {
background-color: $grey_l4;
.icon {
@include color-svg('/images/down.svg', black);
}
&.new-messages {
background-color: $grey_l2;
.icon {
@include color-svg('/images/down.svg', $grey_l4);
}
}
}
}
}

36
stylesheets/manifest.css
View File

@ -1506,6 +1506,30 @@ li.entry .error-icon-container {
margin: 1em;
background-color: #d9d9d9; }
.discussion-container .scroll-down-button-view {
position: absolute;
right: 20px;
bottom: 10px; }
.discussion-container .scroll-down-button-view button {
height: 44px;
width: 44px;
border-radius: 22px;
text-align: center;
background-color: #f3f3f3;
border: none; }
.discussion-container .scroll-down-button-view button .icon {
-webkit-mask: url("/images/down.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: silver;
height: 100%;
width: 100%; }
.discussion-container .scroll-down-button-view button.new-messages {
background-color: #8d8d8d; }
.discussion-container .scroll-down-button-view button.new-messages .icon {
-webkit-mask: url("/images/down.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
.ios #header {
height: 64px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@ -2113,5 +2137,17 @@ li.entry .error-icon-container {
.android-dark .message-list .last-seen-indicator-view .text {
margin: 2em;
background-color: #292929; }
.android-dark .discussion-container .scroll-down-button-view button {
background-color: #8d8d8d; }
.android-dark .discussion-container .scroll-down-button-view button .icon {
-webkit-mask: url("/images/down.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
.android-dark .discussion-container .scroll-down-button-view button.new-messages {
background-color: #d9d9d9; }
.android-dark .discussion-container .scroll-down-button-view button.new-messages .icon {
-webkit-mask: url("/images/down.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: #8d8d8d; }
/*# sourceMappingURL=manifest.css.map */

11
test/index.html
View File

@ -16,6 +16,11 @@
</div>
<div id="render-ios" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
</div>
<script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
<button class='text {{ cssClass }}' alt='{{ moreBelow }}'>
<div class='icon'></div>
</button>
</script>
<script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
<div class='text'>
{{ unreadMessages }}
@ -570,8 +575,8 @@
<script type='text/javascript' src='../js/views/identicon_svg_view.js' data-cover></script>
<script type='text/javascript' src='../js/views/settings_view.js' data-cover></script>
<script type='text/javascript' src='../js/views/last_seen_indicator_view.js' data-cover></script>
<script type='text/javascript' src='../js/views/scroll_down_button_view.js' data-cover></script>
<script type="text/javascript" src="libphonenumber_util_test.js"></script>
<script type="text/javascript" src="views/whisper_view_test.js"></script>
<script type="text/javascript" src="views/group_update_view_test.js"></script>
<script type="text/javascript" src="views/message_view_test.js"></script>
@ -581,8 +586,12 @@
<script type="text/javascript" src="views/conversation_search_view_test.js"></script>
<script type="text/javascript" src="views/network_status_view_test.js"></script>
<script type="text/javascript" src="views/last_seen_indicator_view_test.js"></script>
<script type='text/javascript' src='views/scroll_down_button_view_test.js'></script>
<script type="text/javascript" src="models/conversations_test.js"></script>
<script type="text/javascript" src="models/messages_test.js"></script>
<script type="text/javascript" src="libphonenumber_util_test.js"></script>
<script type="text/javascript" src="storage_test.js"></script>
<script type="text/javascript" src="keychange_listener_test.js"></script>
<script type="text/javascript" src="emoji_util_test.js"></script>

2
test/views/last_seen_indicator_view_test.js
View File

@ -2,7 +2,7 @@
* vim: ts=4:sw=4:expandtab
*/
describe('LastSeenIndicatorView', function() {
// TODO: in electron branch, wheere we have access to real i18n, test rendered HTML
// TODO: in electron branch, where we have access to real i18n, test rendered HTML
it('renders provided count', function() {
var view = new Whisper.LastSeenIndicatorView({count: 10});

40
test/views/scroll_down_button_view_test.js Normal file
View File

@ -0,0 +1,40 @@
/*
* vim: ts=4:sw=4:expandtab
*/
describe('ScrollDownButtonView', function() {
// TODO: in electron branch, where we have access to real i18n, uncomment assertions against real strings
it('renders with count = 0', function() {
var view = new Whisper.ScrollDownButtonView();
view.render();
assert.equal(view.count, 0);
// assert.match(view.$el.html(), /Scroll to bottom/);
});
it('renders with count = 1', function() {
var view = new Whisper.ScrollDownButtonView({count: 1});
view.render();
assert.equal(view.count, 1);
assert.match(view.$el.html(), /new-messages/);
// assert.match(view.$el.html(), /New message below/);
});
it('renders with count = 2', function() {
var view = new Whisper.ScrollDownButtonView({count: 2});
view.render();
assert.equal(view.count, 2);
assert.match(view.$el.html(), /new-messages/);
// assert.match(view.$el.html(), /New messages below/);
});
it('increments count and re-renders', function() {
var view = new Whisper.ScrollDownButtonView();
view.render();
assert.equal(view.count, 0);
assert.notMatch(view.$el.html(), /new-messages/);
view.increment(1);
assert.equal(view.count, 1);
assert.match(view.$el.html(), /new-messages/);
});
});