WordPress.org

Make WordPress Core

Changeset 22154


Ignore:
Timestamp:
10/10/2012 06:47:22 AM (8 years ago)
Author:
koopersmith
Message:

Improve styling and markup for gallery and attachment MCE views.

Attachment views can now inherit from the theme's editor-style.css — just have any rules that apply to the img tag apply to .editor-attachment as well.

Adds a non-functional edit button to gallery views.

see #21390, #21813, #21815.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-content/themes/twentyeleven/editor-style.css

    r20906 r22154  
    255255    margin-top: 0.4em;
    256256}
    257 img {
     257img,
     258.editor-attachment {
    258259    border: 1px solid #ddd;
    259260    padding: 6px;
  • trunk/wp-content/themes/twentytwelve/editor-style.css

    r21617 r22154  
    290290-------------------------------------------------------------- */
    291291
    292 img {
     292img,
     293.editor-attachment {
    293294    border: 0;
    294295    border-radius: 3px;
  • trunk/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css

    r22120 r22154  
    143143
    144144/* WordPress TinyMCE Previews */
    145 div.wp-view-wrap,
    146 div.wp-view {
     145.wp-view-wrap {
    147146    position: relative;
    148147    display: inline-block;
    149148}
    150149
    151 div.wp-view-wrap img {
     150.wp-view-wrap * {
     151    font-family: sans-serif;
     152    font-weight: normal;
     153}
     154
     155.wp-view-wrap img {
    152156    display: block;
    153157    border: 0;
    154158    padding: 0;
    155159    margin: 0;
    156 }
    157 
    158 .spinner {
    159     background: #fff url("../../../../../../../wp-admin/images/wpspin_light.gif") no-repeat center center;
    160 }
    161 
    162 .close {
    163     display: none;
     160    border-radius: 0;
     161    box-shadow: none;
     162}
     163
     164.wp-view-wrap .overlay {
     165    opacity: 0;
     166    display: block;
     167    content: '';
    164168    position: absolute;
    165169    top: 0;
     170    left: 0;
    166171    right: 0;
    167     height: 26px;
    168     width: 26px;
    169     font-size: 26px;
     172    bottom: 0;
     173    box-shadow: inset 0 0 45px rgba( 0, 0, 0, 0.3 );
     174    /*box-shadow:
     175        inset 0 60px 30px -30px rgba( 0, 0, 0, 0.2 ),
     176        inset 0 -60px 30px -30px rgba( 0, 0, 0, 0.2 );*/
     177    overflow: hidden;
     178
     179    -webkit-transition: opacity 100ms ease-in-out;
     180    -moz-transition:    opacity 100ms ease-in-out;
     181    -ms-transition:     opacity 100ms ease-in-out;
     182    -o-transition:      opacity 100ms ease-in-out;
     183    transition:         opacity 100ms ease-in-out;
     184}
     185
     186.wp-view-wrap:hover .overlay {
     187    opacity: 1;
     188}
     189
     190.wp-view-wrap .spinner {
     191    background: #fff url("../../../../../../../wp-admin/images/wpspin_light.gif") no-repeat center center;
     192}
     193
     194.wp-view-wrap .button {
     195    position: absolute;
     196    height: 22px;
    170197    line-height: 22px;
     198    font-size: 14px;
    171199    text-align: center;
    172200    cursor: pointer;
    173201    color: #464646;
     202
     203    background: #f3f3f3;
     204    background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
     205    background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
     206    background-image:    -moz-linear-gradient(top, #fefefe, #f4f4f4);
     207    background-image:     -ms-linear-gradient(top, #fefefe, #f4f4f4);
     208    background-image:      -o-linear-gradient(top, #fefefe, #f4f4f4);
     209    background-image:   linear-gradient(to bottom, #fefefe, #f4f4f4);
     210
     211    box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
     212    border-radius: 2px;
     213}
     214
     215.wp-view-wrap .button:hover {
     216    box-shadow:
     217        0 0 0 1px rgba( 0, 0, 0, 0.6 ),
     218        0 0 10px rgba( 255, 255, 255, 0.4 );
    174219    background: #fff;
     220    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
     221    background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
     222    background-image:    -moz-linear-gradient(top, #fff, #f3f3f3);
     223    background-image:     -ms-linear-gradient(top, #fff, #f3f3f3);
     224    background-image:      -o-linear-gradient(top, #fff, #f3f3f3);
     225    background-image:   linear-gradient(to bottom, #fff, #f3f3f3);
     226    color: #333;
     227}
     228
     229.wp-view-wrap .close,
     230.wp-view-wrap .edit {
     231    display: none;
     232}
     233
     234.wp-view-wrap .close {
     235    top: 5px;
     236    right: 5px;
     237    width: 22px;
     238    font-size: 22px;
     239    line-height: 20px;
     240}
     241
     242.wp-view-wrap .edit {
     243    bottom: 5px;
     244    right: 5px;
     245    padding: 0 10px;
    175246}
    176247
    177248.editor-attachment:hover .close,
    178 .editor-gallery:hover .close {
     249.editor-gallery:hover .close,
     250.editor-gallery:hover .edit {
    179251    display: block;
    180252}
     
    184256    margin-top: 10px;
    185257    margin-right: 10px;
    186     padding: 4px;
    187     border: 1px solid #dfdfdf;
     258    overflow: hidden;
    188259}
    189260
     
    194265}
    195266
     267.editor-attachment img,
     268.editor-attachment .overlay {
     269    border-radius: inherit;
     270}
     271
     272.editor-attachment-preview {
     273    position: relative;
     274}
     275
    196276.editor-gallery {
     277    position: relative;
    197278    min-height: 150px;
    198279    min-width: 150px;
    199     margin: 1px;
    200     border: 4px solid #fff;
     280    margin: 5px 15px 15px 5px;
    201281    box-shadow:
    202         0 0 0 1px #ccc,
    203         5px 5px 0 0 #fff,
    204         5px 5px 0 1px #ccc,
    205         10px 10px 0 0 #fff,
    206         10px 10px 0 1px #ccc;
    207 }
    208 .editor-gallery .close {
    209     top: 1px;
    210     right: 1px;
    211 }
     282        0 0 0 4px #fff,
     283        0 0 0 5px #ccc,
     284        5px 5px 0 4px #fff,
     285        5px 5px 0 5px #ccc,
     286        10px 10px 0 4px #fff,
     287        10px 10px 0 5px #ccc;
     288}
  • trunk/wp-includes/media.php

    r22144 r22154  
    13631363
    13641364    <script type="text/html" id="tmpl-editor-attachment">
    1365         <% if ( url ) { %>
    1366             <img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false" />
    1367         <% } %>
    1368 
    1369         <% if ( uploading ) { %>
    1370             <div class="media-progress-bar"><div></div></div>
    1371         <% } %>
    1372         <div class="close">&times;</div>
     1365        <div class="editor-attachment-preview">
     1366            <% if ( url ) { %>
     1367                <img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false" />
     1368            <% } %>
     1369
     1370            <% if ( uploading ) { %>
     1371                <div class="media-progress-bar"><div></div></div>
     1372            <% } %>
     1373            <div class="overlay">
     1374                <div class="button close">&times;</div>
     1375            </div>
     1376        </div>
    13731377        <div class="describe"></div>
    13741378    </script>
     
    13781382            <img src="<%- url %>" draggable="false" />
    13791383        <% } %>
    1380         <div class="close">&times;</div>
     1384
     1385        <div class="overlay">
     1386            <div class="button close">&times;</div>
     1387            <div class="button edit"><?php _e('Edit'); ?></div>
     1388        </div>
    13811389    </script>
    13821390    <?php
Note: See TracChangeset for help on using the changeset viewer.