From f846c853d5fc15ab25b445b0d8188a3c2cef9449 Mon Sep 17 00:00:00 2001 From: azaozz Date: Thu, 30 Oct 2008 03:03:00 +0000 Subject: [PATCH] Postbox.js fixes and css reset git-svn-id: http://svn.automattic.com/wordpress/trunk@9408 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/colors-fresh.css | 27 ++++++---- wp-admin/css/global.css | 95 ++++++++++++++++++++++++++++++++--- wp-admin/index.php | 2 +- wp-admin/js/postbox.js | 90 +++++++++++++++------------------ wp-admin/wp-admin.css | 78 ++++++++++++++++++---------- 5 files changed, 198 insertions(+), 94 deletions(-) diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index 422b36bb2..0b4d0ebb5 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -1,8 +1,4 @@ -textarea, input, select { - border-color: #dfdfdf; -} - #sidemenu-bg, .find-box-search { background-color: #e4f2fd; @@ -17,7 +13,6 @@ body, #wpbody, .form-table .pre, .find-box-inside { - background-color: #f9f9f9; color: #333; } @@ -431,8 +426,9 @@ input.readonly { color: #fff; } -#ed_toolbar input, #ed_reply_toolbar input { - background: url( ../images/fade-butt.png ) #fff repeat-x 0 -2px; +#ed_toolbar input, +#ed_reply_toolbar input { + background: #fff url("../images/fade-butt.png") repeat-x 0 -2px; } #editable-post-name { @@ -629,6 +625,15 @@ div#media-upload-error, .file-error, abbr.required, .widget-control-remove:hover background-color: #dfdfdf; } +#ed_toolbar input { + border-color: #C3C3C3; +} + +#ed_toolbar input:hover { + border-color: #aaa; + background: #ddd; +} + #poststuff .wp_themeSkin .mceStatusbar { border-color: #EDEDED; } @@ -810,11 +815,11 @@ div#media-upload-error, .file-error, abbr.required, .widget-control-remove:hover #editorcontainer, #post-status-info, -#poststuff #titlewrap { +#titlediv #title { border-color: #dfdfdf; } -#poststuff #titlewrap { +#titlediv #title { background-color: #fff; } @@ -823,6 +828,10 @@ div#media-upload-error, .file-error, abbr.required, .widget-control-remove:hover color: #333; } +#timestampdiv input { + border-color: #ddd; +} + /* Diff */ table.diff .diff-deletedline { diff --git a/wp-admin/css/global.css b/wp-admin/css/global.css index 708959a9d..32d521791 100644 --- a/wp-admin/css/global.css +++ b/wp-admin/css/global.css @@ -1,3 +1,60 @@ +/* http://meyerweb.com/eric/tools/css/reset/ */ +/* v1.0 | 20080212 */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +/* remember to define focus styles! */ +/* +:focus { + outline: 0; +} +*/ +/* remember to highlight inserts somehow! */ +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} + +/* tables still need 'cellspacing="0"' in the markup */ +table { + border-collapse: collapse; + border-spacing: 0; +} +/* end reset css */ + + /* 2 column liquid layout */ #wpwrap { height: auto; @@ -72,6 +129,20 @@ width: 59%; } +/* include margin and padding in the width calculation of input and textarea */ +input[type="text"], +textarea { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; /* ie8 only */ + box-sizing: border-box; +} + +input[type="checkbox"], +input[type="radio"] { + vertical-align: text-top; +} + /* styles for use by people extending the WordPress interface */ body { @@ -83,22 +154,31 @@ body, td { font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif; } -form, label input { margin: 0; padding: 0; } +form, label input { + margin: 0; + padding: 0; +} -img { border: 0; } +img { + border: 0; +} -label { cursor: pointer; } +label { + cursor: pointer; +} -li, dd { margin-bottom: 6px; } +li, dd { + margin-bottom: 6px; +} -p, li, dl, dd, dt { line-height: 140%; } +p, li, dl, dd, dt { + line-height: 140%; +} textarea, input, select { font: 13px Verdana, Arial, Helvetica, sans-serif; margin: 1px; padding: 3px; - border-width: 1px; - border-style: solid; } .alignleft { @@ -205,7 +285,6 @@ h6 { -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; - } .widefat a { diff --git a/wp-admin/index.php b/wp-admin/index.php index 92539287d..b2cb3b2de 100644 --- a/wp-admin/index.php +++ b/wp-admin/index.php @@ -37,7 +37,7 @@ $today = current_time('mysql', 1); - +
diff --git a/wp-admin/js/postbox.js b/wp-admin/js/postbox.js index 341386c32..fb30b4513 100644 --- a/wp-admin/js/postbox.js +++ b/wp-admin/js/postbox.js @@ -9,79 +9,68 @@ e.stopPropagation(); } ); - $('.hide-postbox-tog').click( function() { - var box = jQuery(this).val(); - if ( jQuery(this).attr('checked') ) { - jQuery('#' + box).show(); - if ( $.isFunction( postboxes.onShow ) ) { - postboxes.onShow( box ); - } - } else { - jQuery('#' + box).hide(); - } + $('.hide-postbox-tog').click( function() { + var box = jQuery(this).val(); + if ( jQuery(this).attr('checked') ) { + jQuery('#' + box).show(); + if ( $.isFunction( postboxes.pbshow ) ) + postboxes.pbshow( box ); + + } else { + jQuery('#' + box).hide(); + if ( $.isFunction( postboxes.pbhide ) ) + postboxes.pbhide( box ); + + } postboxes.save_state(page); } ); - this.makeItTall(); + this.expandSidebar(); this.init(page,args); }, - - makeItTall : function() { - var t = $('#make-it-tall').remove(); - if ( t.length < 1 ) - t = $.browser.mozilla ? '
' : '


'; - - $('#side-sortables').append(t); - - if ( $('#side-sortables').children().length > 1 ) - $('#side-sortables').css({'minHeight':'300px'}); - - $('#wpbody-content').css( 'overflow', 'hidden' ); - }, - - expandSidebar : function( doIt ) { - if ( doIt || $.trim( $( '#side-info-column' ).text() ) ) { - $( '#post-body' ).addClass( 'has-sidebar' ); - $( '#side-sortables' ).css('z-index','0'); + expandSidebar : function(doIt) { + if ( doIt || $('#side-sortables > .postbox:visible').length ) { + $('#post-body').addClass('has-sidebar'); + $('#side-sortables').height( $('#post-body').height() ); } else { - $( '#post-body' ).removeClass( 'has-sidebar' ); - $( '#side-sortables' ).css('z-index','-1'); + $('#post-body').removeClass('has-sidebar'); + $('#side-sortables').height('0') } }, - init : function(page,args) { + init : function(page, args) { $.extend( this, args || {} ); - jQuery('.meta-box-sortables').sortable( { + $('.meta-box-sortables').sortable( { placeholder: 'sortable-placeholder', connectWith: [ '.meta-box-sortables' ], items: '> .postbox', handle: '.hndle', distance: 2, tolerance: 'pointer', - receive: function() { - postboxes.makeItTall(); + sort: function(e,ui) { + if ( $(document).width() - e.clientX < 300 ) { + if ( ! $('#post-body').hasClass('has-sidebar') ) { + var pos = $('#side-sortables').offset(); + + $('#side-sortables').append(ui.item) + $(ui.placeholder).css({'top':pos.top,'left':pos.left}).width($(ui.item).width()) + postboxes.expandSidebar(1); + } + } }, stop: function() { - if ( $('#side-sortables').children().length < 2 ) - $('#side-sortables').css({'minHeight':''}); - var postVars = { action: 'meta-box-order', - _ajax_nonce: jQuery('#meta-box-order-nonce').val(), + _ajax_nonce: $('#meta-box-order-nonce').val(), page: page } - jQuery('.meta-box-sortables').each( function() { - postVars["order[" + this.id.split('-')[0] + "]"] = jQuery(this).sortable( 'toArray' ).join(','); + $('.meta-box-sortables').each( function() { + postVars["order[" + this.id.split('-')[0] + "]"] = $(this).sortable( 'toArray' ).join(','); } ); - jQuery.post( postboxL10n.requestFile, postVars, function() { + $.post( postboxL10n.requestFile, postVars, function() { postboxes.expandSidebar(); } ); - }, - over: function(e, ui) { - if ( !ui.element.is( '#side-sortables' ) ) - return; - postboxes.expandSidebar( true ); } } ); }, @@ -96,12 +85,13 @@ closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(), page: page }); + postboxes.expandSidebar(); }, /* Callbacks */ - onShow : false + pbshow : false, + + pbhide : false }; - $(document).ready(function(){postboxes.expandSidebar();}); - }(jQuery)); diff --git a/wp-admin/wp-admin.css b/wp-admin/wp-admin.css index 03fd80d33..e90b4a3f8 100644 --- a/wp-admin/wp-admin.css +++ b/wp-admin/wp-admin.css @@ -448,10 +448,18 @@ textarea.all-options, input.all-options { } #ed_toolbar input { - margin: 3px 2px 2px; - padding: 2px 4px; + margin: 3px 2px 4px; line-height: 18px; display: inline-block; + border-width: 1px; + border-style: solid; + min-width: 26px; + padding: 2px 4px; + font-size: 13px; + -moz-border-radius: 3px; + -khtml-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; } #quicktags #ed_link, @@ -472,7 +480,6 @@ textarea.all-options, input.all-options { #quicktags #ed_code, #ed_reply_toolbar #ed_reply_code { font-family: "Courier New", Courier, mono; - font-size: 1.1em; vertical-align: top; } @@ -1486,6 +1493,23 @@ table.form-table td .updated { clear: left; } +.ui-sortable .postbox h3 { + cursor: pointer; +} + +.ui-sortable .postbox .hndle span { + padding: 6px 0; +} +.ui-sortable .postbox .hndle { + cursor: move; +} + +.sortable-placeholder { + border: 1px dashed #bbb; + background-color: #f5f5f5; + z-index: -1; +} + #poststuff h3, .metabox-holder h3 { font-size: 12px; @@ -1536,15 +1560,13 @@ table.form-table td .updated { margin: 0; } -#titlediv #title { +#poststuff #titlewrap { border: 0; padding: 0; - font-size: 1.7em; - width: 100%; - outline: none; + } -#poststuff #titlewrap { +#titlediv #title { padding: 3px 4px; border-width: 1px; border-style: solid; @@ -1552,6 +1574,9 @@ table.form-table td .updated { -khtml-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; + font-size: 1.7em; + width: 100%; + outline: none; } #poststuff .inside-submitbox, @@ -2081,31 +2106,22 @@ fieldset { margin: 0; } -.ui-sortable .postbox h3 { - cursor: pointer; -} - -.ui-sortable .postbox .hndle span { - padding: 6px 0; -} -.ui-sortable .postbox .hndle { - cursor: move; -} - -.sortable-placeholder { - border: 1px #bbb dashed; - background-color: #f5f5f5; - z-index: -1; -} +#timestampdiv select { + height: 20px; + line-height: 20px; + padding: 0; +} #jj, #hh, #mn { - width: 1.5em; + width: 2em; padding: 1px; + font-size: 12px; } #aa { - width: 2.7em; + width: 3.4em; padding: 1px; + font-size: 12px; } .curtime #timestamp { @@ -2116,6 +2132,16 @@ fieldset { #timestampdiv { padding-top: 3px; + line-height: 23px; +} + +#timestampdiv p { + margin: 8px 0 6px; +} + +#timestampdiv input { + border-width: 1px; + border-style: solid; } #inbox-filter .actions {