Skip to content

Commit

Permalink
Merge pull request #211 from linchpin/improvement/ui-updates
Browse files Browse the repository at this point in the history 
Improvement/ui updates
  • Loading branch information
@aaronware
aaronware committed May 9, 2018
2 parents 0770d4f + 2cefdfb commit d347b7b
Show file tree
Hide file tree
Showing 10 changed files with 83 additions and 25 deletions.
13 changes: 8 additions & 5 deletions admin/section-controls.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,15 @@
<?php
if ( ! has_term( 'reference', 'mesh_template_types', $post ) ) : ?>

<div class="mesh-section-background">
<?php
$featured_image_id = get_post_thumbnail_id( $section->ID );
$section_background_class = 'mesh-section-background';
$section_background_class = ( ! empty( $featured_image_id ) ) ? $section_background_class . ' has-background-set' : $section_background_class;
?>

<div class="<?php esc_attr_e( $section_background_class ); ?>">
<div class="choose-image">
<?php
$featured_image_id = get_post_thumbnail_id( $section->ID );
if ( empty( $featured_image_id ) ) :
?>
<?php if ( empty( $featured_image_id ) ) : ?>
<a class="mesh-featured-image-choose"><?php esc_attr_e( 'Set Background Image', 'mesh' ); ?></a>
<?php else : ?>
<?php $featured_image = wp_get_attachment_image_src( $featured_image_id, array( 160, 60 ) ); ?>
Expand Down
2 changes: 1 addition & 1 deletion assets/css/admin-mesh.css
View file

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions assets/images/image-placeholder-small.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions assets/js/admin-mesh-blocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -407,7 +407,8 @@ mesh.blocks = function ($) {
$section = $button.parents('.block'),
section_id = parseInt($section.attr('data-mesh-block-id')),
frame_id = 'mesh-background-select-' + section_id,
current_image = $button.attr('data-mesh-block-featured-image');
current_image = $button.attr('data-mesh-block-featured-image'),
$parent_container = $button.parents('.mesh-section-background');

admin.media_frames = admin.media_frames || [];

Expand Down Expand Up @@ -462,6 +463,8 @@ mesh.blocks = function ($) {
.html('<img src="' + media_attachment.url + '" />')
.attr('data-mesh-block-featured-image', parseInt(media_attachment.id))
.after($trash);

$parent_container.addClass('has-background-set');
}
});
});
Expand Down Expand Up @@ -497,7 +500,6 @@ mesh.blocks = function ($) {

$button.prev().text(mesh_data.strings.add_image);
$button.remove();

},


Expand Down
9 changes: 7 additions & 2 deletions assets/js/admin-mesh-core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -852,7 +852,8 @@ mesh.admin = function ($) {
event.preventDefault();
event.stopPropagation();

var $button = $(this);
var $button = $(this),
$parent_container = $button.parents('.mesh-section-background');

if ($button.prev().hasClass('right') && !$button.prev().hasClass('button')) {
if (!$button.parents('.block-background-container')) {
Expand All @@ -866,6 +867,7 @@ mesh.admin = function ($) {

$button.prev().text(mesh_data.strings.add_image);
$button.remove();
$parent_container.removeClass('has-background-set');
},

/**
Expand All @@ -881,7 +883,8 @@ mesh.admin = function ($) {
$section = $button.parents('.mesh-postbox'),
section_id = parseInt($section.attr('data-mesh-section-id')),
frame_id = 'mesh-background-select-' + section_id,
current_image = $button.attr('data-mesh-section-featured-image');
current_image = $button.attr('data-mesh-section-featured-image'),
$parent_container = $button.parents('.mesh-section-background');

// If the frame already exists, re-open it.
if (media_frames[frame_id]) {
Expand Down Expand Up @@ -933,6 +936,8 @@ mesh.admin = function ($) {
.attr('data-mesh-section-featured-image', parseInt(media_attachment.id))
.after($trash);

$parent_container.addClass('has-background-set');

// Add selected attachment id to input
$button.siblings('input[type="hidden"]').val(media_attachment.id);

Expand Down
17 changes: 12 additions & 5 deletions assets/js/admin-mesh.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion assets/js/admin-mesh.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/js/admin-mesh.min.js
View file

Large diffs are not rendered by default.

32 changes: 29 additions & 3 deletions assets/scss/mesh/_structure.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,7 @@

// 02. No Sections
#mesh-description {
margin-bottom: 10px;
padding: {
bottom: $base * 2;
top: $base * 2;
Expand Down Expand Up @@ -379,11 +380,32 @@
}

.mesh-section-background {
background: {
color: $super-light-grey;
image: url('../images/image-placeholder-small.svg');
position: 50% 0;
repeat: no-repeat;
};
border: 1px solid $grey;
float: right;
max-width: 200px;
text-align: center;
width: 100%;

&.has-background-set {
background: {
color: transparent;
image: none;
};
width: auto;
}

.choose-image {
height: 80px;
position: relative;

img {
display: block;
height: auto;
width: auto;
max-height: 80px;
Expand All @@ -400,7 +422,8 @@
}
}

.mesh-featured-image-choose {
.mesh-featured-image-choose,
.mesh-block-featured-image-choose{
height: inherit;
line-height: 80px;
}
Expand Down Expand Up @@ -694,9 +717,8 @@

.mesh-columns-12 .mesh-block-title-row {
background-color: #f5f5f5;
border-bottom: 1px solid #dedede;
position: relative;
padding: 4px 4px 0 0;
padding: 0 4px 0 0;
}

.block-content {
Expand Down Expand Up @@ -837,4 +859,8 @@
li {
margin-left:10px;
}
}

.mesh-section-block .mesh-section-control-featured_image {
float: right;
}
15 changes: 10 additions & 5 deletions class.mesh-controls.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,18 +372,23 @@ function mesh_block_controls( $block, $section_blocks ) {
break;
case 'media':
?>
<div class="mesh-section-background">

<?php
$featured_image_id = get_post_thumbnail_id( $block->ID );
$section_background_class = 'mesh-section-background';
$section_background_class = ( ! empty( $featured_image_id ) ) ? $section_background_class . ' has-background-set' : $section_background_class;
?>

<div class="<?php esc_attr_e( $section_background_class ); ?>">
<div class="choose-image">
<?php
$featured_image_id = get_post_thumbnail_id( $block->ID );
if ( empty( $featured_image_id ) ) :
?>
<?php if ( empty( $featured_image_id ) ) : ?>
<a class="mesh-block-featured-image-choose"><?php esc_attr_e( 'Set Background Image', 'mesh' ); ?></a>
<?php else : ?>
<?php $featured_image = wp_get_attachment_image_src( $featured_image_id, array( 160, 60 ) ); ?>
<a class="mesh-block-featured-image-choose right" data-mesh-block-featured-image="<?php echo esc_attr( $featured_image_id ); ?>"><img src="<?php echo esc_attr( $featured_image[0] ); ?>" /></a>
<a class="mesh-block-featured-image-trash dashicons-before dashicons-dismiss" data-mesh-block-featured-image="<?php echo esc_attr( $featured_image_id ); ?>"></a>
<?php endif; ?>
<input type="hidden" name="mesh-sections[<?php echo esc_attr( $block->post_parent ); ?>][blocks][<?php echo esc_attr( $block->ID ); ?>][<?php echo esc_attr( 'featured_image' ); ?>]" value="<?php echo esc_attr( $featured_image_id ); ?>" />
</div>
</div>
<?php
Expand Down

0 comments on commit d347b7b

Please sign in to comment.