displaying notification now centered

The notification div has been moved to the user templates. Correct display of the notification will only work with the use of OC.Notification.show() as on fadeIn() the css needs to be changed as this style required display: inline.

displaying notification now centered
508b6a9f · Thomas Müller · 364b1cd3 · 508b6a9f · 508b6a9f · 508b6a9f
Commit 508b6a9f authored 12 years ago by Thomas Müller
--- a/apps/files/templates/index.php
+++ b/apps/files/templates/index.php
@@ -50,7 +50,6 @@
 	<?php endif;?>
 	<input type="hidden" name="permissions" value="<?php echo $_['permissions']; ?>" id="permissions">
 </div>
-<div id='notification'></div>

 <?php if (isset($_['files']) and $_['isCreatable'] and count($_['files'])==0):?>
 	<div id="emptyfolder"><?php echo $l->t('Nothing in here. Upload something!')?></div>

--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -190,7 +190,8 @@ fieldset.warning legend { color:#b94a48 !important; }
 .bold { font-weight:bold; }
 .center { text-align:center; }

-#notification { z-index:101; background-color:#fc4; border:0; padding:0 .7em .3em; display:none; position:fixed; left:50%; top:0; -moz-border-radius-bottomleft:1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; }
+#notification-container { position: absolute; top: 0px; width: 100%; text-align: center; z-index: 101; line-height: 1.2;}
+#notification { z-index:101; background-color:#fc4; border:0; padding:0 .7em .3em; display:none; position: relative; top:0; -moz-border-radius-bottomleft:1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; }
 #notification span { cursor:pointer; font-weight:bold; margin-left:1em; }

 tr .action, .selectedActions a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; }

--- a/core/js/js.js
+++ b/core/js/js.js
@@ -311,13 +311,13 @@ OC.Notification={
        var notification = $('#notification');
        notification.hide();
        notification.html(html);
-        notification.fadeIn();
+        notification.fadeIn().css("display","inline");
    },
    show: function(text) {
        var notification = $('#notification');
        notification.hide();
        notification.text(text);
-        notification.fadeIn();
+        notification.fadeIn().css("display","inline");
    }
 };


--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -40,7 +40,10 @@
 	</head>

 	<body id="<?php echo $_['bodyid'];?>">
-		<header><div id="header">
+	<div id="notification-container">
+		<div id="notification"/>
+	</div>
+	<header><div id="header">
 			<a href="<?php echo link_to('', 'index.php'); ?>" title="" id="owncloud"><img class="svg" src="<?php echo image_path('', 'logo-wide.svg'); ?>" alt="ownCloud" /></a>
 			<a class="header-right header-action" id="logout" href="<?php echo link_to('', 'index.php'); ?>?logout=true"><img class="svg" alt="<?php echo $l->t('Log out');?>" title="<?php echo $l->t('Log out');  echo OC_User::getUser()?' ('.OC_User::getUser().') ':'' ?>" src="<?php echo image_path('', 'actions/logout.svg'); ?>" /></a>
 			<form class="searchbox header-right" action="#" method="post">

--- a/settings/templates/users.php
+++ b/settings/templates/users.php
@@ -73,8 +73,6 @@ var isadmin = <?php echo $_['isadmin']?'true':'false'; ?>;
 	</div>
 </div>

-<div id='notification'></div>
-
 <table data-groups="<?php echo implode(', ', $allGroups);?>">
 	<thead>
 		<tr>