Edit Image modal:

- Bring back some of the advanced settings.
- Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit.
- The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview."
- Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited.
(updates two PNGs from precommit)
Props gcorne, see #27366

git-svn-id: https://develop.svn.wordpress.org/trunk@27797 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/css/media-views.css

@@ -1462,6 +1462,10 @@
 	padding: 16px;
 }
 
+.media-frame .imgedit-wrap table {
+	width: 100%;
+}
+
 .media-frame .imgedit-wrap table td {
 	vertical-align: top;
 	padding-top: 0;
@@ -1513,10 +1517,49 @@
 	overflow: auto;
 }
 
+.image-details .media-modal {
+	left: 140px;
+	right: 140px;
+}
+
+.image-details .media-frame-menu {
+	display: none;
+}
+
+.image-details .media-frame-title,
+.image-details .media-frame-content,
+.image-details .media-frame-router {
+	left: 0;
+}
+
 .image-details .embed-media-settings {
 	top: 0;
+	overflow: visible;
 }
 
+.image-details .column-settings {
+	width: 44%;
+	float: left;
+	margin-right: 20px;
+}
+
+.image-details .column-image {
+	width: 53%;
+	float: left;
+}
+
+.image-details .column-image:after {
+    content: '';
+	display: table;
+    clear: both;
+}
+
+.image-details .image img {
+	max-width: 100%;
+	max-height: 500px;
+}
+
+
 .media-embed .thumbnail {
 	max-width: 100%;
 	max-height: 200px;
@@ -1529,10 +1572,6 @@
 	display: block;
 }
 
-.media-embed .edit-attachment {
-	margin-left: 10px;
-}
-
 .media-embed .thumbnail:after {
 	content: '';
 	display: block;
@@ -1548,13 +1587,34 @@
 
 .media-embed .setting {
 	width: 100%;
-	margin-top: 10px;
+	margin: 10px 0;
 	float: left;
 	display: block;
 	clear: both;
 }
 
-.media-embed .setting .hidden {
+.image-details .setting {
+	float: none;
+}
+
+.image-details .actions {
+	margin: 10px 0;
+}
+
+.media-embed .setting input[type="text"],
+.media-embed .setting textarea {
+	display: block;
+	width: 100%;
+	max-width: 400px;
+	margin: 1px 0;
+}
+
+.image-details .setting input[type="text"],
+.image-details .setting textarea {
+	max-width: inherit;
+}
+
+.media-embed .setting input.hidden {
 	display: none;
 }
 
@@ -1570,12 +1630,19 @@
 	margin: 2px 0;
 }
 
-.media-embed .setting input[type="text"],
-.media-embed .setting textarea {
-	display: block;
-	width: 100%;
-	max-width: 400px;
-	margin: 1px 0;
+.media-embed-sidebar {
+	position: absolute;
+	top: 0;
+	left: 440px;
+}
+
+.advanced,
+.link-settings {
+	margin-top: 10px;
+}
+
+.advanced .hidden {
+	display: none;
 }
 
 /* Drag & drop on the editor upload */
@@ -1781,6 +1848,11 @@
 		top: 40%;
 	}
 
+	.image-details .media-modal {
+		left: 30px;
+		right: 30px;
+	}
+
 	.media-selection {
 		min-width: 120px;
 	}
@@ -1849,6 +1921,12 @@
 		display: none;
 	}
 
+	.image-details .media-frame-title {
+		display: block;
+		top: 0;
+		font-size: 14px;
+	}
+
 	.media-frame-toolbar {
 		position: absolute;
 		bottom: 0px;
@@ -1905,6 +1983,10 @@
 		top: 118px;
 	}
 
+	.image-details .media-frame.hide-router .media-frame-content {
+		top: 40px;
+	}
+
 	.media-frame .attachments-browser {
 		padding-bottom: 300px;
 	}
@@ -1939,7 +2021,8 @@
 	}
 
 	/* Full-bleed modal */
-	.media-modal {
+	.media-modal,
+	.image-details .media-modal {
 		position: fixed;
 		top: 0;
 		left: 0;
@@ -1975,6 +2058,12 @@
 		padding-bottom: 52px;
 	}
 
+	.image-details .column-settings,
+	.image-details .column-image {
+		float: none;
+		width: 100%;
+	}
+
 	/* Gallery */
 	.media-frame.hide-router .media-frame-content {
 		top: 73px;