WordPress.org

Make WordPress Core

Changeset 37426


Ignore:
Timestamp:
05/12/2016 08:22:45 PM (5 years ago)
Author:
westonruter
Message:

Customize: Clean up media control CSS.

Removes unnecessary wrapper elements and refactors class names to eliminate duplication of rule selectors.

Props celloexpressions.
Fixes #30618.

Location:
trunk/src
Files:
4 edited

Legend:

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

    r37361 r37426  
    525525    line-height: 24px;
    526526    font-weight: 600;
    527     margin-bottom: 5px;
     527    margin-bottom: 4px;
    528528}
    529529
     
    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;
     
    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 {
     
    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;
    789 }
    790 
    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,
     763}
     764
     765.customize-control .attachment-media-view .placeholder,
    806766.customize-control-header .placeholder {
    807767    width: 100%;
     
    813773    -moz-box-sizing: border-box;
    814774    box-sizing: border-box;
    815     min-height: 40px;
    816 }
    817 
    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,
     775    padding: 9px 0;
     776    line-height: 20px;
     777}
     778
    824779.customize-control-header .inner {
    825780    display: none;
     
    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 {
     
    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 .thumbnail-image img,
    964899.customize-control-header img {
    965900    width: 100%;
    966     -webkit-border-radius: 2px;
    967     border-radius: 2px;
    968 }
    969 
    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,
     901}
     902
     903.customize-control .attachment-media-view .remove-button,
     904.customize-control .attachment-media-view .default-button,
    982905.customize-control-header .remove {
    983906    float: left;
     
    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;
  • trunk/src/wp-includes/customize/class-wp-customize-header-image-control.php

    r35923 r37426  
    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
     
    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
  • trunk/src/wp-includes/customize/class-wp-customize-media-control.php

    r37417 r37426  
    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>
    194                 </div>
    195             </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                 <# } #>
     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                    <# } #>
     190                </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>
    202198            </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>
    213                 </div>
    214             </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>
     200            <div class="attachment-media-view">
     201                <div class="placeholder">
     202                        {{ data.button_labels.placeholder }}
     203                </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>
    223213            </div>
    224214        <# } #>
  • trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php

    r37229 r37426  
    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">
     
    7473                    <img class="app-icon-preview" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
    7574                </div>
    76             </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>
    85         <# } else { #>
    86         <div class="current">
    87             <div class="container">
    88                 <div class="placeholder">
    89                     <div class="inner">
    90                         <span><?php echo $this->button_labels['placeholder']; ?></span>
    91                     </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                    <# } #>
    9281                </div>
    9382            </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>
     83        <# } else { #>
     84            <div class="attachment-media-view">
     85                <div class="placeholder">
     86                    <?php echo $this->button_labels['placeholder']; ?>
     87                </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>
     97            </div>
    10498        <# } #>
    10599        <?php
Note: See TracChangeset for help on using the changeset viewer.