cleaning up the topbar CSS

git-svn-id: http://code.elgg.org/elgg/trunk@7579 36083f99-b078-4883-b0ff-0f9b5a30f544

3 files changed, 92 insertions, 56 deletions

diff --git a/views/default/css/elements/page_layout.php b/views/default/css/elements/page_layout.php
index 7fbdfe061..fb0ddf8fe 100644
--- a/views/default/css/elements/page_layout.php
+++ b/views/default/css/elements/page_layout.php
@@ -176,18 +176,40 @@
 /* ***************************************
 	ELGG TOPBAR
 *************************************** */
+.elgg-page-topbar .elgg-inner {
+	padding: 2px 10px 2px 8px;
+}
 .elgg-page-topbar a {
-	margin-right:30px;
-	padding-top:2px;
-	display:inline;
-	float:left;
-	text-align: left;
-	color:#eeeeee;
+	color: #eeeeee;
+}
+.elgg-page-topbar a.main {
+	float: left;
+	margin-right: 30px;
+}
+.elgg-page-topbar a.alt {
+	float: right;
+	margin-left: 30px;
 }
 .elgg-page-topbar a:hover {
-	color:#71cbff;
+	color: #71cbff;
 	text-decoration: none;
 }
+.elgg-icon {
+	background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat left;
+	width: 16px;
+	height: 16px;
+	display: block;
+	float: left;
+}
+.elgg-icon-settings {
+	background-position: -302px -44px;
+}
+.elgg-icon-friends {
+	background-position: 0 -300px;
+	width: 36px;
+}
+
+
 .elgg-page-topbar a img.user-mini-avatar {
 	border:1px solid #eeeeee;
 	margin:1px 0 0 10px;
@@ -195,7 +217,6 @@
 }
 .elgg-page-topbar a img.site-logo {
 	display: block;
-	margin-left:5px;
 	margin-top: -1px;
 }
 .elgg-page-topbar .log-out {
@@ -212,24 +233,15 @@
 }
 .elgg-page-topbar a.myfriends {
 	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat left -297px;
-	margin-right:30px;
 	text-indent: -900em;
 	width:36px;
 }
 .elgg-page-topbar a.myfriends:hover {
 	background-position: left -337px;
 }
-.elgg-page-topbar a.settings {
-	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -300px -41px;
-	padding-left:20px !important;
-	float:right;
-	margin-right:30px;
-}
 .elgg-page-topbar a.admin {
 	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -300px -41px;
 	padding-left:20px !important;
-	float:right;
-	margin-right:30px;
 }
 .elgg-page-topbar a.help {
 	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -300px -133px;
diff --git a/views/default/page/elements/topbar.php b/views/default/page/elements/topbar.php
index 3a4507208..7d57ed684 100644
--- a/views/default/page/elements/topbar.php
+++ b/views/default/page/elements/topbar.php
@@ -5,40 +5,64 @@
  */
 
 $user = get_loggedin_user();
-if (($user instanceof ElggUser) && ($user->guid > 0)) {
-	echo '<div class="elgg-page-topbar">';
-	echo '<div class="elgg-inner">';
-	
-	// Elgg logo
-	echo '<a href="http://www.elgg.org">';
-	echo "<img class=\"site-logo\" src=\"".elgg_get_site_url()."_graphics/elgg_toolbar_logo.gif\" alt=\"Elgg logo\" />";
-	echo '</a>';
-	
-	// avatar
-	$user_link = $user->getURL();
-	$user_image = $user->getIcon('topbar');
-	echo "<a href=\"$user_link\"><img class=\"user-mini-avatar\" src=\"$user_image\" alt=\"User avatar\" /></a>";
-
-	// logout link
-	echo elgg_view('page/elements/topbar_logout', $vars);
-	
-	// elgg tools menu
-	// need to echo this empty view for backward compatibility.
-	echo elgg_view("navigation/topbar_tools");
-	
-	// enable elgg topbar extending
-	echo elgg_view('elgg_topbar/extend', $vars);
-	
-	// user settings
-	$settings = elgg_echo('settings');
-	echo "<a href=\"".elgg_get_site_url()."pg/settings\" class=\"settings\">$settings</a>";
-
-	// The administration link is for admin or site admin users only
-	if ($user->isAdmin()) {
-		$admin = elgg_echo("admin");
-		echo "<a href=\"".elgg_get_site_url()."pg/admin\" class=\"admin\">$admin</a>";
-	}
-	
-	echo '</div>';
-	echo '</div>';
+if (!elgg_instanceof($user, 'user')) {
+	// do not show tobpar to logged out users
+	return true;
 }
+
+echo '<div class="elgg-page-topbar">';
+echo '<div class="elgg-inner clearfix">';
+
+// Elgg logo
+echo '<a href="http://www.elgg.org" class="main">';
+echo "<img class=\"site-logo\" src=\"".elgg_get_site_url()."_graphics/elgg_toolbar_logo.gif\" alt=\"Elgg logo\" />";
+echo '</a>';
+
+// avatar
+$user_link = $user->getURL();
+$user_image = $user->getIcon('topbar');
+echo "<a href=\"$user_link\" class=\"main\"><img class=\"user-mini-avatar\" src=\"$user_image\" alt=\"User avatar\" /></a>";
+
+// friends
+//$friends = elgg_echo('friends');
+//echo "<a class='myfriends main' href=\"".elgg_get_site_url()."pg/friends/{$user->username}\" title=\"$friends\">&nbsp;</a>";
+echo elgg_view('output/url', array(
+	'href' => elgg_get_site_url() . "pg/settings/{$user->username}/",
+	'text' => '<span class="elgg-icon elgg-icon-friends"></span>',
+	'class' => 'main',
+	'title' => elgg_echo('friends'),
+));
+
+// logout link
+echo elgg_view('output/url', array(
+	'href' => "action/logout",
+	'text' => elgg_echo('logout'),
+	'is_action' => TRUE,
+	'class' => 'alt',
+));
+
+// elgg tools menu
+// need to echo this empty view for backward compatibility.
+echo elgg_view("navigation/topbar_tools");
+
+// enable elgg topbar extending
+echo elgg_view('elgg_topbar/extend', $vars);
+
+// user settings
+echo elgg_view('output/url', array(
+	'href' => elgg_get_site_url() . 'pg/settings/',
+	'text' => '<span class="elgg-icon elgg-icon-settings"></span>' . elgg_echo('settings'),
+	'class' => 'alt',
+));
+
+// The administration link is for admin or site admin users only
+if ($user->isAdmin()) {
+	echo elgg_view('output/url', array(
+		'href' => elgg_get_site_url() . 'pg/admin/',
+		'text' => '<span class="elgg-icon elgg-icon-settings"></span>' . elgg_echo('admin'),
+		'class' => 'alt',
+	));
+}
+
+echo '</div>';
+echo '</div>';
diff --git a/views/default/page/elements/topbar_logout.php b/views/default/page/elements/topbar_logout.php
index 2d2ecf67c..a4bc55e6e 100644
--- a/views/default/page/elements/topbar_logout.php
+++ b/views/default/page/elements/topbar_logout.php
@@ -5,10 +5,10 @@
  * Called within the Elgg topbar view.
  */
 
-echo '<div class="log-out">';
+
 echo elgg_view('output/url', array(
 	'href' => "action/logout",
 	'text' => elgg_echo('logout'),
-	'is_action' => TRUE
+	'is_action' => TRUE,
+	'class' => 'alt',
 ));
-echo '</div>';