From cdf2c8132c5964ec0d0be7f4b92323c48187a9a2 Mon Sep 17 00:00:00 2001 From: Scott Taylor Date: Thu, 24 Jul 2014 21:54:22 +0000 Subject: [PATCH] Media Grid: UI improvements to Attachment modal. Props ryelle. See #28844. git-svn-id: https://develop.svn.wordpress.org/trunk@29289 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/css/media-views.css | 54 ++++++++++++- src/wp-includes/js/media-views.js | 33 +++++++- src/wp-includes/media-template.php | 118 +++++++++++++++------------- 3 files changed, 148 insertions(+), 57 deletions(-) diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index f484e17ae2..a0072743c2 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -277,7 +277,8 @@ } .media-sidebar h3, -.image-details h3 { +.image-details h3, +.attachment-info h3 { position: relative; font-weight: bold; text-transform: uppercase; @@ -1467,8 +1468,9 @@ z-index: 10; } -.attachment-details .settings-save-status .spinner { - margin: 0 5px 0; +.attachment-details .settings-save-status .spinner, +.attachment-details .settings-save-status .saved { + margin: 0 5px -20px; } .attachment-details .settings-save-status .saved { @@ -1491,6 +1493,29 @@ 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; @@ -1553,6 +1578,29 @@ 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, diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index ad949a71bb..0ad303d458 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -6334,6 +6334,7 @@ 'click .trash-attachment': 'trashAttachment', 'click .edit-attachment': 'editAttachment', 'click .refresh-attachment': 'refreshAttachment', + 'click .advanced-toggle': 'onToggleAdvanced', 'keydown': 'toggleSelectionHandler' }, @@ -6346,6 +6347,17 @@ */ 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 */ @@ -6402,8 +6414,27 @@ $('.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 ); + } }); /** diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index f3b55261d0..d94fbc15ea 100644 --- a/src/wp-includes/media-template.php +++ b/src/wp-includes/media-template.php @@ -310,30 +310,43 @@ function wp_print_media_templates() {
-
{{ data.filename }}
-
{{ data.mime }}
-
{{ data.dateFormatted }}
- -
{{ data.filesizeHumanReadable }}
+

+
+ {{ data.filename }} +
+
+ {{ data.mime }} +
+
+ {{ data.dateFormatted }} +
+
+ {{ data.filesizeHumanReadable }} +
<# if ( 'image' === data.type && ! data.uploading ) { #> <# if ( data.width && data.height ) { #> -
{{ data.width }} × {{ data.height }}
+
{{ data.width }} × {{ data.height }}
<# } #> <# } #> <# if ( data.fileLength ) { #> -
{{ data.fileLength }}
+
{{ data.fileLength }}
<# } #> <# if ( 'audio' === data.type && data.meta.bitrate ) { #> -
- {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s +
+ {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s <# if ( data.meta.bitrate_mode ) { #> {{ ' ' + data.meta.bitrate_mode.toUpperCase() }} - <# } #> + <# } #>
<# } #> + +
<# if ( data.compat && data.compat.meta ) { #> {{{ data.compat.meta }}} @@ -341,52 +354,51 @@ function wp_print_media_templates() {
-
- - <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #> - - <# if ( 'audio' === data.type ) { #> - __( 'Artist' ), - 'album' => __( 'Album' ), - ) as $key => $label ) : ?> - - - <# } #> - - <# if ( 'image' === data.type ) { #> -