--- loncom/interface/lonsyllabus.pm	2010/02/15 20:28:51	1.106.2.3
+++ loncom/interface/lonsyllabus.pm	2010/02/17 04:48:09	1.106.2.4
@@ -1,7 +1,7 @@
 # The LearningOnline Network
 # Syllabus
 #
-# $Id: lonsyllabus.pm,v 1.106.2.3 2010/02/15 20:28:51 faziophi Exp $
+# $Id: lonsyllabus.pm,v 1.106.2.4 2010/02/17 04:48:09 faziophi Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -151,13 +151,17 @@ ENDSCRIPT
 
 <style type="text/css">
 	.LC_Sortable ul { list-style-type: none; margin: 0px; padding: 0px}
-	.LC_Sortable li { list-style-type: none; margin: 0px 5px 5px 5px; padding: 5px; padding-left: 1.5em; width: 175px; font-size:90% }
-	.LC_Sortable li span { float: left; margin-left: -1.5em; }
+	.LC_Sortable li { list-style-type: none; cursor: pointer; margin: 0px 5px 5px 5px; padding: 5px; padding-left: 1.5em; width: 200px; font-size:90% }
+	.LC_Sortable li span.left { float: left; cursor: move; margin-left: -1.5em; }
+	.LC_Sortable li span.right { float: right; cursor: auto; margin-right: 0em }
 	.LC_EllipseOverflow { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; }
-	#scrollable-fields-container {float: left; background-color: white; width: 235px; border: 1px solid grey; margin: 0px}
-	#syllabus-fields {position:relative; top: 0;}
-	#syllabus-fields-container {padding: 0 0 0 0}
+	.LC_ActivityBarButton-IconLeft { padding-left: 20px }
+	.LC_ActivityBarButton-IconLeft .ui-icon { float:left; margin-left: -18px; }
+	#scrollable-fields-container {float:left; background-color: white; width: 235px; border: 1px solid grey; margin: 0px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
+	#syllabus-fields-actions {text-align: center}
 	#syllabus-content {margin-left: 245px}
+	#activity-bar {-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: solid 1px grey; background-color: #dddddd; padding: 0px 0px;margin: 5px 0 2px 0;}	
+	#activity-bar button { font-size: 100%; vertical-align: middle }
 </style>
 
 <script type="text/javascript">
@@ -205,11 +209,25 @@ ENDSCRIPT
 		};
 	})(jQuery);
 	
+	var changesMade = false;
+	var changesBreakVersion = false;
 	
 	jQuery(document).ready(function() {
 		jQuery('.LC_EllipseOverflow').ellipsis();
+		jQuery('#syllabus-fields li').click(function() {
+			jQuery(this).parent().children('li').removeClass('ui-state-highlight');
+			jQuery(this).addClass('ui-state-highlight');
+			var id = /title-([0-9_]+)/i.exec(jQuery(this).attr('id'));
+			jQuery('#syllabus-form .LC_Box').hide();
+			jQuery('#box-'+id[1]).show();
+		});
 		jQuery('#syllabus-fields').sortable({
 			revert: true,
+			axis: 'y',
+			cursor: 'move',
+			placeholder: 'ui-state-highlight',
+			handle: 'span.ui-icon-arrowthick-2-n-s',
+			forcePlaceholderSize: true,
 			start: function(event, ui) {
 				jQuery(ui.item).css('font-style', 'italic');
 			},
@@ -219,27 +237,40 @@ ENDSCRIPT
 					var id = /title-([0-9_]+)/i.exec(jQuery(this).attr('id'));
 					order.push(id[1]);
 				});
+				if (!changesMade) {
+					changesMade = true;
+					$('#save-button').addClass('ui-state-highlight');
+					$('#save-button').removeClass('ui-state-disabled');
+				}
 			}
 		});
-		jQuery('#syllabus-fields li').click(function() {
-			jQuery(this).parent().children('li').removeClass('ui-state-highlight');
-			jQuery(this).addClass('ui-state-highlight');
-			var id = /title-([0-9_]+)/i.exec(jQuery(this).attr('id'));
-			jQuery('#syllabus-form .LC_Box').hide();
-			jQuery('#box-'+id[1]).show();
-		});
-		jQuery('#syllabus-fields ui, li').disableSelection();
-		jQuery('#syllabus-fields-container').height('500px');
-		jQuery('#syllabus-fields-container').css('overflow-x', 'hidden');
-		jQuery('#syllabus-fields-container').css('overflow-y', 'auto');		
-		jQuery('#syllabus-fields-container').css('position', 'relative');
-		jQuery('#syllabus-fields').css('position', 'relative');
-		jQuery('#syllabus-fields').css('top', '0px');
-		jQuery('#syllabus-fields').css('display','block');
-		jQuery('#syllabus-fields-container').scroll(function() {
-			jQuery('#syllabus-fields').sortable('refreshPositions');
-		});
+		jQuery('#syllabus-fields li').disableSelection();
+		jQuery('.RemoveSection').hide();
+		jQuery('#syllabus-fields li').hover(
+			function(){
+				jQuery(this).find('.RemoveSection').toggle();
+			},
+			function(){
+				jQuery(this).find('.RemoveSection').toggle();
+			}
+		);
+		jQuery('#syllabus-fields li span.right').hover(
+			function(){
+				jQuery(this).css('background-image', 'url("/adm/jQuery/css/smoothness/images/ui-icons_2e83ff_256x240.png")');
+			},
+			function(){
+				jQuery(this).css('background-image', 'url("/adm/jQuery/css/smoothness/images/ui-icons_454545_256x240.png")');
+			}
+		);
 		jQuery('#syllabus-form .LC_Box').hide();
+		jQuery('.LC_ActivityBarButton').hover(
+			function(){ 
+				$(this).addClass("ui-state-hover"); 
+			},
+			function(){ 
+				$(this).removeClass("ui-state-hover"); 
+			}
+		);
 	});
 </script>
 ENDSCRIPT
@@ -611,7 +642,7 @@ ENDSCRIPT
              &Apache::lonannounce::readcalendar($cdom.'_'.$cnum));
     if ($target ne 'tex') {
     	if (($syllabus{'uploaded.lastmodified'}) || ($allowed)) {
-    		$r->print("<br />");
+    		&print_activity_bar($r, \%data, $target, $allowed, Apache::lontemplate->RICH_TEXT_DETECT_HTML);
     		&print_field_sortable($r, \%data, $target, $allowed, Apache::lontemplate->RICH_TEXT_DETECT_HTML);
         }
         $r->print("<div id='syllabus-content'>\n");
@@ -671,8 +702,8 @@ ENDSCRIPT
  		@htmlids = &print_template_new_fields($r, \%data, 
  			$target, $allowed, Apache::lontemplate->RICH_TEXT_DETECT_HTML, \%custom_hash);
         if ($allowed) {
-            $r->print('</form>'.
-            &Apache::lonhtmlcommon::htmlareaselectactive(@htmlids));
+            $r->print('</form>');
+            #&Apache::lonhtmlcommon::htmlareaselectactive(@htmlids));
         }
         if ($target ne 'tex') {$r->print('</div><p style="clear:both">&nbsp;</p>');}
         if ($allowed) {
@@ -704,22 +735,38 @@ ENDSCRIPT
     return OK;
 }
 
+sub print_activity_bar {
+	my ($r, $data_ref, $target, $allowed, $default_rich_text, $group) = @_;
+	$r->print("<div id='activity-bar'>
+<button id='save-button' type='button' class='LC_ActivityBarButton LC_ActivityBarButton-IconLeft ui-state-default ui-priority-primary ui-corner-all'>
+	<span class='ui-icon ui-icon-disk'></span><a href='#'>Save</a>
+</button>
+
+</div>");
+}
+
 sub print_field_sortable {
 	my ($r, $data_ref, $target, $allowed, $default_rich_text, $group) = @_;
 	my %data = %{$data_ref};
 	my @fields = @{thaw($data{'data.fields'})};
 	$r->print("<div id='scrollable-fields-container'>
-<!--<div id='syllabus-fields-up' class='ui-state-default' style='text-align:center'>Up</div>-->
 <div id='syllabus-fields-container'>
 <ui id='syllabus-fields' class='LC_Sortable LC_SyllabusFields'>\n");
 	foreach my $key (@fields) {
 		my %field = %{thaw($data{'data.field.'.$key})};
-		$r->print("<li id='title-$key' class='ui-state-default LC_EllipseOverflow' title='$field{title}'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span>$field{title}</li>\n");
+		$r->print("<li id='title-$key' class='ui-state-default LC_EllipseOverflow' title='$field{title}'><span class='ui-icon ui-icon-arrowthick-2-n-s left'></span><span id='remove-$key' class='RemoveSection right ui-icon ui-icon-closethick' title='Delete'></span>$field{title}</li>\n");
 	}
 	$r->print("
 </ui>
 </div>
-<!--<div id='syllabus-fields-down' class='ui-state-default' style='text-align:center'>Down</div>-->
+<div id='syllabus-fields-actions'>
+<button id='add-section-button' type='button' class='LC_ActivityBarButton LC_ActivityBarButton-IconLeft ui-state-default ui-priority-secondary ui-corner-all'>
+	<span class='ui-icon ui-icon-circle-plus'></span><a href='#'>Add&nbsp;Section</a>
+</button>
+<button id='revert-order-button' type='button' class='LC_ActivityBarButton LC_ActivityBarButton-IconLeft ui-state-default ui-priority-secondary ui-corner-all'>
+	<span class='ui-icon ui-icon-arrowreturnthick-1-w'></span><a href='#'>Revert&nbsp;Order</a>
+</button>
+</div>
 </div>\n");
 }