Changeset 28995

Timestamp:

07/04/2014 04:47:40 AM (12 years ago)

Author:

wonderboymusic

Message:

Make media grid text fields (data) toggle-able. Checking/unchecking is saved in user settings cookie.

See #24716.

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (3 diffs)
• js/media-grid.js (modified) (1 diff)
• js/media-views.js (modified) (2 diffs)
• media-template.php (modified) (2 diffs)

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

@@ -942 +942 @@
         text-overflow: ellipsis;
         overflow: hidden;
-        display: block;
         line-height: 19px;
         height: 19px;
@@ -948 +947 @@
         width: 90%;
         margin: 0 5%;
+}
+
+.attachment .data-hidden {
+        display: none;
+}
+
+.attachment .data-visible {
+        display: block;
 }
 
@@ -2519 +2526 @@
 }
 
-.media-grid-view .view-switch {
+.media-grid-view .view-switch,
+.media-grid-field-options {
         display: inline-block;
         float: none;
         margin-top: 13px;
         vertical-align: middle;
+}
+
+.media-grid-field-options span {
+        padding-right: 5px;
+}
+
+.media-grid-field-options label {
+        margin-right: 10px;
 }
 

trunk/src/wp-includes/js/media-grid.js

@@ -486 +486 @@
         });
 
+        media.view.GridFieldOptions = media.View.extend({
+                className: 'media-grid-field-options',
+                template: media.template( 'media-grid-field-options' ),
+
+                events: {
+                        'change input': 'toggleFields'
+                },
+
+                toggleFields: function(e) {
+                        var $el = $( e.currentTarget ), fields, setting;
+                        setting = $el.data( 'setting' );
+                        fields = $( '.data-' + setting, '.data-fields' );
+                        if ( $el.is( ':checked' ) ) {
+                                fields.show();
+                                deleteUserSetting( 'hidegrid' + setting );
+                        } else {
+                                fields.hide();
+                                setUserSetting( 'hidegrid' + setting, 1 );
+                        }
+
+                        if ( $( ':checked', this.$el ).length ) {
+                                fields.parent().show();
+                        } else {
+                                fields.parent().hide();
+                        }
+                }
+        });
+
 }(jQuery, _, Backbone, wp));

trunk/src/wp-includes/js/media-views.js

@@ -5552 +5552 @@
 
                 createToolbar: function() {
-                        var filters, FiltersConstructor, screenReaderText;
+                        var filters,
+                                LibraryViewSwitcher,
+                                FiltersConstructor,
+                                screenReaderText;
 
                         /**
@@ -5567 +5570 @@
                         // which the controller can tap into and add this view?
                         if ( _.contains( this.controller.options.mode, 'grid' ) ) {
-                                var libraryViewSwitcherConstructor = media.View.extend({
+                                LibraryViewSwitcher = media.View.extend({
                                         className: 'view-switch media-grid-view-switch',
                                         template: media.template( 'media-library-view-switcher')
                                 });
-                                this.toolbar.set( 'libraryViewSwitcher', new libraryViewSwitcherConstructor({
+                                this.toolbar.set( 'libraryViewSwitcher', new LibraryViewSwitcher({
                                         controller: this.controller,
                                         priority: -90
+                                }).render() );
+
+                                this.toolbar.set( 'gridFieldOptions', new media.view.GridFieldOptions({
+                                        controller: this.controller,
+                                        priority: -50
                                 }).render() );
                         }

trunk/src/wp-includes/media-template.php

@@ -230 +230 @@
         </script>
 
+        <script type="text/html" id="tmpl-media-grid-field-options">
+                <label class="setting">
+                        <span><?php _e( 'Name' ); ?></span>
+                        <input type="checkbox" data-setting="title" {{ '' === getUserSetting( 'hidegridtitle' ) && 'checked' }} />
+                </label>
+                <label class="setting">
+                        <span><?php _e( 'Attached to' ); ?></span>
+                        <input type="checkbox" data-setting="uploadedTo" {{ '' === getUserSetting( 'hidegriduploadedTo' ) && 'checked' }} />
+                </label>
+                <label class="setting">
+                        <span><?php _e( 'Date' ); ?></span>
+                        <input type="checkbox" data-setting="dateFormatted" {{ '' === getUserSetting( 'hidegriddateFormatted' ) && 'checked' }} />
+                </label>
+                <label class="setting">
+                        <span><?php _e( 'Mime-type' ); ?></span>
+                        <input type="checkbox" data-setting="mime" {{ '' === getUserSetting( 'hidegridmime' ) && 'checked' }} />
+                </label>
+        </script>
+
         <script type="text/html" id="tmpl-uploader-status">
                 <h3><?php _e( 'Uploading' ); ?></h3>
@@ -419 +438 @@
                 if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
                 <div class="data-fields">
-                <# _.each( data.showAttachmentFields, function( field ) { #>
-                        <div class="data-field data-{{ field }}"><#
+                <# _.each( data.showAttachmentFields, function( field ) {
+                        var className = 'data-field data-hidden';
+                        if ( '' === getUserSetting( 'hidegrid' + field ) ) {
+                                className = 'data-field data-visible';
+                        }
+                #>
+                        <div class="{{ className }} data-{{ field }}"><#
                                 if ( 'uploadedTo' === field ) {
                                         if ( data[field] ) {
-                                        #><?php _e( 'Uploaded To:' ) ?><#
+                                        #><?php _e( 'Uploaded To: ' ) ?><#
                                         } else {
                                         #><?php _e( 'Unattached' ) ?><#