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 git-svn-id: https://develop.svn.wordpress.org/trunk@27578 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz
parent
f36f5c5cdc
commit
20eabd30ef
@ -348,9 +348,8 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
|
||||
dom.setAttrib( node, 'data-wp-imgselect', 1 );
|
||||
position = dom.getPos( node, editor.getBody() );
|
||||
|
||||
toolbarHtml = '<div class="wrapper" data-mce-bogus="1">' +
|
||||
'<div class="dashicons dashicons-format-image edit" data-mce-bogus="1"></div> ' +
|
||||
'<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div></div>';
|
||||
toolbarHtml = '<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div> ' +
|
||||
'<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div>';
|
||||
|
||||
toolbar = dom.create( 'div', {
|
||||
'id': 'wp-image-toolbar',
|
||||
@ -362,8 +361,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
|
||||
|
||||
dom.setStyles( toolbar, {
|
||||
top: position.y,
|
||||
left: position.x,
|
||||
width: node.width
|
||||
left: position.x
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -160,34 +160,14 @@ img::selection {
|
||||
|
||||
#wp-image-toolbar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#wp-image-toolbar .wrapper {
|
||||
position: relative;
|
||||
height: 33px;
|
||||
background-color: #333; /* old IE */
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
#wp-image-toolbar .dashicons {
|
||||
position: absolute;
|
||||
color: white;
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#wp-image-toolbar div.dashicons-no-alt {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#wp-image-toolbar div.dashicons-format-image {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Image resize handles */
|
||||
.mce-content-body div.mce-resizehandle {
|
||||
border-color: #777;
|
||||
@ -239,6 +219,7 @@ embed {
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
overflow: hidden;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -246,21 +227,19 @@ embed {
|
||||
*/
|
||||
.wpview-type-gallery {
|
||||
position: relative;
|
||||
padding: 0 0 12px;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wpview-type-gallery:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
display: table;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.wpview-type-gallery.selected {
|
||||
background-color: #efefef;
|
||||
background-color: #f2f8ff;
|
||||
outline: 1px solid #777;
|
||||
}
|
||||
|
||||
.wpview-type-gallery .toolbar {
|
||||
@ -269,10 +248,14 @@ embed {
|
||||
left: 0;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 4px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wpview-type-gallery .toolbar div,
|
||||
#wp-image-toolbar div {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.wpview-type-gallery.selected .toolbar {
|
||||
display: block;
|
||||
}
|
||||
@ -291,13 +274,21 @@ embed {
|
||||
|
||||
.gallery {
|
||||
margin: auto;
|
||||
line-height: 1;
|
||||
padding: 0.5em 0;
|
||||
line-height: 1;
|
||||
margin-left: -0.5em;
|
||||
margin-right: -0.5em;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.gallery .gallery-item {
|
||||
float: left;
|
||||
margin: 10px 0 0 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
padding: 0.5em;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gallery .gallery-caption,
|
||||
@ -305,44 +296,51 @@ embed {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gallery .gallery-caption {
|
||||
font-size: 13px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.gallery-columns-1 .gallery-item {
|
||||
width: 99%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-columns-2 .gallery-item {
|
||||
width: 49.5%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.gallery-columns-3 .gallery-item {
|
||||
width: 33%;
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.gallery-columns-4 .gallery-item {
|
||||
width: 24.75%;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.gallery-columns-5 .gallery-item {
|
||||
width: 19.825%;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.gallery-columns-6 .gallery-item {
|
||||
width: 16%;
|
||||
width: 16.667%;
|
||||
}
|
||||
|
||||
.gallery-columns-7 .gallery-item {
|
||||
width: 14%;
|
||||
width: 14.285%;
|
||||
}
|
||||
|
||||
.gallery-columns-8 .gallery-item {
|
||||
width: 12%;
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.gallery-columns-9 .gallery-item {
|
||||
width: 11%;
|
||||
width: 11.111%;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
border: 1px solid #cfcfcf;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img.wp-oembed {
|
||||
|
||||
@ -905,7 +905,7 @@ function wp_print_media_templates() {
|
||||
|
||||
<script type="text/html" id="tmpl-editor-gallery">
|
||||
<div class="toolbar">
|
||||
<div class="dashicons dashicons-format-gallery edit"></div>
|
||||
<div class="dashicons dashicons-edit edit"></div>
|
||||
<div class="dashicons dashicons-no-alt remove"></div>
|
||||
</div>
|
||||
<div class="gallery gallery-columns-{{{ data.columns }}}">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user