Revert styling changes to the Attachment Details modal from [29289]. fixes #28844.

Built from https://develop.svn.wordpress.org/trunk@29436


git-svn-id: http://core.svn.wordpress.org/trunk@29214 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -284,8 +284,7 @@
 }
 
 .media-sidebar h3,
-.image-details h3,
+.image-details h3 {
-.attachment-info h3 {
 	position: relative;
 	font-weight: bold;
 	text-transform: uppercase;
@@ -1485,9 +1484,8 @@
 	z-index: 10;
 }
 
-.attachment-details .settings-save-status .spinner,
+.attachment-details .settings-save-status .spinner {
-.attachment-details .settings-save-status .saved {
+	margin: 0 5px 0;
-	margin: 0 5px -20px;
 }
 
 .attachment-details .settings-save-status .saved {
@@ -1510,29 +1508,6 @@
 	padding-bottom: 11px;
 }
 
-.attachment-info .details {
-	clear: left;
-}
-
-.attachment-info h3:first-child {
-	margin-top: 0;
-}
-
-.attachment-info .details .setting .name {
-	float: right;
-	margin: 8px 1% 0 1% !important;
-	padding: 0;
-	line-height: 1.1;
-}
-
-.attachment-info .details .url.setting .name {
-	padding-top: 3px;
-}
-
-.attachment-info .setting .value {
-	font-style: italic;
-}
-
 .attachment-info .filename {
 	font-weight: bold;
 	color: #464646;
@@ -1595,29 +1570,6 @@
 	max-width: 100%;
 }
 
-.attachment-info .advanced-toggle {
-	color: #666;
-	text-decoration: none;
-	display: block;
-}
-.attachment-info .advanced-toggle:hover {
-	color: #d54e21;
-}
-
-.attachment-info .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;
-}
-.attachment-info .advanced-visible .advanced-toggle:after {
-	content: '\f142';
-}
-
 .attachment-info .edit-attachment,
 .attachment-info .refresh-attachment,
 .attachment-info .delete-attachment,

wp-includes/css/media-views.css

@@ -284,8 +284,7 @@
 }
 
 .media-sidebar h3,
-.image-details h3,
+.image-details h3 {
-.attachment-info h3 {
 	position: relative;
 	font-weight: bold;
 	text-transform: uppercase;
@@ -1485,9 +1484,8 @@
 	z-index: 10;
 }
 
-.attachment-details .settings-save-status .spinner,
+.attachment-details .settings-save-status .spinner {
-.attachment-details .settings-save-status .saved {
+	margin: 0 5px 0;
-	margin: 0 5px -20px;
 }
 
 .attachment-details .settings-save-status .saved {
@@ -1510,29 +1508,6 @@
 	padding-bottom: 11px;
 }
 
-.attachment-info .details {
-	clear: right;
-}
-
-.attachment-info h3:first-child {
-	margin-top: 0;
-}
-
-.attachment-info .details .setting .name {
-	float: left;
-	margin: 8px 1% 0 1% !important;
-	padding: 0;
-	line-height: 1.1;
-}
-
-.attachment-info .details .url.setting .name {
-	padding-top: 3px;
-}
-
-.attachment-info .setting .value {
-	font-style: italic;
-}
-
 .attachment-info .filename {
 	font-weight: bold;
 	color: #464646;
@@ -1595,29 +1570,6 @@
 	max-width: 100%;
 }
 
-.attachment-info .advanced-toggle {
-	color: #666;
-	text-decoration: none;
-	display: block;
-}
-.attachment-info .advanced-toggle:hover {
-	color: #d54e21;
-}
-
-.attachment-info .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;
-}
-.attachment-info .advanced-visible .advanced-toggle:after {
-	content: '\f142';
-}
-
 .attachment-info .edit-attachment,
 .attachment-info .refresh-attachment,
 .attachment-info .delete-attachment,

wp-includes/js/media-views.js

@@ -6319,7 +6319,6 @@
 			'click .trash-attachment':        'trashAttachment',
 			'click .edit-attachment':         'editAttachment',
 			'click .refresh-attachment':      'refreshAttachment',
-			'click .advanced-toggle':         'onToggleAdvanced',
 			'keydown':                        'toggleSelectionHandler'
 		},
 
@@ -6332,17 +6331,6 @@
 			 */
 			media.view.Attachment.prototype.initialize.apply( this, arguments );
 		},
-
-		/**
-		 * Render view, then check if the advanced details should be shown.
-		 */
-		render: function(){
-			media.view.Attachment.prototype.render.apply( this, arguments );
-
-			if ( 'show' === getUserSetting( 'advImgDetails' ) ) {
-				this.toggleAdvanced( true );
-			}
-		},
 		/**
 		 * @param {Object} event
 		 */
@@ -6399,27 +6387,8 @@
 				$('.attachments-browser .details').focus();
 				return false;
 			}
-		},
-
-		onToggleAdvanced: function( event ) {
-			event.preventDefault();
-			this.toggleAdvanced();
-		},
-
-		toggleAdvanced: function( show ) {
-			var $advanced = this.$( '.advanced-section' ), mode = 'show';
-
-			if ( $advanced.hasClass('advanced-visible') || false === show ) {
-				$advanced.removeClass('advanced-visible');
-				$advanced.find('.advanced-settings').addClass('hidden');
-				mode = 'hide';
-			} else {
-				$advanced.addClass('advanced-visible');
-				$advanced.find('.advanced-settings').removeClass('hidden');
-			}
-
-			setUserSetting( 'advImgDetails', mode );
 		}
+
 	});
 
 	/**

wp-includes/media-template.php

@@ -331,43 +331,30 @@ function wp_print_media_templates() {
 				<span class="saved"><?php esc_html_e('Saved.'); ?></span>
 			</span>
 			<div class="details">
-				<h3><?php _e('Attachment Details'); ?></h3>
+				<div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
-				<div class="filename setting">
+				<div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
-					<span class="name"><?php _e( 'File name' ); ?></span> <span class="value">{{ data.filename }}</span>
+				<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
-				</div>
+
-				<div class="filename setting">
+				<div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
-					<span class="name"><?php _e( 'File type' ); ?></span> <span class="value">{{ data.mime }}</span>
-				</div>
-				<div class="uploaded setting">
-					<span class="name"><?php _e( 'Uploaded on' ); ?></span> <span class="value">{{ data.dateFormatted }}</span>
-				</div>
-				<div class="file-size setting">
-					<span class="name"><?php _e( 'File size' ); ?></span> <span class="value">{{ data.filesizeHumanReadable }}</span>
-				</div>
 				<# if ( 'image' === data.type && ! data.uploading ) { #>
 					<# if ( data.width && data.height ) { #>
-						<div class="dimensions setting"><span class="name"><?php _e( 'Dimensions' ); ?></span> <span class="value">{{ data.width }} &times; {{ data.height }}</span></div>
+						<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
 					<# } #>
 				<# } #>
 
 				<# if ( data.fileLength ) { #>
-					<div class="file-length setting"><span class="name"><?php _e( 'Length' ); ?></span> <span class="value">{{ data.fileLength }}</span></div>
+					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
 				<# } #>
 
 				<# if ( 'audio' === data.type && data.meta.bitrate ) { #>
-					<div class="bitrate setting">
+					<div class="bitrate">
-						<span class="name"><?php _e( 'Bitrate' ); ?></span> <span class="value">{{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
+						<strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
 						<# if ( data.meta.bitrate_mode ) { #>
 						{{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
-						<# } #></span>
+						<# } #>
 					</div>
 				<# } #>
 
-				<label class="url setting" data-setting="url">
-					<span class="name"><?php _e( 'URL' ); ?></span>
-					<input type="text" value="{{ data.url }}" readonly />
-				</label>
-
 				<div class="compat-meta">
 					<# if ( data.compat && data.compat.meta ) { #>
 						{{{ data.compat.meta }}}
@@ -375,55 +362,52 @@ function wp_print_media_templates() {
 				</div>
 			</div>
 
-			<div class="settings advanced-section">
+			<div class="settings">
-				<h3><a class="advanced-toggle" href="#"><?php _e( 'Attachment Meta' ); ?></a></h3>
+				<label class="setting" data-setting="url">
-				<div class="advanced-settings hidden">
+					<span class="name"><?php _e('URL'); ?></span>
-					<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
+					<input type="text" value="{{ data.url }}" readonly />
-					<label class="setting" data-setting="title">
+				</label>
-						<span class="name"><?php _e( 'Title' ); ?></span>
+				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
-						<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
+				<label class="setting" data-setting="title">
-					</label>
+					<span class="name"><?php _e('Title'); ?></span>
-					<# if ( 'audio' === data.type ) { #>
+					<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
-					<?php foreach ( array(
+				</label>
-						'artist' => __( 'Artist' ),
+				<# if ( 'audio' === data.type ) { #>
-						'album' => __( 'Album' ),
+				<?php foreach ( array(
-					) as $key => $label ) : ?>
+					'artist' => __( 'Artist' ),
-					<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
+					'album' => __( 'Album' ),
-						<span class="name"><?php echo $label ?></span>
+				) as $key => $label ) : ?>
-						<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
+				<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
-					</label>
+					<span class="name"><?php echo $label ?></span>
-					<?php endforeach; ?>
+					<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
-					<# } #>
+				</label>
-					<label class="setting" data-setting="caption">
+				<?php endforeach; ?>
-						<span class="name"><?php _e( 'Caption' ); ?></span>
+				<# } #>
-						<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
+				<label class="setting" data-setting="caption">
-					</label>
+					<span class="name"><?php _e( 'Caption' ); ?></span>
-					<# if ( 'image' === data.type ) { #>
+					<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
-						<label class="setting" data-setting="alt">
+				</label>
-							<span class="name"><?php _e( 'Alt Text' ); ?></span>
+				<# if ( 'image' === data.type ) { #>
-							<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
+					<label class="setting" data-setting="alt">
-						</label>
+						<span class="name"><?php _e( 'Alt Text' ); ?></span>
-					<# } #>
+						<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
-					<label class="setting" data-setting="description">
-						<span class="name"><?php _e( 'Description' ); ?></span>
-						<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
 					</label>
+				<# } #>
+				<label class="setting" data-setting="description">
+					<span class="name"><?php _e('Description'); ?></span>
+					<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
+				</label>
+				<label class="setting">
+					<span class="name"><?php _e( 'Uploaded By' ); ?></span>
+					<span class="value">{{ data.authorName }}</span>
+				</label>
+				<# if ( data.uploadedTo ) { #>
 					<label class="setting">
-						<span class="name"><?php _e( 'Uploaded By' ); ?></span>
+						<span class="name"><?php _e( 'Uploaded To' ); ?></span>
-						<span class="value">{{ data.authorName }}</span>
+						<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
 					</label>
-					<# if ( data.uploadedTo ) { #>
+				<# } #>
-						<label class="setting">
+				<div class="attachment-compat"></div>
-							<span class="name"><?php _e( 'Uploaded To' ); ?></span>
-							<# if ( data.uploadedToLink ) { #>
-								<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
-							<# } else { #>
-								<span class="value">{{ data.uploadedToTitle }}</span>
-							<# } #>
-						</label>
-					<# } #>
-					<div class="attachment-compat"></div>
-				</div>
 			</div>
 
 			<a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a> |