From 90e500ae3604d3f9b5fb9499398dd399bef70c96 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Mon, 4 May 2009 01:19:10 +0000 Subject: [PATCH] Widgets UI improvements: arrows, some more help git-svn-id: https://develop.svn.wordpress.org/trunk@11166 602fd350-edb4-49c9-b593-d223f7449a82 --- wp-admin/css/colors-classic.css | 12 ++++++++++-- wp-admin/css/colors-fresh.css | 12 ++++++++++-- wp-admin/css/widgets.css | 31 ++++++++++++++++++------------- wp-admin/includes/template.php | 4 ++-- wp-admin/includes/widgets.php | 1 + wp-admin/js/widgets.dev.js | 4 ++-- wp-admin/js/widgets.js | 2 +- wp-admin/widgets.php | 16 +++++++++++----- wp-includes/script-loader.php | 2 +- 9 files changed, 56 insertions(+), 28 deletions(-) diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css index 6b839578b1..6446ec82cc 100644 --- a/wp-admin/css/colors-classic.css +++ b/wp-admin/css/colors-classic.css @@ -1615,14 +1615,14 @@ div.widgets-sortables, border-color: #ddd; } -#widgets-left h3.sidebar-name { +#widgets-left .sidebar-name { background-color: #aaa; background-image: url(../images/ed-bg-vs.gif); text-shadow: #FFFFFF 0 -1px 0; border-color: #dfdfdf; } -#widgets-right h3.sidebar-name { +#widgets-right .sidebar-name { background-image: url(../images/fav.png); text-shadow: #3f3f3f 0 -1px 0; background-color: #636363; @@ -1633,3 +1633,11 @@ div.widgets-sortables, .sidebar-name:hover { color: #d54e21; } + +#widgets-left .sidebar-name-arrow { + background: transparent url(../images/menu-bits.gif) no-repeat scroll left -109px; +} + +#widgets-right .sidebar-name-arrow { + background: transparent url(../images/fav-arrow.gif) no-repeat scroll 0 -1px; +} diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index 1a84a49f99..6388284de9 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -1590,14 +1590,14 @@ div.widgets-sortables, border-color: #ddd; } -#widgets-left h3.sidebar-name { +#widgets-left .sidebar-name { background-color: #aaa; background-image: url(../images/ed-bg.gif); text-shadow: #FFFFFF 0 -1px 0; border-color: #dfdfdf; } -#widgets-right h3.sidebar-name { +#widgets-right .sidebar-name { background-image: url(../images/fav.png); text-shadow: #3f3f3f 0 -1px 0; background-color: #636363; @@ -1608,3 +1608,11 @@ div.widgets-sortables, .sidebar-name:hover { color: #d54e21; } + +#widgets-left .sidebar-name-arrow { + background: transparent url(../images/menu-bits.gif) no-repeat scroll left -109px; +} + +#widgets-right .sidebar-name-arrow { + background: transparent url(../images/fav-arrow.gif) no-repeat scroll 0 -1px; +} diff --git a/wp-admin/css/widgets.css b/wp-admin/css/widgets.css index f9d55511af..e82719951a 100644 --- a/wp-admin/css/widgets.css +++ b/wp-admin/css/widgets.css @@ -39,17 +39,16 @@ div.widget-liquid-right { float: left; } -.widget-liquid-right .sidebar-name { - width: 256px; +div.sidebar-name h3 { + margin: 0; + padding: 5px 12px; } -h3.sidebar-name { +div.sidebar-name { background-repeat: repeat-x; background-position: 0 0; - margin: 0; cursor: pointer; font-size: 13px; - padding: 5px 12px; border-width: 1px; border-style: solid; -moz-border-radius-topleft: 8px; @@ -62,7 +61,7 @@ h3.sidebar-name { border-top-left-radius: 8px; } -.js .closed h3.sidebar-name { +.js .closed .sidebar-name { -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; @@ -94,11 +93,10 @@ h3.sidebar-name { .widget-liquid-right .widgets-sortables { padding: 15px 0 0; - width: 280px; } #available-widgets .widget-holder { - padding: 15px 5px 0; + padding: 7px 5px 0; } #wp_inactive_widgets { @@ -250,10 +248,7 @@ a.widget-control-edit { display: none; } -#available-widgets .widget-control-edit .add { - display: block; -} - +#available-widgets .widget-control-edit .add, #widgets-right .widget-control-edit .edit, #wp_inactive_widgets .widget-control-edit .edit { display: block; @@ -274,10 +269,14 @@ a.widget-control-edit { border-radius: 6px; } -#widgets-left p.description { +.inactive p.description { margin: 5px 15px 8px; } +#available-widgets p.description { + margin: 0 12px 12px; +} + .widget-position { margin-top: 8px; } @@ -285,3 +284,9 @@ a.widget-control-edit { .inactive { padding-top: 2px; } + +.sidebar-name-arrow { + float: right; + height: 29px; + width: 26px; +} diff --git a/wp-admin/includes/template.php b/wp-admin/includes/template.php index 2bfa80a9af..dd68b6704a 100644 --- a/wp-admin/includes/template.php +++ b/wp-admin/includes/template.php @@ -3577,8 +3577,8 @@ function plugins_search_help() { function widgets_help() { return ' -

' . __('Widgets can be added or arranged by dragging. If you hover your mouse over the title bar of a widget you’ll notice the 4 arrow cursor appears to let you know it is movable. Click on it, hold down the mouse button and start dragging the widget to a new location. As you drag the module, notice the dotted gray box that also moves. This box indicates where the widget will be placed when you release the mouse button.') . '

-

' . __('To show or hide the settings for a widget, click on the arrow that appears on the right of the widget title.') . '

+

' . __('Widgets can be added and arranged by dragging. If you hover your mouse over the title bar of a widget you’ll notice the 4 arrow cursor appears to let you know it is movable. Click on it, hold down the mouse button and start dragging the widget to a sidebar. As you drag, notice the dotted gray box that also moves. This box indicates where the widget will be placed when you release the mouse button.') . '

+

' . __('Widgets can be removed from their settings. To show or hide the settings for a widget, click on the arrow that appears on the right of the widget title.') . '

' . __('The Inactive Widgets area stores all widgets that are configured but not curently used on the web site. After changing themes if the new theme has less sidebars than the old theme, all widgets that were in these sidebars will be transfered to Inactive Widgets.') . '

'; } diff --git a/wp-admin/includes/widgets.php b/wp-admin/includes/widgets.php index b6d6c06aa1..a4328661ec 100644 --- a/wp-admin/includes/widgets.php +++ b/wp-admin/includes/widgets.php @@ -24,6 +24,7 @@ function wp_list_widgets() { natcasesort($sort); ?>
+

b){c.css("minHeight",d+"px")}this.addEvents();a(".widget-error").parents(".widget").find("a.widget-action").click();a("#widget-list .widget").draggable({connectToSortable:".widgets-sortables",handle:".widget-title",distance:2,helper:"clone",zIndex:5,start:function(g,f){wpWidgets.fixWebkit(1);f.helper.find(".widget-description").hide()},stop:function(g,f){if(e){a(e).hide()}e="";wpWidgets.fixWebkit()}});a(".widgets-sortables").sortable({placeholder:"widget-placeholder",connectWith:".widgets-sortables",items:".widget",handle:".widget-title",cursor:"move",distance:2,opacity:0.65,start:function(g,f){wpWidgets.fixWebkit(1);f.item.find(".widget-inside").hide();f.item.css({marginLeft:"",width:""})},stop:function(h,f){var g=f.item.find("input.add_new").val(),k=f.item.find("input.multi_number").val(),j=f.item.attr("id"),i=a(this).attr("id");f.item.css({marginLeft:"",width:""});if(g){if("multi"==g){f.item.html(f.item.html().replace(/<[^<>]+>/g,function(l){return l.replace(/__i__/g,k)}));f.item.attr("id",j.replace(/__i__/g,k));k++;a("div#"+j).find("input.multi_number").val(k)}else{if("single"==g){f.item.attr("id","new-"+j);e="div#"+j}}wpWidgets.addEvents(f.item);wpWidgets.save(f.item.find("form").serializeArray(),i,0,0);f.item.find("input.add_new").val("");f.item.find("a.widget-action").click()}wpWidgets.saveOrder(i);wpWidgets.fixWebkit()},receive:function(g,f){if(!a(this).is(":visible")){a(this).sortable("cancel")}}}).not(":visible").sortable("disable")},saveOrder:function(c){a("#"+c).parents(".widgets-holder-wrap").find(".ajax-feedback").css("visibility","visible");var b={action:"widgets-order",savewidgets:a("#_wpnonce_widgets").val(),sidebars:[]};a(".widgets-sortables").each(function(){b["sidebars["+a(this).attr("id")+"]"]=a(this).sortable("toArray").join(",")});a.post(ajaxurl,b,function(){a(".ajax-feedback").css("visibility","hidden")})},save:function(e,f,c,d){a("#"+f).parents(".widgets-holder-wrap").find(".ajax-feedback").css("visibility","visible");var b={action:"save-widget",savewidgets:a("#_wpnonce_widgets").val(),sidebar:f};if(c){b.delete_widget=1}e+="&"+a.param(b);a.post(ajaxurl,e,function(g){var h;a(".ajax-feedback").css("visibility","hidden");if(!d){return}if(c){a(d).parents(".widget").slideUp("normal",function(){a(this).remove()});if(!b.widget_number){h=b["widget-id"];a("#available-widgets .widget-id").each(function(){if(a(this).val()==h){a(this).parents(".widget").show()}})}}else{a(d).parents(".widget-inside").slideUp("normal",function(){a(this).parents(".widget").css({width:"",marginLeft:""})})}})},fixWebkit:function(b){b=b?"none":"";a("body").css({WebkitUserSelect:b,KhtmlUserSelect:b})},addEvents:function(b){b=b||document;a("a.widget-action",b).click(function(){var d=parseInt(a(this).parents(".widget").find(".widget-width").val(),10),e={},c=a(this).parents(".widget-top").siblings(".widget-inside");if(c.is(":hidden")){if(d>250&&c.parents(".widgets-sortables").length){e.width=d+30+"px";if(c.parents(".widget-liquid-right").length){e.marginLeft=234-d+"px"}c.parents(".widget").css(e)}c.slideDown("normal")}else{c.slideUp("normal",function(){c.parents(".widget").css({width:"",marginLeft:""})})}return false});a(".widget-control-save",b).click(function(){wpWidgets.save(a(this).parents("form").serialize(),a(this).parents(".widgets-sortables").attr("id"),0,this);return false});a(".widget-control-remove",b).click(function(){wpWidgets.save(a(this).parents("form").serialize(),a(this).parents(".widgets-sortables").attr("id"),1,this);return false})}};a(document).ready(function(){wpWidgets.init()})})(jQuery); \ No newline at end of file +var wpWidgets;(function(a){wpWidgets={init:function(){var e,d=a("#available-widgets .widget-holder").height(),c=a("#widgets-right .widgets-holder-wrap .widgets-sortables:first"),b=c.height();a("#widgets-right div.sidebar-name").click(function(){var f=a(this).siblings(".widgets-sortables");if(f.is(":visible")){f.hide().sortable("disable");a(this).parent().addClass("closed")}else{f.show().sortable("enable").sortable("refresh");a(this).parent().removeClass("closed")}});a("#widgets-left div.sidebar-name").click(function(){if(a(this).siblings(".widget-holder").is(":visible")){a(this).parent().addClass("closed")}else{a(this).parent().removeClass("closed")}});if(d>b){c.css("minHeight",d+"px")}this.addEvents();a(".widget-error").parents(".widget").find("a.widget-action").click();a("#widget-list .widget").draggable({connectToSortable:".widgets-sortables",handle:".widget-title",distance:2,helper:"clone",zIndex:5,start:function(g,f){wpWidgets.fixWebkit(1);f.helper.find(".widget-description").hide()},stop:function(g,f){if(e){a(e).hide()}e="";wpWidgets.fixWebkit()}});a(".widgets-sortables").sortable({placeholder:"widget-placeholder",connectWith:".widgets-sortables",items:".widget",handle:".widget-title",cursor:"move",distance:2,opacity:0.65,start:function(g,f){wpWidgets.fixWebkit(1);f.item.find(".widget-inside").hide();f.item.css({marginLeft:"",width:""})},stop:function(h,f){var g=f.item.find("input.add_new").val(),k=f.item.find("input.multi_number").val(),j=f.item.attr("id"),i=a(this).attr("id");f.item.css({marginLeft:"",width:""});if(g){if("multi"==g){f.item.html(f.item.html().replace(/<[^<>]+>/g,function(l){return l.replace(/__i__/g,k)}));f.item.attr("id",j.replace(/__i__/g,k));k++;a("div#"+j).find("input.multi_number").val(k)}else{if("single"==g){f.item.attr("id","new-"+j);e="div#"+j}}wpWidgets.addEvents(f.item);wpWidgets.save(f.item.find("form").serializeArray(),i,0,0);f.item.find("input.add_new").val("");f.item.find("a.widget-action").click()}wpWidgets.saveOrder(i);wpWidgets.fixWebkit()},receive:function(g,f){if(!a(this).is(":visible")){a(this).sortable("cancel")}}}).not(":visible").sortable("disable")},saveOrder:function(c){a("#"+c).parents(".widgets-holder-wrap").find(".ajax-feedback").css("visibility","visible");var b={action:"widgets-order",savewidgets:a("#_wpnonce_widgets").val(),sidebars:[]};a(".widgets-sortables").each(function(){b["sidebars["+a(this).attr("id")+"]"]=a(this).sortable("toArray").join(",")});a.post(ajaxurl,b,function(){a(".ajax-feedback").css("visibility","hidden")})},save:function(e,f,c,d){a("#"+f).parents(".widgets-holder-wrap").find(".ajax-feedback").css("visibility","visible");var b={action:"save-widget",savewidgets:a("#_wpnonce_widgets").val(),sidebar:f};if(c){b.delete_widget=1}e+="&"+a.param(b);a.post(ajaxurl,e,function(g){var h;a(".ajax-feedback").css("visibility","hidden");if(!d){return}if(c){a(d).parents(".widget").slideUp("normal",function(){a(this).remove()});if(!b.widget_number){h=b["widget-id"];a("#available-widgets .widget-id").each(function(){if(a(this).val()==h){a(this).parents(".widget").show()}})}}else{a(d).parents(".widget-inside").slideUp("normal",function(){a(this).parents(".widget").css({width:"",marginLeft:""})})}})},fixWebkit:function(b){b=b?"none":"";a("body").css({WebkitUserSelect:b,KhtmlUserSelect:b})},addEvents:function(b){b=b||document;a("a.widget-action",b).click(function(){var d=parseInt(a(this).parents(".widget").find(".widget-width").val(),10),e={},c=a(this).parents(".widget-top").siblings(".widget-inside");if(c.is(":hidden")){if(d>250&&c.parents(".widgets-sortables").length){e.width=d+30+"px";if(c.parents(".widget-liquid-right").length){e.marginLeft=234-d+"px"}c.parents(".widget").css(e)}c.slideDown("normal")}else{c.slideUp("normal",function(){c.parents(".widget").css({width:"",marginLeft:""})})}return false});a(".widget-control-save",b).click(function(){wpWidgets.save(a(this).parents("form").serialize(),a(this).parents(".widgets-sortables").attr("id"),0,this);return false});a(".widget-control-remove",b).click(function(){wpWidgets.save(a(this).parents("form").serialize(),a(this).parents(".widgets-sortables").attr("id"),1,this);return false})}};a(document).ready(function(){wpWidgets.init()})})(jQuery); \ No newline at end of file diff --git a/wp-admin/widgets.php b/wp-admin/widgets.php index 04fc843c74..3b407da743 100644 --- a/wp-admin/widgets.php +++ b/wp-admin/widgets.php @@ -346,14 +346,18 @@ require_once( 'admin-header.php' ); ?>
-

+
+

+


-

-

+
+

+

+

@@ -372,8 +376,10 @@ foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) { continue; $closed = $i ? ' closed' : ''; ?>
-

-

+
+

+

+

add( 'media-upload', "/wp-admin/js/media-upload$suffix.js", array( 'thickbox' ), '20090114' ); $scripts->add_data( 'media-upload', 'group', 1 ); - $scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable' ), '20090503' ); + $scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable' ), '20090503b' ); $scripts->add_data( 'admin-widgets', 'group', 1 ); $scripts->add( 'word-count', "/wp-admin/js/word-count$suffix.js", array( 'jquery' ), '20090422' );