Position appsettings fixed and load it in dynamically added element.

2 files changed, 36 insertions, 34 deletions

diff --git a/core/css/styles.css b/core/css/styles.css
index 7e79a66fb49..dd6f9d4675d 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -160,9 +160,9 @@ a.bookmarklet { background-color: #ddd; border:1px solid #ccc; padding: 5px;padd
 #category_addinput { width: 10em; }
 
 /* ---- APP SETTINGS ---- */
-.popup { background-color: white; border-radius: 10px 10px 10px 10px; box-shadow: 0 0 20px #888888; color: #333333; padding: 10px; position: absolute; z-index: 200; }
-.popup.topright { top: -8px; right: 1em; }
-.popup.bottomleft { bottom: 1em; left: 8px; }
+.popup { background-color: white; border-radius: 10px 10px 10px 10px; box-shadow: 0 0 20px #888888; color: #333333; padding: 10px; position: fixed !important; z-index: 200; }
+.popup.topright { top: 7em; right: 1em; }
+.popup.bottomleft { bottom: 1em; left: 33em; }
 .popup .close { position:absolute; top: 0.2em; right:0.2em; height: 20px; width: 20px; background:url('../img/actions/delete.svg') no-repeat center; }
 .popup h2 { font-weight: bold; font-size: 1.2em; }
 .arrow { border-bottom: 10px solid white; border-left: 10px solid transparent; border-right: 10px solid transparent; display: block; height: 0; position: absolute; width: 0; z-index: 201; }
diff --git a/core/js/js.js b/core/js/js.js
index 7bded8e1414..92a2660fd9c 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -175,39 +175,41 @@ OC={
 		if(settings.length == 0) {
 			throw { name: 'MissingDOMElement', message: 'There has be be an element with id "appsettings" for the popup to show.' };
 		}
-		if(settings.is(':visible')) {
-			settings.hide().find('.arrow').hide();
+		var popup = $('#appsettings_popup');
+		if(popup.length == 0) {
+			$('body').prepend('<div class="popup hidden" id="appsettings_popup"></div>');
+			popup = $('#appsettings_popup');
+			popup.addClass(settings.hasClass('topright') ? 'topright' : 'bottomleft');
+		}
+		if(popup.is(':visible')) {
+			popup.hide().remove();
 		} else {
-			if($('#journal.settings').length == 0) {
-				var arrowclass = settings.hasClass('topright') ? 'up' : 'left';
-				var jqxhr = $.get(OC.filePath(props.appid, '', props.scriptName), function(data) {
-					$('#appsettings').html(data).ready(function() {
-						settings.prepend('<span class="arrow '+arrowclass+'"></span><h2>'+t('core', 'Settings')+'</h2><a class="close svg"></a>').show();
-						settings.find('.close').bind('click', function() {
-							settings.hide();
-						})
-						if(typeof props.loadJS !== 'undefined') {
-							var scriptname;
-							if(props.loadJS === true) {
-								scriptname = 'settings.js';
-							} else if(typeof props.loadJS === 'string') {
-								scriptname = props.loadJS;
-							} else {
-								throw { name: 'InvalidParameter', message: 'The "loadJS" parameter must be either boolean or a string.' };
-							}
-							if(props.cache) {
-								$.ajaxSetup({cache: true});
-							}
-							$.getScript(OC.filePath(props.appid, 'js', scriptname))
-							.fail(function(jqxhr, settings, e) {
-								throw e;
-							});
+			var arrowclass = settings.hasClass('topright') ? 'up' : 'left';
+			var jqxhr = $.get(OC.filePath(props.appid, '', props.scriptName), function(data) {
+				popup.html(data).ready(function() {
+					popup.prepend('<span class="arrow '+arrowclass+'"></span><h2>'+t('core', 'Settings')+'</h2><a class="close svg"></a>').show();
+					popup.find('.close').bind('click', function() {
+						popup.remove();
+					})
+					if(typeof props.loadJS !== 'undefined') {
+						var scriptname;
+						if(props.loadJS === true) {
+							scriptname = 'settings.js';
+						} else if(typeof props.loadJS === 'string') {
+							scriptname = props.loadJS;
+						} else {
+							throw { name: 'InvalidParameter', message: 'The "loadJS" parameter must be either boolean or a string.' };
 						}
-					});
-				}, 'html');
-			} else {
-				settings.show().find('.arrow').show();
-			}
+						if(props.cache) {
+							$.ajaxSetup({cache: true});
+						}
+						$.getScript(OC.filePath(props.appid, 'js', scriptname))
+						.fail(function(jqxhr, settings, e) {
+							throw e;
+						});
+					}
+				}).show();
+			}, 'html');
 		}
 	}
 };