WordPress.org
Get WordPress

Make WordPress Core

Changeset 22586


Ignore:
Timestamp:
11/14/2012 11:21:59 PM (12 years ago)
Author:
azaozz
Message:

TinyMCE: fix styles, add 2x background icons and load buttons.css in the Edit Image modal, remove wp-view styles from content.css, add 2x icons for the popup buttons (for editing image and gallery), fixes #22447, see #21019

Location:
trunk/wp-includes/js/tinymce
Files:
4 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-includes/js/tinymce/plugins/wpeditimage/css/editimage.css

    r20597 r22586  
    66}
    77
    8 .submit input,
    9 .button,
    10 .button-primary,
    11 .button-secondary,
    12 .button-highlighted {
    13     font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
    14     text-decoration: none;
    15     font-size: 11px !important;
    16     line-height: 16px;
    17     padding: 2px 8px;
    18     cursor: pointer;
    19     border-width: 1px;
    20     border-style: solid;
    21     -webkit-border-radius: 11px;
    22     border-radius: 11px;
    23     -moz-box-sizing: content-box;
    24     -webkit-box-sizing: content-box;
    25     -khtml-box-sizing: content-box;
    26     box-sizing: content-box;
     8body {
     9    font-family: sans-serif;
     10    font-size: 12px;
     11    line-height: 1.4em;
    2712}
    2813
    … …  
    3419input,
    3520select {
    36     font: 13px Verdana, Arial, Helvetica, sans-serif;
     21    font: inherit;
    3722    margin: 1px;
    3823    padding: 3px;
    … …  
    4328    font-size: 12px;
    4429    font-style: italic;
    45 }
    46 
    47 body, td {
    48     font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
    4930}
    5031
    … …  
    312293    margin: 0 1em 0 0;
    313294}
     295
    314296.image-align-none-label {
    315297    background: url(../../../../../../wp-admin/images/align-none.png) no-repeat center left;
    … …  
    430412    text-align: left;
    431413}
     414
     415@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
     416    .image-align-none-label {
     417        background: url(../../../../../../wp-admin/images/align-none-2x.png) no-repeat center left;
     418        background-size: auto 15px;
     419    }
     420
     421    .image-align-left-label {
     422        background: url(../../../../../../wp-admin/images/align-left-2x.png) no-repeat center left;
     423        background-size: auto 15px;
     424    }
     425
     426    .image-align-center-label {
     427        background: url(../../../../../../wp-admin/images/align-center-2x.png) no-repeat center left;
     428        background-size: auto 15px;
     429    }
     430
     431    .image-align-right-label {
     432        background: url(../../../../../../wp-admin/images/align-right-2x.png) no-repeat center left;
     433        background-size: auto 15px;
     434    }
     435}

  • trunk/wp-includes/js/tinymce/plugins/wpeditimage/editimage.html

    r22550 r22586  
    66
    77<link rel="stylesheet" href="css/editimage.css?ver=357-20121111" type="text/css" media="all" />
     8<link rel="stylesheet" href="../../../../css/buttons.css?ver=357-20121111" type="text/css" media="all" />
    89<script type="text/javascript" src="js/editimage.min.js?ver=357-20121111"></script>
    910<script type="text/javascript" src="../../utils/form_utils.js?ver=357-20121111"></script>

  • trunk/wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js

    r22246 r22586  
    200200
    201201        _createButtons : function() {
    202             var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton;
     202            var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
     203
     204            isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
     205                ( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera
    203206
    204207            DOM.remove('wp_editbtns');
    … …  
    210213
    211214            editButton = DOM.add('wp_editbtns', 'img', {
    212                 src : t.url+'/img/image.png',
     215                src : isRetina ? t.url+'/img/image-2x.png' : t.url+'/img/image.png',
    213216                id : 'wp_editimgbtn',
    214217                width : '24',
    … …  
    222225
    223226            dellButton = DOM.add('wp_editbtns', 'img', {
    224                 src : t.url+'/img/delete.png',
     227                src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png',
    225228                id : 'wp_delimgbtn',
    226229                width : '24',

  • trunk/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin_src.js

    r22568 r22586  
    7070
    7171        _createButtons : function() {
    72             var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton;
     72            var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
     73
     74            isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
     75                ( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera
    7376
    7477            DOM.remove('wp_gallerybtns');
    … …  
    8083
    8184            editButton = DOM.add('wp_gallerybtns', 'img', {
    82                 src : t.url+'/img/edit.png',
     85                src : isRetina ? t.url+'/img/edit-2x.png' : t.url+'/img/edit.png',
    8386                id : 'wp_editgallery',
    8487                width : '24',
    … …  
    9497
    9598            dellButton = DOM.add('wp_gallerybtns', 'img', {
    96                 src : t.url+'/img/delete.png',
     99                src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png',
    97100                id : 'wp_delgallery',
    98101                width : '24',

  • trunk/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css

    r22221 r22586  
    141141    height: 250px;
    142142}
    143 
    144 /* WordPress TinyMCE Previews */
    145 .wp-view-wrap {
    146     position: relative;
    147     display: inline-block;
    148 }
    149 
    150 .wp-view-wrap * {
    151     font-family: sans-serif;
    152     font-weight: normal;
    153 }
    154 
    155 .wp-view-wrap img {
    156     display: block;
    157     border: 0;
    158     padding: 0;
    159     margin: 0;
    160     border-radius: 0;
    161     box-shadow: none;
    162 }
    163 
    164 .wp-view-wrap.alignnone {
    165     display: block;
    166 }
    167 
    168 .wp-view-wrap.aligncenter {
    169     display: block;
    170     text-align: center;
    171 }
    172 
    173 .wp-view-wrap.alignleft {
    174     float: left;
    175 }
    176 
    177 .wp-view-wrap.alignright {
    178     float: right;
    179 }
    180 
    181 .wp-view-wrap .overlay {
    182     opacity: 0;
    183     display: block;
    184     content: '';
    185     position: absolute;
    186     top: 0;
    187     left: 0;
    188     right: 0;
    189     bottom: 0;
    190     box-shadow: inset 0 0 45px rgba( 0, 0, 0, 0.3 );
    191     /*box-shadow:
    192         inset 0 60px 30px -30px rgba( 0, 0, 0, 0.2 ),
    193         inset 0 -60px 30px -30px rgba( 0, 0, 0, 0.2 );*/
    194     overflow: hidden;
    195 
    196     -webkit-transition: opacity 100ms ease-in-out, background 150ms;
    197     -moz-transition:    opacity 100ms ease-in-out, background 150ms;
    198     -ms-transition:     opacity 100ms ease-in-out, background 150ms;
    199     -o-transition:      opacity 100ms ease-in-out, background 150ms;
    200     transition:         opacity 100ms ease-in-out, background 150ms;
    201 }
    202 
    203 .wp-view-wrap:hover .overlay,
    204 .wp-view-wrap.selected .overlay {
    205     opacity: 1;
    206 }
    207 .wp-view-wrap.selected .overlay {
    208     background: rgba( 0, 86, 132, 0.3 );
    209 }
    210 
    211 .wp-view-wrap .spinner {
    212     background: #fff url("../../../../../../../wp-admin/images/wpspin_light.gif") no-repeat center center;
    213 }
    214 
    215 .wp-view-wrap .button {
    216     position: absolute;
    217     height: 22px;
    218     line-height: 22px;
    219     font-size: 14px;
    220     text-align: center;
    221     cursor: pointer;
    222     color: #464646;
    223 
    224     background: #f3f3f3;
    225     background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
    226     background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
    227     background-image:    -moz-linear-gradient(top, #fefefe, #f4f4f4);
    228     background-image:     -ms-linear-gradient(top, #fefefe, #f4f4f4);
    229     background-image:      -o-linear-gradient(top, #fefefe, #f4f4f4);
    230     background-image:   linear-gradient(to bottom, #fefefe, #f4f4f4);
    231 
    232     box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
    233     border-radius: 2px;
    234 }
    235 
    236 .wp-view-wrap .button:hover {
    237     box-shadow:
    238         0 0 0 1px rgba( 0, 0, 0, 0.6 ),
    239         0 0 10px rgba( 255, 255, 255, 0.4 );
    240     background: #fff;
    241     background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
    242     background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
    243     background-image:    -moz-linear-gradient(top, #fff, #f3f3f3);
    244     background-image:     -ms-linear-gradient(top, #fff, #f3f3f3);
    245     background-image:      -o-linear-gradient(top, #fff, #f3f3f3);
    246     background-image:   linear-gradient(to bottom, #fff, #f3f3f3);
    247     color: #333;
    248 }
    249 
    250 .wp-view-wrap .close {
    251     top: 5px;
    252     right: 5px;
    253     width: 22px;
    254     font-size: 22px;
    255     line-height: 20px;
    256 }
    257 
    258 .wp-view-wrap .edit {
    259     bottom: 5px;
    260     right: 5px;
    261     padding: 0 10px;
    262 }
    263 
    264 .editor-attachment {
    265     display: inline-block;
    266     position: relative;
    267     margin-top: 10px;
    268     margin-right: 10px;
    269     overflow: hidden;
    270 }
    271 
    272 .editor-attachment,
    273 .editor-attachment img {
    274     min-height: 100px;
    275     min-width: 100px;
    276 }
    277 
    278 .editor-attachment img,
    279 .editor-attachment .overlay {
    280     border-radius: inherit;
    281 }
    282 
    283 .editor-attachment-preview {
    284     position: relative;
    285 }
    286 
    287 .wp-view-type-gallery {
    288     display: block;
    289 }
    290 
    291 .editor-gallery {
    292     display: inline-block;
    293     position: relative;
    294     min-height: 150px;
    295     min-width: 150px;
    296     margin: 5px 15px 15px 5px;
    297     box-shadow:
    298         0 0 0 4px #fff,
    299         0 0 0 5px #ccc,
    300         5px 5px 0 4px #fff,
    301         5px 5px 0 5px #ccc,
    302         10px 10px 0 4px #fff,
    303         10px 10px 0 5px #ccc;
    304 }
Note: See TracChangeset for help on using the changeset viewer.