- Use jqueryui's tab system instead of our own

- Update the tab style so it doesn't look stupid.
This commit is contained in:
dave 2009-09-10 22:52:04 +00:00
parent 174d658f2d
commit 8b9b029e31
2 changed files with 85 additions and 50 deletions

View File

@ -202,8 +202,6 @@ case 'award_create':
'Administration' => 'admin/index.php',
'Awards Main' => 'admin/awards.php') );
require_once('../htabs.inc.php');
?>
<script type="text/javascript" src="../js/jquery.tablednd_0_5.js"></script>
<script type="text/javascript">
@ -358,6 +356,25 @@ $(document).ready(function() {
modal: true, resizable: false,
draggable: false
});
$("#editor_tabs").tabs({
show: function(event, ui) {
switch(ui.panel.id) {
case 'editor_tab_awardinfo':
update_awardinfo();
break;
case 'editor_tab_eligibility':
update_eligibility();
break;
case 'editor_tab_prizes':
update_prizeinfo();
break;
}
},
selected: -1,
});
});
</script>
@ -366,16 +383,14 @@ $(document).ready(function() {
/* Begin popup */
echo "<div id=\"popup_editor\" title=\"Award Editor\" style=\"display: none\">";
htabs_begin('editortabs', array('awardinfo' => array('label' =>'Award',
'callback' => 'update_awardinfo'),
'eligibility' => array('label' =>'Eligibility',
'callback' => 'update_eligibility'),
'prizes'=> array('label' => 'Prizes',
'callback' => 'update_prizeinfo'),
),'awardinfo');
htabs_tab_begin('awardinfo');
?>
<div id="editor_tabs">
<ul><li><a href="#editor_tab_awardinfo"><span><?=i18n('Award Info')?></span></a></li>
<li><a href="#editor_tab_eligibility"><span><?=i18n('Eligibility')?></span></a></li>
<li><a href="#editor_tab_prizes"><span><?=i18n('Prizes')?></span></a></li>
</ul>
<div id="editor_tab_awardinfo">
<h2><?=i18n("Award Info")?></h2>
<div id="awardinfo_info"></div>
<form id="awardinfo">
@ -435,12 +450,11 @@ htabs_tab_begin('awardinfo');
<td class="right"><?=i18n("Allow the Automatic Judge Scheduler to assign judges to this award (usually checked)")?></td></tr>
</table></form>
<input type="submit" onClick="awardinfo_save();" value="Save" />
<?
htabs_tab_end();
</div>
htabs_tab_begin('eligibility');
?>
<h2><?=i18n("Award Info")?></h2>
<? /* Next Tab */ ?>
<div id="editor_tab_eligibility">
<h3><?=i18n("Eligibility")?></h3>
<div id="eligibility_info"></div>
<form id="eligibility">
<input type="hidden" id="eligibility_id" name="id" value="" />
@ -472,13 +486,13 @@ htabs_tab_begin('eligibility');
</td></tr></table>
</form>
<input type="submit" onClick="eligibility_save();" value="Save" />
<?
htabs_tab_end();
</div>
htabs_tab_begin('prizes');
?>
<? /* Next Tab */ ?>
<div id="editor_tab_prizes">
<div id="prizeinfo_info"></div>
<h2><?=i18n("Prizes")?></h2>
<h3><?=i18n("Prizes")?></h3>
<br />
<table id="prizelist" class="tableview">
<tr class="nodrop nodrag">
@ -495,7 +509,7 @@ htabs_tab_begin('prizes');
<br >
<hr>
<br /><h2 id="prizeinfo_edit_header">Click on a prize to edit</h2><br />
<br /><h3 id="prizeinfo_edit_header">Click on a prize to edit</h3><br />
<form id="prizeinfo">
<input type="hidden" id="prizeinfo_id" name="id" value=""/>
<input type="hidden" id="prizeinfo_award_awards_id" name="award_awards_id" value=""/>
@ -538,21 +552,17 @@ htabs_tab_begin('prizes');
<br />
<input type="submit" onClick="prize_create();" value="<?=i18n("Create New Prize")?>" />
<input type="submit" id="prizeinfo_save" onClick="prize_save();" value="<?=i18n("Save Prize")?>" disabled="disabled" />
</div>
</div>
</div>
<?
htabs_tab_end();
htabs_end();
/* End popup */
echo '</div>';
/* Here's all the code for the award list, except for the AJAX queries which are
* at the top of this file */
?>
<script type="text/javascript">
function popup_editor(id)
@ -566,9 +576,11 @@ function popup_editor(id)
award_id = id;
if(id == -1) {
htabs_open('prizes');
$('#editor_tabs').tabs('option', 'disabled', [0, 1]);
$('#editor_tabs').tabs('option', 'selected', 2);
} else {
htabs_open("editortabs");
$('#editor_tabs').tabs('option', 'disabled', []);
$('#editor_tabs').tabs('option', 'selected', 0);
}
return 0;
}
@ -600,9 +612,7 @@ function award_create()
function(json) {
popup_editor(json.id);
/* Ensure we open on the first tab */
$("#htabs_awardinfo_tab").click();
/* FIXME: insert data into the list */
awardlist_refresh();
$('#editor_tabs').tabs('option', 'selected', 0);
});
// alert("ok");
return 0;
@ -624,15 +634,6 @@ function award_delete(id)
}
function popup_edit_prize_template()
{
$("#htabs_editortabs_awardinfo").remove();
$("#htabs_editortabs_eligibility").remove();
$("#htabs_editortabs_prizes").html("<?=i18n("Generic Prize Template")?>");
popup_editor(-1);
$("#htabs_editortabs_prizes").click();
}
$(document).ready(function() {
awardlist_refresh();
// $(".awardlist_tr#166").css('background-color','red');
@ -729,9 +730,9 @@ echo "</table>";
?>
<br />
<a href="#" onClick="award_create();"><?=i18n("Create New Award")?></a>
<a href="#" onClick="popup_edit_prize_template();"><?=i18n("Edit Generic Prize Template")?></a>
<a href="#" onClick="popup_editor(-1);"><?=i18n("Edit Generic Prize Template")?></a>
<input type="submit" onClick="award_create();" value="<?=i18n("Create New Award")?>" />
<input type="submit" onClick="popup_edit_prize_template();" value="<?=i18n("Edit Generic Prize Template")?>" />
<input type="submit" onClick="popup_editor(-1);" value="<?=i18n("Edit Generic Prize Template")?>" />
<br /><br />
<?
@ -815,7 +816,7 @@ if(mysql_num_rows($q))
if($_GET['action'] == 'edit_prize_template') {
?><script type="text/javascript">
popup_edit_prize_template();
popup_editor(-1);
</script>
<?
}

View File

@ -483,6 +483,10 @@ table.usereditor td.right {
background: #e0e0ff;
}
.ui-widget {
font-size: 1em;
}
/* Override the titlebar padding, it's too big. */
.ui-dialog .ui-dialog-titlebar {
padding: 0 0 0 .5em ;
@ -490,8 +494,38 @@ table.usereditor td.right {
/* Override the title */
.ui-dialog .ui-dialog-title {
font-size: 16px;
font-size: 12pt;
font-weight: bold;
}
/* Required for tabs to work */
.ui-tabs .ui-tabs-hide {
display: none;
}
/* Rework the tabs, the default layout with a separate div
behind only the tabs is silly, and it looks stupid. */
div.ui-tabs {
background: none;
border: none;
padding: 0;
}
div.ui-tabs div.ui-tabs-panel {
border: 1px solid #A5B5C6;
background: #eeeeff;
}
div.ui-tabs ul.ui-tabs-nav {
border: 0;
background: none;
}
/* Dump the HUGE tab border and change the font. We need to
* rework the fonts for ALL of sfiab. "1em" in here is about 20pt*/
.ui-tabs .ui-tabs-nav li a {
padding: 0.1em 0.3em 0.1em 0.3em;
font-size: 10pt;
font-weight: bold;
}