Use standard WP UI markup in menu admin, props ptahdunbar, See #11817

git-svn-id: http://svn.automattic.com/wordpress/trunk@13393 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
wpmuguru 2010-02-25 00:03:42 +00:00
parent 4378b20de3
commit 9185676481
2 changed files with 214 additions and 282 deletions

View File

@ -8,90 +8,22 @@
* @subpackage Administration
*/
.fix{clear: both;height: 1px;margin: -1px 0 0;overflow: hidden;}
.maintitle { margin: 0 0 20px 0!important;}
.logo { vertical-align: middle; margin: 0 10px 0 0; }
#pages-left { min-width:650px;max-width:1100px;width: 100%; float:left; clear: left; margin-right: -315px; }
#pages-left .inside {margin-top: 20px; margin-right: 315px; }
#nav-container { margin-top: -3px; }
.sidebar-name { background-color:#AAAAAA;
background-image:url(../images/ed-bg.gif);
border-color:#DFDFDF;
text-shadow:0 1px 0 #FFFFFF;-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
background-position:0 0;
background-repeat:repeat-x;
border-style:solid;
border-width:1px;
cursor:pointer;
font-size:13px; }
.sidebar-name h3 {
font-size:13px;
height:19px;
margin:0;
overflow:hidden;
padding:5px 12px;
white-space:nowrap;
}
.sidebar-name-arrow {
background:transparent url(../images/menu-bits.gif) no-repeat scroll left -109px;
float:right;
height:29px;
width:26px;
}
#menu-right { width: 285px; margin-top: 20px; margin-right: 10px; margin-left: 20px; float:left; clear: right;}
h2.heading { margin: 32px 0 10px 0; }
.widgets-holder-wrap { margin: 0 0 20px 0; }
.widget-holder {
padding:15px 10px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
border-style:none solid solid;
border-width:0 1px 1px;
background-color:#F1F1F1;
border-color:#DDDDDD;
}
.checkboxes { float: right; margin: 10px 12px 0 0; }
.addtomenu {
display: block;
float: right;
margin: 10px 0 0 0;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
background:#21759B url(../images/button-grad.png) repeat-x scroll left top;
border-color:#298CBA !important;
color:#FFFFFF !important;
font-weight:bold;
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:11px;
-moz-border-radius-topleft:11px;
-moz-border-radius-topright:11px;
border-style:solid;
border-width:1px;
cursor:pointer;
font-size:11px !important;
line-height:16px;
padding:2px 8px;
text-decoration:none;
}
.list { zoom: 1; }
.list li { margin: 0; }
.list dt { display:none; float: left; width: 260px; margin: 0; padding: 0 0 0 5px; line-height: 30px; border-bottom: 1px solid #e3e3e3; }
.list dt span { float: left; }
.list dt img { cursor: pointer; float: right; margin: 7px 5px 0 0 }
#nav-container { padding: 0 10px 10px 10px; background-color: #fff; border: 1px solid #DFDFDF; border-top: none; -moz-border-radius-bottomleft:8px; -moz-border-radius-bottomright:8px; }
#menus-container { clear: both; }
#nav-container .inside { padding: 0px 10px 10px; }
#menus-container .submit { padding: 0px; }
#menu-settings-column .inside { padding: 10px; overflow: auto; }
#custom-nav ul { width: 100%; }
#custom-nav li { margin: 0; }

View File

@ -25,11 +25,11 @@ wp_enqueue_script( 'custom-navigation-default-items' );
wp_enqueue_script( 'jquery-autocomplete' );
wp_enqueue_script( 'custom-navigation-php-functions' );
require_once('admin-header.php');
require_once(ABSPATH . 'wp-admin/includes/nav-menu.php');
require_once( 'admin-header.php' );
require_once( ABSPATH . 'wp-admin/includes/nav-menu.php' );
function wp_reset_nav_menu() {
wp_nav_menu_setup(true);
wp_nav_menu_setup( true );
return true;
}
@ -149,231 +149,231 @@ if ( $post_counter > 0 && $menu_selected_id > 0 && ! $updated ) {
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2><?php esc_html_e('Menus') ?></h2>
<?php screen_icon(); ?>
<h2><?php esc_html_e('Menus') ?></h2>
<?php echo $messages_div; ?>
<div class="hide-if-js error"><p><?php _e('You do not have JavaScript enabled in your browser. Please enable it to access the Menus functionality.'); ?></p></div>
<form onsubmit="updatepostdata()" action="<?php echo admin_url( 'nav-menus.php' ); ?>" method="post" enctype="multipart/form-data">
<?php if ( ! empty( $custom_menus ) && count( $custom_menus ) > 1 ): ?>
<?php if ( ! empty( $custom_menus ) && count( $custom_menus ) > 1 ) : ?>
<ul class="subsubsub">
<?php
<?php
foreach ( $custom_menus as $menu ) {
$sep = end( $custom_menus ) == $menu ? '' : ' | ';
if ( ( $menu_id_in_edit == $menu->term_id ) || ( $menu_selected_id == $menu->term_id ) ) { ?>
<li><a href='nav-menus.php?edit-menu=<?php echo esc_attr($menu->term_id); ?>' class="current"><?php echo esc_html( $menu->name ); ?></a><?php echo $sep; ?></li>
<?php } else { ?>
<?php } else { ?>
<li><a href='nav-menus.php?edit-menu=<?php echo esc_attr($menu->term_id); ?>'><?php echo esc_html( $menu->name ); ?></a><?php echo $sep; ?></li>
<?php }
<?php }
}
?>
?>
</ul>
<div class="clear"></div>
<?php endif ?>
<?php endif; ?>
<div id="menus-container" class="metabox-holder has-right-sidebar">
<div id="menu-settings-column" class="inner-sidebar">
<div id="side-sortables" class="meta-box-sortables ui-sortable">
<div id="add-menu" class="postbox">
<div class="handlediv" title="Click to toggle"><br /></div>
<h3 class="hndle"><?php esc_html_e('Add Menu'); ?></h3>
<div class="inside">
<span>
<input id="add-menu-name" name="add-menu-name" type="text" value="" />
<input id="add-menu" type="submit" value="<?php esc_attr_e('Add Menu'); ?>" name="add-menu" class="button" />
</span>
</div><!-- /.inside-->
</div><!--END #add-menu-->
<div id="add-pages" class="postbox">
<div class="handlediv" title="Click to toggle"><br /></div>
<h3 class="hndle"><?php esc_html_e('Add an Existing Page'); ?></h3>
<div class="inside">
<?php
$pages_args = array(
'child_of' => 0,
'sort_order' => 'ASC',
'sort_column' => 'post_title',
'hierarchical' => 1,
'exclude' => '',
'include' => '',
'meta_key' => '',
'meta_value' => '',
'authors' => '',
'parent' => -1,
'exclude_tree' => '',
'number' => '',
'offset' => 0
);
$page_name = '';
$pages_array = get_pages($pages_args);
if ( $pages_array ) {
foreach ( $pages_array as $post ) {
$page_name .= $post->post_title . '|';
}
} else {
$page_name = __('No pages available');
}
?>
<script type="text/javascript" charset="<?php bloginfo('charset'); ?>">
jQuery(document).ready(function(){
var posts = "<?php echo esc_js( $page_name ); ?>".split("|");
jQuery("#page-search").autocomplete(posts);
jQuery("#page-search").result(function(event, data, formatted) {
jQuery('#existing-pages').css('display','block');
jQuery("#existing-pages dt:contains('" + data + "')").css("display", "block");
jQuery('#show-pages').hide();
jQuery('#hide-pages').show();
});
jQuery('#existing-pages').css('display','none');
});
</script>
<input type="text" onfocus="jQuery('#page-search').attr('value','');" id="page-search" value="<?php esc_attr_e('Search Pages'); ?>" />
<div class="hide-if-js error"><p><?php _e('You do not have JavaScript enabled in your browser. Please enable it to access the Menus functionality.'); ?></p></div>
<div class="hide-if-no-js">
<div id="pages-left">
<div class="inside">
<?php if ( ! empty( $custom_menus ) ) : ?>
<?php echo $messages_div; ?>
<a id="show-pages" style="cursor:pointer;" onclick="jQuery('#existing-pages').css('display','block');jQuery('#page-search').attr('value','');jQuery('#existing-pages dt').css('display','block');jQuery('#show-pages').hide();jQuery('#hide-pages').show();"><?php _e('View All'); ?></a>
<a id="hide-pages" style="cursor:pointer;" onclick="jQuery('#existing-pages').css('display','none');jQuery('#page-search').attr('value','Search Pages');jQuery('#existing-pages dt').css('display','none');jQuery('#show-pages').show();jQuery('#hide-pages').hide();"><?php _e('Hide All'); ?></a>
<input type="hidden" name="li-count" id="li-count" value="0" />
<input type="hidden" name="menu-id-in-edit" id="menu-id-in-edit" value="<?php echo esc_attr( $menu_selected_id ); ?>" />
<script type="text/javascript">
jQuery('#hide-pages').hide();
</script>
<div class="sidebar-name">
<div class="sidebar-name-arrow">
<br/>
</div>
<h3><?php echo esc_html( $menu_title ); ?></h3>
<ul id="existing-pages" class="list">
<?php $items_counter = wp_nav_menu_get_pages( 0,'default' ); ?>
</ul>
<div class="fix"></div>
</div><!-- /.inside-->
</div><!--END #add-pages-->
<div id="add-categories" class="postbox">
<div class="handlediv" title="Click to toggle"><br /></div>
<h3 class="hndle"><?php esc_html_e('Add an Existing Category'); ?></h3>
<div class="inside">
<?php
// Custom GET categories query
// @todo Use API
$categories = $wpdb->get_results("SELECT term_id FROM $wpdb->term_taxonomy WHERE taxonomy = 'category' ORDER BY term_id ASC");
$cat_name = '';
if ( $categories ) {
foreach ( $categories as $category ) {
$cat_id = $category->term_id;
$cat_args = array(
'orderby' => 'name',
'include' => $cat_id,
'hierarchical' => 1,
'order' => 'ASC',
);
$category_names = get_categories( $cat_args );
if ( isset( $category_names[0]->name ) ) {
$cat_name .= htmlentities( $category_names[0]->name ).'|';
}
}
} else {
$cat_name = __('No categories available');
}
?>
<script type="text/javascript" charset="<?php bloginfo('charset'); ?>">
jQuery(document).ready(function(){
var categories = "<?php echo esc_js($cat_name); ?>".split("|");
jQuery("#cat-search").autocomplete(categories);
jQuery("#cat-search").result(function(event, data, formatted) {
jQuery('#existing-categories').css('display','block');
jQuery("#existing-categories dt:contains('" + data + "')").css("display", "block");
jQuery('#show-cats').hide();
jQuery('#hide-cats').show();
});
jQuery('#existing-categories').css('display','none');
});
</script>
</div>
<input type="text" onfocus="jQuery('#cat-search').attr('value','');" id="cat-search" value="<?php esc_attr_e('Search Categories'); ?>" />
<div id="nav-container">
<ul id="custom-nav">
<a id="show-cats" style="cursor:pointer;" onclick="jQuery('#existing-categories').css('display','block');jQuery('#cat-search').attr('value','');jQuery('#existing-categories dt').css('display','block');jQuery('#show-cats').hide();jQuery('#hide-cats').show();"><?php _e('View All'); ?></a>
<a id="hide-cats" style="cursor:pointer;" onclick="jQuery('#existing-categories').css('display','none');jQuery('#cat-search').attr('value','Search Categories');jQuery('#existing-categories dt').css('display','none');jQuery('#show-cats').show();jQuery('#hide-cats').hide();"><?php _e('Hide All'); ?></a>
<?php
if ( $menu_selected_id > 0 ) {
wp_print_nav_menu( array( 'type' => 'backend', 'name' => $menu_title, 'id' => $menu_selected_id ) );
}
?>
</ul>
</div><!-- /#nav-container -->
<script type="text/javascript">
jQuery('#hide-cats').hide();
</script>
<p class="submit">
<ul id="existing-categories" class="list">
<?php $items_counter = wp_nav_menu_get_categories( $items_counter, 'default' ); ?>
</ul>
<script type="text/javascript">
updatepostdata();
</script>
<input id="save_bottom" name="save_bottom" type="submit" value="<?php esc_attr_e('Save All Changes'); ?>" />
<input id="delete-menu" name="delete-menu" type="submit" value="<?php esc_attr_e('Delete This Menu'); ?>" />
</p>
<div class="fix"></div>
</div><!-- /.inside-->
</div><!--END #add-categories-->
<div id="add-external-link" class="postbox">
<div class="handlediv" title="Click to toggle"><br /></div>
<h3 class="hndle"><?php esc_html_e('Add a Custom Link'); ?></h3>
<div class="inside">
<label class="howto" for="custom-menu-item-url">
<input id="custom-menu-item-url" type="text" value="http://" />
<?php _e('URL'); ?>
</label><br />
<?php $template_dir = get_bloginfo('url'); ?>
<input type="hidden" id="template-dir" value="<?php echo esc_attr($template_dir); ?>" />
<label class="howto" for="custom-menu-item-name">
<input id="custom-menu-item-name" type="text" value="<?php echo esc_attr( __('Menu Item') ); ?>" onfocus="jQuery('#custom-menu-item-name').attr('value','');" />
<?php _e('Menu Text'); ?>
</label><br />
<label class="howto" for="custom_menu_item_description" <?php if ($advanced_option_descriptions == 'no') { ?>style="display:none;"<?php } ?>>
<input id="custom_menu_item_description" type="text" value="<?php esc_attr_e('A description'); ?>" <?php if ($advanced_option_descriptions == 'no') { ?>style="display:none;"<?php } ?> onfocus="jQuery('#custom_menu_item_description').attr('value','');" />
<?php _e('Description'); ?>
</label>
<?php if ( 'no' != $advanced_option_descriptions ) { echo '<br />'; } ?>
<a class="addtomenu button" onclick="appendToList('<?php echo $template_dir; ?>','<?php echo esc_js( _x('Custom', 'menu nav item type') ); ?>','','','','0','');jQuery('#custom-menu-item-name').attr('value','<?php echo esc_js( __('Menu Item') ); ?>');jQuery('#custom_menu_item_description').attr('value','<?php echo esc_js( __('A description') ); ?>');"><?php _e('Add to menu'); ?></a>
<div class="fix"></div>
</div><!-- /.inside-->
</div><!-- /#add-external-link-->
</div><!-- /#side-sortables-->
</div><!-- /#menu-settings-column -->
<?php else : ?>
<div class="updated below-h2"><p><?php _e( 'Add a menu to start editing!' ); ?></p></div>
<?php endif; ?>
</div><!-- /.inside -->
</div>
<div id="post-body">
<div id="post-body-content">
<div id="normal-sortables" class="meta-box-sortables ui-sortable">
<?php if ( ! empty( $custom_menus ) ) : ?>
<div id="nav-container" class="postbox">
<h3 class="hndle"><?php echo esc_html( $menu_title ); ?></h3>
<div class="inside">
<input type="hidden" name="li-count" id="li-count" value="0" />
<input type="hidden" name="menu-id-in-edit" id="menu-id-in-edit" value="<?php echo esc_attr( $menu_selected_id ); ?>" />
<div id="menu-right">
<div class="widgets-holder-wrap">
<div class="sidebar-name">
<div class="sidebar-name-arrow"></div>
<h3><?php esc_html_e('Add Menu'); ?></h3>
</div>
<div class="widget-holder">
<span>
<input id="add-menu-name" name="add-menu-name" type="text" value="" />
<input id="add-menu" type="submit" value="<?php esc_attr_e('Add Menu'); ?>" name="add-menu" class="button" />
</span>
</div>
</div><!-- /.widgets-holder-wrap -->
<div class="widgets-holder-wrap">
<div class="sidebar-name">
<div class="sidebar-name-arrow"></div>
<h3><?php esc_html_e('Add an Existing Page'); ?></h3>
</div>
<div class="widget-holder">
<?php
$pages_args = array(
'child_of' => 0,
'sort_order' => 'ASC',
'sort_column' => 'post_title',
'hierarchical' => 1,
'exclude' => '',
'include' => '',
'meta_key' => '',
'meta_value' => '',
'authors' => '',
'parent' => -1,
'exclude_tree' => '',
'number' => '',
'offset' => 0
);
$page_name = '';
$pages_array = get_pages($pages_args);
if ( $pages_array ) {
foreach ( $pages_array as $post ) {
$page_name .= $post->post_title . '|';
}
} else {
$page_name = __('No pages available');
}
?>
<script type="text/javascript" charset="<?php bloginfo('charset'); ?>">
jQuery(document).ready(function(){
var posts = "<?php echo esc_js( $page_name ); ?>".split("|");
jQuery("#page-search").autocomplete(posts);
jQuery("#page-search").result(function(event, data, formatted) {
jQuery('#existing-pages').css('display','block');
jQuery("#existing-pages dt:contains('" + data + "')").css("display", "block");
jQuery('#show-pages').hide();
jQuery('#hide-pages').show();
});
jQuery('#existing-pages').css('display','none');
});
</script>
<input type="text" onfocus="jQuery('#page-search').attr('value','');" id="page-search" value="<?php esc_attr_e('Search Pages'); ?>" />
<a id="show-pages" style="cursor:pointer;" onclick="jQuery('#existing-pages').css('display','block');jQuery('#page-search').attr('value','');jQuery('#existing-pages dt').css('display','block');jQuery('#show-pages').hide();jQuery('#hide-pages').show();"><?php _e('View All'); ?></a>
<a id="hide-pages" style="cursor:pointer;" onclick="jQuery('#existing-pages').css('display','none');jQuery('#page-search').attr('value','Search Pages');jQuery('#existing-pages dt').css('display','none');jQuery('#show-pages').show();jQuery('#hide-pages').hide();"><?php _e('Hide All'); ?></a>
<script type="text/javascript">
jQuery('#hide-pages').hide();
</script>
<ul id="existing-pages" class="list">
<?php
$items_counter = wp_nav_menu_get_pages( 0,'default' );
?>
</ul>
<div class="fix"></div>
</div>
</div><!-- /.widgets-holder-wrap -->
<div class="widgets-holder-wrap">
<div class="sidebar-name">
<div class="sidebar-name-arrow"></div>
<h3><?php esc_html_e('Add an Existing Category'); ?></h3>
</div>
<div class="widget-holder">
<?php
// Custom GET categories query
// @todo Use API
$categories = $wpdb->get_results("SELECT term_id FROM $wpdb->term_taxonomy WHERE taxonomy = 'category' ORDER BY term_id ASC");
$cat_name = '';
if ( $categories ) {
foreach ( $categories as $category ) {
$cat_id = $category->term_id;
$cat_args = array(
'orderby' => 'name',
'include' => $cat_id,
'hierarchical' => 1,
'order' => 'ASC',
);
$category_names = get_categories( $cat_args );
if ( isset( $category_names[0]->name ) ) {
$cat_name .= htmlentities( $category_names[0]->name ).'|';
}
}
} else {
$cat_name = __('No categories available');
}
?>
<script type="text/javascript" charset="<?php bloginfo('charset'); ?>">
jQuery(document).ready(function(){
var categories = "<?php echo esc_js($cat_name); ?>".split("|");
jQuery("#cat-search").autocomplete(categories);
jQuery("#cat-search").result(function(event, data, formatted) {
jQuery('#existing-categories').css('display','block');
jQuery("#existing-categories dt:contains('" + data + "')").css("display", "block");
jQuery('#show-cats').hide();
jQuery('#hide-cats').show();
});
jQuery('#existing-categories').css('display','none');
});
</script>
<input type="text" onfocus="jQuery('#cat-search').attr('value','');" id="cat-search" value="<?php esc_attr_e('Search Categories'); ?>" />
<a id="show-cats" style="cursor:pointer;" onclick="jQuery('#existing-categories').css('display','block');jQuery('#cat-search').attr('value','');jQuery('#existing-categories dt').css('display','block');jQuery('#show-cats').hide();jQuery('#hide-cats').show();"><?php _e('View All'); ?></a>
<a id="hide-cats" style="cursor:pointer;" onclick="jQuery('#existing-categories').css('display','none');jQuery('#cat-search').attr('value','Search Categories');jQuery('#existing-categories dt').css('display','none');jQuery('#show-cats').show();jQuery('#hide-cats').hide();"><?php _e('Hide All'); ?></a>
<script type="text/javascript">
jQuery('#hide-cats').hide();
</script>
<ul id="existing-categories" class="list">
<?php
$items_counter = wp_nav_menu_get_categories( $items_counter, 'default' );
?>
</ul>
<div class="fix"></div>
</div>
</div><!-- /.widgets-holder-wrap -->
<div class="widgets-holder-wrap">
<div class="sidebar-name">
<div class="sidebar-name-arrow"></div>
<h3><?php esc_html_e('Add a Custom Url'); ?></h3>
</div>
<div class="widget-holder">
<input id="custom-menu-item-url" type="text" value="http://" />
<label for="custom-menu-item-url"><?php _e('URL'); ?></label><br />
<?php $template_dir = get_bloginfo('url'); ?>
<input type="hidden" id="template-dir" value="<?php echo esc_attr($template_dir); ?>" />
<input id="custom-menu-item-name" type="text" value="<?php echo esc_attr( __('Menu Item') ); ?>" onfocus="jQuery('#custom-menu-item-name').attr('value','');" />
<label for="custom-menu-item-name"><?php _e('Menu Text'); ?></label><br />
<input id="custom_menu_item_description" type="text" value="<?php esc_attr_e('A description'); ?>" <?php if ($advanced_option_descriptions == 'no') { ?>style="display:none;"<?php } ?> onfocus="jQuery('#custom_menu_item_description').attr('value','');" />
<label <?php if ($advanced_option_descriptions == 'no') { ?>style="display:none;"<?php } ?> ><?php _e('Description'); ?></label>
<a class="addtomenu" onclick="appendToList('<?php echo $template_dir; ?>','<?php echo esc_js( _x('Custom', 'menu nav item type') ); ?>','','','','0','');jQuery('#custom-menu-item-name').attr('value','<?php echo esc_js( __('Menu Item') ); ?>');jQuery('#custom_menu_item_description').attr('value','<?php echo esc_js( __('A description') ); ?>');"><?php _e('Add to menu'); ?></a>
<div class="fix"></div>
</div>
</div><!-- /.widgets-holder-wrap -->
</div><!-- /.hide-if-no-js -->
</div>
<ul id="custom-nav">
<?php
if ( $menu_selected_id > 0 ) {
wp_print_nav_menu( array( 'type' => 'backend', 'name' => $menu_title, 'id' => $menu_selected_id ) );
}
?>
</ul><!-- /#custom-nav-->
</div><!-- /.inside -->
<!-- /#nav-menu-canvas .postbox-->
</div>
<p class="submit">
<script type="text/javascript">
updatepostdata();
</script>
<input id="save_bottom" name="save_bottom" type="submit" value="<?php esc_attr_e('Save All Changes'); ?>" />
<input id="delete-menu" name="delete-menu" type="submit" value="<?php esc_attr_e('Delete This Menu'); ?>" />
</p>
<?php else : ?>
<div class="updated"><p><?php _e( 'Add a menu to start editing!' ); ?></p></div>
<?php endif; ?>
</div><!-- /#normal-sortables-->
</div><!-- /#post-body-content-->
</div><!--- /#post-body -->
<br class="clear" />
</div><!-- /.metabox-holder has-right-sidebar-->
</form>
</div>
</div><!-- /.wrap-->
<div id="dialog-confirm" style="display:none;" title="<?php esc_attr_e('Edit Menu Item'); ?>">
<span id="edittitle-wrap"><input id="edittitle" type="text" name="edittitle" value="" /><label class="editlabel" for="edittitle"><?php _e('Menu Title'); ?></label><br /></span>
@ -391,4 +391,4 @@ if ( $post_counter > 0 && $menu_selected_id > 0 && ! $updated ) {
<?php
include("admin-footer.php");
include( 'admin-footer.php' );