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

Shipping Settings: Update table styles (#40724)

This commit is contained in:
Paul Sealock 2023-10-17 12:42:04 +13:00 committed by paul sealock
parent 7822326a98
commit 3ec81818d1
6 changed files with 131 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce/changelog/update-shipping-table-styles Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Update table styles in Shipping Settings.

121
plugins/woocommerce/client/legacy/css/admin.scss
View File

@ -4080,9 +4080,14 @@ table {
display: none;
}
.wc-shipping-zones-heading .page-title-action {
display: inline-block;
}
.wc-shipping-zones-heading {
display: flex;
.page-title-action {
display: inline-block;
margin: 0 12px;
}
}
.wc-shipping-zone-heading-help-text {
max-width: 800px;
@ -4109,14 +4114,52 @@ table {
table.wc-shipping-zones,
table.wc-shipping-zone-methods,
table.wc-shipping-classes {
font-family: $font-sf-pro-text;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #000000;
&.widefat p {
color: #000000;
}
thead tr th {
color: #646970;
vertical-align: middle;
padding: 12px;
}
tbody tr td {
padding: 24px 12px;
&:last-child {
padding: 24px 32px 24px 12px;
}
}
tfoot tr td {
padding: 24px 12px;
background-color: #F6F7F7;
color: #000000;
vertical-align: top;
&:last-child {
padding: 24px 32px 24px 12px;
}
}
td,
th {
vertical-align: top;
line-height: 24px;
padding: 1em !important;
font-size: 14px;
background: #fff;
display: table-cell !important;
font-family: $font-sf-pro-text;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #000000;
vertical-align: middle;
padding: 24px 12px;
li {
line-height: 24px;
@ -4129,10 +4172,6 @@ table.wc-shipping-classes {
}
thead {
th {
vertical-align: middle;
}
.wc-shipping-zone-sort {
text-align: center;
}
@ -4197,22 +4236,9 @@ table.wc-shipping-classes {
}
}
.wc-shipping-zone-method-rows {
tr:nth-child(even) td {
background: #f9f9f9;
}
}
tr.odd,
.wc-shipping-class-rows tr:nth-child(odd) {
tbody.wc-shipping-tables-tbody {
td {
background: #f9f9f9;
}
}
tbody.wc-shipping-zone-rows {
td {
border-top: 2px solid #f9f9f9;
border-top: 1px solid #C3C4C7;
}
tr:first-child {
@ -4220,6 +4246,13 @@ table.wc-shipping-classes {
border-top: 0;
}
}
.wc-shipping-zone-name,
.wc-shipping-zone-method-title,
.wc-shipping-class-name {
font-weight: 500;
}
}
tr.wc-shipping-zone-worldwide {
@ -4243,7 +4276,7 @@ table.wc-shipping-classes {
&::before {
content: "";
mask: url(../images/icons/move-icon.svg);
background-color: #999;
background-color: #1E1E1E;
display: block;
width: 17px;
float: left;
@ -4251,7 +4284,7 @@ table.wc-shipping-classes {
}
&:hover::before {
background-color: #333;
background-color: #999;
}
}
@ -4263,7 +4296,7 @@ table.wc-shipping-classes {
font-family: "dashicons";
text-align: center;
line-height: 1;
color: #999;
color: #000;
display: block;
width: 17px;
float: left;
@ -4277,13 +4310,18 @@ table.wc-shipping-classes {
width: 25%;
}
.shipping-zone-actions {
.wc-shipping-zone-actions {
width: 13%;
text-align: right;
a.wc-shipping-zone-delete,
a.wc-shipping-zone-method-delete,
a.wc-shipping-class-delete {
color: #a00;
a.wc-shipping-zone-actions,
a.wc-shipping-zone-actions:hover {
color: #D63638;
}
a.wc-shipping-zone-action-edit,
a.wc-shipping-zone-action-edit:hover {
color: #0675C4;
}
}
@ -4298,11 +4336,6 @@ table.wc-shipping-classes {
textarea {
width: 100%;
}
a.wc-shipping-zone-delete:hover,
a.wc-shipping-class-delete:hover {
color: red;
}
}
.wc-shipping-class-count {
@ -4323,14 +4356,14 @@ table.wc-shipping-classes {
flex-wrap: wrap;
li {
color: #555;
color: #000;
display: inline;
margin: 0;
}
}
.wc-shipping-zone-method {
background-color: #dcdcdc;
background-color: #F0F0F0;
margin: 0 3px 3px 0;
padding: 5px 9px;
border-radius: 5px;
@ -4373,7 +4406,7 @@ table.wc-shipping-classes {
text-align: center;
a {
display: inline-block;
float: left;
}
.woocommerce-input-toggle {
@ -4722,10 +4755,6 @@ img.help_tip {
margin-top: 8px;
}
table.widefat th {
padding-right: inherit;
}
.wp-list-table .woocommerce-help-tip {
float: none;
}

12
plugins/woocommerce/includes/admin/settings/views/html-admin-page-shipping-classes.php
View File

@ -11,9 +11,9 @@ if ( ! defined( 'ABSPATH' ) ) {
?>
<h2>
<?php esc_html_e( 'Shipping classes', 'woocommerce' ); ?>
<a class="button button-primary wc-shipping-class-add-new" href="#"><?php esc_html_e( 'Add shipping class', 'woocommerce' ); ?></a>
<h2 class="wc-shipping-zones-heading">
<span><?php esc_html_e( 'Shipping classes', 'woocommerce' ); ?></span>
<a class="button button-primary wc-shipping-class-add-new page-title-action" href="#"><?php esc_html_e( 'Add shipping class', 'woocommerce' ); ?></a>
</h2>
<p class="wc-shipping-zone-help-text">
@ -29,7 +29,7 @@ if ( ! defined( 'ABSPATH' ) ) {
<th />
</tr>
</thead>
<tbody class="wc-shipping-class-rows"></tbody>
<tbody class="wc-shipping-class-rows wc-shipping-tables-tbody"></tbody>
</table>
<script type="text/html" id="tmpl-wc-shipping-class-row-blank">
@ -157,9 +157,9 @@ if ( ! defined( 'ABSPATH' ) ) {
echo '</td>';
}
?>
<td class="shipping-zone-actions">
<td class="wc-shipping-zone-actions">
<div>
<a class="wc-shipping-class-edit" href="#"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-class-delete"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a>
<a class="wc-shipping-class-edit wc-shipping-zone-action-edit" href="#"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-class-delete wc-shipping-zone-actions"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a>
</div>
</td>
</tr>

22
plugins/woocommerce/includes/admin/settings/views/html-admin-page-shipping-zone-methods.php
View File

@ -77,17 +77,16 @@ if ( ! defined( 'ABSPATH' ) ) {
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
<button type="submit" class="button button-primary wc-shipping-zone-add-method" value="<?php esc_attr_e( 'Add shipping method', 'woocommerce' ); ?>"><?php esc_html_e( 'Add shipping method', 'woocommerce' ); ?></button>
</td>
</tr>
</tfoot>
<tbody class="wc-shipping-zone-method-rows"></tbody>
<tbody class="wc-shipping-zone-method-rows wc-shipping-tables-tbody"></tbody>
</table>
</td>
</tr>
<tr>
<th scope="row"></th>
<td>
<button type="submit" class="button button-primary wc-shipping-zone-add-method" value="<?php esc_attr_e( 'Add shipping method', 'woocommerce' ); ?>"><?php esc_html_e( 'Add shipping method', 'woocommerce' ); ?></button>
</td>
</tr>
</tbody>
</table>
@ -109,16 +108,15 @@ if ( ! defined( 'ABSPATH' ) ) {
<tr data-id="{{ data.instance_id }}" data-enabled="{{ data.enabled }}">
<td width="1%" class="wc-shipping-zone-method-sort"></td>
<td class="wc-shipping-zone-method-title">
<a class="wc-shipping-zone-method-settings" href="admin.php?page=wc-settings&amp;tab=shipping&amp;instance_id={{ data.instance_id }}">{{{ data.title }}}</a>
{{{ data.title }}}
</td>
<td width="1%" class="wc-shipping-zone-method-enabled"><a href="#">{{{ data.enabled_icon }}}</a></td>
<td class="wc-shipping-zone-method-description">
<strong class="wc-shipping-zone-method-type">{{ data.method_title }}</strong>
{{{ data.method_description }}}
</td>
<td class="shipping-zone-actions">
<td class="wc-shipping-zone-actions">
<div>
<a class="wc-shipping-zone-method-settings" href="admin.php?page=wc-settings&amp;tab=shipping&amp;instance_id={{ data.instance_id }}"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-zone-method-delete"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a>
<a class="wc-shipping-zone-method-settings wc-shipping-zone-action-edit" href="admin.php?page=wc-settings&amp;tab=shipping&amp;instance_id={{ data.instance_id }}"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-zone-method-delete wc-shipping-zone-actions"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a>
</div>
</td>
</tr>

66
plugins/woocommerce/includes/admin/settings/views/html-admin-page-shipping-zones.php
View File

@ -5,7 +5,7 @@ if ( ! defined( 'ABSPATH' ) ) {
?>
<h2 class="wc-shipping-zones-heading">
<?php _e( 'Shipping zones', 'woocommerce' ); ?>
<span><?php esc_html_e( 'Shipping zones', 'woocommerce' ); ?></span>
<a href="<?php echo admin_url( 'admin.php?page=wc-settings&tab=shipping&zone_id=new' ); ?>" class="page-title-action button-primary"><?php esc_html_e( 'Add shipping zone', 'woocommerce' ); ?></a>
</h2>
<p class="wc-shipping-zone-heading-help-text"><?php echo __( 'A shipping zone is a geographic region where a certain set of shipping methods are offered.', 'woocommerce' ) . ' ' . __( 'WooCommerce will match a customer to a single zone using their shipping address and present the shipping methods within that zone to them.', 'woocommerce' ); ?></p>
@ -19,37 +19,37 @@ if ( ! defined( 'ABSPATH' ) ) {
<th></th>
</tr>
</thead>
<tbody class="wc-shipping-zone-rows"></tbody>
<tbody>
<tr data-id="0" class="wc-shipping-zone-worldwide">
<td width="1%" class="wc-shipping-zone-worldwide"></td>
<td class="wc-shipping-zone-name">
<a href="<?php echo esc_url( admin_url( 'admin.php?page=wc-settings&tab=shipping&zone_id=0' ) ); ?>"><?php esc_html_e( 'Locations not covered by your other zones', 'woocommerce' ); ?></a>
</td>
<td class="wc-shipping-zone-region"><?php _e( 'This zone is <b>optionally</b> used for regions that are not included in any other shipping zone.', 'woocommerce' ); ?></td>
<td class="wc-shipping-zone-methods">
<ul>
<?php
$worldwide = new WC_Shipping_Zone( 0 );
$methods = $worldwide->get_shipping_methods();
uasort( $methods, 'wc_shipping_zone_method_order_uasort_comparison' );
<tbody class="wc-shipping-zone-rows wc-shipping-tables-tbody"></tbody>
if ( ! empty( $methods ) ) {
foreach ( $methods as $method ) {
$class_name = 'yes' === $method->enabled ? 'method_enabled' : 'method_disabled';
echo '<li class="wc-shipping-zone-method ' . esc_attr( $class_name ) . '">' . esc_html( $method->get_title() ) . '</li>';
}
} else {
echo '<li>' . __( 'No shipping methods offered to this zone.', 'woocommerce' ) . '</li>';
<tfoot data-id="0" class="wc-shipping-zone-worldwide">
<td width="1%" class="wc-shipping-zone-worldwide"></td>
<td class="wc-shipping-zone-name">
<?php esc_html_e( 'Locations not covered by your other zones', 'woocommerce' ); ?>
</td>
<td class="wc-shipping-zone-region"><?php esc_html_e( 'This zone is optionally used for regions that are not included in any other shipping zone.', 'woocommerce' ); ?></td>
<td class="wc-shipping-zone-methods">
<ul>
<?php
$worldwide = new WC_Shipping_Zone( 0 );
$methods = $worldwide->get_shipping_methods();
uasort( $methods, 'wc_shipping_zone_method_order_uasort_comparison' );
if ( ! empty( $methods ) ) {
foreach ( $methods as $method ) {
$class_name = 'yes' === $method->enabled ? 'method_enabled' : 'method_disabled';
echo '<li class="wc-shipping-zone-method ' . esc_attr( $class_name ) . '">' . esc_html( $method->get_title() ) . '</li>';
}
?>
</ul>
</td>
<td class="shipping-zone-actions">
<a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id=0"><?php _e( 'Edit', 'woocommerce' ); ?></a>
</td>
</tr>
</tbody>
} else {
echo '<li>' . esc_html_e( 'No shipping methods offered to this zone.', 'woocommerce' ) . '</li>';
}
?>
</ul>
</td>
<td class="wc-shipping-zone-actions">
<a class="wc-shipping-zone-action-edit" href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id=0"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a>
</td>
</tfoot>
</table>
<script type="text/html" id="tmpl-wc-shipping-zone-row-blank">
@ -74,7 +74,7 @@ if ( ! defined( 'ABSPATH' ) ) {
<tr data-id="{{ data.zone_id }}">
<td width="1%" class="wc-shipping-zone-sort"></td>
<td class="wc-shipping-zone-name">
<a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}">{{ data.zone_name }}</a>
{{ data.zone_name }}
</td>
<td class="wc-shipping-zone-region">
{{ data.formatted_zone_location }}
@ -82,9 +82,9 @@ if ( ! defined( 'ABSPATH' ) ) {
<td class="wc-shipping-zone-methods">
<div><ul></ul></div>
</td>
<td class="shipping-zone-actions">
<td class="wc-shipping-zone-actions">
<div>
<a href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}"><?php _e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-zone-delete"><?php _e( 'Delete', 'woocommerce' ); ?></a>
<a class="wc-shipping-zone-action-edit" href="admin.php?page=wc-settings&amp;tab=shipping&amp;zone_id={{ data.zone_id }}"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a> | <a href="#" class="wc-shipping-zone-delete wc-shipping-zone-actions"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a>
</div>
</td>
</tr>

7
plugins/woocommerce/tests/e2e-pw/tests/merchant/create-shipping-zones.spec.js
View File

@ -214,7 +214,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
.filter( { hasText: 'Flat rate' } )
).toBeVisible();
await page.getByRole( 'link', { name: 'Flat rate' } ).click();
await page.locator( 'td:has-text("Flat rate") ~ td.wc-shipping-zone-actions a.wc-shipping-zone-action-edit' ).click();
await page.getByLabel( 'Cost', { exact: true } ).fill( '10' );
await page.getByRole( 'button', { name: 'Save' } ).last().click();
await page.waitForLoadState( 'networkidle' );
@ -280,7 +280,7 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
//delete created shipping zone region after confirmation it exists
await page.goto( 'wp-admin/admin.php?page=wc-settings&tab=shipping' );
await page.locator( 'a:has-text("USA Zone") >> nth=0' ).click();
await page.locator( 'td:has-text("USA Zone") ~ td.wc-shipping-zone-actions a.wc-shipping-zone-action-edit' ).click();
//delete
await page.getByRole( 'button', { name: 'Remove' } ).click();
@ -341,12 +341,11 @@ test.describe( 'WooCommerce Shipping Settings - Add new shipping zone', () => {
.filter( { hasText: 'Flat rate' } )
).toBeVisible();
await page.getByRole( 'link', { name: 'Flat rate' } ).click();
await page.locator( 'td:has-text("Flat rate") ~ td.wc-shipping-zone-actions a.wc-shipping-zone-action-edit' ).click();
await page.locator( '#woocommerce_flat_rate_cost' ).fill( '10' );
await page.locator( '#btn-ok' ).click();
await page.waitForLoadState( 'networkidle' );
await page.getByRole( 'link', { name: 'Flat rate' } ).hover();
await page.locator( 'text=Delete' ).waitFor();
page.on( 'dialog', ( dialog ) => dialog.accept() );