Make WordPress Core

Changeset 30712


Ignore:
Timestamp:
12/02/2014 09:54:42 PM (9 years ago)
Author:
ocean90
Message:

Customizer: Enhance Background Image/Upload controls.

  • Adopt the Header Image layout to the Background Image/Upload control.
  • Remove templates for interactive audio/video previews. They haven't worked yet.
  • Don't show a "Remove" button when the default value is set.
  • Avoid calculating of container/placeholder heights which are unrelated to custom headers.

see #21483.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r30309 r30712  
    421421.customize-control .attachment-thumb.type-icon {
    422422    float: left;
    423     margin-right: 12px;
     423    margin: 10px;
     424    width: auto;
    424425}
    425426
    426427.customize-control .attachment-title {
    427428    font-weight: bold;
    428     margin: 0 0 12px 0;
    429 }
    430 
    431 .customize-control .remove-button {
    432     margin-left: 8px;
    433     vertical-align: middle;
    434 }
    435 
    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;
     429    margin: 0;
     430    padding: 5px 10px;
     431}
     432
     433.customize-control .thumbnail-image {
     434    line-height: 0;
    449435}
    450436
     
    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,
     
    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;
     
    724589}
    725590
    726 #customize-control-header_image button img {
    727     display: block;
    728 }
    729 
    730 #customize-control-header_image button.new,
    731 #customize-control-header_image button.remove {
     591.customize-control-header button img {
     592    display: block;
     593}
     594
     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%;
     
    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;
     
    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;
     
    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;
     
    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%;
     
    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;
     
    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}
     
    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;
     
    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:
     
    824710}
    825711
    826 #customize-control-header_image .header-view:hover .close {
     712.customize-control-header .header-view:hover .close {
    827713    visibility: visible;
    828714}
     
    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;
     
    837723}
    838724
    839 #customize-control-header_image button.random {
     725.customize-control-header button.random {
    840726    width: 100%;
    841727    height: auto;
     
    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;
     
    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;
     
    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;
     
    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}
  • trunk/src/wp-admin/js/customize-controls.js

    r30329 r30712  
    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            }
     
    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            }
     
    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
     
    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 ) ) {
     
    21162111        if ( title.length ) {
    21172112            $( '#customize-control-blogname input' ).on( 'input', function() {
    2118                 title.text(  this.value );
     2113                title.text( this.value );
    21192114            } );
    21202115        }
  • trunk/src/wp-includes/class-wp-customize-control.php

    r30676 r30712  
    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>
    786                         </div>
    787                     <# } #>
    788764                </div>
    789765            </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             <# } #>
     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>
    796775        <# } 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             <# } #>
     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>
     783                        </div>
     784                    </div>
     785                </div>
     786            </div>
     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
Note: See TracChangeset for help on using the changeset viewer.