diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index f9ca1d7182..9a95eb1a8f 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -465,18 +465,34 @@ body { margin-bottom: 18px; } +#customize-control-header_image .uploaded button, +#customize-control-header_image .default button { + width: 100%; + padding: 0; + margin: 0; + background: none; + border: none; + color: inherit; + cursor: pointer; + outline: none; +} + +#customize-control-header_image button img { + display: block; +} + /* Header control: current image container */ #customize-control-header_image .current .container { overflow: hidden; -webkit-border-radius: 2px; + border: 1px solid #eee; border-radius: 2px; } #customize-control-header_image .placeholder { width: 100%; position: relative; - background: #262626; text-align: center; cursor: default; } @@ -485,18 +501,49 @@ body { display: none; position: absolute; width: 100%; - height: 18px; - margin-top: -9px; - top: 50%; - color: #eee; + color: #555; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } -/* Header control: overlay "close" button */ +#customize-control-header_image .inner, +#customize-control-header_image .inner .dashicons { + line-height: 20px; + top: 10px; +} +#customize-control-header_image .list .inner, +#customize-control-header_image .list .inner .dashicons { + top: 9px; +} #customize-control-header_image .header-view { position: relative; + width: 100%; + margin-bottom: 5px; } +#customize-control-header_image .header-view:last-child { + margin-bottom: 0px; +} + +/* Convoluted, but 'outline' support isn't good enough yet */ +#customize-control-header_image .header-view:after { + border: 0; +} +#customize-control-header_image .header-view.selected:after { + content: ''; + position: absolute; + top: 0; left: 0; bottom: 0; right: 0; + border: 4px solid #2ea2cc; + border-radius: 2px; +} +#customize-control-header_image .header-view.button.selected { + border: 0; +} + +/* Header control: overlay "close" button */ + #customize-control-header_image .uploaded .header-view .close { font-size: 2em; color: grey; @@ -575,21 +622,10 @@ body { margin-bottom: 9px; } -#customize-control-header_image .choice.random:before { - position: absolute; - content: attr(data-label); - left: 0; - top: 0; -} - #customize-control-header_image .uploaded div:last-child > .choice { margin-bottom: 0; } -#customize-control-header_image .choices hr { - visibility: hidden; -} - #customize-control-header_image img { width: 100%; -webkit-border-radius: 2px; diff --git a/src/wp-admin/custom-header.php b/src/wp-admin/custom-header.php index 4a2d44ce1e..2a6a2f3083 100644 --- a/src/wp-admin/custom-header.php +++ b/src/wp-admin/custom-header.php @@ -1272,9 +1272,12 @@ wp_nonce_field( 'custom-header-options', '_wpnonce-custom-header-options' ); ?> public function get_uploaded_header_images() { $header_images = get_uploaded_header_images(); $timestamp_key = '_wp_attachment_custom_header_last_used_' . get_stylesheet(); + $alt_text_key = '_wp_attachment_image_alt'; foreach ( $header_images as &$header_image ) { - $header_image['timestamp'] = get_post_meta( $header_image['attachment_id'], $timestamp_key, true ); + $header_meta = get_post_meta( $header_image['attachment_id'] ); + $header_image['timestamp'] = isset( $header_meta[ $timestamp_key ] ) ? $header_meta[ $timestamp_key ] : ''; + $header_image['alt_text'] = isset( $header_meta[ $alt_text_key ] ) ? $header_meta[ $alt_text_key ] : ''; } return $header_images; diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php index ac1f07c287..c163247e6d 100644 --- a/src/wp-includes/class-wp-customize-control.php +++ b/src/wp-includes/class-wp-customize-control.php @@ -774,27 +774,28 @@ final class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control
- +
<# } else { #> <# if (data.type === 'uploaded') { #> -
+
<# } #> - - - + + {{{data.header.alt_text || data.header.description}}} + <# } #> @@ -803,7 +804,7 @@ final class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control <# if (data.choice) { #> <# if (data.random) { #> -
+
<# if ( data.type === 'uploaded' ) { #> @@ -817,12 +818,12 @@ final class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control <# } else { #> - + {{{data.header.alt_text || data.header.description}}} <# } #> <# } else { #> -
+
@@ -853,7 +854,7 @@ final class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control
-

+

- +
@@ -875,20 +876,20 @@ final class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control
- class="button remove"> + - +
- +
- +
diff --git a/src/wp-includes/js/customize-models.js b/src/wp-includes/js/customize-models.js index f97750b276..3c8001c4b1 100644 --- a/src/wp-includes/js/customize-models.js +++ b/src/wp-includes/js/customize-models.js @@ -26,7 +26,7 @@ thumbnail_url: '' }, choice: '', - hidden: false, + selected: false, random: false }; }, @@ -160,10 +160,14 @@ elt.defaultName = index; } + if (typeof elt.timestamp === 'undefined') { + elt.timestamp = 0; + } + this.add({ header: elt, choice: elt.url.split('/').pop(), - hidden: current === elt.url.replace(/^https?:\/\//, '') + selected: current === elt.url.replace(/^https?:\/\//, '') }, { silent: true }); }, this); @@ -191,7 +195,7 @@ }, choice: randomChoice, random: true, - hidden: isRandomSameType + selected: isRandomSameType }); }, @@ -200,33 +204,23 @@ }, shouldHideTitle: function() { - return _.every(this.pluck('hidden')); + return this.size() < 2; }, setImage: function(model) { this.each(function(m) { - m.set('hidden', false); + m.set('selected', false); }); if (model) { - model.set('hidden', true); - // Bump images to top except for special "Randomize" images - if (!model.get('random')) { - model.get('header').timestamp = _.now(); - this.sort(); - } + model.set('selected', true); } }, removeImage: function() { this.each(function(m) { - m.set('hidden', false); + m.set('selected', false); }); - }, - - shown: function() { - var filtered = this.where({ hidden: false }); - return new api.HeaderTool.ChoiceList( filtered ); } }); diff --git a/src/wp-includes/js/customize-views.js b/src/wp-includes/js/customize-views.js index eb3d4aac1c..39ad65b5c5 100644 --- a/src/wp-includes/js/customize-views.js +++ b/src/wp-includes/js/customize-views.js @@ -32,16 +32,18 @@ getHeight: function() { var image = this.$el.find('img'), - saved = this.model.get('savedHeight'), - height = image.height() || saved, - headerImageData; + saved, height, headerImageData; if (image.length) { this.$el.find('.inner').hide(); } else { this.$el.find('.inner').show(); + return 40; } + saved = this.model.get('savedHeight'); + height = image.height() || saved; + // happens at ready if (!height) { headerImageData = api.get().header_image_data; @@ -92,8 +94,6 @@ * @constructor * @augments wp.Backbone.View */ - (function () { // closures FTW - var lastHeight = 0; api.HeaderTool.ChoiceView = wp.Backbone.View.extend({ template: wp.template('header-choice'), @@ -110,7 +110,7 @@ this.model.get('choice') ]; - this.listenTo(this.model, 'change', this.render); + this.listenTo(this.model, 'change:selected', this.toggleSelected); if (_.contains(properties, api.get().header_image)) { api.HeaderTool.currentHeader.set(this.extendedModel()); @@ -118,21 +118,21 @@ }, render: function() { - var model = this.model; - this.$el.html(this.template(this.extendedModel())); - if (model.get('random')) { + if (this.model.get('random')) { + this.$el.addClass('button display-options'); this.setPlaceholder(40); } - else { - lastHeight = this.getHeight(); - } - this.$el.toggleClass('hidden', model.get('hidden')); + this.toggleSelected(); return this; }, + toggleSelected: function() { + this.$el.toggleClass('selected', this.model.get('selected')); + }, + extendedModel: function() { var c = this.model.get('collection'); return _.extend(this.model.toJSON(), { @@ -145,17 +145,26 @@ setPlaceholder: api.HeaderTool.CurrentView.prototype.setPlaceholder, select: function() { + this.preventJump(); this.model.save(); api.HeaderTool.currentHeader.set(this.extendedModel()); }, + preventJump: function() { + var container = $('.wp-full-overlay-sidebar-content'), + scroll = container.scrollTop(); + + _.defer(function() { + container.scrollTop(scroll); + }); + }, + removeImage: function(e) { e.stopPropagation(); this.model.destroy(); this.remove(); } }); - })(); /** @@ -174,15 +183,14 @@ this.listenTo(this.collection, 'add', this.addOne); this.listenTo(this.collection, 'remove', this.render); this.listenTo(this.collection, 'sort', this.render); - this.listenTo(this.collection, 'change:hidden', this.toggleTitle); - this.listenTo(this.collection, 'change:hidden', this.setMaxListHeight); + this.listenTo(this.collection, 'change', this.toggleList); this.render(); }, render: function() { this.$el.empty(); this.collection.each(this.addOne, this); - this.toggleTitle(); + this.toggleList(); }, addOne: function(choice) { @@ -192,12 +200,13 @@ this.$el.append(view.render().el); }, - toggleTitle: function() { - var title = this.$el.parents().prev('.customize-control-title'); + toggleList: function() { + var title = this.$el.parents().prev('.customize-control-title'), + randomButton = this.$el.find('.random').parent(); if (this.collection.shouldHideTitle()) { - title.hide(); + title.add(randomButton).hide(); } else { - title.show(); + title.add(randomButton).show(); } } });