Edit Image modal:
- Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz
@@ -270,7 +270,8 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media-sidebar h3 {
|
||||
.media-sidebar h3,
|
||||
.image-details h3 {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
@@ -1603,23 +1604,34 @@
|
||||
.image-details .embed-media-settings {
|
||||
top: 0;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.image-details .column-settings {
|
||||
width: 44%;
|
||||
float: right;
|
||||
margin-left: 20px;
|
||||
background: #f3f3f3;
|
||||
border-left: 1px solid #ddd;
|
||||
min-height: 100%;
|
||||
width: 52%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.image-details .column-settings h3 {
|
||||
margin: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.image-details .column-image {
|
||||
width: 53%;
|
||||
float: right;
|
||||
width: 48%;
|
||||
position: absolute;
|
||||
right: 52%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.image-details .column-image:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
.image-details .image {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.image-details .image img {
|
||||
@@ -1627,6 +1639,29 @@
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.image-details .advanced-toggle {
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
margin: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-details .advanced-toggle::after {
|
||||
font: normal 20px/1 'dashicons';
|
||||
speak: none;
|
||||
vertical-align: top;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: '\f140';
|
||||
display: inline-block;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.image-details .advanced-visible .advanced-toggle::after {
|
||||
content: '\f142';
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.media-embed .thumbnail {
|
||||
max-width: 100%;
|
||||
@@ -1661,14 +1696,19 @@
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.image-details .setting {
|
||||
.image-details .embed-media-settings .setting {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.image-details .actions {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.image-details .hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.media-embed .setting input[type="text"],
|
||||
.media-embed .setting textarea {
|
||||
display: block;
|
||||
@@ -1677,9 +1717,20 @@
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
.image-details .setting input[type="text"],
|
||||
.image-details .setting textarea {
|
||||
.image-details .embed-media-settings .setting input[type="text"],
|
||||
.image-details .embed-media-settings .setting textarea {
|
||||
max-width: inherit;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting input.link-to-custom,
|
||||
.image-details .embed-media-settings .link-target {
|
||||
margin-right: 27%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .link-target {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.media-embed .setting input.hidden {
|
||||
@@ -1694,6 +1745,14 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting span {
|
||||
float: right;
|
||||
width: 25%;
|
||||
text-align: left;
|
||||
margin: 8px 1% 0 1%;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.media-embed .setting .button-group {
|
||||
margin: 2px 0;
|
||||
}
|
||||
@@ -1709,10 +1768,6 @@
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.advanced .hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Drag & drop on the editor upload */
|
||||
#wp-fullscreen-body .uploader-editor,
|
||||
.wp-editor-wrap .uploader-editor {
|
||||
@@ -1930,6 +1985,28 @@
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting span {
|
||||
float: none;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting input.link-to-custom,
|
||||
.image-details .embed-media-settings .setting input[type="text"],
|
||||
.image-details .embed-media-settings .setting textarea {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.image-details .link-target {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media-selection {
|
||||
min-width: 120px;
|
||||
}
|
||||
@@ -2137,10 +2214,14 @@
|
||||
|
||||
.image-details .column-settings,
|
||||
.image-details .column-image {
|
||||
float: none;
|
||||
position: relative;
|
||||
padding: 10px 0 20px 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* Gallery */
|
||||
.media-frame.hide-router .media-frame-content {
|
||||
top: 73px;
|
||||
|
||||
2
wp-includes/css/media-views-rtl.min.css
vendored
2
wp-includes/css/media-views-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -270,7 +270,8 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media-sidebar h3 {
|
||||
.media-sidebar h3,
|
||||
.image-details h3 {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
@@ -1603,23 +1604,34 @@
|
||||
.image-details .embed-media-settings {
|
||||
top: 0;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.image-details .column-settings {
|
||||
width: 44%;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
background: #f3f3f3;
|
||||
border-right: 1px solid #ddd;
|
||||
min-height: 100%;
|
||||
width: 52%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.image-details .column-settings h3 {
|
||||
margin: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.image-details .column-image {
|
||||
width: 53%;
|
||||
float: left;
|
||||
width: 48%;
|
||||
position: absolute;
|
||||
left: 52%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.image-details .column-image:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
.image-details .image {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.image-details .image img {
|
||||
@@ -1627,6 +1639,29 @@
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.image-details .advanced-toggle {
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
margin: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-details .advanced-toggle::after {
|
||||
font: normal 20px/1 'dashicons';
|
||||
speak: none;
|
||||
vertical-align: top;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: '\f140';
|
||||
display: inline-block;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.image-details .advanced-visible .advanced-toggle::after {
|
||||
content: '\f142';
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.media-embed .thumbnail {
|
||||
max-width: 100%;
|
||||
@@ -1661,14 +1696,19 @@
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.image-details .setting {
|
||||
.image-details .embed-media-settings .setting {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.image-details .actions {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.image-details .hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.media-embed .setting input[type="text"],
|
||||
.media-embed .setting textarea {
|
||||
display: block;
|
||||
@@ -1677,9 +1717,20 @@
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
.image-details .setting input[type="text"],
|
||||
.image-details .setting textarea {
|
||||
.image-details .embed-media-settings .setting input[type="text"],
|
||||
.image-details .embed-media-settings .setting textarea {
|
||||
max-width: inherit;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting input.link-to-custom,
|
||||
.image-details .embed-media-settings .link-target {
|
||||
margin-left: 27%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .link-target {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.media-embed .setting input.hidden {
|
||||
@@ -1694,6 +1745,14 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting span {
|
||||
float: left;
|
||||
width: 25%;
|
||||
text-align: right;
|
||||
margin: 8px 1% 0 1%;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.media-embed .setting .button-group {
|
||||
margin: 2px 0;
|
||||
}
|
||||
@@ -1709,10 +1768,6 @@
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.advanced .hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Drag & drop on the editor upload */
|
||||
#wp-fullscreen-body .uploader-editor,
|
||||
.wp-editor-wrap .uploader-editor {
|
||||
@@ -1930,6 +1985,28 @@
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting span {
|
||||
float: none;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting input.link-to-custom,
|
||||
.image-details .embed-media-settings .setting input[type="text"],
|
||||
.image-details .embed-media-settings .setting textarea {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.image-details .link-target {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media-selection {
|
||||
min-width: 120px;
|
||||
}
|
||||
@@ -2137,10 +2214,14 @@
|
||||
|
||||
.image-details .column-settings,
|
||||
.image-details .column-image {
|
||||
float: none;
|
||||
position: relative;
|
||||
padding: 10px 0 20px 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* Gallery */
|
||||
.media-frame.hide-router .media-frame-content {
|
||||
top: 73px;
|
||||
|
||||
2
wp-includes/css/media-views.min.css
vendored
2
wp-includes/css/media-views.min.css
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user