Merge pull request #457 from nextcloud/adjust-ui-to-changes-in-server

Adjust ui to changes in server

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;

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;

js/app.js

@@ -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();

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');
 			}

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);
 

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);

js/slideshow.js

@@ -61,7 +61,8 @@
 						this.container,
 						this.zoomablePreview,
 						interval,
-						features);
+						features,
+						this.restoreContent.bind(this));
 				this.controls.init();
 
 				this._initControlsAutoFader();
@@ -93,6 +94,39 @@
 			this.controls.update(images, autoPlay);
 		},
 
+		/**
+		 * 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
 		 *
@@ -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();

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;
 		},

templates/index.php

@@ -4,7 +4,7 @@
  */
 ?>
 
-<div id="app">
+<div id="app-content">
 	<?php
 	if (isset($_['code'])) {
 		if ($_['code'] === 404) {

templates/public.php

@@ -24,7 +24,7 @@
 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 -->