IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TinyMCE: enhance the inline toolbar for images:

Browse Source 
- Add alignment (left, center, right, none) buttons.
- Position the menu above the image when possible, except on iOS.
- Fix selecting images on iOS.
First run, part props avryl. See #30147.
Built from https://develop.svn.wordpress.org/trunk@30318


git-svn-id: http://core.svn.wordpress.org/trunk@30317 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz
2014-11-13 00:56:22 +00:00
parent 07eba31e0b
commit 69105d29e8
9 changed files with 559 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
wp-includes/css/editor-rtl.css
View File

@@ -154,6 +154,106 @@ div.mce-toolbar-grp {
position: relative;
}
div.mce-inline-toolbar-grp {
border: 1px solid #aaa;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 )
box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 )
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 8px;
position: absolute;
opacity: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.mce-wp-image-toolbar > div.mce-stack-layout {
padding: 1px;
}
div.mce-inline-toolbar-grp.mce-arrow-up {
margin-bottom: 0;
margin-top: 8px;
}
div.mce-inline-toolbar-grp.mce-inline-toolbar-grp-active {
-webkit-transition:
top 0.1s ease-out,
right 0.1s ease-out,
opacity 0.1s ease-in-out;
transition:
top 0.1s ease-out,
right 0.1s ease-out,
opacity 0.1s ease-in-out;
opacity: 1;
}
div.mce-inline-toolbar-grp:before,
div.mce-inline-toolbar-grp:after {
position: absolute;
right: 50%;
display: block;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
content: '';
}
div.mce-inline-toolbar-grp.mce-arrow-up:before {
top: -18px;
border-bottom-color: #aaa;
border-width: 9px;
margin-right: -9px;
}
div.mce-inline-toolbar-grp.mce-arrow-down:before {
bottom: -18px;
border-top-color: #aaa;
border-width: 9px;
margin-right: -9px;
}
div.mce-inline-toolbar-grp.mce-arrow-up:after {
top: -16px;
border-bottom-color: #f5f5f5;
border-width: 8px;
margin-right: -8px;
}
div.mce-inline-toolbar-grp.mce-arrow-down:after {
bottom: -16px;
border-top-color: #f5f5f5;
border-width: 8px;
margin-right: -8px;
}
div.mce-inline-toolbar-grp.mce-arrow-left:before,
div.mce-inline-toolbar-grp.mce-arrow-left:after {
right: 20px;
}
div.mce-inline-toolbar-grp.mce-arrow-right:before,
div.mce-inline-toolbar-grp.mce-arrow-right:after {
left: 11px;
right: auto;
}
div.mce-inline-toolbar-grp.mce-arrow-full {
left: 0;
}
div.mce-inline-toolbar-grp.mce-arrow-full > div {
width: 100%;
overflow-x: auto;
}
div.mce-toolbar-grp > div {
padding: 3px;
}
@@ -621,6 +721,7 @@ i.mce-i-wp-media-library,
i.mce-i-ltr,
i.mce-i-wp_page,
i.mce-i-hr,
i.mce-i-dashicon,
.mce-close {
font: normal 20px/1 'dashicons';
padding: 0;

2
wp-includes/css/editor-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

101
wp-includes/css/editor.css
View File

@@ -154,6 +154,106 @@ div.mce-toolbar-grp {
position: relative;
}
div.mce-inline-toolbar-grp {
border: 1px solid #aaa;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 )
box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 )
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 8px;
position: absolute;
opacity: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.mce-wp-image-toolbar > div.mce-stack-layout {
padding: 1px;
}
div.mce-inline-toolbar-grp.mce-arrow-up {
margin-bottom: 0;
margin-top: 8px;
}
div.mce-inline-toolbar-grp.mce-inline-toolbar-grp-active {
-webkit-transition:
top 0.1s ease-out,
left 0.1s ease-out,
opacity 0.1s ease-in-out;
transition:
top 0.1s ease-out,
left 0.1s ease-out,
opacity 0.1s ease-in-out;
opacity: 1;
}
div.mce-inline-toolbar-grp:before,
div.mce-inline-toolbar-grp:after {
position: absolute;
left: 50%;
display: block;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
content: '';
}
div.mce-inline-toolbar-grp.mce-arrow-up:before {
top: -18px;
border-bottom-color: #aaa;
border-width: 9px;
margin-left: -9px;
}
div.mce-inline-toolbar-grp.mce-arrow-down:before {
bottom: -18px;
border-top-color: #aaa;
border-width: 9px;
margin-left: -9px;
}
div.mce-inline-toolbar-grp.mce-arrow-up:after {
top: -16px;
border-bottom-color: #f5f5f5;
border-width: 8px;
margin-left: -8px;
}
div.mce-inline-toolbar-grp.mce-arrow-down:after {
bottom: -16px;
border-top-color: #f5f5f5;
border-width: 8px;
margin-left: -8px;
}
div.mce-inline-toolbar-grp.mce-arrow-left:before,
div.mce-inline-toolbar-grp.mce-arrow-left:after {
left: 20px;
}
div.mce-inline-toolbar-grp.mce-arrow-right:before,
div.mce-inline-toolbar-grp.mce-arrow-right:after {
right: 11px;
left: auto;
}
div.mce-inline-toolbar-grp.mce-arrow-full {
right: 0;
}
div.mce-inline-toolbar-grp.mce-arrow-full > div {
width: 100%;
overflow-x: auto;
}
div.mce-toolbar-grp > div {
padding: 3px;
}
@@ -621,6 +721,7 @@ i.mce-i-wp-media-library,
i.mce-i-ltr,
i.mce-i-wp_page,
i.mce-i-hr,
i.mce-i-dashicon,
.mce-close {
font: normal 20px/1 'dashicons';
padding: 0;

2
wp-includes/css/editor.min.css vendored
View File

File diff suppressed because one or more lines are too long