From 08f650de1a39da326073ddafd00cae116d592f09 Mon Sep 17 00:00:00 2001 From: nacin Date: Mon, 3 May 2010 10:28:35 +0000 Subject: [PATCH] First pass on sliding tabs for the nav menu admin UI. props koopersmith, see #13215. git-svn-id: http://svn.automattic.com/wordpress/trunk@14368 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/nav-menu.css | 2 +- wp-admin/css/nav-menu.dev.css | 127 +++++++++++++++++++++++----------- wp-admin/js/nav-menu.dev.js | 93 +++++++++++++++++++++++++ wp-admin/js/nav-menu.js | 2 +- wp-admin/nav-menus.php | 2 + wp-includes/script-loader.php | 4 +- 6 files changed, 186 insertions(+), 44 deletions(-) diff --git a/wp-admin/css/nav-menu.css b/wp-admin/css/nav-menu.css index c45a6f95f..0492906fb 100644 --- a/wp-admin/css/nav-menu.css +++ b/wp-admin/css/nav-menu.css @@ -1 +1 @@ -#nav-menus-frame{margin-left:300px;}#wpbody-content #menu-settings-column{display:block;width:281px;margin-left:-300px;clear:both;float:left;padding-top:24px;}.no-js #wpbody-content #menu-settings-column{padding-top:31px;}#menu-settings-column .inside{padding:0 10px;}#menu-settings-column .handlediv{background:url("../images/menu-bits.gif") no-repeat scroll 0 -110px;}#wpbody{position:relative;}#menu-management-liquid{float:left;min-width:100%;}#menu-management{position:relative;margin-right:20px;margin-top:-3px;width:100%;}#menu-management .menu-edit{margin-bottom:20px;}#nav-menu-header,#post-body{border-color:#ccc;border-style:solid;}#nav-menu-header{background:url("../images/gray-grad.png") repeat-x scroll left top #dfdfdf;border-width:1px 1px 0 1px;-moz-border-radius-topleft:6px;-webkit-border-top-left-radius:6px;-khtml-border-top-left-radius:6px;border-top-left-radius:6px;-moz-border-radius-topright:6px;-webkit-border-top-right-radius:6px;-khtml-border-top-right-radius:6px;border-top-right-radius:6px;}#post-body{background:#fff;padding:0 0 10px 10px;border-width:0 1px 1px 1px;-moz-border-radius-bottomleft:6px;-webkit-border-bottom-left-radius:6px;-khtml-border-bottom-left-radius:6px;border-bottom-left-radius:6px;-moz-border-radius-bottomright:6px;-webkit-border-bottom-right-radius:6px;-khtml-border-bottom-right-radius:6px;border-bottom-right-radius:6px;}#post-body-content{position:relative;}.post-body-plain{padding:10px 10px 0 0;}#menu-management .menu-add-new abbr{font-weight:bold;}#menu-management .nav-tabs{padding-left:30px;clear:both;}#menu-management .nav-tab{background:#f4f4f4;font-weight:bold;border-color:#dfdfdf;}#menu-management .nav-tab-active{background:#ececec;border-color:#ccc;border-bottom-color:#ececec;}#select-nav-menu-container{text-align:right;padding:0 10px 3px 10px;margin-bottom:5px;}#select-nav-menu{width:100px;display:inline;}#menu-management #major-publishing-actions #delete-action{float:right;margin-right:10px;}#menu-name-label{margin-top:-2px;}#wpbody .open-label{display:inline-block;}#wpbody .open-label span{padding-right:10px;}.js .input-with-default-title{color:#aaa;font-style:italic;}#menu-management .inside{padding:0 10px;}.postbox .howto input{width:180px;float:right;}.customlinkdiv .howto input{width:210px;}#menu-container .submit{margin:0 0 10px;padding:0;}.submitdelete,.submitclose{font-size:11px;}#cancel-save{color:#f00;text-decoration:underline;font-size:11px;margin-left:20px;margin-top:5px;}#cancel-save:hover{background-color:#F00;color:#fff;}.list-controls{float:left;margin-top:5px;}.add-to-menu{float:right;}.postbox img.waiting{display:none;vertical-align:middle;}.button-controls{margin:10px 0;}.show-all,.hide-all{cursor:pointer;}.hide-all{display:none;}#create-menu-name{width:159px;}#manage-menu .inside{padding:0;}#available-links dt{display:block;}#add-custom-link .howto{font-size:11px;}#add-custom-link label span{display:block;float:left;margin-top:5px;padding-right:5px;}.menu-item-textbox{width:180px;}.howto span{margin-top:4px;display:block;float:left;}.quick-search{width:190px;}.list-wrap{display:none;clear:both;margin-bottom:10px;}.list-container{max-height:200px;overflow-y:auto;padding:10px 10px 5px;border:1px solid #DFDFDF;-moz-border-radius:4px;}.postbox p.submit{margin-bottom:0;}.list li{display:none;margin:0;margin-bottom:5px;}.list li .menu-item-title{cursor:pointer;display:block;}.list li .menu-item-title input{margin-right:3px;margin-top:-3px;}.list li li .menu-item-title{margin-left:14px;}.list li li li .menu-item-title{margin-left:28px;}.list li li li li .menu-item-title{margin-left:42px;}.list li li li li li .menu-item-title{margin-left:56px;}.list li li li li li li .menu-item-title{margin-left:70px;}.list li li li li li li li .menu-item-title{margin-left:84px;}.list li li li li li li li li .menu-item-title{margin-left:98px;}.list li li li li li li li li li .menu-item-title{margin-left:112px;}#menu-container .inside{padding-bottom:10px;}.menu{padding-top:1em;}.menu ul{width:100%;}.menu li{margin-bottom:0;}.menu li dl{clear:both;line-height:1.5em;position:relative;margin-top:13px;}.menu li dl dt{background:url("../images/gray-grad.png") repeat-x scroll left top #DFDFDF;border:1px solid #E6E6E6;clear:both;position:relative;padding-left:10px;height:auto;width:400px;line-height:35px;text-shadow:0 1px 0 #FFF;font-weight:bold;overflow:hidden;}.menu li dl.menu-item-edit-inactive dt{border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-khtml-border-radius:6px;}.menu li dl.menu-item-edit-active dt{-moz-border-radius:6px 6px 0 0;-webkit-border-top-right-radius:6px;-webkit-border-top-left-radius:6px;-khtml-border-top-right-radius:6px;-khtml-border-top-left-radius:6px;border-top-right-radius:6px;border-top-left-radius:6px;}.js .menu li dl dt{cursor:move;}.menu li.deleting dl dt{background-color:#faa;}.menu li .item-title{padding:7px 0;line-height:20px;display:block;margin-right:13em;}li.menu-item.ui-sortable-helper dl{margin-top:0;}li.menu-item.ui-sortable-helper .menu-item-transport dl{margin-top:13px;}.menu .sortable-placeholder{height:35px;width:410px;margin-top:13px;}.menu-item-depth-0{margin-left:0;}.menu-item-depth-1{margin-left:30px;}.menu-item-depth-2{margin-left:60px;}.menu-item-depth-3{margin-left:90px;}.menu-item-depth-4{margin-left:120px;}.menu-item-depth-5{margin-left:150px;}.menu-item-depth-6{margin-left:180px;}.menu-item-depth-7{margin-left:210px;}.menu-item-depth-8{margin-left:240px;}.menu-item-depth-9{margin-left:270px;}.menu-item-depth-10{margin-left:300px;}.menu-item-depth-11{margin-left:330px;}.menu-item-depth-0 .menu-item-transport{margin-left:0;}.menu-item-depth-1 .menu-item-transport{margin-left:-30px;}.menu-item-depth-2 .menu-item-transport{margin-left:-60px;}.menu-item-depth-3 .menu-item-transport{margin-left:-90px;}.menu-item-depth-4 .menu-item-transport{margin-left:-120px;}.menu-item-depth-5 .menu-item-transport{margin-left:-150px;}.menu-item-depth-6 .menu-item-transport{margin-left:-180px;}.menu-item-depth-7 .menu-item-transport{margin-left:-210px;}.menu-item-depth-8 .menu-item-transport{margin-left:-240px;}.menu-item-depth-9 .menu-item-transport{margin-left:-270px;}.menu-item-depth-10 .menu-item-transport{margin-left:-300px;}.menu-item-depth-11 .menu-item-transport{margin-left:-330px;}.item-type{text-transform:uppercase;font-size:11px;color:#999;padding-right:10px;}.item-controls{font-size:11px;position:absolute;right:20px;top:-1px;}.item-controls a{text-decoration:none;}.item-controls a:hover{cursor:pointer;}.item-controls .item-order{padding-right:10px;}.item-controls .item-order a{font-weight:bold;}body.js .item-order{display:none;}.item-controls .menu-item-delete:hover{color:#f00;}.item-edit{background:url("../images/menu-bits.gif") no-repeat scroll 0 -105px;position:absolute;right:-20px;top:0;display:block;width:23px;height:36px;overflow:hidden;text-indent:-999em;border-bottom:1px solid #eee;-moz-border-radius-bottomleft:3px;-webkit-border-bottom-left-radius:3px;-khtml-border-bottom-left-radius:3px;border-bottom-left-radius:3px;}.menu-item-settings{background:#F9F9F9;width:400px;padding:10px 0 10px 10px;border:solid #E6E6E6;border-width:0 1px 1px 1px;-moz-border-radius:0 0 6px 6px;-webkit-border-bottom-right-radius:6px;-webkit-border-bottom-left-radius:6px;-khtml-border-bottom-right-radius:6px;-khtml-border-bottom-left-radius:6px;}.menu-item-settings.menu-item-edit-active{display:block;}.menu-item-settings.menu-item-edit-inactive{display:none;}.add-menu-item-pagelinks{margin:.5em auto;text-align:center;}.link-to-original{display:block;margin:0 0 10px;padding:3px 5px 5px;font-size:11px;color:#777;font-style:italic;border:1px solid #dfdfdf;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-khtml-border-radius:6px;}.link-to-original a{padding-left:4px;font-style:normal;}.hidden-field{display:none;}.menu-item-settings .description-thin,.menu-item-settings .description-wide{margin-right:10px;float:left;}.description-thin{width:190px;height:40px;}.description-wide{width:390px;}.menu-item-actions{padding-top:15px;line-height:25px;}.save-menu-item{padding-left:10px;float:right;}#cancel-save{cursor:pointer;}#cancel-save:hover{color:#fff!important;}#update-menu-item{color:#fff!important;}#update-menu-item:hover,#update-menu-item:active,#update-menu-item:focus{color:#eaf2fa!important;border-color:#13455b!important;}.major-publishing-actions{padding:5px 10px;border-bottom:1px solid #eee;}.major-publishing-actions .publishing-action{text-align:right;float:right;line-height:23px;}.major-publishing-actions .delete-action{line-height:25px;vertical-align:middle;text-align:left;float:right;padding-right:15px;}.menu-name-label span{font-size:11px;font-style:normal;}.submitbox .submitclose{color:#21759B;border-bottom:1px solid #21759B;padding:1px 2px;text-decoration:none;}.submitbox .submitclose:hover{background:#21759B;color:#fff;}.menu-item-settings:after,.button-controls:after,#menu-item-url-wrap:after,#menu-item-name-wrap:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.menu-item-settings,.button-controls,#menu-item-url-wrap,#menu-item-name-wrap{display:block;} \ No newline at end of file +html,body{min-width:950px;}#nav-menus-frame{margin-left:300px;}#wpbody-content #menu-settings-column{display:block;width:281px;margin-left:-300px;clear:both;float:left;padding-top:24px;}.no-js #wpbody-content #menu-settings-column{padding-top:31px;}#menu-settings-column .inside{padding:0 10px;}#menu-settings-column .handlediv{background:url("../images/menu-bits.gif") no-repeat scroll 0 -110px;}#wpbody{position:relative;}#menu-management-liquid{float:left;min-width:100%;}#menu-management{position:relative;margin-right:20px;margin-top:-3px;width:100%;}#menu-management .menu-edit{margin-bottom:20px;}#nav-menu-header,#post-body{border-color:#ccc;border-style:solid;}#nav-menu-header{background:url("../images/gray-grad.png") repeat-x scroll left top #dfdfdf;border-width:1px 1px 0 1px;-moz-border-radius-topleft:6px;-webkit-border-top-left-radius:6px;-khtml-border-top-left-radius:6px;border-top-left-radius:6px;-moz-border-radius-topright:6px;-webkit-border-top-right-radius:6px;-khtml-border-top-right-radius:6px;border-top-right-radius:6px;}#post-body{background:#fff;padding:0 0 10px 10px;border-width:0 1px 1px 1px;-moz-border-radius-bottomleft:6px;-webkit-border-bottom-left-radius:6px;-khtml-border-bottom-left-radius:6px;border-bottom-left-radius:6px;-moz-border-radius-bottomright:6px;-webkit-border-bottom-right-radius:6px;-khtml-border-bottom-right-radius:6px;border-bottom-right-radius:6px;}#post-body-content{position:relative;}.post-body-plain{padding:10px 10px 0 0;}#menu-management .menu-add-new abbr{font-weight:bold;}#menu-management .nav-tabs-nav{margin:0 20px;}#menu-management .nav-tabs-arrow{width:10px;padding:0 5px 4px;cursor:pointer;position:absolute;top:0;line-height:22px;font-size:18px;text-shadow:0 1px 0 #fff;}#menu-management .nav-tabs-arrow a{color:#C1C1C1;}#menu-management .nav-tabs-arrow a:hover{color:#D54E21;}#menu-management .nav-tabs-arrow a:active{color:#464646;}#menu-management .nav-tabs-arrow-left{left:0;}#menu-management .nav-tabs-arrow-right{right:0;text-align:right;}#menu-management .nav-tabs-wrapper{width:100%;height:28px;margin-bottom:-1px;overflow:hidden;}.no-js #menu-management .nav-tabs{padding-left:30px;clear:both;}.js #menu-management .nav-tabs{float:left;margin-left:0;margin-right:-400px;}#menu-management .nav-tab{margin-bottom:0;background:#f4f4f4;font-weight:bold;border-color:#dfdfdf;}#menu-management .nav-tab-active{background:#ececec;border-color:#ccc;border-bottom-color:#ececec;}#select-nav-menu-container{text-align:right;padding:0 10px 3px 10px;margin-bottom:5px;}#select-nav-menu{width:100px;display:inline;}#menu-management #major-publishing-actions #delete-action{float:right;margin-right:10px;}#menu-name-label{margin-top:-2px;}#wpbody .open-label{display:inline-block;}#wpbody .open-label span{padding-right:10px;}.js .input-with-default-title{color:#aaa;font-style:italic;}#menu-management .inside{padding:0 10px;}.postbox .howto input{width:180px;float:right;}.customlinkdiv .howto input{width:210px;}#menu-container .submit{margin:0 0 10px;padding:0;}.submitdelete,.submitclose{font-size:11px;}#cancel-save{color:#f00;text-decoration:underline;font-size:11px;margin-left:20px;margin-top:5px;}#cancel-save:hover{background-color:#F00;color:#fff;}.list-controls{float:left;margin-top:5px;}.add-to-menu{float:right;}.postbox img.waiting{display:none;vertical-align:middle;}.button-controls{margin:10px 0;}.show-all,.hide-all{cursor:pointer;}.hide-all{display:none;}#create-menu-name{width:159px;}#manage-menu .inside{padding:0;}#available-links dt{display:block;}#add-custom-link .howto{font-size:11px;}#add-custom-link label span{display:block;float:left;margin-top:5px;padding-right:5px;}.menu-item-textbox{width:180px;}.howto span{margin-top:4px;display:block;float:left;}.quick-search{width:190px;}.list-wrap{display:none;clear:both;margin-bottom:10px;}.list-container{max-height:200px;overflow-y:auto;padding:10px 10px 5px;border:1px solid #DFDFDF;-moz-border-radius:4px;}.postbox p.submit{margin-bottom:0;}.list li{display:none;margin:0;margin-bottom:5px;}.list li .menu-item-title{cursor:pointer;display:block;}.list li .menu-item-title input{margin-right:3px;margin-top:-3px;}.list li li .menu-item-title{margin-left:14px;}.list li li li .menu-item-title{margin-left:28px;}.list li li li li .menu-item-title{margin-left:42px;}.list li li li li li .menu-item-title{margin-left:56px;}.list li li li li li li .menu-item-title{margin-left:70px;}.list li li li li li li li .menu-item-title{margin-left:84px;}.list li li li li li li li li .menu-item-title{margin-left:98px;}.list li li li li li li li li li .menu-item-title{margin-left:112px;}#menu-container .inside{padding-bottom:10px;}.menu{padding-top:1em;}.menu ul{width:100%;}.menu li{margin-bottom:0;}.menu li dl{clear:both;line-height:1.5em;position:relative;margin-top:13px;}.menu li dl dt{background:url("../images/gray-grad.png") repeat-x scroll left top #DFDFDF;border:1px solid #E6E6E6;clear:both;position:relative;padding-left:10px;height:auto;width:400px;line-height:35px;text-shadow:0 1px 0 #FFF;font-weight:bold;overflow:hidden;}.menu li dl.menu-item-edit-inactive dt{border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-khtml-border-radius:6px;}.menu li dl.menu-item-edit-active dt{-moz-border-radius:6px 6px 0 0;-webkit-border-top-right-radius:6px;-webkit-border-top-left-radius:6px;-khtml-border-top-right-radius:6px;-khtml-border-top-left-radius:6px;border-top-right-radius:6px;border-top-left-radius:6px;}.js .menu li dl dt{cursor:move;}.menu li.deleting dl dt{background-color:#faa;}.menu li .item-title{padding:7px 0;line-height:20px;display:block;margin-right:13em;}li.menu-item.ui-sortable-helper dl{margin-top:0;}li.menu-item.ui-sortable-helper .menu-item-transport dl{margin-top:13px;}.menu .sortable-placeholder{height:35px;width:410px;margin-top:13px;}.menu-item-depth-0{margin-left:0;}.menu-item-depth-1{margin-left:30px;}.menu-item-depth-2{margin-left:60px;}.menu-item-depth-3{margin-left:90px;}.menu-item-depth-4{margin-left:120px;}.menu-item-depth-5{margin-left:150px;}.menu-item-depth-6{margin-left:180px;}.menu-item-depth-7{margin-left:210px;}.menu-item-depth-8{margin-left:240px;}.menu-item-depth-9{margin-left:270px;}.menu-item-depth-10{margin-left:300px;}.menu-item-depth-11{margin-left:330px;}.menu-item-depth-0 .menu-item-transport{margin-left:0;}.menu-item-depth-1 .menu-item-transport{margin-left:-30px;}.menu-item-depth-2 .menu-item-transport{margin-left:-60px;}.menu-item-depth-3 .menu-item-transport{margin-left:-90px;}.menu-item-depth-4 .menu-item-transport{margin-left:-120px;}.menu-item-depth-5 .menu-item-transport{margin-left:-150px;}.menu-item-depth-6 .menu-item-transport{margin-left:-180px;}.menu-item-depth-7 .menu-item-transport{margin-left:-210px;}.menu-item-depth-8 .menu-item-transport{margin-left:-240px;}.menu-item-depth-9 .menu-item-transport{margin-left:-270px;}.menu-item-depth-10 .menu-item-transport{margin-left:-300px;}.menu-item-depth-11 .menu-item-transport{margin-left:-330px;}.item-type{text-transform:uppercase;font-size:11px;color:#999;padding-right:10px;}.item-controls{font-size:11px;position:absolute;right:20px;top:-1px;}.item-controls a{text-decoration:none;}.item-controls a:hover{cursor:pointer;}.item-controls .item-order{padding-right:10px;}.item-controls .item-order a{font-weight:bold;}body.js .item-order{display:none;}.item-controls .menu-item-delete:hover{color:#f00;}.item-edit{background:url("../images/menu-bits.gif") no-repeat scroll 0 -105px;position:absolute;right:-20px;top:0;display:block;width:23px;height:36px;overflow:hidden;text-indent:-999em;border-bottom:1px solid #eee;-moz-border-radius-bottomleft:3px;-webkit-border-bottom-left-radius:3px;-khtml-border-bottom-left-radius:3px;border-bottom-left-radius:3px;}.menu-item-settings{background:#F9F9F9;width:400px;padding:10px 0 10px 10px;border:solid #E6E6E6;border-width:0 1px 1px 1px;-moz-border-radius:0 0 6px 6px;-webkit-border-bottom-right-radius:6px;-webkit-border-bottom-left-radius:6px;-khtml-border-bottom-right-radius:6px;-khtml-border-bottom-left-radius:6px;}.menu-item-settings.menu-item-edit-active{display:block;}.menu-item-settings.menu-item-edit-inactive{display:none;}.add-menu-item-pagelinks{margin:.5em auto;text-align:center;}.link-to-original{display:block;margin:0 0 10px;padding:3px 5px 5px;font-size:11px;color:#777;font-style:italic;border:1px solid #dfdfdf;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-khtml-border-radius:6px;}.link-to-original a{padding-left:4px;font-style:normal;}.hidden-field{display:none;}.menu-item-settings .description-thin,.menu-item-settings .description-wide{margin-right:10px;float:left;}.description-thin{width:190px;height:40px;}.description-wide{width:390px;}.menu-item-actions{padding-top:15px;line-height:25px;}.save-menu-item{padding-left:10px;float:right;}#cancel-save{cursor:pointer;}#cancel-save:hover{color:#fff!important;}#update-menu-item{color:#fff!important;}#update-menu-item:hover,#update-menu-item:active,#update-menu-item:focus{color:#eaf2fa!important;border-color:#13455b!important;}.major-publishing-actions{padding:5px 10px;border-bottom:1px solid #eee;}.major-publishing-actions .publishing-action{text-align:right;float:right;line-height:23px;}.major-publishing-actions .delete-action{line-height:25px;vertical-align:middle;text-align:left;float:right;padding-right:15px;}.menu-name-label span{font-size:11px;font-style:normal;}.submitbox .submitclose{color:#21759B;border-bottom:1px solid #21759B;padding:1px 2px;text-decoration:none;}.submitbox .submitclose:hover{background:#21759B;color:#fff;}#nav-menus-frame:after,.menu-item-settings:after,.button-controls:after,#menu-item-url-wrap:after,#menu-item-name-wrap:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#nav-menus-frame,.menu-item-settings,.button-controls,#menu-item-url-wrap,#menu-item-name-wrap{display:block;} \ No newline at end of file diff --git a/wp-admin/css/nav-menu.dev.css b/wp-admin/css/nav-menu.dev.css index 3adfed515..f93e63d95 100644 --- a/wp-admin/css/nav-menu.dev.css +++ b/wp-admin/css/nav-menu.dev.css @@ -8,6 +8,11 @@ * @subpackage Administration */ +html, +body { + min-width: 950px; +} + #nav-menus-frame { margin-left: 300px; } @@ -95,48 +100,90 @@ font-weight:bold; } - #menu-management .nav-tabs { - padding-left: 30px; - clear: both; +/* Menu Tabs */ + +#menu-management .nav-tabs-nav { + margin: 0 20px; +} + +#menu-management .nav-tabs-arrow { + width: 10px; + padding: 0 5px 4px; + cursor: pointer; + position: absolute; + top: 0; + line-height: 22px; + font-size: 18px; + text-shadow: 0 1px 0 #fff; +} + #menu-management .nav-tabs-arrow a { color: #C1C1C1; } + #menu-management .nav-tabs-arrow a:hover { color: #D54E21; } + #menu-management .nav-tabs-arrow a:active { color: #464646; } + #menu-management .nav-tabs-arrow-left { + left: 0; + } + #menu-management .nav-tabs-arrow-right { + right: 0; + text-align: right; } - #menu-management .nav-tab { - background: #f4f4f4; - font-weight: bold; - border-color: #dfdfdf; + +#menu-management .nav-tabs-wrapper { + width: 100%; + height: 28px; + margin-bottom: -1px; + overflow: hidden; +} + +.no-js #menu-management .nav-tabs { + padding-left: 30px; + clear: both; +} +.js #menu-management .nav-tabs { + float: left; + margin-left: 0px; + margin-right: -400px; +} + +#menu-management .nav-tab { + margin-bottom: 0; + background: #f4f4f4; + font-weight: bold; + border-color: #dfdfdf; +} + +#menu-management .nav-tab-active { + background: #ececec; + border-color:#ccc; + border-bottom-color: #ececec; +} + +#select-nav-menu-container { + text-align: right; + padding: 0 10px 3px 10px; + margin-bottom: 5px; +} + #select-nav-menu { + width: 100px; + display: inline; } - #menu-management .nav-tab-active { - background: #ececec; - border-color:#ccc; - border-bottom-color: #ececec; - } - - #select-nav-menu-container { - text-align: right; - padding: 0 10px 3px 10px; - margin-bottom: 5px; - } - #select-nav-menu { - width: 100px; - display: inline; - } - - #menu-management #major-publishing-actions #delete-action { - float: right; - margin-right: 10px; - } - - #menu-name-label { - margin-top: -2px; - } - - #wpbody .open-label { - display: inline-block; - } - #wpbody .open-label span { - padding-right: 10px; - } +/* Menu Toolbar */ +#menu-management #major-publishing-actions #delete-action { + float: right; + margin-right: 10px; +} + +#menu-name-label { + margin-top: -2px; +} + +#wpbody .open-label { + display: inline-block; +} +#wpbody .open-label span { + padding-right: 10px; +} .js .input-with-default-title { color: #aaa; @@ -455,5 +502,5 @@ body.js .item-order { /* Clearfix */ -.menu-item-settings:after, .button-controls:after, #menu-item-url-wrap:after, #menu-item-name-wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } -.menu-item-settings, .button-controls, #menu-item-url-wrap, #menu-item-name-wrap { display: block; } +#nav-menus-frame:after, .menu-item-settings:after, .button-controls:after, #menu-item-url-wrap:after, #menu-item-name-wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } +#nav-menus-frame, .menu-item-settings, .button-controls, #menu-item-url-wrap, #menu-item-name-wrap { display: block; } diff --git a/wp-admin/js/nav-menu.dev.js b/wp-admin/js/nav-menu.dev.js index 8f966ad1c..a1fe9bc96 100644 --- a/wp-admin/js/nav-menu.dev.js +++ b/wp-admin/js/nav-menu.dev.js @@ -164,6 +164,8 @@ var WPNavMenuHandler = function ($) { this.initSortables(); this.initToggles(); + + this.initTabManager(); }, initToggles : function() { @@ -388,6 +390,97 @@ var WPNavMenuHandler = function ($) { } }); }, + + initTabManager : function() { + var fixed = $('.nav-tabs-wrapper'), + fluid = fixed.children('.nav-tabs'), + active = fluid.children('.nav-tab-active'), + tabs = fluid.children('.nav-tab'), + tabsWidth = 0, + fixedRight, fixedLeft, + arrowLeft, arrowRight + resizing = false; + + function resetMenuTabs() { + fixedLeft = fixed.offset().left; + fixedRight = fixedLeft + fixed.width(); + active.makeTabVisible(); + } + + $.fn.extend({ + makeTabVisible : function() { + var t = this.eq(0), + left = t.offset().left, + right = left + t.outerWidth(); + if( right > fixedRight ) + fluid.animate({ 'margin-left' : "+=" + (fixedRight - right) + 'px', }, 'fast'); + else if ( left < fixedLeft ) + fluid.animate({ 'margin-left' : "-=" + (left - fixedLeft) + 'px', }, 'fast'); + return t; + }, + isTabVisible : function() { + var t = this.eq(0), + left = t.offset().left, + right = left + t.outerWidth(); + return ( right <= fixedRight && left >= fixedLeft ) ? true : false; + } + }); + + // Build tab navigation + arrowLeft = $(''); + arrowRight = $(''); + // Attach to the document + fixed.wrap('