Admin theme style cleanup. Merged separate selected, available, unavailable into a single set of reusable classes. Applied alternating row bg colors. Removed inline CSS from admin views. Moved user admin css into admin_default theme style sheet.

5 files changed, 369 insertions, 44 deletions

diff --git a/modules/user/views/admin_users.html.php b/modules/user/views/admin_users.html.php
index a8c6a9b2..ab04b164 100644
--- a/modules/user/views/admin_users.html.php
+++ b/modules/user/views/admin_users.html.php
@@ -1,11 +1,14 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <div class="gBlock">
-  <h2>
-    <?= t("User Admin") ?>
-    <a class="gDialogLink gButtonLink" href="<?= url::site("admin/users/add_form") ?>"
-       title="<?= t("Create a new user") ?>">+ <?= t("Add user") ?></a>
-  </h2>
+	<a href="users/add_form" class="gDialogLink gButtonLink right"
+      title="<?= t("Create a new user") ?>">
+  	+ <?= t("Add a new user") ?>
+	</a>
 
+  <h2>
+  	<?= t("User Admin") ?>
+	</h2>
+	
   <div class="gBlockContent">
     <ul class="gUserAdminList">
       <li class="gFirstRow">
@@ -16,8 +19,10 @@
       <? foreach ($users as $i => $user): ?>
       <li class="<?= text::alternate("gOddRow", "gEvenRow") ?>">
         <img src="<?= $theme->url("images/avatar.jpg") ?>"
-             title="<?= t("Drag user onto group below to add as a new member") ?>"
-             width="20" height="20" />
+          title="<?= t("Drag user onto group below to add as a new member") ?>"
+          alt="<?= $user->name ?>" 
+          width="20"
+          height="20" />
         <strong><?= $user->name ?></strong>
         (<?= $user->full_name ?>)
         <span class="understate">
@@ -43,35 +48,30 @@
   </div>
 </div>
 
-<div class="gBlock">
-  <h2>
-    <?= t("Group Admin") ?>
-    <a class="gDialogLink gButtonLink" href="<?= url::site("admin/groups/add_form") ?>"
-       title="<?= t("Create a new group") ?>">+ <?= t("Add group") ?></a>
-  </h2>
+<div id="gGroupAdmin" class="gBlock">
+  <a href="groups/add_form" title="<?= t("Create a new group") ?>" class="gDialogLink gButtonLink right">
+  	+ <?= t("Add a new group") ?>
+	</a>
 
-  <div id="gGroupAdmin" class="gBlockContent">
-    <ul>
-      <? foreach ($groups as $i => $group): ?>
-      <li class="gGroup">
-	<strong><?= $group->name?></strong><br />
-	<ul>
-	  <? foreach ($group->users as $i => $user): ?>
-	  <li class="gUser">
-	    <?= $user->name ?>
-	    <a href="groups/remove_users/<?= $user->id ?>">X</a>
-	  </li>
-	  <? endforeach ?>
-	</ul>
-      </li>
-      <? endforeach ?>
+  <h2>
+  	<?= t("Group Admin") ?>
+	</h2>
 
-      <li class="gGroup">
-	<a class="gDialogLink" href="<?= url::site("admin/groups/add_form") ?>"
-           title="<?= t("Create a new group") ?>">
-  	  + <?= t("Add a new group") ?>
-	</a>
-      </li>
-    </ul>
+  <div class="gBlockContent">
+  	<ul>
+  		<? foreach ($groups as $i => $group): ?>
+			<li class="gGroup">
+				<strong><?= $group->name?></strong><br />
+				<ul>
+					<? foreach ($group->users as $i => $user): ?>
+					<li class="gUser">
+						<?= $user->name ?>
+						<a href="groups/remove_users/<?= $user->id ?>">X</a>
+					</li>
+					<? endforeach ?>
+				</ul>
+			</li>
+			<? endforeach ?>
+		</ul>
   </div>
 </div>
diff --git a/themes/admin_default/css/screen.css b/themes/admin_default/css/screen.css
index c2b903dd..d3efa040 100644
--- a/themes/admin_default/css/screen.css
+++ b/themes/admin_default/css/screen.css
@@ -10,7 +10,7 @@
 
 .gBlock {
   background-color: #fff;
-  border: 1px solid #e7e7e7;
+  border: 1px solid #ccc;
   margin-bottom: 1em;
   padding: 1em;
 }
@@ -110,7 +110,7 @@
 }
 
 .gBlock .ui-dialog-titlebar {
-  margin: -1em -.4em 0 ;
+  margin: -1em -1em 0;
 }
 
 #gSidebar .gBlock h2 {
@@ -126,6 +126,24 @@
 	margin-bottom: 0;
 }
 
+#gAdminGraphics .gAvailable .gBlock {
+  clear: none;
+  float: left;
+  height: 190px;
+  margin-right: 1em;
+  width: 33%;
+}
+
+#gSiteTheme,
+#gAdminTheme {
+  float: left;
+  width: 48%;
+}
+
+#gSiteTheme {
+  margin-right: 1em;
+}
+
 .gButtonLink {
   border-width: 1px;
   border-style: solid;
@@ -139,13 +157,6 @@
   border-color: #c8c8c8 #ececec #ececec #c8c8c8;
 }
 
-.gBlock h2 a {
-  font-size: .7em;
-  float: right;
-  position: relative;
-  top: -1.69em;
-}
-
 .gUserAdminList li {
   padding: .4em .4em .3em .4em;
   position: relative;
@@ -196,6 +207,7 @@ li.gGroup {
 
 #gHeader:after,
 #gAdminCommentsMenu:after,
+#gGroupAdmin:after,
 .gSelected:after {
   clear: both;
   content: ".";
diff --git a/themes/admin_default/js/jquery.dropshadow.js b/themes/admin_default/js/jquery.dropshadow.js
new file mode 100644
index 00000000..2bd28317
--- /dev/null
+++ b/themes/admin_default/js/jquery.dropshadow.js
@@ -0,0 +1,304 @@
+/*

+	VERSION: Drop Shadow jQuery Plugin 1.6  12-13-2007

+

+	REQUIRES: jquery.js (1.2.6 or later)

+

+	SYNTAX: $(selector).dropShadow(options);  // Creates new drop shadows

+					$(selector).redrawShadow();       // Redraws shadows on elements

+					$(selector).removeShadow();       // Removes shadows from elements

+					$(selector).shadowId();           // Returns an existing shadow's ID

+

+	OPTIONS:

+

+		left    : integer (default = 4)

+		top     : integer (default = 4)

+		blur    : integer (default = 2)

+		opacity : decimal (default = 0.5)

+		color   : string (default = "black")

+		swap    : boolean (default = false)

+

+	The left and top parameters specify the distance and direction, in	pixels, to

+	offset the shadow. Zero values position the shadow directly behind the element.

+	Positive values shift the shadow to the right and down, while negative values 

+	shift the shadow to the left and up.

+	

+	The blur parameter specifies the spread, or dispersion, of the shadow. Zero 

+	produces a sharp shadow, one or two produces a normal shadow, and	three or four

+	produces a softer shadow. Higher values increase the processing load.

+	

+	The opacity parameter	should be a decimal value, usually less than one. You can

+	use a value	higher than one in special situations, e.g. with extreme blurring. 

+	

+	Color is specified in the usual manner, with a color name or hex value. The

+	color parameter	does not apply with transparent images.

+	

+	The swap parameter reverses the stacking order of the original and the shadow.

+	This can be used for special effects, like an embossed or engraved look.

+

+	EXPLANATION:

+	

+	This jQuery plug-in adds soft drop shadows behind page elements. It is only

+	intended for adding a few drop shadows to mostly stationary objects, like a

+	page heading, a photo, or content containers.

+

+	The shadows it creates are not bound to the original elements, so they won't

+	move or change size automatically if the original elements change. A window

+	resize event listener is assigned, which should re-align the shadows in many

+	cases, but if the elements otherwise move or resize you will have to handle

+	those events manually. Shadows can be redrawn with the redrawShadow() method

+	or removed with the removeShadow() method. The redrawShadow() method uses the

+	same options used to create the original shadow. If you want to change the

+	options, you should remove the shadow first and then create a new shadow.

+	

+	The dropShadow method returns a jQuery collection of the new shadow(s). If

+	further manipulation is required, you can store it in a variable like this:

+

+		var myShadow = $("#myElement").dropShadow();

+

+	You can also read the ID of the shadow from the original element at a later

+	time. To get a shadow's ID, either read the shadowId attribute of the

+	original element or call the shadowId() method. For example:

+

+		var myShadowId = $("#myElement").attr("shadowId");  or

+		var myShadowId = $("#myElement").shadowId();

+

+	If the original element does not already have an ID assigned, a random ID will

+	be generated for the shadow. However, if the original does have an ID, the 

+	shadow's ID will be the original ID and "_dropShadow". For example, if the

+	element's ID is "myElement", the shadow's ID would be "myElement_dropShadow".

+

+	If you have a long piece of text and the user resizes the	window so that the

+	text wraps or unwraps, the shape of the text changes and the words are no

+	longer in the same positions. In that case, you can either preset the height

+	and width, so that it becomes a fixed box, or you can shadow each word

+	separately, like this:

+

+		<h1><span>Your</span> <span>Page</span> <span>Title</span></h1>

+

+		$("h1 span").dropShadow();

+

+	The dropShadow method attempts to determine whether the selected elements have

+	transparent backgrounds. If you want to shadow the content inside an element,

+	like text or a transparent image, it must not have a background-color or

+	background-image style. If the element has a solid background it will create a

+	rectangular	shadow around the outside box.

+

+	The shadow elements are positioned absolutely one layer below the original 

+	element, which is positioned relatively (unless it's already absolute).

+

+	*** All shadows have the "dropShadow" class, for selecting with CSS or jQuery.

+

+	ISSUES:

+	

+		1)	Limited styling of shadowed elements by ID. Because IDs must be unique,

+				and the shadows have their own ID, styles applied by ID won't transfer

+				to the shadows. Instead, style elements by class or use inline styles.

+		2)	Sometimes shadows don't align properly. Elements may need to be wrapped

+				in container elements, margins or floats changed, etc. or you may just 

+				have to tweak the left and top offsets to get them to align. For example,

+				with draggable objects, you have to wrap them inside two divs. Make the 

+				outer div draggable and set the inner div's position to relative. Then 

+				you can create a shadow on the element inside the inner div.

+		3)	If the user changes font sizes it will throw the shadows off. Browsers 

+				do not expose an event for font size changes. The only known way to 

+				detect a user font size change is to embed an invisible text element and

+				then continuously poll for changes in size.

+		4)	Safari support is shaky, and may require even more tweaks/wrappers, etc.

+		

+		The bottom line is that this is a gimick effect, not PFM, and if you push it

+		too hard or expect it to work in every possible situation on every browser,

+		you will be disappointed. Use it sparingly, and don't use it for anything 

+		critical. Otherwise, have fun with it!

+				

+	AUTHOR: Larry Stevens (McLars@eyebulb.com) This work is in the public domain,

+					and it is not supported in any way. Use it at your own risk.

+*/

+

+

+(function($){

+

+	var dropShadowZindex = 1;  //z-index counter

+

+	$.fn.dropShadow = function(options)

+	{

+		// Default options

+		var opt = $.extend({

+			left: 4,

+			top: 4,

+			blur: 2,

+			opacity: .5,

+			color: "black",

+			swap: false

+			}, options);

+		var jShadows = $([]);  //empty jQuery collection

+		

+		// Loop through original elements

+		this.not(".dropShadow").each(function()

+		{

+			var jthis = $(this);

+			var shadows = [];

+			var blur = (opt.blur <= 0) ? 0 : opt.blur;

+			var opacity = (blur == 0) ? opt.opacity : opt.opacity / (blur * 8);

+			var zOriginal = (opt.swap) ? dropShadowZindex : dropShadowZindex + 1;

+			var zShadow = (opt.swap) ? dropShadowZindex + 1 : dropShadowZindex;

+			

+			// Create ID for shadow

+			var shadowId;

+			if (this.id) {

+				shadowId = this.id + "_dropShadow";

+			}

+			else {

+				shadowId = "ds" + (1 + Math.floor(9999 * Math.random()));

+			}

+

+			// Modify original element

+			$.data(this, "shadowId", shadowId); //store id in expando

+			$.data(this, "shadowOptions", options); //store options in expando

+			jthis

+				.attr("shadowId", shadowId)

+				.css("zIndex", zOriginal);

+			if (jthis.css("position") != "absolute") {

+				jthis.css({

+					position: "relative",

+					zoom: 1 //for IE layout

+				});

+			}

+

+			// Create first shadow layer

+			bgColor = jthis.css("backgroundColor");

+			if (bgColor == "rgba(0, 0, 0, 0)") bgColor = "transparent";  //Safari

+			if (bgColor != "transparent" || jthis.css("backgroundImage") != "none" 

+					|| this.nodeName == "SELECT" 

+					|| this.nodeName == "INPUT"

+					|| this.nodeName == "TEXTAREA") {		

+				shadows[0] = $("<div></div>")

+					.css("background", opt.color);								

+			}

+			else {

+				shadows[0] = jthis

+					.clone()

+					.removeAttr("id")

+					.removeAttr("name")

+					.removeAttr("shadowId")

+					.css("color", opt.color);

+			}

+			shadows[0]

+				.addClass("dropShadow")

+				.css({

+					height: jthis.outerHeight(),

+					left: blur,

+					opacity: opacity,

+					position: "absolute",

+					top: blur,

+					width: jthis.outerWidth(),

+					zIndex: zShadow

+				});

+				

+			// Create other shadow layers

+			var layers = (8 * blur) + 1;

+			for (i = 1; i < layers; i++) {

+				shadows[i] = shadows[0].clone();

+			}

+

+			// Position layers

+			var i = 1;			

+			var j = blur;

+			while (j > 0) {

+				shadows[i].css({left: j * 2, top: 0});           //top

+				shadows[i + 1].css({left: j * 4, top: j * 2});   //right

+				shadows[i + 2].css({left: j * 2, top: j * 4});   //bottom

+				shadows[i + 3].css({left: 0, top: j * 2});       //left

+				shadows[i + 4].css({left: j * 3, top: j});       //top-right

+				shadows[i + 5].css({left: j * 3, top: j * 3});   //bottom-right

+				shadows[i + 6].css({left: j, top: j * 3});       //bottom-left

+				shadows[i + 7].css({left: j, top: j});           //top-left

+				i += 8;

+				j--;

+			}

+

+			// Create container

+			var divShadow = $("<div></div>")

+				.attr("id", shadowId) 

+				.addClass("dropShadow")

+				.css({

+					left: jthis.position().left + opt.left - blur,

+					marginTop: jthis.css("marginTop"),

+					marginRight: jthis.css("marginRight"),

+					marginBottom: jthis.css("marginBottom"),

+					marginLeft: jthis.css("marginLeft"),

+					position: "absolute",

+					top: jthis.position().top + opt.top - blur,

+					zIndex: zShadow

+				});

+

+			// Add layers to container	

+			for (i = 0; i < layers; i++) {

+				divShadow.append(shadows[i]);

+			}

+			

+			// Add container to DOM

+			jthis.after(divShadow);

+

+			// Add shadow to return set

+			jShadows = jShadows.add(divShadow);

+

+			// Re-align shadow on window resize

+			$(window).resize(function()

+			{

+				try {

+					divShadow.css({

+						left: jthis.position().left + opt.left - blur,

+						top: jthis.position().top + opt.top - blur

+					});

+				}

+				catch(e){}

+			});

+			

+			// Increment z-index counter

+			dropShadowZindex += 2;

+

+		});  //end each

+		

+		return this.pushStack(jShadows);

+	};

+

+

+	$.fn.redrawShadow = function()

+	{

+		// Remove existing shadows

+		this.removeShadow();

+		

+		// Draw new shadows

+		return this.each(function()

+		{

+			var shadowOptions = $.data(this, "shadowOptions");

+			$(this).dropShadow(shadowOptions);

+		});

+	};

+

+

+	$.fn.removeShadow = function()

+	{

+		return this.each(function()

+		{

+			var shadowId = $(this).shadowId();

+			$("div#" + shadowId).remove();

+		});

+	};

+

+

+	$.fn.shadowId = function()

+	{

+		return $.data(this[0], "shadowId");

+	};

+

+

+	$(function()  

+	{

+		// Suppress printing of shadows

+		var noPrint = "<style type='text/css' media='print'>";

+		noPrint += ".dropShadow{visibility:hidden;}</style>";

+		$("head").append(noPrint);

+	});

+

+})(jQuery);
\ No newline at end of file
diff --git a/themes/admin_default/js/ui.init.js b/themes/admin_default/js/ui.init.js
index 79da8695..24cc0115 100644
--- a/themes/admin_default/js/ui.init.js
+++ b/themes/admin_default/js/ui.init.js
@@ -26,6 +26,14 @@ $(document).ready(function(){
     $(panelLinks[i]).bind("click", {element: panelLinks[i]}, handlePanelEvent);
   }
 
+  // Round corners
+  $(".gSelected").addClass("ui-corner-all");
+  $(".gAvailable").addClass("ui-corner-all");
+  $(".gUnavailable").addClass("ui-corner-all");
+
+  // Add drop shadows
+  $(".gSelected").dropShadow();
+
 });
 
 function handlePanelEvent(event) {
diff --git a/themes/admin_default/views/admin.html.php b/themes/admin_default/views/admin.html.php
index d5c2733d..c68368a7 100644
--- a/themes/admin_default/views/admin.html.php
+++ b/themes/admin_default/views/admin.html.php
@@ -21,6 +21,7 @@
     <script src="<?= url::file("lib/jquery-ui.js") ?>" type="text/javascript"></script>
     <script src="<?= url::file("lib/gallery.dialog.js") ?>" type="text/javascript"></script>
     <script src="<?= url::file("themes/default/js/superfish.js") ?>" type="text/javascript"></script>
+    <script src="<?= $theme->url("js/jquery.dropshadow.js") ?>" type="text/javascript"></script>
     <script src="<?= $theme->url("js/ui.init.js") ?>" type="text/javascript"></script>
     <?= $theme->admin_head() ?>
   </head>