diff options
| author | Pedro Pinto Silva <pedro.silva@collabora.com> | 2020-01-15 16:51:14 +0100 |
|---|---|---|
| committer | Pedro Pinto da Silva <pedro.silva@collabora.com> | 2020-01-16 15:43:42 +0100 |
| commit | 3f6942aed9dcfb51508c328e8bcd5455bfc57762 (patch) | |
| tree | d696caa8b61e26b72aba9bbd86cff2f613b8e090 | |
| parent | 2ec8f26994c96376dcff0bd578eb6b691fb89d4f (diff) | |
Mobile: MobileWizard: Add visual indicator to mobile-wizard-content:
- it appears to show the user that there is hidden content and that is possible to scroll/swipe
- it disappears once the mobile-wizard-content reaches the end
Change-Id: I93c039fb614cd28e0d40b63a3b5a744d730f5dbe
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/86865
Reviewed-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
Tested-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
| -rw-r--r-- | loleaflet/src/control/Control.MobileWizard.js | 17 |
1 files changed, 15 insertions, 2 deletions
diff --git a/loleaflet/src/control/Control.MobileWizard.js b/loleaflet/src/control/Control.MobileWizard.js index 7b91d1a94..59c31974e 100644 --- a/loleaflet/src/control/Control.MobileWizard.js +++ b/loleaflet/src/control/Control.MobileWizard.js @@ -56,8 +56,21 @@ L.Control.MobileWizard = L.Control.extend({ $(this.backButton).addClass('close-button'); }, - _showWizard: function() { + _showWizard: function(ContentsLength) { + var docType = this._map.getDocType(); + var maxScrolled = 52; + if (ContentsLength > 1 || docType != 'spreadsheet') + $('#mobile-wizard-content').prepend('<div id="mobile-wizard-scroll-indicator" style="width: 100%;height: 40px;position: fixed;z-index: 2;bottom: 0;background: linear-gradient(#fff0 20%, #0b87e7 400%);"></div>'); + if (docType == 'spreadsheet') + maxScrolled = 41; $('#mobile-wizard').show(); + $('#mobile-wizard-content').on('scroll', function() { + var mWizardContentScroll = $('#mobile-wizard-content').scrollTop(); + var height = $('#mobile-wizard-content').prop('scrollHeight'); + var scrolled = (mWizardContentScroll / height) * 100; + if (scrolled > maxScrolled) {$('#mobile-wizard-scroll-indicator').css('display','none');} + else {$('#mobile-wizard-scroll-indicator').css('display','block');} + }); $('#toolbar-down').hide(); if (window.ThisIsTheAndroidApp) window.postMobileMessage('MOBILEWIZARD show'); @@ -272,7 +285,7 @@ L.Control.MobileWizard = L.Control.extend({ this._reset(); - this._showWizard(); + this._showWizard(data.children.length); this._hideKeyboard(); // Morph the sidebar into something prettier |