From 979b1c14c330bfa5f35a52d200a360e237261fd0 Mon Sep 17 00:00:00 2001 From: Mark Jaquith Date: Thu, 4 Apr 2013 15:49:28 +0000 Subject: [PATCH] Revisions CSS cleanup. props ocean90. fixes #23933 git-svn-id: http://core.svn.wordpress.org/trunk@23901 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/colors-classic.css | 17 +- wp-admin/css/colors-fresh.css | 18 +- wp-admin/css/wp-admin.css | 340 +++++++++++--------------------- wp-admin/js/revisions.js | 66 +++---- wp-admin/revision.php | 86 ++++---- 5 files changed, 207 insertions(+), 320 deletions(-) diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css index 53696ee510..a8f950fd68 100644 --- a/wp-admin/css/colors-classic.css +++ b/wp-admin/css/colors-classic.css @@ -1476,12 +1476,23 @@ table.diff .diff-addedline ins { background-color: #e9f6ea; } -#diffsubheader{ +.diff-header { background-color: #f7f7f7; } -#att-info { - background-color: #e4f2fd; +#diff-title-to strong { + color: #0080aa; +} + +.revision-tick.loading-true { + background-color: #9999cc; + background: url(../images/wpspin_light.gif) no-repeat; + background-position: middle; + background-size: 1px 10px; +} + +.revision-tick.loading-false { + background-color: #aaa; } /* jQuery UI Slider */ diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index 7916261dff..1335956172 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -1379,33 +1379,25 @@ table.diff .diff-addedline ins { background-color: #e9f6ea; } -.diff-to-title { - color: #0080AA; +#diff-title-to strong { + color: #0080aa; } -#diffsubheader{ +.diff-header { background-color: #f7f7f7; } -.comparetwo#diffsubheader.diff-left-hand-meta-row { - background-color: #fcfcfc; -} - -.revision-tick.revision-toloadtrue { +.revision-tick.loading-true { background-color: #9999cc; background: url(../images/wpspin_light.gif) no-repeat; background-position: middle; background-size: 1px 10px; } -.revision-tick.revision-toloadfalse { +.revision-tick.loading-false { background-color: #aaa; } -#att-info { - background-color: #e4f2Fd; -} - body .ui-tooltip { border-color: #d7d7d7; background-color: #fff; diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 45b8b11b10..ce64500fc7 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -3617,6 +3617,11 @@ td.plugin-title p { 11.2 - Post Revisions ------------------------------------------------------------------------------*/ +/* Revision meta box */ +.post-revisions li img { + vertical-align: middle; +} + table.diff { width: 100%; } @@ -3653,270 +3658,175 @@ table.diff .diff-addedline ins { text-decoration: none; } -#revisions-meta-mostrecent, -#revisions-meta-stored, -#revisions-meta-oldest, -#revisions-meta-link { +#revision-diff-container { + position: relative; +} + +#toogle-revision-compare-mode { + position: absolute; + top: 0; + right: 0; + padding-top: 15px; +} + +#loading-status { + position: absolute; + top: 0; + right: 170px; line-height: 30px; - height: 30px; - vertical-align: middle; - padding-right: 10px; + display: none; + margin: 9px 0 0; } -#revisions-meta-mostrecent img, -#revisions-meta-oldest img { - vertical-align: middle; +#loading-status .spinner { + float: left; } -.diff-from-title, -.diff-to-title { - font-size: 14px; - font-weight: bold; - width:60px; - text-align: right; - float: left; - margin-right: 5px; -} - -.revisiondiffcontainer { - width: 96%; -} - -.revisiondiffcontainer input.button { - margin: 2px; -} - -#diffnext { - float: right; - margin-right: 5px; -} - -#diffrestore input{ - margin-left: 10px; -} - -#diffprevious, -#difftitle, -#difftitlefrom, -#diff_from_current_revision { - float: left; - margin-left: 5px; - height: 35px; -} - -#diffprevious, -#diffnext { - height: 30px; -} - -#diffheader, #diffsubheader { - clear: both; - width: 100%; -} - -#diffheader { +#revision-interact { border-bottom: 1px solid #dfdfdf; - width: 100%; - height: 40px; - line-height: 40px; - padding-top: 30px; + padding: 20px 0; } -#diffsubheader,.diff-left-hand-meta-row { - width: 100%; - height:35px; - line-height: 35px; - display: block; +#diff-next-revision, +#diff-previous-revision { + margin-top: -.4em; /* Same line as the slider (height: .8em) */ } -#diffslider{ +#diff-next-revision { + float: right; +} + +#diff-previous-revision { + float: left; +} + +#diff-slider{ width: 70%; - margin-left: auto; - margin-right: auto; - text-align: center; - height: 0.8em; - margin-top: 20px; + margin: 0 auto; +} + +.comparetwo #diff-slider { + width: 95%; } .diff-slider-ticks-wrapper { - margin-left: auto; - margin-right: auto; + margin: 0 auto; text-align: center; } #diff-slider-ticks { position: absolute; - margin-top: 50px; z-index: 1; + margin-top: 20px; } -#revisioncount { - width: 50%; - margin-left: auto; - margin-right: auto; - margin-top: 0; - line-height: 1em; - height: 1em; - text-align: center; - clear: none; - padding: 5px; +.diff-header { + height: 35px; + line-height: 35px; } -.revisiondiffcontainer { - margin-top: 10px; -} - -#diffsliderwrap { - width: 80%; - margin-left: auto; - margin-right: auto; -} - -#diffsliderwrap #sliderinner { - position: relative; - top: 47px; -} - -#removedandadded { - width: 100%; - padding-bottom: 30px; - padding-top: 3px; - font-size: 16px; -} - -#removed, -#added { - width: auto; - text-align: left; - padding-left: 5px; - padding-right: 5px; - padding-top: 5px; - padding-bottom: 5px; +.diff-title { float: left; } -.diffsplit #added { - float: right; - width: 47%; - text-align: left; +.diff-title strong { + font-size: 14px; + width: 60px; + text-align: right; + float: left; + margin-right: 5px; } -.diffsplit #removedandadded { +.diff-title img { + vertical-align: middle; +} + +#restore-revision { + margin-left: 10px; +} + +.diff-col-titles { + font-size: 16px; width: 100%; + margin: 20px 0 10px; } -#added { - padding-left: 10px; +.diff-col-title-added, +.diff-col-title-removed { + width: auto; + text-align: left; + float: left; + width: 48%; +} + +.diff-col-title-added span, +.diff-col-title-removed span { + padding: .5em; +} + +.diff-col-title-added { + float: right; color: #00a100; } -#removed { - padding-left: 0px; +.diff-col-title-removed { color: #d2281f; } -#comparetworevisions { - float: right; - position: absolute; - top: 10px; - right: 10px; - line-height: 35px; - padding-right: 5px; -} - -#comparetworevisions input { - margin-right: 2px; -} - -#difftitle img, -#difftitlefrom img, -.post-revisions li img { - vertical-align: middle; - margin-left: 5px; -} -.post-revisions li { - vertical-align: middle; - height: 28px; -} - -#showsplitviewoption, -#toggleshowautosavesoption { - float: right; - padding-left: 10px; - padding-right: 10px; -} - -#revisionoptions { - margin-top: 0px; - line-height: 40px; - clear: both; - width: 100%; -} - -.comparetwo #diffslider { - width: 95%; -} - -.comparetwo #diffprevious, -.comparetwo #diffnext, -span#diff_left_current_revision, -#diff_from_current_revision, -.currentversion span#diff_left_count, -.currentversion span#diff_left_count_inner, -.comparetwo.currentversion #diff_from_current_revision, -#diffsubheader.diff-left-hand-meta-row { +.comparing-two-revisions #diff-previous-revision, +.comparing-two-revisions #diff-next-revision, +#diff-title-from-current-version, +.comparing-two-revisions.current-version #diff-title-from-current-version, +#diff-header-from { display: none; } -.currentversion span#diff_left_current_revision, -span#diff_left_count, -span#diff_left_count_inner, -.comparetwo #difftitlefrom, -.leftmodelloading #modelsloading, -.rightmodelloading #modelsloading, -.leftmodelloading #modelsloading .spinner, -.rightmodelloading #modelsloading .spinner, -.comparetwo #diffsubheader.diff-left-hand-meta-row { +.comparing-two-revisions #diff-title-from, +.left-model-loading #loading-status, +.right-model-loading #loading-status, +.left-model-loading #loading-status .spinner, +.right-model-loading #loading-status .spinner, +.comparing-two-revisions #diff-header-from { display: block; } .revision-tick { width: 1px; float: left; - margin-right: 15px; - height: 11px; + margin: 1px 15px 0 0; + height: .8em; padding: 0; margin-left: 0px; } -.revision-tick.revision-scopeofchanges-vsmall { - width: 1px; - background-color: #aaa; +.revision-tick.scope-of-changes-vsmall { + width: 1px; + background-color: #aaa; } -.revision-tick.revision-scopeofchanges-small { - width: 2px; - background-color: #aaa; - margin-left: -1px; +.revision-tick.scope-of-changes-small { + width: 2px; + background-color: #aaa; + margin-left: -1px; } -.revision-tick.revision-scopeofchanges-med { - width: 3px; - margin-left: -2px; - background-color: #666; +.revision-tick.scope-of-changes-med { + width: 3px; + margin-left: -2px; + background-color: #666; } -.revision-tick.revision-scopeofchanges-large { - width: 4px; - margin-left: -3px; - background-color: #333; +.revision-tick.scope-of-changes-large { + width: 4px; + margin-left: -3px; + background-color: #333; } -.revision-tick.revision-scopeofchanges-vlarge { - margin-left: -3px; - width: 4px; - background-color: #111; - left: 1; +.revision-tick.scope-of-changes-vlarge { + margin-left: -3px; + width: 4px; + background-color: #111; + left: 1; } .diff-loading { @@ -3924,8 +3834,8 @@ span#diff_left_count_inner, width: 100%; height: 200px; } -.diff-loading .spinner -{ + +.diff-loading .spinner { clear: both; margin-left: auto; margin-right: auto; @@ -3933,27 +3843,12 @@ span#diff_left_count_inner, float: none; } -#modelsloading { - float: right; - position: absolute; - line-height: 30px; - display: none; - clear: none; - right: 170px; - margin-top: -40px; -} - -#modelsloading .spinner { - float: left; -} - .ui-tooltip-content img { float: left; margin-right: 5px; } - /* jQuery UI Tooltip 1.10.1 */ .ui-tooltip { @@ -3985,7 +3880,6 @@ body .ui-tooltip { margin-left: -35px; bottom: -16px; z-index: 99999; - } .arrow.top { diff --git a/wp-admin/js/revisions.js b/wp-admin/js/revisions.js index 34b7190e52..8f15c01fbf 100644 --- a/wp-admin/js/revisions.js +++ b/wp-admin/js/revisions.js @@ -116,7 +116,7 @@ window.wp = window.wp || {}; startLeftModelLoading: function() { this.leftModelLoading = true; - $('.revisiondiffcontainer').addClass('leftmodelloading'); + $('#revision-diff-container').addClass('left-model-loading'); }, stopLeftModelLoading: function() { @@ -125,7 +125,7 @@ window.wp = window.wp || {}; startRightModelLoading: function() { this.rightModelLoading = true; - $('.revisiondiffcontainer').addClass('rightmodelloading'); + $('#revision-diff-container').addClass('right-model-loading'); }, stopRightModelLoading: function() { @@ -133,8 +133,8 @@ window.wp = window.wp || {}; }, stopModelLoadingSpinner: function() { - $('.revisiondiffcontainer').removeClass('rightmodelloading'); - $('.revisiondiffcontainer').removeClass('leftmodelloading'); + $('#revision-diff-container').removeClass('right-model-loading'); + $('#revision-diff-container').removeClass('left-model-loading'); }, reloadModel: function() { @@ -279,7 +279,7 @@ window.wp = window.wp || {}; * The slider */ revisions.view.Slider = Backbone.View.extend({ - el: $( '#slider' ), + el: $( '#diff-slider' ), singleRevision: true, initialize: function( options ) { @@ -314,9 +314,9 @@ window.wp = window.wp || {}; } if ( 0 === Diff.leftDiff ) { - $( '.revisiondiffcontainer' ).addClass( 'currentversion' ); + $( '#revision-diff-container' ).addClass( 'currentversion' ); } else { - $( '.revisiondiffcontainer' ).removeClass( 'currentversion' ); + $( '#revision-diff-container' ).removeClass( 'currentversion' ); } Diff.revisionView.render(); @@ -380,7 +380,6 @@ window.wp = window.wp || {}; }, addTooltip: function( handle, message ) { - handle.attr( 'title', '' ).tooltip({ track: false, @@ -406,29 +405,29 @@ window.wp = window.wp || {}; }, width: function() { - return $( '#slider' ).width(); + return $( '#diff-slider' ).width(); }, setWidth: function( width ) { - return $( '#slider' ).width( width ); + return $( '#diff-slider' ).width( width ); }, refresh: function( options, slide ) { - $( '#slider' ).slider( 'option', options ); + $( '#diff-slider' ).slider( 'option', options ); // Triggers the slide event if ( slide ) - $( '#slider' ).trigger( 'slide' ); + $( '#diff-slider' ).trigger( 'slide' ); }, option: function( key ) { - return $( '#slider' ).slider( 'option', key ); + return $( '#diff-slider' ).slider( 'option', key ); }, render: function() { var self = this; // this.$el doesn't work, why? - $( '#slider' ).slider( { + $( '#diff-slider' ).slider( { slide: $.proxy( self.slide, self ), start: $.proxy( self.start, self ), stop: $.proxy( self.stop, self ) @@ -465,7 +464,6 @@ window.wp = window.wp || {}; Diff.slider.setWidth( sliderWidth ); $( '.diff-slider-ticks-wrapper' ).width( sliderWidth ); - $( '#diffslider' ).width( sliderWidth ); $( '#diff-slider-ticks' ).width( sliderWidth ); var aTickWidth = $( '.revision-tick' ).width(); @@ -507,8 +505,8 @@ window.wp = window.wp || {}; */ // TODO: Change Interact to something else. revisions.view.Interact = Backbone.View.extend({ - el: $('#backbonerevisionsinteract'), - template: wp.template('revision-interact'), + el: $( '#revision-interact' ), + template: wp.template( 'revision-interact' ), // next and previous buttons, only available in compare one mode events: { @@ -517,10 +515,7 @@ window.wp = window.wp || {}; }, render: function() { - var self = this; - - var addHtml = this.template; - this.$el.html( addHtml ); + this.$el.html( this.template ); var modelcount = Diff.revisions.length; @@ -534,7 +529,7 @@ window.wp = window.wp || {}; max: modelcount - 1 }); - $( '.revisiondiffcontainer' ).removeClass( 'comparetwo' ); + $( '#revision-diff-container' ).removeClass( 'comparing-two-revisions' ); } else { Diff.slider.refresh({ @@ -544,9 +539,9 @@ window.wp = window.wp || {}; range: true }); - $( '.revisiondiffcontainer' ).addClass( 'comparetwo' ); - $( '#diffslider a.ui-slider-handle' ).first().addClass( 'left-handle' ); - $( '#diffslider a.ui-slider-handle' ).last().addClass( 'right-handle' ); + $( '#revision-diff-container' ).addClass( 'comparing-two-revisions' ); + $( '#diff-slider a.ui-slider-handle' ).first().addClass( 'left-handle' ); + $( '#diff-slider a.ui-slider-handle' ).last().addClass( 'right-handle' ); } @@ -584,14 +579,14 @@ window.wp = window.wp || {}; * Next/Prev buttons and the slider */ revisions.view.Diff = Backbone.View.extend({ - el: $('#backbonerevisionsdiff'), - template: wp.template('revision'), + el: $( '#revisions-diff' ), + template: wp.template( 'revisions-diff' ), draggingLeft: false, // the compare two button is in this view, add the interaction here events: { - 'click #comparetwo': 'compareTwo', - 'click #restore': 'restore' + 'click #compare-two-revisions': 'compareTwo', + 'click #restore-revision': 'restore' }, // render the revisions @@ -613,7 +608,6 @@ window.wp = window.wp || {}; } } } else { // end compare two revisions mode, eg only one slider handle - this.comparetwochecked = ''; if ( this.model.at( Diff.rightDiff - 1 ) ) { addHtml = this.template( this.model.at( Diff.rightDiff - 1 ).toJSON() ); } @@ -621,7 +615,7 @@ window.wp = window.wp || {}; this.$el.html( addHtml ); if ( this.model.length < 2 ) { - $( '#diffslider' ).hide(); // don't allow compare two if fewer than three revisions + $( '#diff-slider' ).hide(); // don't allow compare two if fewer than three revisions $( '.diff-slider-ticks-wrapper' ).hide(); } @@ -640,9 +634,9 @@ window.wp = window.wp || {}; // hide the restore button when on the last sport/current post data if ( Diff.rightDiff === Diff.revisions.length ){ - $( '#restore' ).hide(); + $( '#restore-revision' ).hide(); } else { - $( '#restore' ).show(); + $( '#restore-revision' ).show(); } return this; @@ -651,14 +645,14 @@ window.wp = window.wp || {}; toogleCompareTwoCheckbox: function() { // don't allow compare two if fewer than three revisions if ( this.model.length < 3 ) - $( '#comparetworevisions' ).hide(); + $( '#toogle-revision-compare-mode' ).hide(); - $( '#comparetwo' ).prop( 'checked', ! Diff.singleRevision ); + $( '#compare-two-revisions' ).prop( 'checked', ! Diff.singleRevision ); }, // turn on/off the compare two mode compareTwo: function() { - if ( $( 'input#comparetwo' ).is( ':checked' ) ) { // compare 2 mode + if ( $( '#compare-two-revisions' ).is( ':checked' ) ) { // compare 2 mode Diff.singleRevision = false ; if ( 1 === Diff.rightDiff ) diff --git a/wp-admin/revision.php b/wp-admin/revision.php index 44cf4e3313..9da7a90c45 100644 --- a/wp-admin/revision.php +++ b/wp-admin/revision.php @@ -75,9 +75,8 @@ if ( ! empty( $post->post_type ) && 'post' != $post->post_type ) $parent_file = $submenu_file = 'edit.php?post_type=' . $post->post_type; else $parent_file = $submenu_file = 'edit.php'; -wp_enqueue_script( 'revisions' ); -require_once( './admin-header.php' ); +wp_enqueue_script( 'revisions' ); $strings = array( 'diffFromTitle' => _x( 'From: %s', 'revision from title' ), @@ -91,83 +90,80 @@ $settings = array( ); $strings['settings'] = $settings; - wp_localize_script( 'revisions', 'wpRevisionsL10n', $strings ); -$comparetworevisionslink = get_edit_post_link( $revision->ID ); +require_once( './admin-header.php' ); + ?> -
-
-
-
-
-
-
+ +
+
+

+
-
-
-
-
-
-
+
+ +
+ +
-