diff options
author | Morris Jobke <hey@morrisjobke.de> | 2018-08-31 13:10:36 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-08-31 13:10:36 +0300 |
commit | bae1a33ed357bde05b0f78cf66447eff00b3abe1 (patch) | |
tree | 847576881096c86e1abb7e2d00cea07e1559b6a7 | |
parent | 743ed07e5b7326ab9f89bc12635b92c34ccfb928 (diff) | |
parent | 7d1f166f8d4f73abb3790475cb623440a30cfc36 (diff) |
Merge pull request #457 from nextcloud/adjust-ui-to-changes-in-serverv14.0.0RC2v14.0.0
Adjust ui to changes in server
-rw-r--r-- | css/share.css | 12 | ||||
-rw-r--r-- | css/styles.css | 9 | ||||
-rw-r--r-- | js/app.js | 1 | ||||
-rw-r--r-- | js/breadcrumb.js | 2 | ||||
-rw-r--r-- | js/gallery.js | 2 | ||||
-rw-r--r-- | js/galleryview.js | 4 | ||||
-rw-r--r-- | js/slideshow.js | 37 | ||||
-rw-r--r-- | js/slideshowcontrols.js | 5 | ||||
-rw-r--r-- | templates/index.php | 2 | ||||
-rw-r--r-- | templates/public.php | 2 |
10 files changed, 52 insertions, 24 deletions
diff --git a/css/share.css b/css/share.css index 8ee37074..b9136729 100644 --- a/css/share.css +++ b/css/share.css @@ -35,9 +35,9 @@ right: 17px; top: 18px; } -#app #dropdown.shareDropDown .shareWithLoading { - /* The "box-sizing" of "#app" descendants is set to "border-box" in the - * server. To have the same size the padding here has to be set to the +#app-content #dropdown.shareDropDown .shareWithLoading { + /* The "box-sizing" of "#app-content" descendants is set to "border-box" in + * the server. To have the same size the padding here has to be set to the * min-width/min-height plus the padding set for the icon in the default * "content-box" sizing. */ padding: 19px; @@ -52,9 +52,9 @@ top: 18px; } -#app #dropdown .shareWithConfirm { - /* The "box-sizing" of "#app" descendants is set to "border-box" in the - * server. To have the same size the padding here has to be set to the +#app-content #dropdown .shareWithConfirm { + /* The "box-sizing" of "#app-content" descendants is set to "border-box" in + * the server. To have the same size the padding here has to be set to the * min-width/min-height plus the padding set for the icon in the default * "content-box" sizing. */ padding: 19px; diff --git a/css/styles.css b/css/styles.css index a7ddc784..a453e9f2 100644 --- a/css/styles.css +++ b/css/styles.css @@ -78,15 +78,6 @@ div.crumb.last a { list-style: initial; } -#app { - /* #app is the parent of #controls and #gallery, and #controls uses a sticky - * position, so the #app height must contain the full gallery for the - * controls to be stuck while scrolling. The server sets "height: 100%" for - * the app, so that value has to be overriden. */ - height: auto; - width: 100%; -} - #gallery.hascontrols { position: relative; overflow: hidden; @@ -12,7 +12,6 @@ /* global OC, $, _, Gallery, SlideShow */ $(document).ready(function () { "use strict"; - $('#controls').prependTo($('#app')); Gallery.utility = new Gallery.Utility(); Gallery.view = new Gallery.View(); Gallery.token = Gallery.utility.getPublicToken(); diff --git a/js/breadcrumb.js b/js/breadcrumb.js index 41dd508d..4b9b8f80 100644 --- a/js/breadcrumb.js +++ b/js/breadcrumb.js @@ -133,7 +133,7 @@ */ _build: function () { var i, crumbs, name, path, currentAlbum; - var albumName = $('#app').data('albumname'); + var albumName = $('#app-content').data('albumname'); if (!albumName) { albumName = t('gallery', 'Gallery'); } diff --git a/js/gallery.js b/js/gallery.js index ac0062c1..e51bd97f 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -222,7 +222,7 @@ download: function (event) { event.preventDefault(); - var path = $('#app').data('albumname'); + var path = $('#app-content').data('albumname'); var files = Gallery.currentAlbum; var downloadUrl = Gallery.utility.buildFilesUrl(path, files); diff --git a/js/galleryview.js b/js/galleryview.js index fa98d63d..79527221 100644 --- a/js/galleryview.js +++ b/js/galleryview.js @@ -170,7 +170,7 @@ * At this stage, there is no loading taking place, so we can look for new rows */ - var scroll = $('#content-wrapper').scrollTop() + $(window).scrollTop(); + var scroll = $(window).scrollTop() + $(window).scrollTop(); // 2 windows worth of rows is the limit from which we need to start loading new rows. // As we scroll down, it grows var targetHeight = ($(window).height() * 2) + scroll; @@ -490,7 +490,7 @@ * @private */ _setBackgroundColour: function () { - var wrapper = $('#content-wrapper'); + var wrapper = $('#app-content'); var albumDesign = Gallery.config.albumDesign; if (!$.isEmptyObject(albumDesign) && albumDesign.background) { wrapper.css('background-color', albumDesign.background); diff --git a/js/slideshow.js b/js/slideshow.js index 1ddf367c..576ce70b 100644 --- a/js/slideshow.js +++ b/js/slideshow.js @@ -61,7 +61,8 @@ this.container, this.zoomablePreview, interval, - features); + features, + this.restoreContent.bind(this)); this.controls.init(); this._initControlsAutoFader(); @@ -94,6 +95,39 @@ }, /** + * Hides the content behind the slideshow + * + * This should be called when the slideshow is shown. + * + * It hides the content (and, in the public share page, also the footer) + * to ensure that the body size is just the slideshow size and thus no + * scroll bars are shown. + */ + hideContent: function () { + this._savedScrollPosition = $(window).scrollTop(); + + $('#content').hide(); + $('footer').hide(); + }, + + /** + * Shows again the content behind the slideshow + * + * This should be called when the slideshow is hidden. + * + * It restores the content hidden when calling "hideContent", including + * the vertical scrolling position. + */ + restoreContent: function () { + $('#content').show(); + $('footer').show(); + + if (this._savedScrollPosition) { + $(window).scrollTop(this._savedScrollPosition); + } + }, + + /** * Launches the slideshow * * @param {number} index @@ -104,6 +138,7 @@ this.hideErrorNotification(); this.active = true; this.container.show(); + this.hideContent(); this.container.css('background-position', 'center'); this._hideImage(); this.container.find('.icon-loading-dark').show(); diff --git a/js/slideshowcontrols.js b/js/slideshowcontrols.js index a2745241..a84a4ca3 100644 --- a/js/slideshowcontrols.js +++ b/js/slideshowcontrols.js @@ -20,9 +20,10 @@ * @param {Object} zoomablePreview * @param {number} interval * @param {Array} features + * @param {Function} restoreContentCallback * @constructor */ - var Controls = function (slideshow, container, zoomablePreview, interval, features) { + var Controls = function (slideshow, container, zoomablePreview, interval, features, restoreContentCallback) { this.slideshow = slideshow; this.container = container; this.zoomablePreview = zoomablePreview; @@ -31,6 +32,7 @@ if (features.indexOf('background_colour_toggle') > -1) { this.backgroundToggle = true; } + this.restoreContentCallback = restoreContentCallback; }; Controls.prototype = { @@ -110,6 +112,7 @@ this.zoomablePreview.stop(); this._clearTimeout(); + this.restoreContentCallback(); this.container.hide(); this.active = false; }, diff --git a/templates/index.php b/templates/index.php index c0603a19..a90fdbe1 100644 --- a/templates/index.php +++ b/templates/index.php @@ -4,7 +4,7 @@ */ ?> -<div id="app"> +<div id="app-content"> <?php if (isset($_['code'])) { if ($_['code'] === 404) { diff --git a/templates/public.php b/templates/public.php index a2154fea..9ab76484 100644 --- a/templates/public.php +++ b/templates/public.php @@ -24,7 +24,7 @@ style( style('files_sharing', 'public'); ?> -<div id="app" data-albumname="<?php p($_['albumName']) ?>"> +<div id="app-content" data-albumname="<?php p($_['albumName']) ?>"> <div id="controls"> <div id="breadcrumbs"></div> <!-- sorting buttons --> |