WordPress.org
Get WordPress

Make WordPress Core

Ticket #21483: 21483.10.diff

File 21483.10.diff, 18.1 KB (added by ocean90, 10 years ago)

  • src/wp-admin/css/customize-controls.css

     
    421421.customize-control .attachment-thumb.type-icon {
    422422        float: left;
    423423        margin-right: 12px;
     424        width: auto;
    424425}
    425426
    426427.customize-control .attachment-title {
    427428        font-weight: bold;
    428         margin: 0 0 12px 0;
     429        margin: 0;
     430        padding: 5px 10px;
    429431}
    430432
    431 .customize-control .remove-button {
    432         margin-left: 8px;
    433         vertical-align: middle;
     433.customize-control .thumbnail-image {
     434        line-height: 0;
    434435}
    435436
    436 .customize-control .thumbnail-audio .attachment-title,
    437 .customize-control .thumbnail.thumbnail-audio,
    438 .customize-control .thumbnail.thumbnail-video,
    439 .customize-control .thumbnail.thumbnail-image {
    440         margin-bottom: 8px;
    441 }
    442 
    443 .customize-control .placeholder-text {
    444         font-size: 18px;
    445         font-weight: 300;
    446         text-align: center;
    447         color: #aaa;
    448         cursor: default;
    449 }
    450 
    451437.customize-control .thumbnail-image img {
    452438        cursor: pointer;
    453439}
    … …  
    563549        border-color: rgba(0, 0, 0, 0.25);
    564550}
    565551
    566 /*
    567  * Image Picker
    568  */
    569 .customize-control-image .library,
    570 .customize-control-image .actions {
    571         display: none;
    572         float: left;
    573         width: 100%;
    574 }
    575 
    576 .customize-control-image.open .library,
    577 .customize-control-image.open .actions {
    578         display: block;
    579 }
    580 
    581 .accordion-section .customize-control-image .dropdown-content {
    582         height: auto;
    583         min-height: 24px;
    584         min-width: 40px;
    585         padding: 0;
    586 }
    587 
    588 .accordion-section .customize-control-image .dropdown-status {
    589         padding: 4px 5px;
    590 }
    591 
    592 .accordion-section .customize-control-image .preview-thumbnail img {
    593         display: block;
    594         width: 100%;
    595         max-width: 122px;
    596         max-height: 98px;
    597         margin: 0 auto;
    598 }
    599 
    600 .accordion-section .customize-control-image .actions {
    601         text-align: right;
    602 }
    603 
    604 .accordion-section .customize-control-image .library ul {
    605         border-bottom: 1px solid #ddd;
    606         float: left;
    607         width: 100%;
    608         margin: 10px 0 0;
    609 }
    610 
    611 .accordion-section .customize-control-image .library li {
    612         color: #ccc;
    613         float: left;
    614         padding: 3px 15px;
    615         margin: 0;
    616         border: 1px solid transparent;
    617 }
    618 
    619 .accordion-section .customize-control-image .library li.library-selected {
    620         margin-bottom: -1px;
    621         padding-bottom: 4px;
    622         color: #666666;
    623         border-color: #ddd;
    624         border-bottom-color: #fff;
    625 }
    626 
    627 .accordion-section .customize-control-image .library .thumbnail {
    628         display: block;
    629         width: 100%;
    630 }
    631 
    632 .accordion-section .customize-control-image .library .thumbnail img {
    633         display: block;
    634         max-width: 90%;
    635         max-height: 80px;
    636         margin: 5px auto;
    637         padding: 2px;
    638         background: #666666;
    639 }
    640 
    641 .accordion-section .customize-control-image .library .thumbnail:hover img {
    642         background-color: #2ea2cc;
    643 }
    644 
    645 .accordion-section .customize-control-image .library-content {
    646         display: none;
    647         width: 100%;
    648         float: left;
    649         padding: 10px 0;
    650 }
    651 
    652 .accordion-section .customize-control-image .library-content.library-selected {
    653         display: block;
    654 }
    655 
    656 .accordion-section .customize-control-upload .upload-fallback,
    657 .accordion-section .customize-control-image .upload-fallback {
    658         display: none;
    659 }
    660 
    661 .accordion-section .customize-control-upload .upload-dropzone,
    662 .accordion-section .customize-control-image .upload-dropzone {
    663         display: none;
    664         padding: 15px 10px;
    665         border: 3px dashed #dfdfdf;
    666         margin: 5px auto;
    667         text-align: center;
    668         position: relative;
    669         cursor: default;
    670 }
    671 
    672 .accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop,
    673 .accordion-section .customize-control-image .upload-dropzone.supports-drag-drop {
    674         display: block;
    675         -webkit-transition: border-color 0.1s;
    676         transition: border-color 0.1s;
    677 }
    678 
    679 .accordion-section .customize-control-upload .library ul li,
    680 .accordion-section .customize-control-image .library ul li {
    681         cursor: pointer;
    682 }
    683 
    684 .accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
    685 .accordion-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
    686         border-color: #83b4d8;
    687 }
    688 
    689552/**
    690553 * iOS can't scroll iframes,
    691554 * instead it expands the iframe size to match the size of the content
    … …  
    704567
    705568/** Header control **/
    706569
    707 #customize-control-header_image .current {
     570.customize-control-upload .current,
     571.customize-control-image .current,
     572.customize-control-header .current {
    708573        margin-bottom: 8px;
    709574}
    710575
    711 #customize-control-header_image .uploaded {
     576.customize-control-header .uploaded {
    712577        margin-bottom: 18px;
    713578}
    714579
    715 #customize-control-header_image .uploaded button:not(.random),
    716 #customize-control-header_image .default button:not(.random) {
     580.customize-control-header .uploaded button:not(.random),
     581.customize-control-header .default button:not(.random) {
    717582        width: 100%;
    718583        padding: 0;
    719584        margin: 0;
    … …  
    723588        cursor: pointer;
    724589}
    725590
    726 #customize-control-header_image button img {
     591.customize-control-header button img {
    727592        display: block;
    728593}
    729594
    730 #customize-control-header_image button.new,
    731 #customize-control-header_image button.remove {
     595.customize-control-upload .remove-button,
     596.customize-control-upload .upload-button,
     597.customize-control-image .remove-button,
     598.customize-control-image .upload-button,
     599.customize-control-header button.new,
     600.customize-control-header button.remove {
    732601        white-space: normal;
    733602        width: 48%;
    734603        height: auto;
    735604}
    736605
    737 
    738 /* Header control: current image container */
    739 
    740 #customize-control-header_image .current .container {
     606.customize-control-upload .current .container,
     607.customize-control-image .current .container,
     608.customize-control-header .current .container {
    741609        overflow: hidden;
    742610        -webkit-border-radius: 2px;
    743611        border: 1px solid #eee;
    … …  
    745613        border-radius: 2px;
    746614}
    747615
    748 #customize-control-header_image .placeholder {
     616.customize-control-upload .current .container,
     617.customize-control-image .current .container {
     618        min-height: 40px;
     619}
     620
     621.customize-control-upload .placeholder,
     622.customize-control-image .placeholder,
     623.customize-control-header .placeholder {
    749624        width: 100%;
    750625        position: relative;
    751626        text-align: center;
    752627        cursor: default;
    753628}
    754629
    755 #customize-control-header_image .inner {
     630.customize-control-upload .inner,
     631.customize-control-image .inner,
     632.customize-control-header .inner {
    756633        display: none;
    757634        position: absolute;
    758635        width: 100%;
    … …  
    762639        overflow: hidden;
    763640}
    764641
    765 #customize-control-header_image .inner,
    766 #customize-control-header_image .inner .dashicons {
     642.customize-control-upload .inner,
     643.customize-control-image .inner {
     644        display: block;
     645        min-height: 40px;
     646}
     647
     648.customize-control-upload .inner,
     649.customize-control-image .inner,
     650.customize-control-header .inner,
     651.customize-control-header .inner .dashicons {
    767652        line-height: 20px;
    768653        top: 10px;
    769654}
    770 #customize-control-header_image .list .inner,
    771 #customize-control-header_image .list .inner .dashicons {
     655
     656.customize-control-header .list .inner,
     657.customize-control-header .list .inner .dashicons {
    772658        top: 9px;
    773659}
    774660
    775 #customize-control-header_image .header-view {
     661.customize-control-header .header-view {
    776662        position: relative;
    777663        width: 100%;
    778664        margin-bottom: 5px;
    779665}
    780666
    781 #customize-control-header_image .header-view:last-child {
     667.customize-control-header .header-view:last-child {
    782668        margin-bottom: 0px;
    783669}
    784670
    785671/* Convoluted, but 'outline' support isn't good enough yet */
    786 #customize-control-header_image .header-view:after {
     672.customize-control-header .header-view:after {
    787673        border: 0;
    788674}
    789 #customize-control-header_image .header-view.selected:after {
     675.customize-control-header .header-view.selected:after {
    790676        content: '';
    791677        position: absolute;
    792678        height: auto;
    … …  
    795681        -webkit-border-radius: 2px;
    796682        border-radius: 2px;
    797683}
    798 #customize-control-header_image .header-view.button.selected {
     684.customize-control-header .header-view.button.selected {
    799685        border: 0;
    800686}
    801687
    802688/* Header control: overlay "close" button */
    803689
    804 #customize-control-header_image .uploaded .header-view .close {
     690.customize-control-header .uploaded .header-view .close {
    805691        font-size: 2em;
    806692        color: grey;
    807693        position: absolute;
    … …  
    814700        cursor: pointer;
    815701}
    816702
    817 #customize-control-header_image .uploaded .header-view .close:hover {
     703.customize-control-header .uploaded .header-view .close:hover {
    818704 color: black;
    819705 text-shadow:
    820706    -1px -1px 0 #fff,
    … …  
    823709    1px 1px 0 #fff;
    824710}
    825711
    826 #customize-control-header_image .header-view:hover .close {
     712.customize-control-header .header-view:hover .close {
    827713        visibility: visible;
    828714}
    829715
    830716/* Header control: randomiz(s)er */
    831717
    832 #customize-control-header_image .random.placeholder {
     718.customize-control-header .random.placeholder {
    833719        cursor: pointer;
    834720        -webkit-border-radius: 2px;
    835721        border-radius: 2px;
    836722        height: 40px;
    837723}
    838724
    839 #customize-control-header_image button.random {
     725.customize-control-header button.random {
    840726        width: 100%;
    841727        height: auto;
    842728        min-height: 40px;
    843729        white-space: normal;
    844730}
    845731
    846 #customize-control-header_image button.random .dice {
     732.customize-control-header button.random .dice {
    847733        margin-top: 4px;
    848734}
    849735
    850 #customize-control-header_image .placeholder:hover .dice,
    851 #customize-control-header_image .header-view:hover > button.random .dice {
     736.customize-control-header .placeholder:hover .dice,
     737.customize-control-header .header-view:hover > button.random .dice {
    852738        -webkit-animation: dice-color-change 3s infinite;
    853739        -ms-animation: dice-color-change 3s infinite;
    854740        animation: dice-color-change 3s infinite;
    … …  
    875761        100% { color: #d4b146; }
    876762}
    877763
    878 /* Header control: actions and choices */
    879 
    880 #customize-control-header_image .actions {
     764.customize-control-upload .actions,
     765.customize-control-image .actions,
     766.customize-control-header .actions {
    881767        margin-bottom: 32px;
    882768}
    883769
    884 #customize-control-header_image .choice {
     770.customize-control-header .choice {
    885771        position: relative;
    886772        display: block;
    887773        margin-bottom: 9px;
    888774}
    889775
    890 #customize-control-header_image .uploaded div:last-child > .choice {
     776.customize-control-header .uploaded div:last-child > .choice {
    891777        margin-bottom: 0;
    892778}
    893779
    894 #customize-control-header_image img {
     780.customize-control-upload img,
     781.customize-control-image img,
     782.customize-control-header img {
    895783        width: 100%;
    896784        -webkit-border-radius: 2px;
    897785        border-radius: 2px;
    898786}
    899787
    900 #customize-control-header_image .remove {
     788.customize-control-upload .remove-button
     789.customize-control-image .remove-button
     790.customize-control-header .remove {
    901791        float: left;
    902792        margin-right: 3px;
    903793}
    904794
    905 #customize-control-header_image .new {
     795.customize-control-upload .upload-button,
     796.customize-control-image .upload-button,
     797.customize-control-header .new {
    906798        float: right;
    907799}
    908800

  • src/wp-admin/js/customize-controls.js

     
    10081008                 * Reset the setting to the default value.
    10091009                 */
    10101010                restoreDefault: function( event ) {
    1011                         if ( event.type === 'keydown' &&  13 !== event.which ) { // enter
     1011                        if ( event.type === 'keydown' && 13 !== event.which ) { // enter
    10121012                                return;
    10131013                        }
    10141014                        event.preventDefault();
    … …  
    10231023                 * @param {object} event jQuery Event object
    10241024                 */
    10251025                removeFile: function( event ) {
    1026                         if ( event.type === 'keydown' &&  13 !== event.which ) { // enter
     1026                        if ( event.type === 'keydown' && 13 !== event.which ) { // enter
    10271027                                return;
    10281028                        }
    10291029                        event.preventDefault();
    … …  
    10751075
    10761076                        new api.HeaderTool.CurrentView({
    10771077                                model: api.HeaderTool.currentHeader,
    1078                                 el: '.current .container'
     1078                                el: '#customize-control-header_image .current .container'
    10791079                        });
    10801080
    10811081                        new api.HeaderTool.ChoiceListView({
    10821082                                collection: api.HeaderTool.UploadsList = new api.HeaderTool.ChoiceList(),
    1083                                 el: '.choices .uploaded .list'
     1083                                el: '#customize-control-header_image .choices .uploaded .list'
    10841084                        });
    10851085
    10861086                        new api.HeaderTool.ChoiceListView({
    10871087                                collection: api.HeaderTool.DefaultsList = new api.HeaderTool.DefaultsList(),
    1088                                 el: '.choices .default .list'
     1088                                el: '#customize-control-header_image .choices .default .list'
    10891089                        });
    10901090
    10911091                        api.HeaderTool.combinedList = api.HeaderTool.CombinedList = new api.HeaderTool.CombinedList([
    … …  
    20982098                        event.preventDefault();
    20992099                });
    21002100
    2101                 $('.upload-dropzone a.upload').keydown( function( event ) {
    2102                         if ( 13 === event.which ) // enter
    2103                                 this.click();
    2104                 });
    2105 
    21062101                $('.collapse-sidebar').on( 'click keydown', function( event ) {
    21072102                        if ( isKeydownButNotEnterEvent( event ) ) {
    21082103                                return;
    … …  
    21152110                // Bind site title display to the corresponding field.
    21162111                if ( title.length ) {
    21172112                        $( '#customize-control-blogname input' ).on( 'input', function() {
    2118                                 title.text(  this.value );
     2113                                title.text( this.value );
    21192114                        } );
    21202115                }
    21212116

  • src/wp-includes/class-wp-customize-control.php

     
    747747                }
    748748
    749749                if ( data.attachment && data.attachment.id ) { #>
    750                         <div class="attachment-media-view {{ data.attachment.orientation }}">
    751                                 <div class="thumbnail thumbnail-{{ data.attachment.type }}">
    752                                         <# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
    753                                                 <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" />
    754                                         <# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
    755                                                 <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" />
    756                                         <# } else if ( -1 === jQuery.inArray( data.attachment.type, [ 'audio', 'video' ] ) ) { #>
    757                                                 <img class="attachment-thumb type-icon" src="{{ data.attachment.icon }}" class="icon" draggable="false" />
    758                                                 <p class="attachment-title">{{ data.attachment.title }}</p>
    759                                         <# } #>
    760 
    761                                         <# if ( 'audio' === data.attachment.type ) { #>
    762                                         <div class="wp-media-wrapper">
    763                                                 <p class="attachment-title">{{ data.attachment.title }}</p>
    764                                                 <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
    765                                                         <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
    766                                                 </audio>
     750                        <div class="current">
     751                                <div class="container">
     752                                        <div class="attachment-media-view {{ data.attachment.orientation }}">
     753                                                <div class="thumbnail thumbnail-{{ data.attachment.type }}">
     754                                                        <# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
     755                                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" />
     756                                                        <# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
     757                                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" />
     758                                                        <# } else { #>
     759                                                                <img class="attachment-thumb type-icon" src="{{ data.attachment.icon }}" class="icon" draggable="false" />
     760                                                                <p class="attachment-title">{{ data.attachment.title }}</p>
     761                                                        <# } #>
     762                                                </div>
    767763                                        </div>
    768                                         <# } else if ( 'video' === data.attachment.type ) {
    769                                                 var w_rule = h_rule = '';
    770                                                 if ( data.attachment.width ) {
    771                                                         w_rule = 'width: ' + data.attachment.width + 'px;';
    772                                                 } else if ( wp.media.view.settings.contentWidth ) {
    773                                                         w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
    774                                                 }
    775                                                 if ( data.attachment.height ) {
    776                                                         h_rule = 'height: ' + data.attachment.height + 'px;';
    777                                                 }
    778                                                 #>
    779                                                 <div style="{{ w_rule }}{{ h_rule }}" class="wp-media-wrapper wp-video">
    780                                                         <video controls="controls" class="wp-video-shortcode" preload="metadata"
    781                                                                 <# if ( data.attachment.width ) { #>width="{{ data.attachment.width }}"<# } #>
    782                                                                 <# if ( data.attachment.height ) { #>height="{{ data.attachment.height }}"<# } #>
    783                                                                 <# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
    784                                                                 <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
    785                                                         </video>
     764                                </div>
     765                        </div>
     766                        <div class="actions">
     767                                <# if ( data.defaultAttachment && data.defaultAttachment.id !== data.attachment.id ) { #>
     768                                        <button type="button" class="button default-button remove-button"><?php echo $this->button_labels['default']; ?></button>
     769                                <# } else if ( ! data.defaultAttachment ) { #>
     770                                        <button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
     771                                <# } #>
     772                                <button type="button" class="button upload-button" id="{{ data.settings.default }}-button"><?php echo $this->button_labels['change']; ?></button>
     773                                <div style="clear:both"></div>
     774                        </div>
     775                <# } else { #>
     776                        <div class="current">
     777                                <div class="container">
     778                                        <div class="placeholder">
     779                                                <div class="inner">
     780                                                        <span>
     781                                                                <?php echo $this->button_labels['placeholder']; ?>
     782                                                        </span>
    786783                                                </div>
    787                                         <# } #>
     784                                        </div>
    788785                                </div>
    789786                        </div>
    790                         <a class="button upload-button" id="{{ data.settings.default }}-button" href="#"><?php echo $this->button_labels['change']; ?></a>
    791                         <# if ( data.defaultAttachment && data.defaultAttachment.id !== data.attachment.id ) { #>
    792                                 <a class="default-button remove-button" href="#"><?php echo $this->button_labels['default']; ?></a>
    793                         <# } else { #>
    794                                 <a class="remove-button" href="#"><?php echo $this->button_labels['remove']; ?></a>
    795                         <# } #>
    796                 <# } else { #>
    797                         <p class="placeholder-text"><?php echo $this->button_labels['placeholder']; ?></p>
    798                         <a class="button upload-button" id="{{ data.settings.default }}-button" href="#"><?php echo $this->button_labels['select']; ?></a>
    799                         <# if ( data.defaultAttachment ) { #>
    800                                 <a class="default-button remove-button" href="#"><?php echo $this->button_labels['default']; ?></a>
    801                         <# } #>
     787                        <div class="actions">
     788                                <# if ( data.defaultAttachment ) { #>
     789                                        <button type="button" class="button default-button remove-button"><?php echo $this->button_labels['default']; ?></button>
     790                                <# } #>
     791                                <button type="button" class="button upload-button" id="{{ data.settings.default }}-button"><?php echo $this->button_labels['select']; ?></button>
     792                                <div style="clear:both"></div>
     793                        </div>
    802794                <# } #>
    803795                <?php
    804796        }