Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added cancel button to shipping zones UI 

Closes #10754
This commit is contained in:
Mike Jolley 2016-04-21 16:18:15 +01:00
parent c71e17a71b
commit a8b2a5668f
5 changed files with 95 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/admin.css
View File

File diff suppressed because one or more lines are too long

38
assets/css/admin.scss
View File

@ -2414,6 +2414,9 @@ table.wc-shipping-zones, table.wc-shipping-zone-methods, table.wc-shipping-class
input, select, textarea {
width: 100%;
}
a.wc-shipping-zone-delete {
color: red;
}
.wc-shipping-zone-postcodes-toggle {
float: right;
margin: 0;
@ -2441,6 +2444,8 @@ table.wc-shipping-zones, table.wc-shipping-zone-methods, table.wc-shipping-class
}
ul {
color: #999;
position: relative;
padding-right: 32px;
li {
display: inline;
margin: 0 0 0 0;
@ -2458,14 +2463,39 @@ table.wc-shipping-zones, table.wc-shipping-zone-methods, table.wc-shipping-class
margin: 0 !important;
}
li.wc-shipping-zone-methods-add-row {
margin: .5em 0 0;
position: absolute;
right: 0;
top: 0;
}
}
.button {
display: inline-block;
.add_shipping_method {
display: block;
width: 24px;
padding: 24px 0 0 0;
height: 0;
overflow: hidden;
cursor: pointer;
&:before {
@include icon;
font-family: 'Dashicons';
content: "\f502";
color: #999;
vertical-align: middle;
line-height: 24px;
font-size: 16px;
margin: 0;
}
&.disabled {
cursor: not-allowed;
&:before {
color: #ccc;
}
}
.wc-shipping-zone-actions, .wc-shipping-zone-method-actions, .wc-shipping-class-actions {
}
}
.wc-shipping-zone-method-actions, .wc-shipping-class-actions {
width: 4em;
a {

52
assets/js/admin/wc-shipping-zones.js
View File

@ -28,6 +28,23 @@
this.changes = changes;
this.trigger( 'change:zones' );
},
discardChanges: function( id ) {
var changes = this.changes || {},
position = null;
if ( changes[ id ] && changes[ id ].zone_order !== undefined ) {
position = changes[ id ].zone_order;
}
delete changes[ id ];
if ( position !== null ) {
changes[ id ] = _.extend( changes[ id ] || {}, { zone_id : id, zone_order : position } );
}
this.changes = changes;
this.trigger( 'change:zones' );
},
save: function() {
if ( _.size( this.changes ) ) {
$.post( ajaxurl + ( ajaxurl.indexOf( '?' ) > 0 ? '&' : '?' ) + 'action=woocommerce_shipping_zones_save_changes', {
@ -63,7 +80,7 @@
$tbody.on( 'sortupdate', { view: this }, this.updateModelOnSort );
$( window ).on( 'beforeunload', { view: this }, this.unloadConfirmation );
$save_button.on( 'click', { view: this }, this.onSubmit );
$( document.body ).on( 'click', '.add_shipping_method', { view: this }, this.onAddShippingMethod );
$( document.body ).on( 'click', '.add_shipping_method:not(.disabled)', { view: this }, this.onAddShippingMethod );
$( document.body ).on( 'click', '.wc-shipping-zone-add', { view: this }, this.onAddNewRow );
$( document.body ).on( 'click', '.wc-shipping-zone-save-changes', { view: this }, this.onSubmit );
$( document.body ).on( 'wc_backbone_modal_response', this.onAddShippingMethodSubmitted );
@ -107,9 +124,11 @@
},
renderRow: function( rowData ) {
var view = this;
view.$el.append( view.rowTemplate( rowData ) );
view.initRow( rowData );
},
initRow: function( rowData ) {
var view = this;
var $tr = view.$el.find( 'tr[data-id="' + rowData.zone_id + '"]');
// Editing?
@ -161,6 +180,7 @@
$table.find( '.edit' ).hide();
$table.find( '.wc-shipping-zone-save-changes-notice' ).hide();
$table.find( '.wc-shipping-zone-edit' ).on( 'click', { view: this }, this.onEditRow );
$table.find( '.wc-shipping-zone-cancel-edit' ).on( 'click', { view: this }, this.onCancelEditRow );
$table.find( '.wc-shipping-zone-delete' ).on( 'click', { view: this }, this.onDeleteRow );
$table.find( '.wc-shipping-zone-postcodes-toggle' ).on( 'click', { view: this }, this.onTogglePostcodes );
$table.find( '.editing .wc-shipping-zone-edit' ).trigger( 'click' );
@ -193,7 +213,8 @@
$method_list.prepend( '<li class="wc-shipping-zone-method"><a href="admin.php?page=wc-settings&amp;tab=shipping&amp;instance_id=' + instance_id + '" class="' + class_name + '">' + shipping_method.title + '</a></li>' );
} );
} else {
$method_list.prepend( '<li class="wc-shipping-zone-method">&ndash;</li>' );
}
},
onSubmit: function( event ) {
@ -244,7 +265,27 @@
$( this ).closest('tr').find('.edit').show();
$( '.wc-shipping-zone-region-select:not(.enhanced)' ).select2( select2_args );
$( '.wc-shipping-zone-region-select:not(.enhanced)' ).addClass('enhanced');
$( this ).closest('tr').find('.add_shipping_method').attr( 'disabled', 'disabled' ).addClass( 'tips' );
var addShippingMethod = $( this ).closest('tr').find('.add_shipping_method');
addShippingMethod.addClass( 'disabled' );
addShippingMethod.tipTip({ 'attribute': 'data-disabled-tip', 'fadeIn': 50, 'fadeOut': 50, 'delay': 50 });
},
onCancelEditRow: function( event ) {
var view = event.data.view,
model = view.model,
row = $( this ).closest('tr'),
zone_id = row.data('id'),
zones = _.indexBy( model.get( 'zones' ), 'zone_id' );
event.preventDefault();
model.discardChanges( zone_id );
// Remove row and re-render
row.after( view.rowTemplate( zones[ zone_id ] ) );
row.remove();
view.initRow( zones[ zone_id ] );
view.initRows( zones );
},
onDeleteRow: function( event ) {
var view = event.data.view,
@ -288,7 +329,6 @@
if ( zones[ zone_id ][ attribute ] !== value ) {
changes[ zone_id ] = {};
changes[ zone_id ][ attribute ] = value;
zones[ zone_id ][ attribute ] = value;
}
model.logChanges( changes );

2
assets/js/admin/wc-shipping-zones.min.js vendored
View File

File diff suppressed because one or more lines are too long

24
includes/admin/settings/views/html-admin-page-shipping-zones.php
View File

@ -13,12 +13,11 @@ if ( ! defined( 'ABSPATH' ) ) {
<th class="wc-shipping-zone-name"><?php esc_html_e( 'Zone Name', 'woocommerce' ); ?></th>
<th class="wc-shipping-zone-region"><?php esc_html_e( 'Region(s)', 'woocommerce' ); ?></th>
<th class="wc-shipping-zone-methods"><?php esc_html_e( 'Shipping Method(s)', 'woocommerce' ); ?></th>
<th class="wc-shipping-zone-actions">&nbsp;</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
<td colspan="4">
<a class="button button-secondary wc-shipping-zone-add" href="#"><?php esc_html_e( 'Add shipping zone', 'woocommerce' ); ?></a>
<input type="submit" name="save" class="button button-primary wc-shipping-zone-save" value="<?php esc_attr_e( 'Save shipping zones', 'woocommerce' ); ?>" disabled />
</td>
@ -46,19 +45,20 @@ if ( ! defined( 'ABSPATH' ) ) {
$class_name = 'yes' === $method->enabled ? 'method_enabled' : 'method_disabled';
echo '<li class="wc-shipping-zone-method"><a href="admin.php?page=wc-settings&amp;tab=shipping&amp;instance_id=' . absint( $method->instance_id ) . '" class="' . esc_attr( $class_name ) . '">' . esc_html( $method->get_title() ) . '</a></li>';
}
} else {
echo '<li class="wc-shipping-zone-method">&ndash;</li>';
}
?>
<li class="wc-shipping-zone-methods-add-row"><a href="#" class="add_shipping_method button" data-tip="<?php esc_attr_e( 'Save changes to continue adding shipping methods to this zone.', 'woocommerce' ); ?>"><?php _e( 'Add shipping method', 'woocommerce' ); ?></a></li>
<li class="wc-shipping-zone-methods-add-row"><a href="#" class="add_shipping_method tips" data-tip="<?php esc_attr_e( 'Add shipping method', 'woocommerce' ); ?>" data-disabled-tip="<?php esc_attr_e( 'Save changes to continue adding shipping methods to this zone', 'woocommerce' ); ?>"><?php _e( 'Add shipping method', 'woocommerce' ); ?></a></li>
</ul>
</td>
<td class="wc-shipping-zone-actions"></td>
</tr>
</tbody>
</table>
<script type="text/html" id="tmpl-wc-shipping-zone-row-blank">
<tr>
<td class="wc-shipping-zones-blank-state" colspan="5">
<td class="wc-shipping-zones-blank-state" colspan="4">
<p class="main"><?php _e( 'A shipping zone is a geographic region where a certain set of shipping methods and rates apply.', 'woocommerce' ); ?></p>
<p><?php _e( 'For example:', 'woocommerce' ); ?></p>
<ul>
@ -79,10 +79,15 @@ if ( ! defined( 'ABSPATH' ) ) {
<div class="view">
<a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}">{{ data.zone_name }}</a>
<div class="row-actions">
<a class="wc-shipping-zone-edit" href="#"><?php _e( 'Edit Zone', 'woocommerce' ); ?></a> | <a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}"><?php _e( 'Edit shipping methods', 'woocommerce' ); ?></a>
<a class="wc-shipping-zone-edit" href="#"><?php _e( 'Edit', 'woocommerce' ); ?></a> | <a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}"><?php _e( 'View shipping methods', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-zone-delete"><?php _e( 'Delete', 'woocommerce' ); ?></a>
</div>
</div>
<div class="edit">
<input type="text" name="zone_name[{{ data.zone_id }}]" data-attribute="zone_name" value="{{ data.zone_name }}" placeholder="<?php esc_attr_e( 'Zone Name', 'woocommerce' ); ?>" />
<div class="row-actions">
<a class="wc-shipping-zone-cancel-edit" href="#"><?php _e( 'Cancel changes', 'woocommerce' ); ?></a>
</div>
</div>
<div class="edit"><input type="text" name="zone_name[{{ data.zone_id }}]" data-attribute="zone_name" value="{{ data.zone_name }}" placeholder="<?php esc_attr_e( 'Zone Name', 'woocommerce' ); ?>" /></div>
</td>
<td class="wc-shipping-zone-region">
<div class="view">{{ data.formatted_zone_location }}</div>
@ -116,13 +121,10 @@ if ( ! defined( 'ABSPATH' ) ) {
<td class="wc-shipping-zone-methods">
<div>
<ul>
<li class="wc-shipping-zone-methods-add-row"><a href="#" class="add_shipping_method button" data-tip="<?php esc_attr_e( 'Save changes to continue adding shipping methods to this zone.', 'woocommerce' ); ?>"><?php _e( 'Add shipping method', 'woocommerce' ); ?></a></li>
<li class="wc-shipping-zone-methods-add-row"><a href="#" class="add_shipping_method tips" data-tip="<?php esc_attr_e( 'Add shipping method', 'woocommerce' ); ?>" data-disabled-tip="<?php esc_attr_e( 'Save changes to continue adding shipping methods to this zone', 'woocommerce' ); ?>"><?php _e( 'Add shipping method', 'woocommerce' ); ?></a></li>
</ul>
</div>
</td>
<td class="wc-shipping-zone-actions">
<a class="wc-shipping-zone-delete tips" data-tip="<?php _e( 'Delete', 'woocommerce' ); ?>" href="#"><?php _e( 'Delete', 'woocommerce' ); ?></a>
</td>
</tr>
</script>