Changeset 28995

Timestamp:

07/04/2014 04:47:40 AM (11 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' ) ?><#