WordPress.org
Get WordPress

Make WordPress Core

Ticket #30618: 30618.1.diff

File 30618.1.diff, 16.9 KB (added by celloexpressions, 10 years ago)

Fix header image placeholders

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

     
    720720
    721721/* Media controls */
    722722
    723 .customize-control-media .current,
    724 .customize-control-upload .current,
    725 .customize-control-image .current,
    726 .customize-control-background .current,
    727 .customize-control-cropped_image .current,
    728 .customize-control-site_icon .current,
     723.customize-control .attachment-media-view .actions {
     724        margin-top: 8px;
     725}
     726
    729727.customize-control-header .current {
    730728        margin-bottom: 8px;
    731729}
    … …  
    749747        display: block;
    750748}
    751749
    752 .customize-control-media .remove-button,
    753 .customize-control-media .default-button,
    754 .customize-control-media .upload-button,
    755 .customize-control-upload .remove-button,
    756 .customize-control-upload .default-button,
    757 .customize-control-upload .upload-button,
    758 .customize-control-image .remove-button,
    759 .customize-control-image .default-button,
    760 .customize-control-image .upload-button,
    761 .customize-control-background .remove-button,
    762 .customize-control-background .default-button,
    763 .customize-control-background .upload-button,
    764 .customize-control-cropped_image .remove-button,
    765 .customize-control-cropped_image .default-button,
    766 .customize-control-cropped_image .upload-button,
    767 .customize-control-site_icon .remove-button,
    768 .customize-control-site_icon .default-button,
    769 .customize-control-site_icon .upload-button,
     750.customize-control .attachment-media-view .remove-button,
     751.customize-control .attachment-media-view .default-button,
     752.customize-control .attachment-media-view .upload-button,
    770753.customize-control-header button.new,
    771754.customize-control-header button.remove {
    772755        white-space: normal;
    … …  
    774757        height: auto;
    775758}
    776759
    777 .customize-control-media .current .container,
    778 .customize-control-upload .current .container,
    779 .customize-control-image .current .container,
    780 .customize-control-background .current .container,
    781 .customize-control-cropped_image .current .container,
    782 .customize-control-site_icon .current .container,
     760.customize-control .attachment-media-view .thumbnail,
    783761.customize-control-header .current .container {
    784762        overflow: hidden;
    785         -webkit-border-radius: 2px;
    786         border: 1px solid #eee;
    787         -webkit-border-radius: 2px;
    788         border-radius: 2px;
    789763}
    790764
    791 .customize-control-media .current .container,
    792 .customize-control-upload .current .container,
    793 .customize-control-background .current .container,
    794 .customize-control-cropped_image .current .container,
    795 .customize-control-site_icon .current .container,
    796 .customize-control-image .current .container {
    797         min-height: 40px;
    798 }
    799 
    800 .customize-control-media .placeholder,
    801 .customize-control-upload .placeholder,
    802 .customize-control-image .placeholder,
    803 .customize-control-background .placeholder,
    804 .customize-control-cropped_image .placeholder,
    805 .customize-control-site_icon .placeholder,
     765.customize-control .attachment-media-view .placeholder,
    806766.customize-control-header .placeholder {
    807767        width: 100%;
    808768        position: relative;
    … …  
    812772        -webkit-box-sizing: border-box;
    813773        -moz-box-sizing: border-box;
    814774        box-sizing: border-box;
    815         min-height: 40px;
     775        padding: 9px 0;
     776        line-height: 20px;
    816777}
    817778
    818 .customize-control-media .inner,
    819 .customize-control-upload .inner,
    820 .customize-control-image .inner,
    821 .customize-control-background .inner,
    822 .customize-control-cropped_image .inner,
    823 .customize-control-site_icon .inner,
    824779.customize-control-header .inner {
    825780        display: none;
    826781        position: absolute;
    … …  
    831786        overflow: hidden;
    832787}
    833788
    834 .customize-control-media .inner,
    835 .customize-control-upload .inner,
    836 .customize-control-background .inner,
    837 .customize-control-cropped_image .inner,
    838 .customize-control-site_icon .inner,
    839 .customize-control-image .inner {
    840         display: block;
    841         min-height: 40px;
    842 }
    843 
    844 .customize-control-media .inner,
    845 .customize-control-upload .inner,
    846 .customize-control-image .inner,
    847 .customize-control-background .inner,
    848 .customize-control-cropped_image .inner,
    849 .customize-control-site_icon .inner,
    850789.customize-control-header .inner,
    851790.customize-control-header .inner .dashicons {
    852791        line-height: 20px;
    … …  
    956895        margin-bottom: 0;
    957896}
    958897
    959 .customize-control-media img,
    960 .customize-control-upload img,
    961 .customize-control-image img,
    962 .customize-control-background img,
    963 .customize-control-cropped_image img,
     898.customize-control .attachment-media-view img,
    964899.customize-control-header img {
    965900        width: 100%;
    966         -webkit-border-radius: 2px;
    967         border-radius: 2px;
    968901}
    969902
    970 .customize-control-media .remove-button,
    971 .customize-control-media .default-button,
    972 .customize-control-upload .remove-button,
    973 .customize-control-upload .default-button,
    974 .customize-control-image .remove-button,
    975 .customize-control-image .default-button,
    976 .customize-control-background .remove-button,
    977 .customize-control-background .default-button,
    978 .customize-control-cropped_image .remove-button,
    979 .customize-control-cropped_image .default-button,
    980 .customize-control-site_icon .remove-button,
    981 .customize-control-site_icon .default-button,
     903.customize-control .attachment-media-view .remove-button,
     904.customize-control .attachment-media-view .default-button,
    982905.customize-control-header .remove {
    983906        float: left;
    984907        margin-right: 3px;
    985908}
    986909
    987 .customize-control-media .upload-button,
    988 .customize-control-upload .upload-button,
    989 .customize-control-image .upload-button,
    990 .customize-control-background .upload-button,
    991 .customize-control-cropped_image .upload-button,
    992 .customize-control-site_icon .upload-button,
     910.customize-control .attachment-media-view .upload-button,
    993911.customize-control-header .new {
    994912        float: right;
    995913}

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

     
    121121                                <# if (data.random) { #>
    122122
    123123                        <div class="placeholder">
    124                                 <div class="inner">
    125                                         <span><span class="dashicons dashicons-randomize dice"></span>
    126                                         <# if ( data.type === 'uploaded' ) { #>
    127                                                 <?php _e( 'Randomizing uploaded headers' ); ?>
    128                                         <# } else if ( data.type === 'default' ) { #>
    129                                                 <?php _e( 'Randomizing suggested headers' ); ?>
    130                                         <# } #>
    131                                         </span>
    132                                 </div>
     124                                <span class="dashicons dashicons-randomize dice"></span>
     125                                <# if ( data.type === 'uploaded' ) { #>
     126                                        <?php _e( 'Randomizing uploaded headers' ); ?>
     127                                <# } else if ( data.type === 'default' ) { #>
     128                                        <?php _e( 'Randomizing suggested headers' ); ?>
     129                                <# } #>
    133130                        </div>
    134131
    135132                                <# } else { #>
    … …  
    140137                        <# } else { #>
    141138
    142139                        <div class="placeholder">
    143                                 <div class="inner">
    144                                         <span>
    145                                                 <?php _e( 'No image set' ); ?>
    146                                         </span>
    147                                 </div>
     140                                <?php _e( 'No image set' ); ?>
    148141                        </div>
    149142
    150143                        <# } #>

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

     
    154154                </label>
    155155
    156156                <# if ( data.attachment && data.attachment.id ) { #>
    157                         <div class="current">
    158                                 <div class="container">
    159                                         <div class="attachment-media-view attachment-media-view-{{ data.attachment.type }} {{ data.attachment.orientation }}">
    160                                                 <div class="thumbnail thumbnail-{{ data.attachment.type }}">
    161                                                         <# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
    162                                                                 <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" alt="" />
    163                                                         <# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
    164                                                                 <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" alt="" />
    165                                                         <# } else if ( 'audio' === data.attachment.type ) { #>
    166                                                                 <# if ( data.attachment.image && data.attachment.image.src && data.attachment.image.src !== data.attachment.icon ) { #>
    167                                                                         <img src="{{ data.attachment.image.src }}" class="thumbnail" draggable="false" alt="" />
    168                                                                 <# } else { #>
    169                                                                         <img src="{{ data.attachment.icon }}" class="attachment-thumb type-icon" draggable="false" alt="" />
    170                                                                 <# } #>
    171                                                                 <p class="attachment-meta attachment-meta-title">&#8220;{{ data.attachment.title }}&#8221;</p>
    172                                                                 <# if ( data.attachment.album || data.attachment.meta.album ) { #>
    173                                                                 <p class="attachment-meta"><em>{{ data.attachment.album || data.attachment.meta.album }}</em></p>
    174                                                                 <# } #>
    175                                                                 <# if ( data.attachment.artist || data.attachment.meta.artist ) { #>
    176                                                                 <p class="attachment-meta">{{ data.attachment.artist || data.attachment.meta.artist }}</p>
    177                                                                 <# } #>
    178                                                                 <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
    179                                                                         <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
    180                                                                 </audio>
    181                                                         <# } else if ( 'video' === data.attachment.type ) { #>
    182                                                                 <div class="wp-media-wrapper wp-video">
    183                                                                         <video controls="controls" class="wp-video-shortcode" preload="metadata"
    184                                                                                 <# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
    185                                                                                 <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
    186                                                                         </video>
    187                                                                 </div>
    188                                                         <# } else { #>
    189                                                                 <img class="attachment-thumb type-icon icon" src="{{ data.attachment.icon }}" draggable="false" alt="" />
    190                                                                 <p class="attachment-title">{{ data.attachment.title }}</p>
    191                                                         <# } #>
     157                        <div class="attachment-media-view attachment-media-view-{{ data.attachment.type }} {{ data.attachment.orientation }}">
     158                                <div class="thumbnail thumbnail-{{ data.attachment.type }}">
     159                                        <# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
     160                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" alt="" />
     161                                        <# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
     162                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" alt="" />
     163                                        <# } else if ( 'audio' === data.attachment.type ) { #>
     164                                                <# if ( data.attachment.image && data.attachment.image.src && data.attachment.image.src !== data.attachment.icon ) { #>
     165                                                        <img src="{{ data.attachment.image.src }}" class="thumbnail" draggable="false" alt="" />
     166                                                <# } else { #>
     167                                                        <img src="{{ data.attachment.icon }}" class="attachment-thumb type-icon" draggable="false" alt="" />
     168                                                <# } #>
     169                                                <p class="attachment-meta attachment-meta-title">&#8220;{{ data.attachment.title }}&#8221;</p>
     170                                                <# if ( data.attachment.album || data.attachment.meta.album ) { #>
     171                                                <p class="attachment-meta"><em>{{ data.attachment.album || data.attachment.meta.album }}</em></p>
     172                                                <# } #>
     173                                                <# if ( data.attachment.artist || data.attachment.meta.artist ) { #>
     174                                                <p class="attachment-meta">{{ data.attachment.artist || data.attachment.meta.artist }}</p>
     175                                                <# } #>
     176                                                <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
     177                                                        <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
     178                                                </audio>
     179                                        <# } else if ( 'video' === data.attachment.type ) { #>
     180                                                <div class="wp-media-wrapper wp-video">
     181                                                        <video controls="controls" class="wp-video-shortcode" preload="metadata"
     182                                                                <# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
     183                                                                <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
     184                                                        </video>
    192185                                                </div>
    193                                         </div>
     186                                        <# } else { #>
     187                                                <img class="attachment-thumb type-icon icon" src="{{ data.attachment.icon }}" draggable="false" alt="" />
     188                                                <p class="attachment-title">{{ data.attachment.title }}</p>
     189                                        <# } #>
    194190                                </div>
     191                                <div class="actions">
     192                                        <# if ( data.canUpload ) { #>
     193                                        <button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
     194                                        <button type="button" class="button upload-button control-focus" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
     195                                        <div style="clear:both"></div>
     196                                        <# } #>
     197                                </div>
    195198                        </div>
    196                         <div class="actions">
    197                                 <# if ( data.canUpload ) { #>
    198                                 <button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
    199                                 <button type="button" class="button upload-button control-focus" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
    200                                 <div style="clear:both"></div>
    201                                 <# } #>
    202                         </div>
    203199                <# } else { #>
    204                         <div class="current">
    205                                 <div class="container">
    206                                         <div class="placeholder">
    207                                                 <div class="inner">
    208                                                         <span>
    209                                                                 {{ data.button_labels.placeholder }}
    210                                                         </span>
    211                                                 </div>
    212                                         </div>
     200                        <div class="attachment-media-view">
     201                                <div class="placeholder">
     202                                        {{ data.button_labels.placeholder }}
    213203                                </div>
     204                                <div class="actions">
     205                                        <# if ( data.defaultAttachment ) { #>
     206                                                <button type="button" class="button default-button">{{ data.button_labels.default }}</button>
     207                                        <# } #>
     208                                        <# if ( data.canUpload ) { #>
     209                                                <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button">{{ data.button_labels.select }}</button>
     210                                        <# } #>
     211                                        <div style="clear:both"></div>
     212                                </div>
    214213                        </div>
    215                         <div class="actions">
    216                                 <# if ( data.defaultAttachment ) { #>
    217                                         <button type="button" class="button default-button">{{ data.button_labels.default }}</button>
    218                                 <# } #>
    219                                 <# if ( data.canUpload ) { #>
    220                                 <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button">{{ data.button_labels.select }}</button>
    221                                 <# } #>
    222                                 <div style="clear:both"></div>
    223                         </div>
    224214                <# } #>
    225215                <?php
    226216        }

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

     
    6060                </label>
    6161
    6262                <# if ( data.attachment && data.attachment.id ) { #>
    63                 <div class="current">
    64                         <div class="container">
     63                        <div class="attachment-media-view">
    6564                                <div class="site-icon-preview">
    6665                                        <div class="favicon-preview">
    6766                                                <img src="<?php echo esc_url( admin_url( 'images/browser.png' ) ); ?>" class="browser-preview" width="182" alt="" />
    … …  
    7372                                        </div>
    7473                                        <img class="app-icon-preview" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
    7574                                </div>
     75                                <div class="actions">
     76                                        <# if ( data.canUpload ) { #>
     77                                                <button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
     78                                                <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['change']; ?></button>
     79                                                <div style="clear:both"></div>
     80                                        <# } #>
     81                                </div>
    7682                        </div>
    77                 </div>
    78                 <div class="actions">
    79                         <# if ( data.canUpload ) { #>
    80                                 <button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
    81                                 <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['change']; ?></button>
    82                                 <div style="clear:both"></div>
    83                         <# } #>
    84                 </div>
    8583                <# } else { #>
    86                 <div class="current">
    87                         <div class="container">
     84                        <div class="attachment-media-view">
    8885                                <div class="placeholder">
    89                                         <div class="inner">
    90                                                 <span><?php echo $this->button_labels['placeholder']; ?></span>
    91                                         </div>
     86                                        <?php echo $this->button_labels['placeholder']; ?>
    9287                                </div>
     88                                <div class="actions">
     89                                        <# if ( data.defaultAttachment ) { #>
     90                                                <button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
     91                                        <# } #>
     92                                        <# if ( data.canUpload ) { #>
     93                                                <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
     94                                        <# } #>
     95                                        <div style="clear:both"></div>
     96                                </div>
    9397                        </div>
    94                 </div>
    95                 <div class="actions">
    96                         <# if ( data.defaultAttachment ) { #>
    97                                 <button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
    98                         <# } #>
    99                         <# if ( data.canUpload ) { #>
    100                                 <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
    101                         <# } #>
    102                         <div style="clear:both"></div>
    103                 </div>
    10498                <# } #>
    10599                <?php
    106100        }