[LON-CAPA-cvs] cvs: loncom(bz6209) /interface lonsyllabus.pm
faziophi
faziophi@source.lon-capa.org
Wed, 17 Feb 2010 04:48:09 -0000
This is a MIME encoded message
--faziophi1266382089
Content-Type: text/plain
faziophi Wed Feb 17 04:48:09 2010 EDT
Modified files: (Branch: bz6209)
/loncom/interface lonsyllabus.pm
Log:
Work-in-progress commit for bug 6209.
Continuing work on jQuery based interface. At this point, none of the
buttons actually function, but the following changes are
notable:
SECTIONS/FIELDS LIST:
-- Reorder now only is allowed along the y-axis, and the "up-down arrow"
icon serves as the handle by which sections can be dragged.
-- The list is now as long as the number of sections, as opposed to
using 'overflow-y: scroll'.
-- Hovering over a section name shows a "Delete" icon.
-- New non-functional buttons to "Add Section" and "Revert Order"
ACTIVITY BAR:
-- Activity bar (whose major purpose here is to save) has been put in.
-- The "Save" button becomes highlighted once a change has been made.
--NOT YET DONE--
These are things that I need to do, or have been told about, but
have not yet been touched.
-- Letting lonnet::put manage the freezing of nested data structures.
-- Removing 2.x pseudo-compatibility.
Screenshot attached to bug 6209 on Bugzilla.
--faziophi1266382089
Content-Type: text/plain
Content-Disposition: attachment; filename="faziophi-20100217044809.txt"
Index: loncom/interface/lonsyllabus.pm
diff -u loncom/interface/lonsyllabus.pm:1.106.2.3 loncom/interface/lonsyllabus.pm:1.106.2.4
--- loncom/interface/lonsyllabus.pm:1.106.2.3 Mon Feb 15 20:28:51 2010
+++ loncom/interface/lonsyllabus.pm Wed Feb 17 04:48:09 2010
@@ -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 @@
<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 @@
};
})(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 @@
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 @@
&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 @@
@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"> </p>');}
if ($allowed) {
@@ -704,22 +735,38 @@
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 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 Order</a>
+</button>
+</div>
</div>\n");
}
--faziophi1266382089--