Make WordPress Core

Changeset 27578


Ignore:
Timestamp:
03/18/2014 12:19:17 AM (10 years ago)
Author:
azaozz
Message:

TinyMCE:

  • Update the styling of the image caption and gallery toolbars.
  • Fix issue where the hidden clipboard div in wpView.
  • Switch to using the pencil dashicon for Edit.
  • Add max-width: 100%; to images in the gallery preview and adjust column widths.

Props cramdesign, mattheu, gcorne, melchoyce, see #27320, fixes #27376, fixes #27354

Location:
trunk/src/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

    r27451 r27578  
    349349        position = dom.getPos( node, editor.getBody() );
    350350
    351         toolbarHtml = '<div class="wrapper" data-mce-bogus="1">' +
    352             '<div class="dashicons dashicons-format-image edit" data-mce-bogus="1"></div> ' +
    353             '<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div></div>';
     351        toolbarHtml = '<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div> ' +
     352            '<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div>';
    354353
    355354        toolbar = dom.create( 'div', {
     
    363362        dom.setStyles( toolbar, {
    364363            top: position.y,
    365             left: position.x,
    366             width: node.width
     364            left: position.x
    367365        });
    368366    }
  • trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

    r27534 r27578  
    161161#wp-image-toolbar {
    162162    position: absolute;
    163 }
    164 
    165 #wp-image-toolbar .wrapper {
    166     position: relative;
    167     height: 33px;
    168     background-color: #333; /* old IE */
    169     background-color: rgba(0,0,0,0.3);
     163    background-color: #333;
    170164}
    171165
    172166#wp-image-toolbar .dashicons {
    173     position: absolute;
    174167    color: white;
    175     width: 36px;
    176     height: 32px;
    177     line-height: 32px;
    178168    cursor: pointer;
    179 }
    180 
    181 #wp-image-toolbar div.dashicons-no-alt {
    182     top: 0;
    183     right: 0;
    184 }
    185 
    186 #wp-image-toolbar div.dashicons-format-image {
    187     top: 0;
    188     left: 0;
    189169}
    190170
     
    240220    overflow: hidden;
    241221    outline: 0;
     222    width: 100%;
    242223}
    243224
     
    247228.wpview-type-gallery {
    248229    position: relative;
    249     padding: 0 0 12px;
    250230    margin-bottom: 16px;
    251231    cursor: pointer;
     
    254234 .wpview-type-gallery:after {
    255235    content: '';
    256     display: block;
    257     height: 0;
     236    display: table;
    258237    clear: both;
    259     visibility: hidden;
    260238}
    261239
    262240 .wpview-type-gallery.selected {
    263     background-color: #efefef;
     241    background-color: #f2f8ff;
     242    outline: 1px solid #777;
    264243}
    265244
     
    270249    background-color: #333;
    271250    color: white;
    272     padding: 4px;
    273251    display: none;
     252}
     253
     254.wpview-type-gallery .toolbar div,
     255#wp-image-toolbar div {
     256    margin: 5px;
    274257}
    275258
     
    292275.gallery {
    293276    margin: auto;
    294     line-height: 1;
     277    padding: 0.5em 0;
     278    line-height: 1;
     279    margin-left: -0.5em;
     280    margin-right: -0.5em;
     281    overflow-x: hidden;
    295282}
    296283
    297284.gallery .gallery-item {
    298285    float: left;
    299     margin: 10px 0 0 0;
     286    margin: 0;
    300287    text-align: center;
     288    padding: 0.5em;
     289    -webkit-box-sizing: border-box;
     290    -moz-box-sizing: border-box;
     291    box-sizing: border-box;
    301292}
    302293
     
    306297}
    307298
     299.gallery .gallery-caption {
     300    font-size: 13px;
     301    margin: 4px 0;
     302}
     303
    308304.gallery-columns-1 .gallery-item {
    309     width: 99%;
     305    width: 100%;
    310306}
    311307
    312308.gallery-columns-2 .gallery-item {
    313     width: 49.5%;
     309    width: 50%;
    314310}
    315311
    316312.gallery-columns-3 .gallery-item {
    317     width: 33%;
     313    width: 33.333%;
    318314}
    319315
    320316.gallery-columns-4 .gallery-item {
    321     width: 24.75%;
     317    width: 25%;
    322318}
    323319
    324320.gallery-columns-5 .gallery-item {
    325     width: 19.825%;
     321    width: 20%;
    326322}
    327323
    328324.gallery-columns-6 .gallery-item {
    329     width: 16%;
     325    width: 16.667%;
    330326}
    331327
    332328.gallery-columns-7 .gallery-item {
    333     width: 14%;
     329    width: 14.285%;
    334330}
    335331
    336332.gallery-columns-8 .gallery-item {
    337     width: 12%;
     333    width: 12.5%;
    338334}
    339335
    340336.gallery-columns-9 .gallery-item {
    341     width: 11%;
     337    width: 11.111%;
    342338}
    343339
    344340.gallery img {
    345341    border: 1px solid #cfcfcf;
     342    max-width: 100%;
     343    height: auto;
    346344}
    347345
  • trunk/src/wp-includes/media-template.php

    r27533 r27578  
    906906    <script type="text/html" id="tmpl-editor-gallery">
    907907        <div class="toolbar">
    908             <div class="dashicons dashicons-format-gallery edit"></div>
     908            <div class="dashicons dashicons-edit edit"></div>
    909909            <div class="dashicons dashicons-no-alt remove"></div>
    910910        </div>
Note: See TracChangeset for help on using the changeset viewer.